教你如何理解WPF中的Template類
作者：xwang
本文將你教你如何理解WPF中的Template類。文章由以下部分組成：解釋Template定義、舉Template結(jié)構(gòu)、舉例各種Template、我眼中的最佳實(shí)踐。
解釋Template定義
Template用于定義控件結(jié)構(gòu)（Visual Tree），和Style有點(diǎn)容易混淆，每個(gè)控件初始沒有Style屬性，而在WPF中所有的控件都有默認(rèn)的Template。
列舉Template結(jié)構(gòu)
FrameworkTemplate & ControlTemplate
ControlTemplate 添加了兩個(gè)屬性： 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; }
}
} 效果
我眼中的最佳實(shí)踐
1. Please USE Blend to Customize Templates
請使用Blend來自定義模板
2. USE BasedOn Property Of Style
使用Style上的BasedOn屬性
3. 使用共享資源，達(dá)到樣式&Template重用
HOW: 在App.xaml中設(shè)置獨(dú)立資源，或者使用外部資源
【編輯推薦】
責(zé)任編輯：彭凡
來源：
cnblogs
