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,包括一个关于如何垂直滚动的例子: