Yatay yönlendirmeli kontrol


226

Öğelerin yatay yönlendirmesine sahip ItemsControl öğesinden devralınan herhangi bir denetim biliyor musunuz?

Yanıtlar:


464

Öğeleri barındırmak için kullanılan paneli değiştirmeniz yeterlidir:

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

StackPanel'e IsItemsHost = "True" eklemenize gerek yok mu?
Thomas Levesque

5
Bence bu sadece tüm kontrolü yeniden ayarlıyorsanız gerekli. Bkz msdn.microsoft.com/en-us/library/...
Kent Boogaart

3
Cevap ayrıca Silverlight için
Scott

bunu bir kaynak dosyasında nasıl yapabilirim?
Florian

Bunu bir kaynak dosyasında yapmak için, x: Anahtar tuşunu ayarlamanız gerekir
Tore Aurstad

32

Yükseltilmiş cevap harika olsa da, öğelerin gerilmesini istiyorsanız bir alternatif.

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

UWP kullanıyorsanız, buradan UWP-UniformGrid'e ihtiyacınız olacak: github.com/rickapps/UWP-UniformGrid-Control . Ben sadece bunu artı NielW'ın yukarıdaki çözümü uyguladım. Gerçekten kolay ve sorunu çözer.
Gail Foad

9

En iyi cevap iyidir, ancak UserControls ile çalışmak için alamadım. UserControls gerekiyorsa, bu yardımcı olacaktır.

Yatay Kullanıcı Kontrolleri ile ItemsControl

Benim versiyonum:

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

Verilere bağlamak için, bir eklemeniz gerekir ItemsSourceiçin ItemsControlXAML veya kod gerisinde,. Ayrıca dosyanın üst kısmında bildirilmiş uc:olacağını unutmayın xmlns:uc="NamespaceOfMyControl".


WPF kullanmaya alışkın değilim, belki de söyleyeceğim şey çok temel şeyler. Bir UserControl içinde "Window.Resources" yerine "UserControl.Resources" kullanmanız gerektiğini öğrendim. Her neyse, harika cevap için teşekkürler, sorunumu çözdü.
Paulo André Haacke

9

Bu, ItemsControl içinde yatay kaydırma yapmanın bir örneğidir.

Öncelikle görüntülemek istediğiniz öğelerin listesini almak / ayarlamak için kullanılan ana pencere viewmodel sınıfı.

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

Görünüm için ana pencere 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>

Müşteri alanınızın ne kadar yüksek / geniş olduğuna bağlı olarak, bu tür bir düzene neden olur, taşma öğeleri yatay olarak kaydırılır:

resim açıklamasını buraya girin

Bu blog bağlantısında, kaydırmanın dikey olarak nasıl yapılacağıyla ilgili bir örnek de dahil olmak üzere daha fazla ayrıntı bulabilirsiniz:

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.