ListBox 单击变大动画效果(使用模板、样式、绑定数据源等)
Posted on 2011-09-06 22:13 work hard work smart 阅读(3534) 评论(0) 编辑 收藏 举报一、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/
欢迎任何形式的转载,未经作者同意,请保留此段声明!