The use of WPF's DataTemplateSelector

This paper records the DataTemplateSelector use in WPF, the template data used in the main selector for selecting a number of different items in a container according to different data types DataTemplate to display different data. The string and to display a color block explained using DataTemplateSelector the listbox.

DataTemplateSelector the use of the core is to be inherited DataTemplateSelector class and override its DataTemplateSelector methods to achieve different types of DataTemplate on the UI, and that different DataTemplate assigned to the listbox ItemTemlateSelector.

There text color block in a listbox, a text, and color are two different types of data, the actual project can set a different styles and types of templates with a different class, the effect is as follows:

 

The following is the code:

 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>

Data initialization and binding:

 ///  <Summary> 
    /// interaction logic of MainWindow.xaml
     ///  </ Summary> 
    public  partial  class the MainWindow: the 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);
        }
    }

These are the usage DataTemplateSelector, the next section will increase left click, left click, right-click and select the interactive use on this basis.