수평 방향으로 제어


답변:


463

항목을 호스팅하는 데 사용되는 패널을 변경하기 만하면됩니다.

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

IsItemsHost = "True"를 StackPanel에 추가 할 필요가 없습니까?
Thomas Levesque

5
전체 컨트롤을 다시 템플릿으로 편집하는 경우에만 필요하다고 생각합니다. msdn.microsoft.com/en-us/library/…를
Kent Boogaart

3
답변은 Silverlight
Scott

리소스 파일에서이 작업을 수행하는 방법은 무엇입니까?
Florian

리소스 파일에서이 작업을 수행하려면 x : Key 키
Tore Aurstad

32

프로모션 답변은 훌륭하지만 항목을 늘리려면 대안이 있습니다.

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

당신이 UWP를 사용하는 경우, 당신은 여기에서 UWP-UniformGrid가 필요합니다 github.com/rickapps/UWP-UniformGrid-Control를 . 방금 위의 NielW 솔루션과 함께 구현했습니다. 정말 쉽고 문제를 해결합니다.
Gail Foad

9

가장 좋은 대답은 좋지만 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받는 ItemsControlXAML 또는 코드 뒤에. 또한 파일 맨 위에 선언 uc:될 것 xmlns:uc="NamespaceOfMyControl"입니다.


나는 WPF를 사용하는 데 익숙하지 않으므로 아마도 내가 말할 것은 매우 기본적인 것입니다. UserControl 내에서 "Window.Resources"대신 "UserControl.Resources"를 사용해야한다는 것을 알았습니다. 어쨌든 큰 대답에 감사드립니다. 내 문제가 해결되었습니다.
Paulo André Haacke

9

이것은 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/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.