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>