Silverlight自訂漂亮的ListBox

第一個話說看起來效果不錯，不過就是滑鼠點擊的時候無法改變顏色，

第二個雖然樣式有些差，但是可以把第一個的樣式放到下面去就OK了。

具體效果看這裡

http://bbs.csdn.net/topics/390328614

這個是自己曾經遇到的問題，非常感謝2位大神的協助，下面是2個源碼，直接貼上去就可以運行

 

  <UserControl.Resources>    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">    <Setter Property="Padding" Value="3"/>    <Setter Property="HorizontalContentAlignment" Value="Left"/>    <Setter Property="VerticalContentAlignment" Value="Top"/>    <Setter Property="Background" Value="Transparent"/>    <Setter Property="BorderThickness" Value="1"/>    <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>    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle">    <EasingColorKeyFrame KeyTime="0" Value="#FF90322A"/>    <EasingColorKeyFrame KeyTime="0:0:0.4" Value="White"/>    </ColorAnimationUsingKeyFrames>    </Storyboard>    </VisualState>    <VisualState x:Name="Disabled"/>    </VisualStateGroup>    <VisualStateGroup x:Name="SelectionStates">    <VisualState x:Name="Unselected"/>    <VisualState x:Name="Selected"/>    </VisualStateGroup>    <VisualStateGroup x:Name="FocusStates">    <VisualState x:Name="Focused"/>    <VisualState x:Name="Unfocused"/>    </VisualStateGroup>    </VisualStateManager.VisualStateGroups>    <Rectangle x:Name="rectangle" Width="75" Height="25" RadiusX="5" RadiusY="5" Stroke="Black" Margin="52,0,69,0">    <Rectangle.Fill>    <LinearGradientBrush StartPoint="1,0">    <GradientStop Color="#BD5E54" Offset="0.0"/>    <GradientStop Color="#90322A" Offset="0.9"/>    </LinearGradientBrush>    </Rectangle.Fill>    </Rectangle>    <TextBlock Text="{Binding FunctionName}" HorizontalAlignment="Center"/>    </Grid>    </ControlTemplate>    </Setter.Value>    </Setter>    </Style>    </UserControl.Resources>    <Grid x:Name="LayoutRoot" Background="White">        <ListBox HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="200" ItemContainerStyle="{StaticResource ListBoxItemStyle1}"  >            <ListBoxItem Content="ListBoxItem"/>            <ListBoxItem Content="ListBoxItem"/>            <ListBoxItem Content="ListBoxItem"/>            <ListBoxItem Content="ListBoxItem"/>        </ListBox>        <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Width="75"  Visibility="Collapsed"/>    </Grid></UserControl>

 

 

 

第二個

<UserControl.Resources><Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem"><Setter Property="Padding" Value="3"/><Setter Property="HorizontalContentAlignment" Value="Left"/><Setter Property="VerticalContentAlignment" Value="Top"/><Setter Property="Background" Value="Transparent"/><Setter Property="BorderThickness" Value="1"/><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=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/></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"><Storyboard><ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement"><DiscreteObjectKeyFrame KeyTime="0"><DiscreteObjectKeyFrame.Value><Visibility>Visible</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="Unfocused"/></VisualStateGroup></VisualStateManager.VisualStateGroups><!--以下兩句是關鍵！！--><Rectangle x:Name="fillColor" Fill="#FFff0000" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/><Rectangle x:Name="fillColor2" Fill="#FF00ff00" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/><ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/><Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/></Grid></ControlTemplate></Setter.Value></Setter></Style></UserControl.Resources>