ItemsControl with horizontal orientation
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:
More details can be found at this blog link, including an example on how to do the scrolling vertically: