ControlTemplate和DataTemplate Trigger，EventTrigger和DataTrigger

引自：http://evencode.iteye.com/blog/2020255

ControlTemplate 和 DataTemplate

1. ControlTemplate用来指定 Control 的可在其多个实例之间共享的可视结构，行为，和Trigger等方面。和创建自定义控件不同，在许多情况下，您都不需要编写自己的控件，您只是希望更改控件的可视化或替换现有控件的 ControlTemplate。使用ControlTemplate很简单，只需要设定它，然后赋值到Template属性下面即可。
2. DataTemplate用来描述数据对象的可视结构。通常使用DataTemplate 指定数据的直观表示。使用DataTemplate很简单，只需要设定它，然后赋值到CellTemplate, ContentTemplate, ItemTemplate属性下面即可.

1. ControlTemplate用于描述控件本身的视觉样式和行为. 使用TemplateBinding来绑定控件自身的属性, 比如{TemplateBinding Background}。
2. DataTemplate用于描述控件的Content（数据对象）的视觉样式。 使用Binding来绑定数据对象的属性, 比如{Binding PersonName}。即ControlTemplate决定了控件本身的样子。DataTemplate决定了Content的样子。

一般来说, ControlTemplate内有一个ContentPresenter, 这个ContentPresenter的ContentTemplate就是DataTemplate类型：

Control类型
    - Template属性 (ControlTemplate类型)
        - ContentPresenter
            - ContentTemplate (DataTemplate类型)

ContentControl类型
    - Template属性 (ControlTemplate类型) 继承自Control
    - ContentTemplate (DataTemplate类型)

ItemsControl类型
    - Template属性 (ControlTemplate类型) 继承自Control
    - ItemsPanel属性 (ItemsPanelTemplate类型) 指定布局容器
    - ItemTemplate属性 (DateTemplate类型) 每个Item的Template

