学步园

一、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）效果图：