ItemsControl c горизонтальной ориентацией
знаете ли вы какие-либо элементы управления, унаследованные от ItemsControl, которые имеют горизонтальную ориентацию элементов?
4 ответа:
просто измените панель, используемую для размещения элементов:
<ItemsControl ...> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl>
хотя продвигаемый ответ велик, вот альтернатива, если вы хотите, чтобы элементы растягивались.
<ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel>
верхний ответ хорош, но я не мог заставить его работать с UserControls. Если вам нужны UserControls, это должно помочь.
управления ItemsControl с горизонтальным элементы управления UserControl
Мой Вариант:
<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
доItemsControl
в XAML или коде позади. Также обратите внимание, что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>
в зависимости от того, насколько высока/широка ваша клиентская область, это приведет к такому макету, элементам переполнения прокручивается по горизонтали:
более подробную информацию можно найти по этой ссылке в блоге, в том числе пример о том, как сделать прокрутку по вертикали: