항목의 가로 방향이있는 ItemsControl에서 상속 된 컨트롤을 알고 있습니까?
항목의 가로 방향이있는 ItemsControl에서 상속 된 컨트롤을 알고 있습니까?
답변:
항목을 호스팅하는 데 사용되는 패널을 변경하기 만하면됩니다.
<ItemsControl ...>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
프로모션 답변은 훌륭하지만 항목을 늘리려면 대안이 있습니다.
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
가장 좋은 대답은 좋지만 UserControls와 함께 작동하지 못했습니다. 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
받는 ItemsControl
XAML 또는 코드 뒤에. 또한 파일 맨 위에 선언 uc:
될 것 xmlns:uc="NamespaceOfMyControl"
입니다.
이것은 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>
클라이언트 영역의 높이 / 넓이에 따라 이런 종류의 레이아웃이 생성되고 오버플로 항목이 가로로 스크롤됩니다.
세로로 스크롤하는 방법에 대한 예를 포함하여이 블로그 링크에서 자세한 내용을 확인할 수 있습니다.