資料模板 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