WPF快速指导2：模板

WPF快速指导2：模板
    本文摘要：
    1：模板作用；
    2：样式模板；
    3：数据模板；
    4：如何使用ControlTemplate；
    5：如何使用DataTemplate；

一：模板作用
1：样式模板，在应用程序内部维护和共享外观；
2：数据模板，实现表现形式和逻辑的分离；

二：样式模板
如：
片段1：

    <Style TargetType="TextBlock"><Setter Property="HorizontalAlignment" Value="Center" /><Setter Property="FontFamily" Value="Comic Sans MS"/><Setter Property="FontSize" Value="14"/></Style>

    以上的样式模板用于对页面范围内TextBlock进行规范。注意Style中一个属性关键字BaseOn，如：
片段2

   <Style BasedOn="{StaticResource {x:Type TextBlock}}"TargetType="TextBlock"x:Key="TitleText">……</Style>

    这个属性标识是指如上的风格基于片段1，同时进行拓展。
关于样式模板需要注意的几个方面：
1：如果有多个 Setter 对 Style 的同一属性进行设置，则最后声明的 Setter 优先；
2：以编程方式设置属性，textblock1.Style = (Style)(this.Resources["TitleText"]);

三：数据模板
    数据模板的作用就是实现表现形式和逻辑的分离。
    查看如下的代码片段，
    片段3：

    <ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}" >            </ListBox>

这就意味着这个ListBox的数据源是资源中定义的MyPhotos数据源，如下：
片段4

    <Window.Resources><ObjectDataProvider x:Key="MyPhotos" ObjectType="{x:Type local:PhotoList}"/></Window.Resources>

    这个资源定义中有一个Package名local，我们如下定义：
    xmlns:local="clr-namespace:WpfApplication2"
    同时也指定了数据源的类型为PhotoList，即存在类为PhotoList以及PhotoList所对应的Item，类Photo。
    在UI呈现的时候，需要为MyPhotos动态添加数据，添加数据的代码如下：

        PhotoList Photos;private void WindowLoaded(object sender, RoutedEventArgs e){Photos = (PhotoList)(this.Resources["MyPhotos"] as ObjectDataProvider).Data;Photos.Path = "...\\...\\Images";}

注意，以上代码如果运行的话，ListBox呈现的是Photo的ToString()。要按照我们的需求显示实际的图片，仍旧需要定义DataTemplate，即
片段5：

<DataTemplate DataType="{x:Type local:Photo}">
<Border Margin="3">
<Image Source="{Binding Source}"/>
</Border>
</DataTemplate>

四：如何使用ControlTemplate
WPF 中的许多控件都使用 ControlTemplate 来定义控件的结构和外观，这样可将控件外观和控件功能分离开。重新定义控件的 ControlTemplate 可以彻底改变控件的外观。使用ControlTemplate还可以创建自定义控件，在这里不做赘述。
改变现有控件的一个典型例子如下：

       <Style TargetType="Button"><!--Set to true to not get any properties from the themes.--><Setter Property="OverridesDefaultStyle" Value="True"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid><Ellipse Fill="{TemplateBinding Background}"/><ContentPresenter HorizontalAlignment="Center"VerticalAlignment="Center"/></Grid></ControlTemplate></Setter.Value></Setter></Style>