logo标签列表

具有水平方向的ItemsControl

c#wpfwpf-controls
251

你知道有哪些从ItemsControl继承的控件具有水平方向的项目布局吗？

5个回答
527

只需更改用于承载项目的面板：

<ItemsControl ...>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>
5
只有在重新模板化整个控件时才需要这样做。请参阅http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemspanel.aspx。 - Kent Boogaart
3
答案同样适用于Silverlight。 - Scott
如何在资源文件中实现此功能？ - Florian
2
希望你能在主标签中像这样做：StackPanel.Orientation="Horizontal"！ - Jonathan Tuzman
1
为了让每个人都清楚（即使是XAML/WPF/UWP新手），您应该将ItemsControl.ItemsPanel添加到您的ItemsControl中，而不是用ItemsControl.ItemsPanel替换ItemsControl.ItemTemplate。 - Pedro Martins Timóteo da Costa
显示剩余3条评论
37

虽然宣传的答案很好，但如果您想要商品拉伸，这里有一个替代方案。

<ItemsControl.ItemsPanel>                              
    <ItemsPanelTemplate>
        <UniformGrid Rows="1" />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
如果您正在使用UWP，则需要从此处获取UWP-UniformGrid：https://github.com/rickapps/UWP-UniformGrid-Control。我刚刚实现了它以及上面的NielW解决方案。非常简单，解决了问题。 - Gail Foad
12

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

10

最佳答案不错，但我无法将其与用户控件一起使用。如果您需要使用UserControls，则应该可以帮助您。

具有水平用户控件的ItemsControl

我的版本：

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

我不太习惯使用WPF，所以我说的可能是非常基础的东西。我发现在UserControl中应该使用"UserControl.Resources"而不是"Window.Resources"。无论如何，感谢您提供的出色答案，解决了我的问题。 - Paulo André Haacke
1

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

这是一个11年前的问题，我希望它已经得到解决了 ;) - AntLaC
2
刚刚添加了这个评论，让解决方案更完整 :) 因为你知道，这个WPF框架非常不友好，有时候是不可预测的，而且最新的VS 2019崩溃问题非常烦人 XD - Evgenii
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接