一、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，如需转载请自行联系原作者
