这个是自己东拼西凑然后各种借鉴混合而成的一个一级菜单导航,本来之前做一个一级导航很简单的,但是老板必须得用纯XAML语言写,就有点悲剧了,也就是说所有的事件神马的都是在XAML里面搞定,最郁闷的是Silverlight没有Triggers属性。。。然后找啊找啊找啊找啊,找了N多资料,终于搞定了,激动了,
效果图是这样的。
选中和鼠标移动上去的样式一样的,具体样式可以根据自己去修改
下面是代码
<!--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"/> <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>
然后调用
其中List是一个集合,我给写在了资源文件里面,然后display和Selected是list集合对象里面的属性
<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>