Silverlight level-1 menu navigation (implemented in pure XAML Script Mode)

This is a level-1 menu navigation that is made up by yourself and made up of different types of reference. It was easy to create a level-1 navigation before, but the boss must write it in the pure XAML language, which is a little tragic, that is to say, all events are handled in XAML. the most depressing thing is that Silverlight does not have the triggers attribute... Then, find and find, find and find n more information, and finally get it done. I'm so excited,

Yes.

Select the style that is the same as the one that moves the mouse. You can modify the style as needed.

Below is the code

<!--ListBoxItemStyle-->    <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">        <Setter Property="Cursor" Value="Hand"/>        <Setter Property="Foreground" Value="White"/>        <Setter Property="FontSize" Value="16"/>        <Setter Property="Padding" Value="3"/>        <Setter Property="Margin" Value="20,0,0,0"/>        <Setter Property="HorizontalContentAlignment" Value="Center"/>        <Setter Property="VerticalContentAlignment" Value="Center"/>        <Setter Property="Background" Value="Transparent"/>        <Setter Property="TabNavigation" Value="Local"/>        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="ListBoxItem">                    <Grid Background="{TemplateBinding Background}">                        <VisualStateManager.VisualStateGroups>                            <VisualStateGroup x:Name="CommonStates">                                <VisualState x:Name="Normal"/>                                <VisualState x:Name="MouseOver">                                    <Storyboard>                                        <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor3"/>                                    </Storyboard>                                </VisualState>                                <VisualState x:Name="Disabled">                                    <Storyboard>                                        <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>                                    </Storyboard>                                </VisualState>                            </VisualStateGroup>                            <VisualStateGroup x:Name="SelectionStates">                                <VisualState x:Name="Unselected"/>                                <VisualState x:Name="Selected">                                    <Storyboard>                                        <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>                                    </Storyboard>                                </VisualState>                            </VisualStateGroup>                            <VisualStateGroup x:Name="FocusStates">                                <VisualState x:Name="Focused"/>                                <VisualState x:Name="Unfocused"/>                            </VisualStateGroup>                        </VisualStateManager.VisualStateGroups>                        <Rectangle x:Name="fillColor" Width="75" Height="25" RadiusX="5" RadiusY="5" Stroke="Black">                            <Rectangle.Fill>                                <LinearGradientBrush StartPoint="1,0">                                    <GradientStop Color="#BD5E54" Offset="0.0"/>                                    <GradientStop Color="#90322A" Offset="0.9"/>                                </LinearGradientBrush>                            </Rectangle.Fill>                        </Rectangle>                        <Rectangle x:Name="fillColor2" Width="75" Height="25" RadiusX="5" RadiusY="5" IsHitTestVisible="False" Opacity="0" Stroke="#5E1A14">                            <Rectangle.Fill>                                <LinearGradientBrush StartPoint="1,0">                                    <GradientStop Color="#5C5C5C" Offset="0.0"/>                                    <GradientStop Color="#969595" Offset="0.8"/>                                </LinearGradientBrush>                            </Rectangle.Fill>                        </Rectangle>                        <Rectangle x:Name="fillColor3" Width="75" Height="25" RadiusX="5" RadiusY="5" IsHitTestVisible="False" Opacity="0" Stroke="#5E1A14">                            <Rectangle.Fill>                                <LinearGradientBrush StartPoint="1,0">                                    <GradientStop Color="#5C5C5C" Offset="0.0"/>                                    <GradientStop Color="#969595" Offset="0.8"/>                                </LinearGradientBrush>                            </Rectangle.Fill>                        </Rectangle>                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>                    </Grid>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

Then call

 

Here, list is a set. I wrote it in the resource file, and display and selected are the attributes in the list set object.

<ListBox ItemsSouth=｛StaticResource list｝ SelectionChanged="lbNavigate_SelectionChanged" x:Name="lbNavigate" DisplayMemberPath = "SysModuleMTR.ModuleName" SelectedValuePath = "SysPromissions" Background="Transparent" BorderBrush="Transparent" ItemContainerStyle="{StaticResource ListBoxItemStyle}" Height="35" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">                    <ListBox.ItemsPanel>                        <ItemsPanelTemplate>                            <VirtualizingStackPanel Orientation="Horizontal"></VirtualizingStackPanel>                        </ItemsPanelTemplate>                    </ListBox.ItemsPanel>                </ListBox>