《深入浅出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