<DataTemplate x:Key="CalendarDayTemplate" DataType="{x:Type local:CalendarDay}">

        <DataTemplate.Resources>

            <Style  TargetType="ToggleButton">

                <Setter Property="Background" >

                    <Setter.Value>

                        <ImageBrush ImageSource="/VTMUIResource;component/images/public/DayButton.png" />

                    </Setter.Value>

                </Setter>

                <Setter Property="Foreground" Value="White" />

                <Setter Property="FontSize" Value="20" />

                <Setter Property="Height" Value="45"/>

                <Setter Property="Width" Value="Auto"/>

                <Setter Property="Control.Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="ToggleButton">

                            <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush ="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">

                                <ContentPresenter Content="{TemplateBinding Content}"  HorizontalAlignment="Center" VerticalAlignment="Center" />

                            </Border>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

        </DataTemplate.Resources>

        <ToggleButton Name ="btnDay" BorderThickness="0,0,1,1" BorderBrush ="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" IsEnabled="{Binding IsEnable,Mode=TwoWay}" Visibility="{Binding IsCurrentMonthDay,Mode=TwoWay}" Content="{Binding Path=Day}" IsChecked="{Binding Path=IsCurrent,Mode=TwoWay}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextBlock.TextAlignment="Center"/>

        <DataTemplate.Triggers>

            <DataTrigger Binding="{Binding Path=DayOfWeek}" Value="0">

                <Setter TargetName="btnDay" Property="Background" >

                    <Setter.Value>

                        <ImageBrush ImageSource="/VTMUIResource;component/images/public/DayButton.png" />

                    </Setter.Value>

                </Setter>

                <Setter TargetName="btnDay" Property="Foreground" Value="White"/>

            </DataTrigger>

 

            <DataTrigger Binding="{Binding Path=DayOfWeek}" Value="6">

                <Setter TargetName="btnDay" Property="Background" >

                    <Setter.Value>

                        <ImageBrush ImageSource="/VTMUIResource;component/images/public/DayButton.png" />

                    </Setter.Value>

                </Setter>

                <Setter TargetName="btnDay" Property="Foreground" Value="White"/>

            </DataTrigger>

 

            <DataTrigger Binding="{Binding Path=IsNextMonth}" Value="True">

                <Setter TargetName="btnDay" Property="Foreground" Value="White"/>

            </DataTrigger>

 

            <DataTrigger Binding="{Binding Path=IsPreviousMonth}" Value="True">

                <Setter TargetName="btnDay" Property="Foreground" Value="White"/>

            </DataTrigger>

 

            <DataTrigger Binding="{Binding Path=IsToday}" Value="True">

                <Setter TargetName="btnDay" Property="Background" >

                    <Setter.Value>

                        <ImageBrush ImageSource="/VTMUIResource;component/images/public/DayButton.png" />

                    </Setter.Value>

                </Setter>

                <Setter TargetName="btnDay" Property="Foreground" Value="White"/>

            </DataTrigger>

 

 

            <DataTrigger Binding="{Binding Path=IsEnable}" Value="False">

                <Setter TargetName="btnDay" Property="Background">

                    <Setter.Value>

                        <ImageBrush ImageSource="/VTMUIResource;component/images/public/UnenableDayButton.png" />

                    </Setter.Value>

                </Setter>

                <Setter TargetName="btnDay" Property="Foreground" Value="White"/>

            </DataTrigger>

            <DataTrigger Binding="{Binding Path=IsCurrent}" Value="True">

                <Setter TargetName="btnDay" Property="Foreground" Value="#fae602" />

 

            </DataTrigger>

 

        </DataTemplate.Triggers>

    </DataTemplate>

 

 <DataTemplate x:Key="CalendarWeekTemplate" DataType="{x:Type local:CalendarWeek}">

        <Border Focusable="False" Background="Transparent"  Margin="0" BorderThickness="0" >

            <Grid Focusable="False">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="1*" MinWidth="24"/>

                    <ColumnDefinition Width="1*" MinWidth="24"/>

                    <ColumnDefinition Width="1*" MinWidth="24"/>

                    <ColumnDefinition Width="1*" MinWidth="24"/>

                    <ColumnDefinition Width="1*" MinWidth="24"/>

                    <ColumnDefinition Width="1*" MinWidth="24"/>

                    <ColumnDefinition Width="1*" MinWidth="24"/>

                </Grid.ColumnDefinitions>

                <ContentPresenter x:Name="btSunday" Grid.Column="0" Content="{Binding [0]}" Margin="2" ContentTemplate="{StaticResource CalendarDayTemplate}"/>

                <ContentPresenter x:Name="btMonday" Grid.Column="1" Content="{Binding [1]}" Margin="2" ContentTemplate="{StaticResource CalendarDayTemplate}"/>

                <ContentPresenter x:Name="btTuesday" Grid.Column="2" Content="{Binding [2]}" Margin="2" ContentTemplate="{StaticResource CalendarDayTemplate}"/>

                <ContentPresenter x:Name="btWednesday" Grid.Column="3" Content="{Binding [3]}" Margin="2" ContentTemplate="{StaticResource CalendarDayTemplate}"/>

                <ContentPresenter x:Name="btThursday" Grid.Column="4" Content="{Binding [4]}" Margin="2" ContentTemplate="{StaticResource CalendarDayTemplate}"/>

                <ContentPresenter x:Name="btFriday" Grid.Column="5" Content="{Binding [5]}" Margin="2" ContentTemplate="{StaticResource CalendarDayTemplate}"/>

                <ContentPresenter x:Name="btSaturday" Grid.Column="6" Content="{Binding [6]}" Margin="2" ContentTemplate="{StaticResource CalendarDayTemplate}"/>

            </Grid>

        </Border>

    </DataTemplate>

 

    <Style TargetType="{x:Type local:CalendarControl}">

        <Style.Resources>

            <Style TargetType="RepeatButton">

                <Setter Property="Foreground" Value="Transparent"/>

                <Setter Property="Background" Value="White"/>

                <Setter Property="Focusable" Value="False"/>

                <Setter Property="Width" Value="50" />

                <Setter Property="FontWeight" Value="Bold"/>

                <Setter Property="Control.Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="RepeatButton">

                            <Border Background="{TemplateBinding Background}" SnapsToDevicePixels="True" >

                                <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />

                            </Border>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <!--<DataTemplate x:Key="CalendarDayDateShowTemplate" DataType="{x:Type sys:DateTime}">

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">

                    <TextBlock Foreground="White" Text="{Binding Path=Year}"/>

                    <TextBlock Foreground="White" Text="年"/>

                    <TextBlock Foreground="White" Text="{Binding Path=Month}"/>

                    <TextBlock Foreground="White" Text="月"/>

                    <TextBlock Foreground="White" Text="{Binding Path=Day}"/>

                    <TextBlock Foreground="White" Text="日"/>

                </StackPanel>

            </DataTemplate>-->

 

        </Style.Resources>

        <Setter Property="Width" Value="Auto"/>

        <Setter Property="Height" Value="Auto"/>

        <Setter Property="FocusVisualStyle" Value="{x:Null}"></Setter>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type local:CalendarControl}">

                    <Border Background="{TemplateBinding Background}" CornerRadius="15" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">

                        <Grid  Width="Auto" Height="Auto">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="80"/>

                                <RowDefinition Height="*"/>

                            </Grid.RowDefinitions>

                            <Border Name="bdHeader"   DataContext="{TemplateBinding Items}" Grid.Row="0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">

                                <Grid Margin="3,20,3,3" >

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="0.5*"/>

                                        <ColumnDefinition Width="0.5*"/>

                                    </Grid.ColumnDefinitions>

                                    <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">

                                        <RepeatButton x:Name="btnPrvMonth" Content ="‹" Command="{x:Static local:CalendarControl.PreviousMonth}" BorderThickness ="0">

                                            <RepeatButton.Background>

                                                <ImageBrush ImageSource="/VTMUIResource;component/images/public/main_arrow_l.png" />

                                            </RepeatButton.Background>

                                        </RepeatButton>

                                        <TextBlock FontFamily="Arial"  Margin="3,0,3,0" FontSize="30" Foreground="Black" TextAlignment="Center" VerticalAlignment="Center" Text="{Binding Path=Month}" MinWidth ="16"/>

                                        <TextBlock FontFamily="Arial"  Margin="3,0,1,0"  FontSize="30" Foreground="Black" TextAlignment="Center" VerticalAlignment="Center" Text="月"/>

                                        <RepeatButton x:Name="btnNextMonth"  Content =" ›" Command="{x:Static local:CalendarControl.NextMonth}">

                                            <RepeatButton.Background>

                                                <ImageBrush ImageSource="/VTMUIResource;component/images/public/main_arrow_r.png" />

                                            </RepeatButton.Background>

                                        </RepeatButton>

                                    </StackPanel>

                                    <StackPanel Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">

                                        <RepeatButton x:Name="btnPrvYear" Content ="‹‹" Command="{x:Static local:CalendarControl.PreviousYear}">

                                            <RepeatButton.Background>

                                                <ImageBrush ImageSource="/VTMUIResource;component/images/public/main_arrow_l.png" />

                                            </RepeatButton.Background>

                                        </RepeatButton>

                                        <TextBlock FontFamily="Arial" Margin="5,0,5,0" FontSize="30" Foreground="Black" VerticalAlignment="Center" Text="{Binding Path=Year}"/>

                                        <TextBlock FontFamily="Arial"  Margin="3,0,1,0"  FontSize="30" Foreground="Black" TextAlignment="Center" VerticalAlignment="Center" Text="年"/>

                                        <RepeatButton x:Name="btnNextYear" Content ="››"  Command="{x:Static local:CalendarControl.NextYear}">

                                            <RepeatButton.Background>

                                                <ImageBrush ImageSource="/VTMUIResource;component/images/public/main_arrow_r.png" />

                                            </RepeatButton.Background>

                                        </RepeatButton>

                                    </StackPanel>

                                </Grid>

                                <!--<Border.Style>

                                    <Style TargetType="Border" x:Name="bdHeader">

                                        <Style.Triggers>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="1">

                                                <Setter Property="Background" Value="#FF73B5F7"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="2">

                                                <Setter Property="Background" Value="#FFCFF765"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="3">

                                                <Setter Property="Background" Value="#FF0FD60F"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="4">

                                                <Setter Property="Background" Value="#FFF7D64A"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="5">

                                                <Setter Property="Background" Value="#FF9C079C"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="6">

                                                <Setter Property="Background" Value="#FF53ADD6"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="7">

                                                <Setter Property="Background" Value="#FF5252BD"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="8">

                                                <Setter Property="Background" Value="#FFF00F0F"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="9">

                                                <Setter Property="Background" Value="#FFCDACE7"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="10">

                                                <Setter Property="Background" Value="#FFFFAE54"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="11">

                                                <Setter Property="Background" Value="#FFADA67C"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="12">

                                                <Setter Property="Background" Value="#FF05AC05"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="13">

                                                <Setter Property="Background" Value="#FFF0F0F0"></Setter>

                                            </DataTrigger>

                                        </Style.Triggers>

                                    </Style>

                                </Border.Style>-->

                            </Border>

                            <Border Grid.Row="1" BorderThickness="2" BorderBrush="LightGray" CornerRadius="10" Margin="10" >

                                <Grid>

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="Auto"/>

                                        <RowDefinition Height="*"/>

                                    </Grid.RowDefinitions>

                                    <Border Name="bdWeekTitle" DataContext="{TemplateBinding Items}" Margin="0" Grid.Row="0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"  Background="LightGray">

                                        <Grid >

                                            <Grid.ColumnDefinitions>

                                                <ColumnDefinition Width="1*"/>

                                                <ColumnDefinition Width="1*"/>

                                                <ColumnDefinition Width="1*"/>

                                                <ColumnDefinition Width="1*"/>

                                                <ColumnDefinition Width="1*"/>

                                                <ColumnDefinition Width="1*"/>

                                                <ColumnDefinition Width="1*"/>

                                            </Grid.ColumnDefinitions>

                                            <TextBlock FontFamily="Microsoft YaHei" Foreground="Red" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" Text="日" Grid.Column="0"/>

                                            <TextBlock FontFamily="Microsoft YaHei" Foreground="Black" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" Text="一" Grid.Column="1"/>

                                            <TextBlock FontFamily="Microsoft YaHei" Foreground="Black" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" Text="二" Grid.Column="2"/>

                                            <TextBlock FontFamily="Microsoft YaHei" Foreground="Black" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" Text="三" Grid.Column="3"/>

                                            <TextBlock FontFamily="Microsoft YaHei" Foreground="Black" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" Text="四" Grid.Column="4"/>

                                            <TextBlock FontFamily="Microsoft YaHei" Foreground="Black" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" Text="五" Grid.Column="5"/>

                                            <TextBlock FontFamily="Microsoft YaHei" Foreground="Red" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" Text="六" Grid.Column="6"/>

                                        </Grid>

                                        <Border.Style>

                                            <Style TargetType="Border" x:Name="bdWeekName">

                                                <!--<Style.Triggers>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="1">

                                                <Setter Property="Background" Value="#FF509BEF"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="2">

                                                <Setter Property="Background" Value="#FFA5D610"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="3">

                                                <Setter Property="Background" Value="#FF05AC05"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="4">

                                                <Setter Property="Background" Value="#FFDEB511"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="5">

                                                <Setter Property="Background" Value="#FF6F076F"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="6">

                                                <Setter Property="Background" Value="#FF298CBD"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="7">

                                                <Setter Property="Background" Value="#FF383883"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="8">

                                                <Setter Property="Background" Value="#FFC51111"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="9">

                                                <Setter Property="Background" Value="#FFB58CDE"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="10">

                                                <Setter Property="Background" Value="#FFFF8402"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="11">

                                                <Setter Property="Background" Value="#FF9C9463"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="12">

                                                <Setter Property="Background" Value="#FF008500"></Setter>

                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Path=Month}" Value="13">

                                                <Setter Property="Background" Value="#FF0F0F0F"></Setter>

                                            </DataTrigger>

                                        </Style.Triggers>-->

 

                                            </Style>

                                        </Border.Style>

                                    </Border>

                                    <Border Grid.Row="1" Margin="0,10,0,0" BorderThickness="1,1,0,0" BorderBrush="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">

                                        <ItemsControl Focusable="False" ItemsSource="{TemplateBinding Items}" ItemTemplate="{StaticResource CalendarWeekTemplate}">

                                            <ItemsControl.ItemsPanel>

                                                <ItemsPanelTemplate>

                                                    <StackPanel/>

                                                </ItemsPanelTemplate>

                                            </ItemsControl.ItemsPanel>

                                        </ItemsControl>

                                    </Border>

                                </Grid>

 

                            </Border>

 

                            <!--<Border Grid.Row="3" BorderThickness="0,0,1,1" BorderBrush="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">

                                <Grid Background="SlateGray">

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="*" MinWidth="6"/>

                                        <ColumnDefinition Width="Auto"/>

                                    </Grid.ColumnDefinitions>

                                    <Button Margin="4,1,4,1" Grid.Column="0" Focusable="False" Content="今天" ToolTip="转到今天" Command="{x:Static local:CalendarControl.Today}" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>

                                    <ContentPresenter Grid.Column="1" Content="{x:Static sys:DateTime.Now}" VerticalAlignment="Center" ContentTemplate="{StaticResource CalendarDayDateShowTemplate}"/>

                                    <ContentPresenter Grid.Column="3" Content="{TemplateBinding CurrentDay}" VerticalAlignment="Center" ContentTemplate="{StaticResource CalendarDayDateShowTemplate}"/>

                                </Grid>

                            </Border>-->

                        </Grid>

                    </Border>

                    <ControlTemplate.Triggers>

                        <Trigger Property="Changeable" Value ="false">

                            <Setter TargetName="btnPrvYear" Property ="Visibility" Value ="Collapsed"/>

                            <Setter TargetName="btnPrvMonth" Property ="Visibility" Value ="Collapsed"/>

                            <Setter TargetName="btnNextYear" Property ="Visibility" Value ="Collapsed"/>

                            <Setter TargetName="btnNextMonth" Property ="Visibility" Value ="Collapsed"/>

                        </Trigger>

                        <Trigger Property="ShowHeader" Value ="false">

                            <Setter TargetName="bdHeader" Property ="Visibility" Value ="Collapsed"/>

                        </Trigger>

                        <Trigger Property="ShowWeekTitle" Value ="false">

                            <Setter TargetName="bdWeekTitle" Property ="Visibility" Value ="Collapsed"/>

                        </Trigger>

 

 

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

 

 


 <Style TargetType="{x:Type Page}" >


        <Setter Property="RenderTransform">


            <Setter.Value>


                <TransformGroup>


                    <TranslateTransform />


                </TransformGroup>


            </Setter.Value>


        </Setter>


        <Style.Triggers>


            <EventTrigger RoutedEvent="Page.Loaded">


                <BeginStoryboard >


                    <Storyboard>


                        <DoubleAnimation Duration="0:0:0.2"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)"  From="1280" To="0" />


                        <DoubleAnimation Duration="0:0:0.4"  Storyboard.TargetProperty="Opacity"  From="0" To="1" />


                    </Storyboard>


                </BeginStoryboard>


            </EventTrigger>


            <EventTrigger RoutedEvent="Page.Unloaded">


                <BeginStoryboard >


                    <Storyboard>


                        <DoubleAnimation Duration="0:0:0.1"  Storyboard.TargetProperty="Opacity"  From="1" To="0" />


                    </Storyboard>


                </BeginStoryboard>


            </EventTrigger>


        </Style.Triggers>


    </Style>