WPF 資料模板Data Template

【君莫笑】發表於2024-09-20

資料模板 DataTemplate 

控制元件模板決定了資料的展示形式和使用者體檢，在軟體UI設計中非常重要。同樣資料的展示形式越來越多樣化，正所謂：橫看成嶺側成峰，遠近高低各不同。同樣的資料內容，在DataGrid中的展示是文字的列表形式，在ComboBox中是下拉框的形式。給資料披上外衣，將資料和形式解耦，是一種新的發展趨勢。

1. DataGrid
a. 資料模板

DataGrid是可以自定義網格資料顯示的控制元件，透過自定義顯示的列模板，可以實現各式各樣的展現方式。列定義如下：

DataGrid的列定義，透過Binding="{Binding Name}"的方式繫結屬性，透過ElementStyle="{StaticResource one_center}"的方式繫結樣式。

DataGrid預製了幾種列展示資料的方式，如：DataGridTextColumn【文字】，DataGridCheckBoxColumn【核取方塊】，DataGridComboBoxColumn【下拉框】，DataGridHyperlinkColumn【連結】等，如果使用資料模板，則採用DataGridTemplateColumn進行定義。

UI示例如下所示：
<Window x:Class="WpfApp2.A1Window"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="資料模板示例" Height="450" Width="650">
    <Window.Resources>
        <Style x:Key="one_center" TargetType="TextBlock">
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>
        <Style x:Key="one_header" TargetType="DataGridColumnHeader">
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
            <Setter Property="BorderThickness" Value="0"></Setter>
</Style>
    </Window.Resources>
    <Grid>
        <DataGrid x:Name="one"  Margin="10" AutoGenerateColumns="False"  CanUserAddRows="False"  CanUserSortColumns="False" BorderThickness="0" >
            <DataGrid.Columns>
                <DataGridTextColumn Header="姓名" Binding="{Binding Name}" Width="*" ElementStyle="{StaticResource one_center}" HeaderStyle="{StaticResource one_header}"  />
                <DataGridTextColumn Header="年齡" Binding="{Binding Age}" Width="*" ElementStyle="{StaticResource one_center}" HeaderStyle="{StaticResource one_header}"/>
                <DataGridTextColumn Header="性別" Binding="{Binding Sex}" Width="*" ElementStyle="{StaticResource one_center}" HeaderStyle="{StaticResource one_header}"/>
                <DataGridTextColumn Header="班級" Binding="{Binding Classes}" Width="*" ElementStyle="{StaticResource one_center}" HeaderStyle="{StaticResource one_header}"/>
                <DataGridTemplateColumn Header="操作" Width="*" HeaderStyle="{StaticResource one_header}">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                                <Button x:Name="edit" Content="編輯" Width="60" Margin="3" Height="25"></Button>
                                <Button x:Name="delete" Content="刪除" Width="60" Margin="3" Height="25"></Button>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

b. 後臺資料繫結

後臺資料繫結透過ItemsSource進行賦值，繫結的資料的屬性名，要和DataGrid的列繫結資料的名稱保持一致，如下所示：

namespace WpfApp2
{
    /// <summary>
    /// A1Window.xaml 的互動邏輯
    /// </summary>
    public partial class A1Window : Window
    {
        public A1Window()
        {
            InitializeComponent();
 
            List<Student> lst = new List<Student>();
            lst.Add(new Student() { Name = "張三", Age = 22, Sex = "男", Classes = "一班" });
            lst.Add(new Student() { Name = "李四", Age = 21, Sex = "男", Classes = "二班" });
            lst.Add(new Student() { Name = "王五", Age = 20, Sex = "女", Classes = "一班" });
            lst.Add(new Student() { Name = "劉大", Age = 19, Sex = "男", Classes = "三班" });
            lst.Add(new Student() { Name = "麻子", Age = 18, Sex = "男", Classes = "四班" });
            one.ItemsSource = lst;
        }
    }
 
 
    public class Student
    {
        public string Name { get; set; }
 
        public int Age { get; set; }
 
        public string Sex { get; set; }
 
        public string Classes { get; set; }
    }
}

2. ListBox和ComboBox
a. 資料模板

ListBox，ComboBox，均是包含可選擇的項的列表，只是ListBox不需要下拉顯示，ComboBox需要下拉顯示。透過定義資料模板，可以豐富資料的展示形式。

透過ItemTemplate="{StaticResource item_template}"的形式，進行資料模板的繫結。如下所示：

<Window x:Class="WpfApp2.A2Window"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="資料模板示例" Height="450" Width="800">
    <Window.Resources>
        <DataTemplate x:Key="item_template">
            <StackPanel Orientation="Horizontal" Margin="5 ,0">
                <Border Width="10" Height="10" Background="{Binding Code}"></Border>
                <TextBlock Text="{Binding Code}" Margin="5,0" ></TextBlock>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <StackPanel Margin="3" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <ComboBox x:Name="one" Height="25" Width="120" Margin="5" ItemTemplate="{StaticResource item_template}"></ComboBox>
            <ListBox x:Name="two"  Width="120" Margin="5" ItemTemplate="{StaticResource item_template}"></ListBox>
        </StackPanel>
    </Grid>
</Window>

b. 後臺資料繫結

