水平方向的 ItemsControl

Posted 2023-04-01

【中文标题】水平方向的 ItemsControl

【英文标题】：ItemsControl with horizontal orientation

【发布时间】：2009-06-27 07:51:34

【问题描述】：

您知道从 ItemsControl 继承的任何具有水平方向的项目的控件吗？

【参考方案1】：

只需更改用于托管项目的面板：

<ItemsControl ...>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

【讨论】：

您不需要将 IsItemsHost="True" 添加到 StackPanel 吗？

我相信只有在您重新模板化整个控件时才有必要这样做。见msdn.microsoft.com/en-us/library/…

答案也适用于 Silverlight

如何在资源文件中做到这一点？

我希望你可以在主标签中做类似StackPanel.Orientation="Horizontal" 的事情！

【参考方案2】：

虽然提升的答案很棒，但如果您希望项目伸展，这里有一个替代方案。

<ItemsControl.ItemsPanel>                              
    <ItemsPanelTemplate>
        <UniformGrid Rows="1" />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>   

【讨论】：

如果您使用的是 UWP，则需要 UWP-UniformGrid 来自此处：github.com/rickapps/UWP-UniformGrid-Control。我刚刚实现了它加上上面 NielW 的解决方案。真的很容易解决问题。

【参考方案3】：

这是一个如何在 ItemsControl 中进行水平滚动的示例。

首先是用于获取/设置我们希望显示的项目列表的主窗口视图模型类。

MainWindowViewModel.cs

using System.Collections.Generic;

namespace ItemsControl

   public class Item
   
      public Item(string title)
      
         Title = title;
      

      public string Title  get; set; 
   

   public class MainWindowViewModel
   
      public MainWindowViewModel()
      
         Titles = new List<Item>()
         
            new Item("Slide 1"),
            new Item("Slide 2"),
            new Item("Slide 3"),
            new Item("Slide 4"),
            new Item("Slide 5"),
            new Item("Slide 6"),
            new Item("Slide 7"),
            new Item("Slide 8"),
         ;
      

      public List<Item> Titles  get; set; 
   

视图的主窗口 xaml：

MainWindow.xaml

    <Window x:Class="ItemsControl.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:ItemsControl"      
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="400">

    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>

    <Grid Margin="5">
        <ScrollViewer
            VerticalScrollBarVisibility="Disabled"
            HorizontalScrollBarVisibility="Auto">

            <ItemsControl
                x:Name="SearchResultList"                
                ItemsSource="Binding Titles">

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border
                            Margin="5"
                            BorderThickness="1"
                            BorderBrush="Aqua">

                            <TextBlock
                                Text="Binding Title"
                                HorizontalAlignment="Center"                               
                                VerticalAlignment="Top"
                                FontSize="12"
                                TextWrapping="Wrap"
                                TextAlignment="Center"
                                FontWeight="DemiBold"  
                                Width="150"
                                Height="150" />
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

            </ItemsControl>
        </ScrollViewer>

    </Grid>
</Window>

根据您的客户区的高度/宽度，这将导致这种布局，溢出项目水平滚动：

更多细节可以在这个博客链接中找到，包括一个关于如何垂直滚动的例子：

http://www.technical-recipes.com/2017/how-to-orient-wrappanel-items-within-itemscontrol-lists-vertically-and-horizontally/

【参考方案4】：

最佳答案很好，但我无法让它与 UserControls 一起使用。如果您需要 UserControls，这应该会有所帮助。

ItemsControl with Horizontal Usercontrols

我的版本：

<Window.Resources>
    <DataTemplate x:Key="ItemTemplate2">
        <StackPanel>
            <uc:MyUserControl MinWidth="20" BorderBrush="Black" BorderThickness="0.1" />
        </StackPanel>
    </DataTemplate>

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <StackPanel Orientation="Horizontal" Margin="0,0,0,0"/>
    </ItemsPanelTemplate>
</Window.Resources>

<StackPanel>
    <ItemsControl x:Name="list_MyControls"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Top"
                  Margin="0,8,0,0"
                  ItemTemplate="StaticResource ItemTemplate2"
                  ItemsPanel="StaticResource ItemsPanelTemplate1" />
</StackPanel>

要绑定到数据，您需要在 XAML 或后面的代码中将 ItemsSource 添加到 ItemsControl。另请注意，uc: 将是文件顶部声明的xmlns:uc="NamespaceOfMyControl"。

【讨论】：

我不习惯使用 WPF，所以也许我会说的是非常基本的东西。我发现在 UserControl 中你应该使用“UserControl.Resources”而不是“Window.Resources”。无论如何，感谢您的出色回答，解决了我的问题。

【参考方案5】：

对于包含数百甚至数千个项目的长列表，您最好使用VirtualizingStackPanel 以避免性能问题。

【讨论】：

这是一个 11 年前的问题，我希望它已经得到解决；）

刚刚添加此评论以使解决方案更完整 :) 因为您知道，这个 WPF，它是如此不友好的框架，有时无法预测，并且最新的 VS 2019 崩溃非常烦人 XD