ItemsControl mit horizontaler Ausrichtung

225

Kennen Sie vom ItemsControl geerbte Steuerelemente, die eine horizontale Ausrichtung der Elemente aufweisen?

user101375
quelle

Antworten:

462

Ändern Sie einfach das Bedienfeld für die Elemente:

<ItemsControl ...>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>
Kent Boogaart
quelle
Müssen Sie dem StackPanel nicht IsItemsHost = "True" hinzufügen?
Thomas Levesque
5
Ich glaube, das ist nur notwendig, wenn Sie die gesamte Steuerung neu planen. Siehe msdn.microsoft.com/en-us/library/…
Kent Boogaart
3
Antwort gilt auch für Silverlight
Scott
Wie geht das in einer Ressourcendatei?
Florian
Um dies in einer Ressourcendatei zu tun, müssen Sie den Schlüssel x: Key
Tore Aurstad
32

Die beworbene Antwort ist zwar großartig, aber hier ist eine Alternative, wenn Sie möchten, dass sich die Elemente dehnen.

<ItemsControl.ItemsPanel>                              
    <ItemsPanelTemplate>
        <UniformGrid Rows="1" />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>   
NielW
quelle
Wenn Sie UWP verwenden, benötigen Sie UWP-UniformGrid von hier: github.com/rickapps/UWP-UniformGrid-Control . Ich habe es gerade implementiert und die oben genannte NielW-Lösung. Wirklich einfach und löst das Problem.
Gail Foad
9

Die beste Antwort ist gut, aber ich konnte sie nicht mit UserControls zum Laufen bringen. Wenn Sie UserControls benötigen, sollte dies helfen.

ItemsControl mit horizontalen Benutzersteuerungen

Meine Version:

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

Binden , um Daten, müssen Sie eine hinzufügen , ItemsSourceum die ItemsControlin der XAML oder Code - behind. Beachten Sie auch, dass uc:dies xmlns:uc="NamespaceOfMyControl"am Anfang der Datei deklariert wird.

HockeyJ
quelle
Ich bin es nicht gewohnt, WPF zu verwenden, also bin ich vielleicht sehr grundlegend. Ich fand heraus, dass Sie in einem UserControl "UserControl.Resources" anstelle von "Window.Resources" verwenden sollten. Trotzdem, danke für die tolle Antwort, hat mein Problem gelöst.
Paulo André Haacke
9

Dies ist ein Beispiel für das horizontale Scrollen in einem ItemsControl.

Zunächst die Ansichtsmodellklasse des Hauptfensters, mit der die Liste der Elemente abgerufen / festgelegt wird, die angezeigt werden sollen.

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

Das Hauptfenster xaml für die Ansicht:

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>

Abhängig davon, wie hoch / breit Ihr Kundenbereich ist, führt dies zu einem solchen Layout, bei dem Überlaufelemente horizontal gescrollt werden:

Geben Sie hier die Bildbeschreibung ein

Weitere Details finden Sie unter diesem Blog-Link, einschließlich eines Beispiels zum vertikalen Scrollen:

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

AndyUK
quelle