《深入浅出WPF》读书笔记.11Template机制(下)

背景

本文主要讲datatemplate和contenttemplate的联合使用，以及style的解析。

《深入浅出WPF》读书笔记.11Template机制(下)

代码

两者的作用域范围

datatemplate和contenttemplate的关系

两者的应用

指定目标类型模板

<Window x:Class="TemplateDemo.DataTemplate2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        xmlns:c="clr-namespace:System.Collections;assembly=mscorlib"
        mc:Ignorable="d"
        Title="DataTemplate2" Height="300" Width="400">
    <Window.Resources>
        <DataTemplate DataType="{x:Type local:Unit}">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <Grid >
                        <Rectangle Width="{Binding Price}" Fill="Orange"/>
                        <TextBlock Text="{Binding Year}"/>
                    </Grid>
                    <TextBlock Text="{Binding Year}"></TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <c:ArrayList x:Key="ds">
            <local:Unit Price="100" Year="1998"></local:Unit>
            <local:Unit Price="90" Year="1999"></local:Unit>
            <local:Unit Price="80" Year="2000"></local:Unit>
        </c:ArrayList>
    </Window.Resources>
    <StackPanel>
        <ListBox ItemsSource="{StaticResource ds}"></ListBox>
        <ComboBox ItemsSource="{StaticResource ds}"></ComboBox>
    </StackPanel>
</Window>

使用xml作为数据源模板

<Window x:Class="TemplateDemo.XmlDataTemplate1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        xmlns:c="clr-namespace:System.Collections;assembly=mscorlib"
        mc:Ignorable="d"
        Title="XmlDataTemplate1" Height="450" Width="800">
    <Window.Resources>
        <DataTemplate DataType="Unit">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <Grid >
                        <Rectangle Width="{Binding XPath=@Price }" Fill="Orange"/>
                        <TextBlock Text="{Binding XPath=@Year}"/>
                    </Grid>
                    <TextBlock Text="{Binding XPath=@Price}"></TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <XmlDataProvider x:Key="ds" XPath="Units/Unit" IsAsynchronous="False" IsInitialLoadEnabled="True">
            <x:XData>
                <Units xmlns="">
                    <Unit Price="80" Year="1998"></Unit>
                    <Unit Price="90" Year="1999"></Unit>
                    <Unit Price="100" Year="2000"></Unit>
                </Units>
            </x:XData>
        </XmlDataProvider>
    </Window.Resources>
    <StackPanel>
        <ListBox ItemsSource="{Binding Source={StaticResource ds}}"></ListBox>
        <ComboBox ItemsSource="{Binding Source={StaticResource ds}}"></ComboBox>
    </StackPanel>
</Window>

使用xml显示层级数据

<Window x:Class="TemplateDemo.HierarchicalTemplateDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        mc:Ignorable="d"
        Title="HierarchicalTemplateDemo" Height="450" Width="800">
    <Window.Resources>
        <XmlDataProvider x:Key="ds" Source="Data.xml" XPath="Data/Grade"/>
        <HierarchicalDataTemplate DataType="Grade" ItemsSource="{Binding XPath=Class}">
            <TextBlock Text="{Binding XPath=@Name}"></TextBlock>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate DataType="Class" ItemsSource="{Binding XPath=Group}">
            <RadioButton Content="{Binding XPath=@Name}" GroupName="gn"></RadioButton>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate DataType="Group" ItemsSource="{Binding XPath=Student}">
            <CheckBox Content="{Binding XPath=@Name}"></CheckBox>
        </HierarchicalDataTemplate>
        <XmlDataProvider x:Key="ds2" Source="Data.xml" XPath="Data/Operation"/>
        <HierarchicalDataTemplate DataType="Operation" ItemsSource="{Binding XPath=Operation}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding XPath=@Name}" Margin="0,5"></TextBlock>
                <TextBlock Text="{Binding XPath=@Gesture}" Margin="0,5"></TextBlock>
            </StackPanel>
        </HierarchicalDataTemplate>
    </Window.Resources>
    <Grid>
        <TreeView x:Name="tv" Margin="5" ItemsSource="{Binding Source={StaticResource ds2}}"></TreeView>
    </Grid>
</Window>

<?xml version="1.0" encoding="utf-8" ?>
<Data xmlns="">
  <Grade Name="一年级">
    <Class Name="一班">
      <Group Name="一组"></Group>
      <Group Name="二组"></Group>
      <Group Name="三组"></Group>
    </Class>
    <Class Name="二班">
      <Group Name="一组"></Group>
      <Group Name="二组"></Group>
      <Group Name="三组"></Group>
    </Class>
  </Grade>
  <Grade Name="二年级">
    <Class Name="一班">
      <Group Name="一组"></Group>
      <Group Name="二组"></Group>
      <Group Name="三组"></Group>
    </Class>
    <Class Name="二班">
      <Group Name="一组"></Group>
      <Group Name="二组"></Group>
      <Group Name="三组"></Group>
    </Class>
  </Grade>
  <Operation Name="文件" Gesture="F">
    <Operation Name="新建" Gesture="N">
      <Operation Name="项目" Gesture="A"></Operation>
      <Operation Name="文档" Gesture="B"></Operation>
      <Operation Name="网站" Gesture="C"></Operation>
    </Operation>
    <Operation Name="保存" Gesture="D"></Operation>
    <Operation Name="修改" Gesture="E"></Operation>
    <Operation Name="删除" Gesture="F"></Operation>
  </Operation>
</Data>

通过template寻找控件

