项目控制与水平方向

小开

最佳答案

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

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

小开

上面的答案很好，但我不能让它与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或后面代码中的ItemsControl中添加ItemsSource。还要注意，uc:将是在文件顶部声明的xmlns:uc="NamespaceOfMyControl"。

小开

虽然推广的答案很好，但如果你想要扩展项目，这里有一个替代方案。

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

小开

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

小开

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