ItemsControl với hướng ngang

Question

Bạn có biết bất kỳ điều khiển nào được kế thừa từ ItemsControl có định hướng ngang của các mục không?

Answer 1

Đơn giản chỉ cần thay đổi bảng điều khiển sử dụng để lưu trữ các mục:

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

Answer 2

Câu trả lời đầu là tốt, nhưng tôi không thể có được nó để làm việc với UserControls. Nếu bạn cần UserControls, điều này sẽ giúp.

ItemsControl with Horizontal Usercontrols

Version tôi:

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

Để liên kết với dữ liệu, bạn sẽ cần phải thêm một ItemsSource đến ItemsControl trong XAML hoặc mã phía sau. Cũng lưu ý rằng uc: sẽ là xmlns:uc="NamespaceOfMyControl" được khai báo ở đầu tệp.

Answer 3

Trong khi câu trả lời được thăng hạng là tuyệt vời, đây là giải pháp thay thế nếu bạn muốn các mục này kéo dài.

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

Answer 4

Đây là ví dụ về cách cuộn ngang trong một ItemsControl.

Đầu tiên là lớp chế độ xem khung cửa sổ chính được sử dụng để lấy/đặt danh sách các mục mà chúng tôi muốn hiển thị.

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; } 
    } 
} 

Cửa sổ chính XAML cho quan điểm:

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> 

Tùy thuộc vào độ cao như thế nào/rộng diện tích khách hàng của bạn là , điều này sẽ dẫn đến loại bố cục này, mục bị tràn được cuộn theo chiều ngang:

Thông tin chi tiết có thể được tìm thấy tại liên kết blog này, trong đó có một ví dụ về cách thực hiện di chuyển theo chiều dọc:

http://www.technical-recipes.com/2017/how-to-orient-wrappanel-items-within-itemscontrol-lists-vertically-and-horizontally/