WPF Canvas scroll ItemTemplate ItemsSource
//xaml <Window x:Class="WpfApp70.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" WindowState="Maximized" xmlns:local="clr-namespace:WpfApp70" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <local:BooksList x:Key="booksList"/> <Style TargetType="TextBlock" x:Key="tbStyle"> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="FontSize" Value="100"/> <Setter Property="TextWrapping" Value="Wrap"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="Red"/> </Trigger> </Style.Triggers> </Style> <DataTemplate x:Key="cvsDataTemplate" DataType="{x:Type local:Book}"> <Grid ShowGridLines="True"> <Grid.Style> <Style TargetType="{x:Type Grid}"> <Setter Property="Background" Value="LightBlue"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="DarkBlue"/> </Trigger> <Trigger Property="IsMouseCaptured" Value="True"> <Setter Property="Background" Value="Red"/> </Trigger> </Style.Triggers> </Style> </Grid.Style> <Grid.RowDefinitions> <RowDefinition Height="500"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="200"/> <ColumnDefinition Width="400"/> <ColumnDefinition Width="1000"/> </Grid.ColumnDefinitions> <TextBlock Text="{Binding Id}" Grid.Column="0" Style="{StaticResource tbStyle}" /> <TextBlock Text="{Binding ISBN}" Grid.Column="1" Style="{StaticResource tbStyle}"/> <Border Grid.Column="2"> <Border.Background> <ImageBrush ImageSource="{Binding ImgSource}" Stretch="Uniform" RenderOptions.BitmapScalingMode="Fant"/> </Border.Background> </Border> </Grid> </DataTemplate> <Style TargetType="{x:Type Grid}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="DarkBlue"/> </Trigger> </Style.Triggers> </Style> </Window.Resources> <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"> <Canvas Height="10000000" Width="5000"> <ItemsControl ItemsSource="{StaticResource booksList}" ItemTemplate="{StaticResource cvsDataTemplate}"/> </Canvas> </ScrollViewer> </Window> //cs using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfApp70 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } } public class BooksList : List<Book> { public BooksList() { var imgs = Directory.GetFiles(@"../../Images"); if(imgs!=null && imgs.Any()) { for (int i = 0; i < 10000; i++) { this.Add(new Book() { Id = i + 1, ISBN = $"ISBN_{i + 1}", ImgSource = GetImgSource(imgs[i%imgs.Count()]) }); } } } private ImageSource GetImgSource(string imgUrl) { BitmapImage bmi = new BitmapImage(); bmi.BeginInit(); bmi.UriSource = new Uri(imgUrl, UriKind.RelativeOrAbsolute); bmi.EndInit(); if (bmi.CanFreeze) { bmi.Freeze(); } return bmi; } } public class Book { public int Id { get; set; } public string Name { get; set; } public string ISBN { get; set; } public ImageSource ImgSource { get; set; } } }