與DataGrid一樣，後臺透過ItemsSource進行資料的繫結。如下所示：
namespace WpfApp2
{
    /// <summary>
    /// A2Window.xaml 的互動邏輯
    /// </summary>
    public partial class A2Window : Window
    {
        public A2Window()
        {
            InitializeComponent();
            List<Color> lst = new List<Color>();
            lst.Add(new Color() { Code = "#FE8C00" });
            lst.Add(new Color() { Code = "#1F7F50" });
            lst.Add(new Color() { Code = "#AA8C00" });
            lst.Add(new Color() { Code = "#FEAA00" });
            lst.Add(new Color() { Code = "#008CAA" });
            lst.Add(new Color() { Code = "#FEBB00" });
            one.ItemsSource = lst;
            two.ItemsSource = lst;
        }
    }
 
    public class Color
    {
        public string Code { get; set; }
    }
}

3. ItemsControl
a. 資料模板

ItemsControl，主要用於展示集合資料的項，也是列表控制元件的一種。ItemsControl 需要設定兩個內容：

ItemsControl.ItemsPanel，做為資料展示的容器。

ItemsControl.ItemTemplate，用於單個資料的展示形式。

具體如下所示：

<Window x:Class="WpfApp2.A3Window"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="A3Window" Height="450" Width="800">
    <Grid>
        <ItemsControl x:Name="one">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel></WrapPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Width="50" Height="50" Margin="5" Content="{Binding Code}"></Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>
b. 後臺資料繫結

與DataGrid一樣，後臺透過ItemsSource進行資料的繫結。如下所示：

 
namespace WpfApp2
{
    /// <summary>
    /// A3Window.xaml 的互動邏輯
    /// </summary>
    public partial class A3Window : Window
    {
        public A3Window()
        {
            InitializeComponent();
            List<Test> lst = new List<Test>();
            lst.Add(new Test() { Code = "1" });
            lst.Add(new Test() { Code = "2" });
            lst.Add(new Test() { Code = "3" });
            lst.Add(new Test() { Code = "4" });
            lst.Add(new Test() { Code = "5" });
            lst.Add(new Test() { Code = "6" });
            one.ItemsSource = lst;
        }
    }
 
    public class Test
    {
        public string Code { get; set; }
    }
}

版權宣告：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連結和本宣告。

原文連結：https://blog.csdn.net/weijia3624/article/details/135269199

WPF 資料模板
2024-06-06
c++ 模板模板引數（"Template Template Parameters"）
2024-05-08
C++
模板方法模式（Template）
2019-01-19
模式
Python：Template模板字串
2020-12-31
Python字串
c++11-17 模板核心知識（十二）—— 模板的模板引數 Template Template Parameters
2020-12-04
C++
c++11-17 模板核心知識（十四）—— 解析模板之依賴型模板名稱 Dependent Names of Templates(.template/->template/::template)
2020-12-08
C++
C++開發：template，模板
2020-11-12
C++
WPF 模板總結
2024-09-20
Go HTML/template 模板使用方法
2019-10-25
GoHTML
C#WPF資料繫結模板化操作四步走
2022-01-04
C#
傳單模板：Flyer Design - Flyer Template for Indeisgn
2024-01-05
go 模板(template)的常用基本語法
2018-04-25
Go
OpenFaaS實戰之四：模板操作(template)
2021-08-03
WPF中如何使用後臺程式碼動態建立資料模板(DataTemplate)
2024-08-22
WPF Custom control and display binding and specific data
2024-08-14
ABAP，Java，JavaScript裡的字串模板String Template
2020-08-25
JavaScript字串
ajax配合art-template模板引擎的使用
2020-07-15
【ES6基礎】模板字串（Template String）
2019-04-19
字串
wpf如何安裝prism模板
2024-04-02
WPF 控制元件模板ControlTemplate
2024-09-20
控制元件
資料編織 (Data Fabric) vs 資料網格 (Data Mesh)
2022-05-06
js模板引擎art template陣列渲染的方法
2018-10-09
JS陣列
C#設計模式-模板方法模式(Template Method)
2020-10-30
C#設計模式
WPF Button Setter Template Setter.Value ControlTemplate Border ContentPresenter ControlTemplate.Triggers
2024-11-03
資料治理--模板
2024-06-07
WPF中繼承ItemsControl子類控制元件資料模板獲取選中屬性
2024-03-30
中繼繼承控制元件
資料段data、bss、rodata
2024-05-08
docker資料卷(Data Volumes)
2020-12-21
Docker
Elasticsearch之索引模板index template與索引別名index alias
2019-04-08
Elasticsearch索引Index
（六）WPF資料驅動模式
2024-10-02
模式
CDM（Conceptual Data Model，概念資料模型）和 PDM（Physical Data Model，物理資料模型）
2024-08-03
模型
【模板】資料結構
2024-08-17
資料結構
模板 - 資料結構
2024-08-09
資料結構
談談資料編織（Data Fabric）和資料網格（Data Mesh）的關係
2023-01-28
ES6, Angular,React和ABAP中的String Template（字串模板）
2018-10-22
AngularReact字串
使用C# (.NET Core) 實現模板方法模式 (Template Method Pattern)
2018-04-17
C#模式
談一談我對‘模板方法’設計模式的理解（Template）
2018-03-21
設計模式
MySQL load data載入資料
2021-12-21
MySql

WPF 資料模板Data Template

相關文章