ItemsControl with horizontal orientation ItemsControl with horizontal orientation wpf wpf

ItemsControl with horizontal orientation


Simply change the panel used to host the items:

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


While the promoted answer is great, here's an alternative if you want the items to stretch.

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


This is an example of how to do horizontal scrolling within an ItemsControl.

Firstly the main window viewmodel class used to get/set the list of items we wish to display.

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

The main window xaml for the view:

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>

Depending on how high/wide your client area is, this will result in this kind of layout, overflow items scrolled horizontally:

enter image description here

More details can be found at this blog link, including an example on how to do the scrolling vertically:

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