ItemsControl详解

最新推荐文章于 2025-05-05 08:47:14 发布

我转的头好晕

最新推荐文章于 2025-05-05 08:47:14 发布

阅读量171

点赞数 8

分类专栏： WPF 文章标签： c# wpf

本文链接：https://blog.csdn.net/m0_72613306/article/details/147701012

版权

WPF 专栏收录该内容

3 篇文章

订阅专栏

1.奇偶行拥有不同背景色 AlternationIndex

<ItemsControl ItemsSource="{Binding Stars}" AlternationCount="2">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Padding="10"
                    Name="border">
                <TextBlock Text="{Binding}" />
            </Border>
            <DataTemplate.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex"
                         Value="1">
                    <Setter TargetName="border"
                            Property="Background"
                            Value="LightGray" />
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

2.修改数据排布方式 ItemsPanel

<ItemsControl ItemsSource="{Binding Stars}" AlternationCount="2">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Padding="10"
                    Name="border">
                <TextBlock Text="{Binding}" />
            </Border>
            <DataTemplate.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex"
                         Value="1">
                    <Setter TargetName="border"
                            Property="Background"
                            Value="LightGray" />
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

3.添加标题 Template

<ItemsControl ItemsSource="{Binding Stars}" AlternationCount="2">
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <DockPanel>
                <TextBlock Text="七大行星"
                           FontSize="18"
                           DockPanel.Dock="Top" />
                <ItemsPresenter />
            </DockPanel>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Padding="10"
                    Name="border">
                <TextBlock Text="{Binding}" />
            </Border>
            <DataTemplate.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex"
                         Value="1">
                    <Setter TargetName="border"
                            Property="Background"
                            Value="LightGray" />
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

IsItemsHost属性相当于设置为true之后，相当于设置了ItemsPanel

<ItemsControl.Template>
    <ControlTemplate TargetType="ItemsControl">
        <DockPanel>
            <TextBlock Text="七大行星"
                       FontSize="18"
                       DockPanel.Dock="Top" />
            <StackPanel IsItemsHost="True" />
        </DockPanel>
    </ControlTemplate>
</ItemsControl.Template>

4.用画布绘制几何图形 ItemTemplate+ItemContainerStyle

<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 Width="40"
                       Name="rect"
                       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>

5.为不同的数据类型添加不同的模板（类型不同）Resource+DataTemplate

<ItemsControl Margin="5" ItemsSource="{Binding Fruits}" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="3"></UniformGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type local:Apple}">
            <Border BorderThickness="1"
                    BorderBrush="Gray"
                    Margin="5"
                    Width="200"
                    Background="LightCoral"
                    Height="{Binding RelativeSource={RelativeSource Self},Path=ActualWidth}">
                <TextBlock Text="{Binding Amount,StringFormat=Amount:{0}}" />
            </Border>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Banana}">
            <Button BorderThickness="1"
                    BorderBrush="Gray"
                    Background="LightYellow"
                    Margin="5"
                    Width="200"
                    Height="{Binding RelativeSource={RelativeSource Self},Path=ActualWidth}">
                <TextBlock Text="{Binding Amount,StringFormat=Amount:{0}}" />
            </Button>
        </DataTemplate>
    </ItemsControl.Resources>
</ItemsControl>

<local:EmployeeTemplateSelector.MaleTemplate>
    <DataTemplateSelector>
        <Border Height="200" Background="LightCyan">
            <TextBlock Text="{Binding Name}" />
        </Border>
    </DataTemplateSelector>
</local:EmployeeTemplateSelector.MaleTemplate>
<local:EmployeeTemplateSelector.FemaleMaleTemplate>
    <DataTemplateSelector>
        <Border Height="200"
                Background="LightPink">
            <TextBlock Text="{Binding Name}" />
        </Border>
    </DataTemplateSelector>
</local:EmployeeTemplateSelector.FemaleMaleTemplate>

6.为不同数据类型（类型相同属性不同）ItemTemplateSelector

public class EmployeeTemplateSelector : 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 employee = item as Employee;
        return employee.Gender switch
        {
            Gender.Male => MaleTemplate,
            Gender.Female => FemaleTemplate,
            _ => throw new ArgumentException()
        };
    }

}

<ItemsControl Margin="5"
              ItemsSource="{Binding Employees}" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="3"></UniformGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplateSelector>
        <local:EmployeeTemplateSelector>
            <local:EmployeeTemplateSelector.MaleTemplate>
                <DataTemplate>
                    <Border Height="200"
                            Background="LightCyan">
                        <TextBlock Text="{Binding Name}" />
                    </Border>
                </DataTemplate>
            </local:EmployeeTemplateSelector.MaleTemplate>
            <local:EmployeeTemplateSelector.FemaleTemplate>
                <DataTemplate>
                    <Border Height="200"
                            Background="LightPink">
                        <TextBlock Text="{Binding Name}" />
                    </Border>
                </DataTemplate>
            </local:EmployeeTemplateSelector.FemaleTemplate>
        </local:EmployeeTemplateSelector>
        
    </ItemsControl.ItemTemplateSelector>
</ItemsControl>