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>