教你如何理解WPF中的Template类-wpf template

解释Template定义

Template用于定义控件结构（Visual Tree），和Style有点容易混淆，每个控件初始没有Style属性，而在WPF中所有的控件都有默认的Template。

列举Template结构

FrameworkTemplate & ControlTemplate

ControlTemplate 添加了两个属性： TargetType，Triggers

举例各种Template 1. ControlTempalte - 自定义BUTTON

"WpfApplication1.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="300" Width="300">
    
        "ItemsPanelTemplate1">
            "True" Orientation="Horizontal"/>
        
    
    
        "10,10,22,73" Name="listBox1" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" />

效果:

2. ItemsTemplate - 自定义ListBox对齐方式

"WpfApplication1.Window2"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="300" Width="300">
    
        "ItemsPanelTemplate1">
            "True" Orientation="Horizontal"/>
        
    
    
        "10,10,22,73" Name="listBox1" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" />

TIP: VirtualizingStackPanel 可以替换为其他ItemsPanel，如WrapPanel，StackPanel，UnifromGrid等。

3. DataTemplate - 自定义ListBox ItemTemplate

页面代码

"WpfApplication1.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="351" Width="473" xmlns:WpfApplication1="clr-namespace:WpfApplication1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    
        "ItemsPanelTemplate1">
            "Auto" Height="Auto" Columns="5" Rows="3"/>
        
        "DataTemplate1">
            "111" Width="119" x:Name="grid" Background="#33ECF678">
                "Left" Margin="8,8,0,0" VerticalAlignment="Top" Width="103" Height="96" OpacityMask="#FFFFFFFF" Source="{Binding Path=ImageSource, Mode=Default}"/>
            
        
        "MyDataDS" ObjectType="{x:Type WpfApplication1:MyData}" d:IsDataSource="True"/>
    
    
        "listbox1" Margin="10,10,8,8" ItemsSource="{Binding}"  ItemsPanel="{DynamicResource ItemsPanelTemplate1}" ItemTemplate="{DynamicResource DataTemplate1}" Background="#3FDEF5E3" />

逻辑代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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.Shapes;
using System.IO;

namespace WpfApplication1
{
    /// 
    /// Interaction logic for Window2.xaml
    /// 
    public partial class Window2 : Window
    {
        public Window2()
        {

            InitializeComponent();


            listbox1.DataContext = GetPictures();
            
            
        }

        private IEnumerable GetPictures()
        {
            foreach(string str in Directory.GetFiles(@"C:\Users\Public\Pictures\Sample Pictures"))
                yield return new MyData() {ImageSource = str};
        }


    }

    public class MyData
    {
        public string ImageSource { get; set; }
    }
}

效果

我眼中的最佳实践

1. Please USE Blend to Customize Templates

请使用Blend来自定义模板

2. USE BasedOn Property Of Style

使用Style上的BasedOn属性

3. 使用共享资源，达到样式&Template重用

HOW: 在App.xaml中设置独立资源，或者使用外部资源

【编辑推荐】