引自: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>