ItemControl介绍

1.展示数据，并添加样式，奇偶行拥有不同背景色

        <ItemsControl AlternationCount="2" ItemsSource="{Binding PersonItems}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Name="stackPanel" Orientation="Horizontal">
                        <TextBlock Margin="0,5,10,0" Text="{Binding ID}" />
                        <TextBlock Text="{Binding Name}" />
                    </StackPanel>
                    <DataTemplate.Triggers>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                            <Setter TargetName="stackPanel" Property="Background" Value="LightGray" />
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        private ObservableCollection<Person> personItems = new ObservableCollection<Person>()
        {
            new Person()
            {
                 ID = 1,
                 Name = $"姓名【1】",
            },
            new Person()
            {
                 ID = 2,
                 Name = "姓名【2】",
            },
            new Person()
            {
                 ID = 3,
                 Name = "姓名【3】",
            },
            new Person()
            {
                 ID = 4,
                 Name = "姓名【4】",
            },
            new Person()
            {
                 ID = 5,
                 Name = "姓名【5】",
            },
            new Person()
            {
                 ID = 6,
                 Name = "姓名【6】",
            },
            new Person()
            {
                 ID = 7,
                 Name = "姓名【7】",
            }
        };
        public ObservableCollection<Person> PersonItems
        {
            get
            {
                return personItems;
            }
            set
            {
                personItems = value;
                RaisePropertyChanged(nameof(PersonItems));
            }
        }

 2.修改数据的排布方式和增加标题

    <StackPanel>
        <ItemsControl AlternationCount="2" ItemsSource="{Binding PersonItems}">
            <!--  排布方式  -->
            <!--<ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>-->

            <ItemsControl.Template>
                <ControlTemplate TargetType="ItemsControl">
                    <DockPanel>
                        <TextBlock
                            DockPanel.Dock="Top"
                            FontSize="18"
                            Text="Header" />
                        <StackPanel IsItemsHost="True" Orientation="Horizontal" />
                        
                        <!--  如果排列方式不需要改变的话，直接用ItemsPresenter即可  -->
                        <!--<ItemsPresenter />-->

                    </DockPanel>
                </ControlTemplate>
            </ItemsControl.Template>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel
                        Name="stackPanel"
                        Width="100"
                        Height="100"
                        Orientation="Horizontal">
                        <TextBlock Text="{Binding ID}" />
                        <TextBlock Text="{Binding Name}" />
                    </StackPanel>
                    <DataTemplate.Triggers>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                            <Setter TargetName="stackPanel" Property="Background" Value="LightGray" />
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>

3. 在画布展示几何图形

 

        <ItemsControl ItemsSource="{Binding Shapes}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding Pos.X}" />
                    <Setter Property="Canvas.Top" Value="{Binding Pos.Y}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Rectangle
                        Name="rect"
                        Width="40"
                        Height="40"
                        Fill="{Binding Color}" />
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding Type}" Value="1">
                            <Setter TargetName="rect" Property="RadiusX" Value="20" />
                            <Setter TargetName="rect" Property="RadiusY" Value="20" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        private ObservableCollection<Shape> shapes = new ObservableCollection<Shape>()
        {
            new Shape() { Type =0,Pos= new Point(50,50),Color=Brushes.Red},
            new Shape() { Type =1,Pos= new Point(150,70),Color=Brushes.Green},
            new Shape() { Type =1,Pos= new Point(300,160),Color=Brushes.Blue},
            new Shape() { Type =0,Pos= new Point(240,260),Color=Brushes.Yellow}
        };
        public ObservableCollection<Shape> Shapes
        {
            get
            {
                return shapes;
            }
            set
            {
                shapes = value;
                RaisePropertyChanged(nameof(Shapes));
            }
        }

    public class Shape
    {
        public int Type { get; set; }
        public Point Pos { get; set; }
        public Brush Color { get; set; }
    }

 4.为不同数据类型应用不同模板

（1）Resources+DataTemplate（根据类型适用）

