ListBox 单击变大动画效果（使用模板、样式、绑定数据源等）

一、ListBox系列索引

1、WPF ListBox基础（包括ListBox多列展示，ListBox实现分页效果，ListBox绑定XML数据源）

2、ListBox 单击变大动画效果（使用模板、样式、绑定数据源等）

 

二、ListBox 单击变大动画效果（使用模板、样式、绑定数据源等）

 

<Grid>      <ListBox x:Name= "_listBox"     ItemsSource= "{StaticResource DataSource}"              ItemContainerStyle= "{StaticResource ListBoxItemStyle}"     ItemTemplate= "{StaticResource MyItemTemplate}"     ItemsPanel= "{StaticResource MyPanelTemplate}"     HorizontalAlignment= "Center"   　 Width= "250"    BorderThickness= "0"  /> </Grid>

//资源一

<UserControl.Resources>        <x:Array x:Key= "DataSource"  Type= "System:String" >            <System:String>ONE</System:String>            <System:String>TWO</System:String>            <System:String>THREE</System:String>            <System:String>FOUE</System:String>            <System:String>FIFE</System:String>            <System:String>SIX</System:String>            <System:String>SEVEN</System:String>            <System:String>EIGHT</System:String>            <System:String>NINE</System:String>            <System:String>TEN</System:String>        </x:Array>        <LinearGradientBrush x:Key= "NormalBrush"             StartPoint= "0,0"             EndPoint= "0,1" >            <GradientStop Offset= "0"          Color= "#feffe8"  />            <GradientStop Offset= "1"          Color= "#d6dbbf"  />        </LinearGradientBrush>          <LinearGradientBrush x:Key= "SelectedBrush"         StartPoint= "0,0"         EndPoint= "0,1" >            <GradientStop Offset= "0"                  Color= "#7fcfe1ed"  />            <GradientStop Offset= "1"         Color= "#7f7faaca"  />        </LinearGradientBrush>        <DataTemplate x:Key= "MyItemTemplate" >            <TextBlock Text= "{Binding}"  FontSize= "18" />        </DataTemplate>

</UserControl.Resources>

 

//资源二

<UserControl.Resources>                      <Style x:Key= "ListBoxItemStyle"   TargetType= "ListBoxItem" >          <Setter Property= "FocusVisualStyle"  Value= "{x:Null}" />          <Setter Property= "Margin"  Value= "5,5,5,0" />          <Setter Property= "RenderTransformOrigin"  Value= "0,0.5"  />          <Setter Property= "RenderTransform" >              <Setter.Value>                  <ScaleTransform ScaleX= "1"    ScaleY= "1"  />              </Setter.Value>          </Setter>          <Setter Property= "Template" >              <Setter.Value>                  <ControlTemplate TargetType= "ListBoxItem" >                      <Border x:Name= "Root"         BorderBrush= "#bdc1a3"         BorderThickness= "1"         CornerRadius= "5"         Background= "{StaticResource NormalBrush}" >                          <ContentPresenter Content= "{TemplateBinding Content}"   ContentTemplate= "{TemplateBinding ContentTemplate}"

HorizontalAlignment= "Center"  VerticalAlignment= "Center"  />                        </Border>                      <ControlTemplate.Triggers>                          <!-- Hover state -->                          <Trigger Property= "IsMouseOver"   Value= "True" >                              <Setter Property= "BorderBrush"    Value= "#2a849d"                    TargetName= "Root"  />                          </Trigger>                            <!-- Selected state -->                          <Trigger Property= "IsSelected"   Value= "True" >                              <Setter Property= "Panel.ZIndex"  Value= "1"  />                              <Setter Property= "BorderBrush"  Value= "#2a849d"  TargetName= "Root"  />                              <Setter Property= "Background"     Value= "{StaticResource SelectedBrush}"  TargetName= "Root"  />                              <Trigger.EnterActions                                  <BeginStoryboard>                                      <Storyboard>                                          <DoubleAnimation To= "1.05"   Duration= "0:0:0.25"               Storyboard.TargetProperty= "RenderTransform.(ScaleTransform.ScaleX)"  />                                          <DoubleAnimation To= "1.5"  Duration= "0:0:0.25"               Storyboard.TargetProperty= "RenderTransform.(ScaleTransform.ScaleY)"  />                                      </Storyboard>                                  </BeginStoryboard>                              </Trigger.EnterActions>                              <Trigger.ExitActions>                                  <BeginStoryboard>                                      <Storyboard>                                          <DoubleAnimation To= "1"               Duration= "0:0:0.25"               Storyboard.TargetProperty= "RenderTransform.(ScaleTransform.ScaleX)"  />                                    <DoubleAnimation To= "1"  Duration= "0:0:0.25"   Storyboard.TargetProperty= "RenderTransform.(ScaleTransform.ScaleY)"  />                                      </Storyboard>                                  </BeginStoryboard>                              </Trigger.ExitActions>                          </Trigger>                      </ControlTemplate.Triggers>                  </ControlTemplate>              </Setter.Value>          </Setter>      </Style>      <ItemsPanelTemplate x:Key= "MyPanelTemplate" >          <WrapPanel ItemWidth= "200"                     ItemHeight= "50"                     Orientation= "Vertical"                     IsItemsHost= "True"                     Margin= "0,10,0,0" />      </ItemsPanelTemplate> </UserControl.Resources>

 

 

2）效果图： 

 

本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/archive/2011/09/06/2169241.html，如需转载请自行联系原作者