WPF之DataTemplateSelector的运用

2023-12-29 14:03:46

本文主要记录WPF中DataTemplateSelector的运用，数据模板选择器主要运用在一些项容器中用于根据不同的数据类型选择不同的DataTemplate，以便展示不同的数据。在此以在listbox显示字符串和一个颜色块来说明DataTemplateSelector的运用。

DataTemplateSelector运用的核心是需继承DataTemplateSelector类并重写其DataTemplateSelector方法，在UI上实现不同类型的DataTemplate,并将这不同的DataTemplate赋值给listbox的ItemTemlateSelector。

在一个listbox中显示文本还有颜色块，显示文本和颜色是两种不同的数据类型，实际项目中可以根据需要用不同的class类型设置不同的样式和模板，效果图如下：

以下为代码：

 public class DataModel1
    {
        public string Name { get; set; }
        public DataModel1(string name)
        {
            Name = name;
        }
    }

    public class DataModel2
    {
        public Brush Color { get; set; }
        public DataModel2(Brush color)
        {
            Color = color;
        }
    }

    public class DataModel
    {
        public Object Ob { get; set; }
        public string TypeName { get; set; }
    }

  public class ListBoxDataTemplateSelector : DataTemplateSelector
    {
        public DataTemplate Template1 { get; set; }
        public DataTemplate Template2 { get; set; }
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            Type t = item.GetType();
            string typeName = null;
            PropertyInfo[] properties = t.GetProperties();
            foreach (PropertyInfo pi in properties)
            {
                if (pi.Name == "TypeName")
                {
                    typeName = pi.GetValue(item, null).ToString();
                    break;
                }
            }
            switch (typeName)
            {
                case "txt":
                    return Template1;
                case "color":
                    return Template2;
                default:
                    return null;

            }
        }
    }

Xaml:

Window x:Class="ListBoxExample.MainWindow"
        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:ListBoxExample"
        mc:Ignorable="d" Name="MainWindow1"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ControlTemplate x:Key="Template1">
            <TextBlock Text="{Binding Ob.Name}"/>
        </ControlTemplate>
        <ControlTemplate x:Key="Template2">
            <Border  Height="30" Width="90" Background="{Binding Ob.Color}"></Border>
        </ControlTemplate>
        <local:ListBoxDataTemplateSelector x:Key="ListBoxDataTemplateSelector">
            <local:ListBoxDataTemplateSelector.Template1>
                <DataTemplate>
                    <ContentControl Template="{StaticResource Template1}"></ContentControl>
                </DataTemplate>
            </local:ListBoxDataTemplateSelector.Template1>
            <local:ListBoxDataTemplateSelector.Template2>
                <DataTemplate>
                    <ContentControl Template="{StaticResource Template2}"></ContentControl>
                </DataTemplate>
            </local:ListBoxDataTemplateSelector.Template2>
        </local:ListBoxDataTemplateSelector>
    </Window.Resources>
    <Grid Name="grid0" Width="100" Height="200">
        <ListBox Name="list0" ItemTemplateSelector="{StaticResource ListBoxDataTemplateSelector}"  ItemsSource="{Binding Datas}"  >

        </ListBox>
    </Grid>
</Window>

数据的初始化和绑定：

 /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var vm = new Vm();
            this.DataContext = vm;
          
        }
    }

    public class Vm
    {
        private ObservableCollection<DataModel> _Datas = new ObservableCollection<DataModel>();
        public ObservableCollection<DataModel> Datas
        {
            get { return _Datas; }
            set { _Datas = value; }
        }
       
        public Vm()
        {
            DataModel a1 = new DataModel { Ob = new DataModel1("This is name1"), TypeName = "txt" };
            DataModel a2 = new DataModel { Ob = new DataModel2(Brushes.Red), TypeName = "color" };
            DataModel a3 = new DataModel { Ob = new DataModel2(Brushes.Green), TypeName = "color" };
            DataModel a4 = new DataModel { Ob = new DataModel1("This is name2"), TypeName = "txt" };
            DataModel a5 = new DataModel { Ob = new DataModel2(Brushes.GreenYellow), TypeName = "color" };
            _Datas.Add(a1);
            _Datas.Add(a2);
            _Datas.Add(a3);
            _Datas.Add(a4);
            _Datas.Add(a5);
        }
    }

以上是DataTemplateSelector的用法，下一小节将在此基础上增加左键单击，左键双击，右键单击及选中的交互用法。

WPF之DataTemplateSelector的运用

码农公寓

相关文章