C# 具有水平方向的 ItemsControl

ItemsControl with horizontal orientation

提问by user101375

Do you know any controls inherited from the ItemsControl that have horizontal orientation of items?

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

采纳答案by Kent Boogaart

Simply change the panel used to host the items:

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

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

回答by HockeyJ

The top answer is good, but I couldn't get it to work with UserControls. If you need UserControls, this should help.

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

ItemsControl with Horizontal Usercontrols

带有水平用户控件的 ItemsControl

My Version:

我的版本：

<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>

To bind to data, you will need to add an ItemsSourceto the ItemsControlin the XAML or code behind. Also note that uc:would be the xmlns:uc="NamespaceOfMyControl"declared at the top of the file.

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

回答by NielW

While the promoted answer is great, here's an alternative if you want the items to stretch.

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

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

回答by AndyUK

This is an example of how to do horizontal scrolling within an ItemsControl.

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

Firstly the main window viewmodel class used to get/set the list of items we wish to display.

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

MainWindowViewModel.cs

主窗口视图模型.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; }
   }
}

The main window xaml for the view:

视图的主窗口 xaml：

MainWindow.xaml

主窗口.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>

Depending on how high/wide your client area is, this will result in this kind of layout, overflow items scrolled horizontally:

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

More details can be found at this blog link, including an example on how to do the scrolling vertically:

可以在此博客链接中找到更多详细信息，包括有关如何垂直滚动的示例：

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

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