ItemsControl 与 WrapPanel 作为 ItemsPanel - 组合“静态”子项和 ItemsSource

照片墙

使用 WPF 中的 ItemsControl 和 WrapPanel 可以很方便地组合“静态”子项和 ItemsSource 来展示数据。ItemsControl 是一个用于显示集合数据的控件，而 WrapPanel 则是一个面板，可以按照水平或垂直方向自动换行布局子项。

在 WPF 中，我们可以使用 ItemsControl 的 ItemsPanel 属性来指定使用的面板类型，通过将其设置为 WrapPanel，可以实现子项的自动换行布局。同时，我们可以通过设置 ItemsControl 的 ItemsSource 属性来绑定一个集合，这样就可以自动展示集合中的数据。

下面，我们将通过一个案例来演示这个功能。假设我们有一个学生列表，每个学生有姓名和年龄两个属性。我们希望以姓名和年龄的形式展示这些学生，并且按照 WrapPanel 的布局方式自动换行。

首先，我们需要创建一个 Student 类，包含 Name 和 Age 两个属性：

csharp
public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
}

接下来，我们在 XAML 中创建一个 ItemsControl，并设置其 ItemsSource 属性为一个学生列表。然后，我们将 ItemsControl 的 ItemsPanel 属性设置为 WrapPanel，这样子项就会按照 WrapPanel 的布局方式进行展示。

xaml
<ItemsControl ItemsSource="{Binding Students}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Age}" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

在代码中，我们使用了数据绑定的方式来展示学生列表。通过设置 ItemsSource 属性为 Students，ItemsControl 会自动根据数据源生成对应的子项。而在 ItemTemplate 中，我们定义了子项的展示方式，使用两个 TextBlock 分别展示学生的姓名和年龄。

现在，我们已经完成了整个界面的搭建。当我们运行程序时，就会看到学生列表以姓名和年龄的形式展示出来，并且会自动按照 WrapPanel 的布局方式进行换行。

使用 WrapPanel 实现自动换行布局

通过上述案例，我们可以看到，通过将 ItemsPanel 设置为 WrapPanel，可以很方便地实现子项的自动换行布局。这在一些需要展示动态数据的场景中非常有用，比如显示标签、照片墙等。

此外，我们还可以根据实际需求对 WrapPanel 进行一些自定义的设置，比如设置子项之间的间距、对齐方式等。通过对 WrapPanel 的属性进行调整，可以实现更加灵活多样的布局效果。

，ItemsControl 和 WrapPanel 的组合让我们在 WPF 中可以方便地展示集合数据，并实现自动换行布局。无论是展示静态的子项还是动态的数据，都能够得到很好的效果。

以上就是关于使用 ItemsControl 和 WrapPanel 组合“静态”子项和 ItemsSource 的介绍和示例代码。希望对您理解和使用这两个控件有所帮助！