<Window x:Class="TemplateDemo.GetDataTemplate"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        mc:Ignorable="d"
        Title="GetDataTemplate" Height="300" Width="400">
    <Window.Resources>
        <local:Student x:Key="stu" Id="1" Name="stu" FirstName="Wang" Skill="Chinese"></local:Student>
        <DataTemplate x:Key="stuDT">
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="1">
                <StackPanel Orientation="Horizontal">
                    <TextBox Text="{Binding Id}"></TextBox>
                    <TextBox Text="{Binding Name}"></TextBox>
                    <TextBox Text="{Binding FirstName}" x:Name="tb1"></TextBox>
                    <TextBox Text="{Binding Skill}"></TextBox>
                </StackPanel>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <StackPanel>
        <ContentPresenter Content="{StaticResource stu}" ContentTemplate="{StaticResource stuDT}" x:Name="cp1"></ContentPresenter>
        <Button Content="点击一下" Click="Button_Click"></Button>
    </StackPanel>
</Window>

<Window x:Class="TemplateDemo.GetDataTemplate"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        mc:Ignorable="d"
        Title="GetDataTemplate" Height="300" Width="400">
    <Window.Resources>
        <local:Student x:Key="stu" Id="1" Name="stu" FirstName="Wang" Skill="Chinese"></local:Student>
        <DataTemplate x:Key="stuDT">
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="1">
                <StackPanel Orientation="Horizontal">
                    <TextBox Text="{Binding Id}"></TextBox>
                    <TextBox Text="{Binding Name}"></TextBox>
                    <TextBox Text="{Binding FirstName}" x:Name="tb1"></TextBox>
                    <TextBox Text="{Binding Skill}"></TextBox>
                </StackPanel>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <StackPanel>
        <ContentPresenter Content="{StaticResource stu}" ContentTemplate="{StaticResource stuDT}" x:Name="cp1"></ContentPresenter>
        <Button Content="点击一下" Click="Button_Click"></Button>
    </StackPanel>
</Window>

Gridview

Style

设置控件外观和行为。

setter

<Window x:Class="TemplateDemo.StyleDemo1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        mc:Ignorable="d"
        Title="StyleDemo1" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="TextBox">
            <Style.Setters>
                <Setter Property="FontSize" Value="25"></Setter>
                <Setter Property="BorderBrush" Value="Blue"></Setter>
                <Setter Property="BorderThickness" Value="2"></Setter>
            </Style.Setters>
        </Style>
    </Window.Resources>
    <StackPanel>
        <TextBox>锄禾日当午</TextBox>
        <TextBox>汗滴禾下土</TextBox>
        <TextBox Style="{x:Null}">谁知盘中餐</TextBox>
    </StackPanel>
</Window>

trigger

<Window x:Class="TemplateDemo.TriggerDemo1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        mc:Ignorable="d"
        Title="TriggerDemo1" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="CheckBox">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Trigger.Setters>
                        <Setter Property="FontSize" Value="20"></Setter>
                        <Setter Property="BorderThickness" Value="5"></Setter>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <CheckBox Content="轻轻的我走了"></CheckBox>
        <CheckBox Content="正如我轻轻的来"></CheckBox>
        <CheckBox Content="我挥一挥衣袖"></CheckBox>
    </StackPanel>
</Window>

multitrigger

<Window x:Class="TemplateDemo.MultiTriggerDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        mc:Ignorable="d"
        Title="MultiTriggerDemo" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="CheckBox">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Content" Value="我挥一挥衣袖"></Condition>
                        <Condition Property="IsChecked" Value="True"></Condition>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="FontSize" Value="20"></Setter>
                        <Setter Property="BorderThickness" Value="5"></Setter>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <CheckBox Content="轻轻的我走了"></CheckBox>
        <CheckBox Content="正如我轻轻的来"></CheckBox>
        <CheckBox Content="我挥一挥衣袖"></CheckBox>
    </StackPanel>
</Window>

datatrigger

<Window x:Class="TemplateDemo.DataTriggerDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        mc:Ignorable="d"
        Title="DataTriggerDemo" Height="450" Width="800">
    <Window.Resources>
        <local:L2BConver x:Key="cvtr"/>
        <Style TargetType="CheckBox">
            <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self},XPath=Text.Length,Converter={StaticResource cvtr}}" Value="false" >
                        <Setter Property="FontSize" Value="20"></Setter>
                        <Setter Property="BorderThickness" Value="5"></Setter>
                    </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <CheckBox Content="轻轻的我走了"></CheckBox>
        <CheckBox Content="正如我轻轻的来"></CheckBox>
        <CheckBox Content="我挥袖"></CheckBox>
    </StackPanel>
</Window>

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;

namespace TemplateDemo
{
    public class L2BConver : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (int)value > 6 ? true : false;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

multidatatrigger

<Window x:Class="TemplateDemo.MultiDataTrrigerDemo1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        mc:Ignorable="d"
        Title="MultiDataTrrigerDemo1" Height="300" Width="400">
    <Window.Resources>
        <Style TargetType="ListBoxItem">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Id}"></TextBlock>
                            <TextBlock Text="{Binding Name}"></TextBlock>
                            <TextBlock Text="{Binding Skill}"></TextBlock>
                        </StackPanel>
                    </DataTemplate>

                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=Id}" Value="2"></Condition>
                        <Condition Binding="{Binding Path=Name}" Value="Tom"></Condition>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="Background" Value="Orange"></Setter>
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <ListBox x:Name="listBoxStudent" Margin="5"></ListBox>
    </StackPanel>
</Window>

eventtrigger

<Window x:Class="TemplateDemo.TriggerEventDemo1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateDemo"
        mc:Ignorable="d"
        Title="TriggerEventDemo1" Height="300" Width="400">
    <Window.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Width"></DoubleAnimation>
                            <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Height"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width"></DoubleAnimation>
                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button x:Name="btn1" Content="点击一下" Width="120" Height="40"></Button> 
    </StackPanel>
</Window>