<Window
    x:Class="WpfApplication.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:local="clr-namespace:WpfApplication"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow"
    Width="400"
    SizeToContent="Height"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <StackPanel>
        <ItemsControl ItemsSource="{Binding Fruits}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="3" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.Resources>
                <DataTemplate DataType="{x:Type local:Banana}">
                    <Border
                        Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}"
                        Margin="5"
                        Background="LightYellow">
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Text="{Binding Amount, StringFormat=Amount:{0}}" />
                    </Border>
                </DataTemplate>
                <DataTemplate DataType="{x:Type local:Apple}">
                    <Button
                        Width="100"
                        Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}"
                        Margin="5"
                        Background="LightCoral">
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Text="{Binding Amount, StringFormat=Amount:{0}}" />
                    </Button>
                </DataTemplate>
            </ItemsControl.Resources>
        </ItemsControl>
    </StackPanel>
</Window>

using GalaSoft.MvvmLight;
using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Media;

namespace WpfApplication
{
    public class MainWindowViewModel: ViewModelBase
    {
        private ObservableCollection<Fruit> fruits = new ObservableCollection<Fruit>()
        {
             new Banana(){ Amount=1},
             new Apple(){ Amount=1},
             new Banana(){ Amount=2},
             new Apple(){ Amount=2},
             new Banana(){ Amount=3},
             new Apple(){ Amount=3},
             new Banana(){ Amount=4},
             new Apple(){ Amount=4},
             new Banana(){ Amount=5},
             new Apple(){ Amount=5},
             new Banana(){ Amount=6},
             new Apple(){ Amount=6},
             new Banana(){ Amount=7},
             new Apple(){ Amount=7},
             new Banana(){ Amount=8}
        };
        public ObservableCollection<Fruit> Fruits
        {
            get
            {
                return fruits;
            }
            set
            {
                fruits = value;
                RaisePropertyChanged(nameof(Fruits));
            }
        }
    }
    public class Banana : Fruit
    {

    }
    public class Apple: Fruit
    {
    }
    public class Fruit
    {
        public int Amount { get; set; }
    }
}

（2）ItemTemplateSelector+ItemContainerStyleSelector（适用绑定某个属性）

<Window
    x:Class="WpfApplication.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:local="clr-namespace:WpfApplication"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow"
    Width="400"
    SizeToContent="Height"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <StackPanel>
        <ItemsControl ItemsSource="{Binding Persons}">
            <ItemsControl.ItemTemplateSelector>
                <local:PersonTemplateSeletor>
                    <local:PersonTemplateSeletor.FemaleTemplate>
                        <DataTemplate>
                            <Border Height="200" Background="LightCyan">
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Text="{Binding Name}" />
                            </Border>
                        </DataTemplate>
                    </local:PersonTemplateSeletor.FemaleTemplate>
                    <local:PersonTemplateSeletor.MaleTemplate>
                        <DataTemplate>
                            <Border Height="200" Background="LightPink">
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Text="{Binding Name}" />
                            </Border>
                        </DataTemplate>
                    </local:PersonTemplateSeletor.MaleTemplate>
                </local:PersonTemplateSeletor>
            </ItemsControl.ItemTemplateSelector>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="3" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </StackPanel>
</Window>

 

using GalaSoft.MvvmLight;
using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApplication
{
    public class MainWindowViewModel: ViewModelBase
    {
        private ObservableCollection<Person> persons = new ObservableCollection<Person>()
        {
            new Person ()
            {
                 Name="张三",
                 Sex="男"
            },
            new Person ()
            {
                 Name="李四",
                 Sex="女"
            },
             new Person ()
            {
                 Name="张三",
                 Sex="男"
            },
            new Person ()
            {
                 Name="李四",
                 Sex="女"
            },
             new Person ()
            {
                 Name="张三",
                 Sex="男"
            },
            new Person ()
            {
                 Name="李四",
                 Sex="女"
            }
        };
        public ObservableCollection<Person> Persons
        {
            get
            {
                return persons;
            }
            set
            {
                persons = value;
                RaisePropertyChanged(nameof(Persons));
            }
        }
    }
    public class Person
    {
        public string Sex { get; set; }
        public string Name { get; set; }
    }
    public class PersonTemplateSeletor : DataTemplateSelector
    {
        public DataTemplate MaleTemplate { get; set; }
        public DataTemplate FemaleTemplate { get; set; }
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            var element = container as FrameworkElement;
            var person = item as Person;
            if (person.Sex == "男")
            {
                return MaleTemplate;
            }
            else if (person.Sex == "女")
            {
                return FemaleTemplate;
            }
            else
            {
                throw new ArgumentException();
            }
        }
    }
}