Kontrol Items dengan orientasi horizontal


225

Apakah Anda tahu ada kontrol yang diwarisi dari ItemsControl yang memiliki orientasi horizontal item?

Jawaban:


463

Cukup ganti panel yang digunakan untuk meng-host item:

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

Apakah Anda tidak perlu menambahkan IsItemsHost = "Benar" ke StackPanel?
Thomas Levesque

5
Saya percaya itu hanya perlu jika Anda mengatur ulang seluruh kontrol. Lihat msdn.microsoft.com/en-us/library/…
Kent Boogaart

3
Jawaban juga berlaku untuk Silverlight
Scott

bagaimana melakukan ini di file sumber daya?
Florian

Untuk melakukan ini dalam file sumber daya, Anda perlu mengatur x: Kunci tombol
Tore Aurstad

32

Meskipun jawaban yang dipromosikan sangat bagus, berikut ini adalah alternatif jika Anda ingin peregangan item.

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

Jika Anda menggunakan UWP, Anda perlu UWP-UniformGrid dari sini: github.com/rickapps/UWP-UniformGrid-Control . Saya baru saja mengimplementasikannya ditambah solusi NielW di atas. Sangat mudah dan menyelesaikan masalah.
Isi Gail

9

Jawaban teratasnya bagus, tapi saya tidak bisa menggunakannya dengan UserControls. Jika Anda membutuhkan UserControls, ini akan membantu.

ItemsControl dengan Kontrol Horisontal

Versi Saya:

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

Untuk mengikat data, Anda perlu menambahkan ItemsSourceke ItemsControldalam XAML atau kode di belakang. Perhatikan juga bahwa uc:akan xmlns:uc="NamespaceOfMyControl"dinyatakan di bagian atas file.


Saya tidak terbiasa menggunakan WPF, jadi mungkin yang akan saya katakan adalah hal yang sangat mendasar. Saya menemukan bahwa di dalam UserControl Anda harus menggunakan "UserControl.Resources" alih-alih "Window.Resources". Bagaimanapun, terima kasih atas jawaban yang bagus, memecahkan masalah saya.
Paulo André Haacke

9

Ini adalah contoh bagaimana melakukan pengguliran horizontal di dalam ItemsControl.

Pertama jendela model viewmodel utama yang digunakan untuk mendapatkan / mengatur daftar item yang ingin kami tampilkan.

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

Jendela utama xaml untuk tampilan:

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>

Bergantung pada seberapa tinggi / lebar area klien Anda, ini akan menghasilkan jenis tata letak seperti ini, item-item meluap menggulir secara horizontal:

masukkan deskripsi gambar di sini

Rincian lebih lanjut dapat ditemukan di tautan blog ini, termasuk contoh tentang cara melakukan pengguliran secara vertikal:

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.