ItemsControl

最新推荐文章于 2024-11-26 15:54:19 发布

Xu_lib

最新推荐文章于 2024-11-26 15:54:19 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： WPF

本文链接：https://blog.youkuaiyun.com/Jeffxu_lib/article/details/115863476

WPF 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了WPF中的ItemsControl控件，包括其基本概念、如何显示自定义数据类型，并提供了详细的XAML配置示例。同时总结了ItemsControl的重要属性，如ItemsSource、ItemContainerStyle等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、`ItemsControl` 简介

ItemsControl 是用来表示一些条目集合的控件，它的成员是一些其它控件的集合。
其继承关系如下：
其常用的派生控件为：ListBox、ListView、ComboBox，为ItemsControl的具体实现。
ItemsControl的成员条目可以为不同的类型，如自定义的类型等。常常用于派生的ListBox、ListView、ComboBox 等控件的子条目中。

二、`ItemsControl` 控件显示数据

1、设置自定义数据类型：MyTask

    // 自定义数据类型
    public class MyTask
    {
        public int TaskPriority { set; get; }
        public string TaskName { set; get; }
        public string TaskDescription { set; get; }

        public MyTask(int taskPriority,string taskName,string taskDescription)
        {
            TaskPriority = taskPriority;
            TaskName = taskName;
            TaskDescription = taskDescription;
        }
    }
    // 设置绑定数据的类型
    public class MyTodoList:ObservableCollection<MyTask>
    {
        public MyTodoList()
        {
            Add(new MyTask(2, "Shopping", "go to shopping today"));
            Add(new MyTask(2, "Laundry", "need to Laundry" ));
            Add(new MyTask(1, "Email", "Remember set a email" ));
            Add(new MyTask(3,"Clean","Clean my Office" ));
            Add(new MyTask(1, "Dinner", "go to dinner" ));
            Add(new MyTask(2, "Proposals", "make a Proposals" ));
        }
    }

2、将其自定义的数据类型添加到XAML文件的资源中：

    <Window.Resources>
        <ResourceDictionary>
            <!--创建一个MyTodoList 类型的实例，并将其作为资源-->
            <local:MyTodoList x:Key="myTodoList"/>
        </ResourceDictionary>
    </Window.Resources>

3、创建ItemsControl控件，并将其ItemsSource属性绑定到以上自定义数据，以显示上面的数据

        <!--创建ItemsControl，让其条目的数值为绑定的数据源的值-->
        <ItemsControl Grid.Row="1" Grid.Column="0" Margin="10" ItemsSource="{Binding Source={StaticResource myTodoList}}">
            <ItemsControl.Template>    <!--ItemsControl作为一个容器，设置其整体的外观-->
                <ControlTemplate TargetType="ItemsControl">
                    <Border BorderBrush="Red" BorderThickness="6" CornerRadius="30">
                        <ItemsPresenter/>
                    </Border>
                </ControlTemplate>
            </ItemsControl.Template>
            <ItemsControl.ItemsPanel>  <!--设置该容器中子控件的布局类型为 WrapPanel-->
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate> <!--设置容器中每个条目的模板-->
                <DataTemplate>
                    <DataTemplate.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="FontSize" Value="14"/>
                            <Setter Property="HorizontalAlignment" Value="Center"/>
                        </Style>
                    </DataTemplate.Resources>
                    <Grid>
                        <Ellipse Fill="Silver"/>
                        <StackPanel>
                            <TextBlock Margin="3,3,3,0" Text="{Binding Path=TaskPriority}"/>
                            <TextBlock Margin="3,0,3,7" Text="{Binding Path=TaskName}"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle> <!--设置容器中每个子控件的样式，如尺寸及Triggers等-->
                <Style>
                    <Setter Property="Control.Width" Value="100"/>
                    <Setter Property="Control.Margin" Value="5"/>
                    <Style.Triggers>
                        <Trigger Property="Control.IsMouseOver" Value="True">
                            <Setter Property="Control.ToolTip" 
                                    Value="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Content.TaskDescription}"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>

4、运行结果如下图所示：
在这里插入图片描述

三、重要属性总结

1、ItemsSource：主要用来绑定到数据源，以将数据填充到ItemsControl中。如：
ItemsSource="{Binding Source={StaticResource placesData}}"

2、ItemContainerStyle：其类型为Style，用来设置ItemsControl对应item的外观样式。可在资源中设置该属性，以控制每个items的样式Style。如：
ItemContainerStyle="{StaticResource lsty}"

3、ItemsPanel：设置items如何进行布局，如：是以StackPanel的形式，还是以Grid的形式来显示ItemsControl包含的所有元素。

4、ItemTemplate：其类型为DataTemplate，由于控件对应的条目主要就是用来显示数据的，所以其条目模板在此就是用来设置数据显示样式的，如上面的DataTemplate设定数据的显示方式。【注意：与第二点的区别，ItemContainerStyle对应的是每个具体item的样式style；而第四点对应的是每个item的模板Template，用于自定义数据显示的样式】