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>

五：如何使用DataTemplate
    DataTemplate 可用于自定义数据在控件上的显示方式。除了自定义数据外观之外，DataTemplate 还可以包含 UI 元素，这样大大增加了自定义 UI 的灵活性。DataTemplate的用法见下一章。