控件模板、数据模板、面板模板



模板使用方式：首先定义模板，然后在把对应的key应用到控件对应的属性中；
属性对应：
控件模板，对应控件的Template；
数据模板，对应控件的ItemTemplate属性；
面板模板，对应控件的ItemsPanel属性。

控件模板：如果控件的样式不能满足，可自定义控件模板来设计样式。
数据模板：内容控件通过ContentTemplate属性支持数据模板；列表控件(即继承自ItemsControl类的控件)，通过ItemTemplate属性支持数据模板，该模板用于显示由ItemSource提供集合中的每一项。
面板模板：ItemsPanelTemplate用于指定项的布局。 ItemsControl 类型具有一个类型为ItemsPanelTemplate 的 ItemsPanel 属性。

 

一、控件模板：如果控件的样式不能满足，可自定义控件模板来设计样式。

<Window x:Class="WpfApp6.MainWindow"
        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:WpfApp6"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ControlTemplate x:Key="roundBtnTemplte">
            <Grid>
                <Ellipse x:Name="roundBtn" Height="100" Width="100" Fill="AliceBlue"></Ellipse>
                <ContentPresenter Content="{TemplateBinding Button.Content}"></ContentPresenter>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="roundBtn"  Property="Fill" Value="Yellow"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Margin="10" Grid.Column="0" Orientation="Horizontal">
            <Button x:Name="roundBtn" Padding="5" Margin="5" Content="Round Button" Template="{StaticResource  roundBtnTemplte}"></Button>
            <Button Padding="5" Margin="5">nomal button</Button>
        </StackPanel>
    </Grid>
</Window>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp6
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

2.数据模板：内容控件通过ContentTemplate属性支持数据模板；列表控件(即继承自ItemsControl类的控件)，通过ItemTemplate属性支持数据模板，该模板用于显示由ItemSource提供集合中的每一项。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp3
{
    public class NavBarItem : INotifyPropertyChanged
    {
        public string ID { get { return Guid.NewGuid().ToString(); } }
        public string ItemName { get; set; }
        public string ItemProperty { get; set; }
        public List<NavBarItem> Children { get; set; }
        public NavBarItem()
        {
            Children = new List<NavBarItem>();
        }

      

        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, e);
        }
    }
}

 

<Window x:Class="WpfApp3.MainWindow"
        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:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <HierarchicalDataTemplate x:Key="NavDataTem" ItemsSource="{Binding Children}">
            <Border Name="myborder" BorderBrush="AliceBlue" BorderThickness="2" Margin="3">
                <StackPanel Orientation="Horizontal" Margin="0,3">
                    <CheckBox IsChecked="{Binding IsChecked}" Content=""/>
                    <Image Source="{Binding Icon}" Width="16" Height="16"></Image>
                    <TextBlock Name="txtOne" Margin="5" FontWeight="Bold" Text="{Binding ItemName}" ></TextBlock>
                    <TextBlock Name="txtTwo"  Margin="5" Text="{Binding ItemProperty}" ></TextBlock>
                </StackPanel>
            </Border>
            <HierarchicalDataTemplate.Triggers>
                <Trigger SourceName="myborder" Property="IsMouseOver" Value="True">
                    <Setter TargetName="txtOne" Property="Background" Value="LightGray"></Setter>
                    <Setter TargetName="txtTwo" Property="FontSize" Value="20"></Setter>
                </Trigger>
            </HierarchicalDataTemplate.Triggers>

        </HierarchicalDataTemplate>        
    </Window.Resources>
    <Grid>
        <StackPanel Margin="5">
 
        <TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible"  
                  ItemTemplate="{StaticResource NavDataTem}" >
 
        </TreeView>
    </StackPanel>

    </Grid>
</Window>

 

 

 

 

 

说明：控件模板和数据模板的关系

 

控件只是数据和行为的载体，至于它本身长什么样子和数据长什么样子都是靠Template决定的。决定控件外观的是ControlTemplate，决定数据外观的是DataTemplate，它们正是Control类的Template和ContentTemplate两个属性的值。
　　一般来说，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

 

3.面板模板

增加ItemsPanelTemplate调整面板布局

 

<Window x:Class="WpfApp3.MainWindow"
        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:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <HierarchicalDataTemplate x:Key="NavDataTem" ItemsSource="{Binding Children}">
            <Border Name="myborder" BorderBrush="AliceBlue" BorderThickness="2" Margin="3">
                <StackPanel Orientation="Horizontal" Margin="0,3">
                    <CheckBox IsChecked="{Binding IsChecked}" Content=""/>
                    <Image Source="{Binding Icon}" Width="16" Height="16"></Image>
                    <TextBlock Name="txtOne" Margin="5" FontWeight="Bold" Text="{Binding ItemName}" ></TextBlock>
                    <TextBlock Name="txtTwo"  Margin="5" Text="{Binding ItemProperty}" ></TextBlock>
                </StackPanel>
            </Border>
            <HierarchicalDataTemplate.Triggers>
                <Trigger SourceName="myborder" Property="IsMouseOver" Value="True">
                    <Setter TargetName="txtOne" Property="Background" Value="LightGray"></Setter>
                    <Setter TargetName="txtTwo" Property="FontSize" Value="20"></Setter>
                </Trigger>
            </HierarchicalDataTemplate.Triggers>

        </HierarchicalDataTemplate>
        <ItemsPanelTemplate x:Key="ItemsPanelTem">
            <StackPanel Orientation="Horizontal"  
                VerticalAlignment="Center"  
                HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
    </Window.Resources>
    <Grid>
        <StackPanel Margin="5">
 
        <TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible"  
                  ItemTemplate="{StaticResource NavDataTem}" ItemsPanel="{StaticResource ItemsPanelTem}">
 
        </TreeView>
    </StackPanel>

    </Grid>
</Window>