彩票走势图

修改WPF中ListBox項目樣版的方法

转帖|其它|编辑:郝浩|2011-03-09 13:46:11.000|阅读 2743 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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

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

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

image

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

image
image

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

image

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

image

  這邊做一個小小的補充說明,fillColor2是物件被選取時的背景色,fillColor是當滑鼠滑過(MouseOver)物件時的背景色,而FocusVisualElement則是選取時那條細細的外框,這邊大家可以依照自己的喜好或是需求修改調色。

image

image

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

image

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

image
image

<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> 
&lt;DoubleAnimation Duration="0"&nbsp;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&quot; IsHitTestVisible="False" 

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

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

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

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> 

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:网络转载

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP