Quantcast
Channel: patterns & practices: Prism
Viewing all articles
Browse latest Browse all 1878

New Post: Design Question - keyboard navigation

$
0
0
So I have switched from using an itemscontrol to using a ListBox for my menu regions. This allows me to setup the navigation easily enough but now I cannot figure out how to get the menu items to show up in one row. Each item is shown as a separate row. Here is the MainMenuRegion
<ListBox Name="MainMenuListBox" prism:RegionManager.RegionName="{x:Static inf:RegionNames.MainMenu}">
        <ListBox.ItemsPanel>           
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"  IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
The two views that are loaded are identical except for the image and text that is displayed so I will show just one. Here is the view xaml for the Movie Module.
<ListBoxItem x:Class="MovieModule.View.MainMenuButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" Style="{DynamicResource MovieMainMenuItemStyle}" Content="{Binding ButtonText}" />
And here is the MovieMainMenuItemStyle and template
<Style x:Key="MovieMainMenuItemStyle" TargetType="ListBoxItem">
        <Setter Property="FocusVisualStyle" Value="{DynamicResource NuclearButtonFocusVisual}" />
        <Setter Property="Background" Value="{DynamicResource NormalBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}" />
        <Setter Property="Margin" Value="20,0,20,0" />
        <Setter Property="Template" Value="{DynamicResource MovieMainMenuItemTemplate}" />
    </Style>

    <ControlTemplate x:Key="MovieMainMenuItemTemplate" TargetType="{x:Type ListBoxItem}">
        <ControlTemplate.Resources>
            <Storyboard x:Key="HoverOn">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverShineBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
                </DoubleAnimationUsingKeyFrames>

            </Storyboard>
            <Storyboard x:Key="HoverOff">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverShineBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>

            </Storyboard>
            <Storyboard x:Key="PressedOn">

                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
                </DoubleAnimationUsingKeyFrames>

            </Storyboard>
            <Storyboard x:Key="PressedOff">

                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>

            </Storyboard>
            <Storyboard x:Key="FocusedOn">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FocusVisualElement"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="FocussedOff">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FocusVisualElement"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

        </ControlTemplate.Resources>
        <Grid x:Name="Grid" Width="250" Height="250" Margin="10" >
            <Border x:Name="Background" Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" />
            <Border x:Name="HoverBorder" Opacity="0" Background="{StaticResource HoverBrush}"
                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" />
            <Border x:Name="HoverShineBorder" Opacity="0" Background="{StaticResource HoverShineBrush}"
                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" />
            <Border x:Name="PressedBorder" Opacity="0" BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" Background="{StaticResource PressedBrush}" />
            <Border x:Name="ShineBorder" BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" Background="{StaticResource ShineBrush}"
                    Opacity="1" />

            <StackPanel Margin="30,10,30,0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Orientation="Vertical"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" >
                <Image Stretch="UniformToFill" HorizontalAlignment="Left">
                    <Image.Source>
                        <BitmapImage UriSource="Images/movieIcon.png" />
                    </Image.Source>
                </Image>
                <TextBlock Margin="0,20,0,10" Text ="{TemplateBinding Content}" TextAlignment="Center"/>

            </StackPanel>
            <Border x:Name="FocusVisualElement" IsHitTestVisible="false" BorderBrush="{StaticResource HoverShineBrush}"
                    BorderThickness="1" CornerRadius="3,3,3,3" Margin="1,1,1,1" Opacity="0" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="true">
                <Setter TargetName="Background" Property="Effect" >
                    <Setter.Value>
                        <DropShadowEffect Color="Red" BlurRadius="5" ShadowDepth="0" />
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsKeyboardFocused" Value="true">
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource FocussedOff}" x:Name="FocussedOff_BeginStoryboard" />
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource FocusedOn}" x:Name="FocusedOn_BeginStoryboard" />
                </Trigger.EnterActions>

            </Trigger>
            <Trigger Property="IsMouseOver" Value="true">
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard" />
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource HoverOn}" />
                </Trigger.EnterActions>

            </Trigger>
            <Trigger Property="IsEnabled" Value="true" />
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Background" />
                <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="ShineBorder" />
                <Setter Property="Opacity" TargetName="Grid" Value="0.5" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
All I need to do is be able to get the list items to arrange horizontally instead of vertically. I have tried using both a WrapPanel and a StackPanel for the itemspanel template and neither seems to work. Also there is small dotted line that surrounds the currently selected listitem which makes me think for whatever reason each list item is getting a max width. It would be nice if this dotted line could be removed as well but it is not really a priority at the moment.

Viewing all articles
Browse latest Browse all 1878

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>