在[WPF]將ListBox的項(xiàng)目加上CheckBox做為選取控制項(xiàng)一文中為各位介紹了修改WPF中ListBox項(xiàng)目樣版的方法，打鐵趁熱，就順便來看看在Silverlight裡面要怎麼做到類似的效果吧!!

　　這次要處理的一樣是偏視覺方面的東西，所以，請祭出Expression Blend 4來完成這次的任務(wù)吧!!建立一個(gè)Silvelright+Web專案，並且在畫面中加入一個(gè)ListBox(為了方便編輯，我這邊一樣先使用Expression  Blend產(chǎn)生的Sample Data來Binding到ListBox裡)。

　　前置作業(yè)完成後，就拿畫面上的ListBox來開刀囉!!在要修改的ListBox上按下滑鼠右鍵，選取 Edit Additional Templates -> Edit Generated Item Container(ItemContainerStyle) -> Edit a Copy -> 在接下來出現(xiàn)的對話視窗中幫接下來要設(shè)計(jì)的Style取個(gè)名字，然後按下OK鈕。

　　接著會進(jìn)入樣版編輯模式，我們可以看到原來預(yù)設(shè)的樣版容器是一個(gè)Grid，為了要方便做物件的排列，我們得把Grid切為兩個(gè)欄，並且把左邊的欄位(Column0)寬度調(diào)為30 Pixel。　　

　　接著我們要在左邊那欄加入一個(gè)CheckBox，將它的水平和垂直對齊都改為置中，並且把Content的值清除。　

　　再來將fillColor、fillColor2和ContentPresenter的位置設(shè)為在右邊那欄，也就是把它們的Grid.Column屬性調(diào)為1，順便把它們的重直和水平對齊都改為延展、Margin設(shè)為0。　

　　這邊做一個(gè)小小的補(bǔ)充說明，fillColor2是物件被選取時(shí)的背景色，fillColor是當(dāng)滑鼠滑過(MouseOver)物件時(shí)的背景色，而FocusVisualElement則是選取時(shí)那條細(xì)細(xì)的外框，這邊大家可以依照自己的喜好或是需求修改調(diào)色。

為了不讓背景都方方的，所以順手把fillColor、fillColor2和FocusVisualElement的CornerRadiusX和CornerRadiusY的值改為5吧!!

　　接著我們要來處理CheckBox的和項(xiàng)目被選取的連動，在CheckBox的IsChecked屬性右邊的小方塊上按下滑鼠左鍵，選取Custom Expression...，並於出現(xiàn)的輸入欄位中輸入{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}。

<Style x:Key="ListBoxItemStyle" 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}"> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width="30"/> 
<ColumnDefinition Width="0.941*"/> 
</Grid.ColumnDefinitions> 
<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&nbsp;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="#FFBADDE9" IsHitTestVisible="False" 

Opacity="0" RadiusY="5" RadiusX="5" 
Grid.ColumnSpan="2" Grid.Column="1" Margin="0"/> 
<Rectangle x:Name="fillColor2&quot; Fill="#FFBADDE9" IsHitTestVisible="False" 

Opacity="0" RadiusY="5" RadiusX="5" 
Grid.ColumnSpan="2" Grid.Column="1" Margin="0"/> 
<ContentPresenter x:Name="contentPresenter&quot; 

ContentTemplate="{TemplateBinding ContentTemplate}" 
Content="{TemplateBinding Content}" Margin="0" Grid.Column="1"/> 
<Rectangle x:Name="FocusVisualElement" RadiusY="5" RadiusX="5&quot; 

Stroke="#FF6DBDD1" StrokeThickness="1" 
Visibility="Collapsed" Grid.ColumnSpan="2"/> 
<CheckBox VerticalAlignment="Center" d:LayoutOverrides="Width" HorizontalAlignment="Center" 
IsChecked="{Binding IsSelected, Mode=TwoWay, 

RelativeSource={RelativeSource TemplatedParent}}"/> 
</Grid> 
</ControlTemplate> 
</Setter.Value> 
</Setter> 
</Style>