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

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

背景

模板机制用于实现控件数据算法的内容与外观的解耦。

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

模板机制

模板分类

数据外衣DataTemplate

常用场景

事件驱动和数据驱动的区别

示例代码

使用DataTemplate实现数据样式

<Window x:Class="TemplateDemo.DataTemplateView"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="DataTemplateView" Height="450" Width="800"><Window.Resources><local:AutoMaker2PhotoPathConverter x:Key="a2p"></local:AutoMaker2PhotoPathConverter><local:Name2PhotoPathConverter x:Key="n2p"></local:Name2PhotoPathConverter><DataTemplate x:Key="detailTemplate"><Border BorderBrush="Black"  BorderThickness="1" CornerRadius="6"><StackPanel Margin="5"><Image x:Name="img1" Height="250" Width="400" Source="{Binding Name,Converter={StaticResource n2p}}"></Image><StackPanel Orientation="Horizontal"><TextBlock Text="Name:" FontSize="25" FontWeight="Bold"></TextBlock><TextBlock x:Name="tblName" FontSize="25" FontWeight="Bold" Text="{Binding Name}"></TextBlock></StackPanel><StackPanel Orientation="Horizontal"><TextBlock Text="AutoMaker:" Margin="5"></TextBlock><TextBlock x:Name="tblAutoMaker" Margin="5" Text="{Binding AutoMaker}"></TextBlock><TextBlock Text="Year:" Margin="5"></TextBlock><TextBlock x:Name="tblYear" Margin="5" Text="{Binding Year}"></TextBlock><TextBlock Text="TopSpeed::" Margin="5"></TextBlock><TextBlock x:Name="tblTopSpeed" Margin="5" Text="{Binding TopSpeed}"></TextBlock></StackPanel></StackPanel></Border></DataTemplate><DataTemplate x:Key="carListItem"><Border BorderBrush="Black" CornerRadius="6" BorderThickness="1"><StackPanel Margin="5" Orientation="Horizontal"><Image Source="{Binding Name,Converter={StaticResource n2p}}" Width="64" Height="64"></Image><StackPanel><TextBlock Text="{Binding Name}"></TextBlock><TextBlock Text="{Binding Year}"></TextBlock></StackPanel></StackPanel></Border></DataTemplate></Window.Resources><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="200*"></ColumnDefinition><ColumnDefinition Width="100*"></ColumnDefinition></Grid.ColumnDefinitions><UserControl x:Name="ucCarDetail" Grid.Column="0" ContentTemplate="{StaticResource  detailTemplate}" Content="{Binding ElementName=listBoxCar,Path=SelectedItem}"></UserControl><ListBox x:Name="listBoxCar" Grid.Column="1" ItemTemplate="{StaticResource carListItem}"></ListBox></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.Shapes;namespace TemplateDemo
{/// <summary>/// DataTemplateView.xaml 的交互逻辑/// </summary>public partial class DataTemplateView : Window{public DataTemplateView(){InitializeComponent();GetCarData();}public void GetCarData(){List<Car> cars = new List<Car>(){new Car{Name="avatar1",Year="1998",Automaker="CN",TopSpeed="300"},new Car{Name="avatar2",Year="1999",Automaker="CN",TopSpeed="350"},new Car{Name="avatar3",Year="2000",Automaker="CN",TopSpeed="400"}};this.listBoxCar.ItemsSource = cars;}}
}

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();}}
}

代码说明

控件外衣ContentTemplate

用途

                                                                                   

使用blend观看控件内部

<Window x:Class="TemplateDemo.ControlTemplate"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="ControlTemplate" Height="300" Width="400"><Window.Resources><Style x:Key="RoundCornerTextBox" BasedOn="{x:Null}" TargetType="TextBox"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TextBox"><Border CornerRadius="5" x:Name="bd" SnapsToDevicePixels="True"BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"><ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"></ScrollViewer></Border></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Window.Background><LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"><GradientStop Color="Orange" Offset="0"></GradientStop><GradientStop Color="White" Offset="1"></GradientStop></LinearGradientBrush></Window.Background><StackPanel><TextBox Width="120" Height="40" Style="{StaticResource RoundCornerTextBox}" BorderBrush="Black" Margin="5"></TextBox><TextBox Width="120" Height="40" Style="{StaticResource RoundCornerTextBox}" BorderBrush="Black" Margin="5"></TextBox><Button Width="120" Height="40"  Content="点击一下" Margin="5"></Button></StackPanel>
</Window>

<Window x:Class="TemplateDemo.PanelTemplate"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="PanelTemplate" Height="450" Width="800"><Grid><ListBox><ListBox.ItemsPanel><ItemsPanelTemplate><StackPanel Orientation="Vertical"></StackPanel>              </ItemsPanelTemplate></ListBox.ItemsPanel><TextBlock Text="郭靖"></TextBlock><TextBlock Text="黄蓉"></TextBlock><TextBlock Text="杨康"></TextBlock><TextBlock Text="穆念慈"></TextBlock></ListBox></Grid>
</Window>

---

Git地址

GitHub - wanghuayu-hub2021/WpfBookDemo: 深入浅出WPF的demo