具有水平方向的ItemsControl

Question

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

Answer 1

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

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

Answer 2

顶端回答是好，但我无法得到它与用户控件工作。如果你需要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> 

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

Answer 3

虽然推广的答案很好，但如果您想要项目拉伸，以下是一个替代方案。

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

Answer 4

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

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

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/