ItemsControl与水平方向

你知道从ItemsControlinheritance的任何控件有水平方向的项目?

只需更改用于托pipe项目的面板:

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

虽然推广的答案是伟大的,这是一个替代如果你想项目拉伸。

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

最好的答案是好的,但我不能让它与UserControls一起工作。 如果你需要UserControls,这应该有所帮助。

ItemsControl与水平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"

这是一个如何在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> 

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

在这里输入图像说明

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

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