Creating a scrolling grid of images using WPF and XAML

c#, wpf, xaml

Solution

The TextBlock is hiding the whole ListView, which is blocking the user input. Look at the modified XAML,

<Grid x:Name="movie_grid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <ListView Grid.Row="1"
              Name="MovieListView"
              ItemTemplate="{StaticResource ItemTemplate}"
              ItemsSource="{Binding Path = movie_posters_list}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="5" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
    <TextBlock Name="SampleTextBlock"
               Text="{Binding Path=movie_names}"
               DataContext="{StaticResource ItemTemplate}" />
</Grid>

Problem

I currently have the following XAML code but when I run my app, the ScrollBars appear but I am unable to scroll through the list of images (scrollbar doesn't work). ``` <Window x:Class="WPFMediaManager.MoviePanel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MoviePanel" Height="1024" Width="1473.254" WindowStartupLocation="CenterScreen"> <Window.Resources> <DataTemplate x:Key="ItemTemplate"> <WrapPanel> <Image Width="200" Height="300" Stretch="Fill" Source="{Binding}"/> <TextBlock Text="{Binding}"/> </WrapPanel> </DataTemplate> </Window.Resources> <Grid x:Name="movie_grid"> <ListView Grid.Row="4" Name ="MovieListView" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Path = movie_posters_list}"> <ListView.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Columns="5" /> </ItemsPanelTemplate> </ListView.ItemsPanel> </ListView> <TextBlock Name="SampleTextBlock" Text="{Binding Path=movie_names}" DataContext="{StaticResource ItemTemplate}"/> </Grid> </Window> ``` I'm not sure what is causing this issue and whether I'm using the appropriate containers to house the images. My goal is something like the following layout: C# Code behind: ``` namespace WPFMediaManager { /// <summary> /// Interaction logic for MoviePanel.xaml /// </summary> public partial class MoviePanel : Window { public MoviePanel() { InitializeComponent(); } List<ImageSource> movie_posters_list = new List<ImageSource>(); List<String> movie_names = new List<String>(); String regex_pattern = @"\\([\w ]+).(?:jpg|png)$"; public void LoadImages() { //Image current_image; String movie_poster_path = @"C:\Users\Vax\Desktop\movie_posters"; List<String> filenames = new List<String>(System.IO.Directory.EnumerateFiles(movie_poster_path, "*.jpg")); foreach (String filename in filenames) { this.movie_posters_list.Add(new BitmapImage(new Uri(filename))); Console.WriteLine("filename " + filename); Match regex_match = Regex.Match(filename.Trim(), regex_pattern); String matched_movie_name = regex_match.Groups[1].Value; this.movie_names.Add(matched_movie_name); Console.WriteLine("Movie Name: " + matched_movie_name); } MovieListView.ItemsSource = movie_posters_list; } } } ``` Edit: I tried the method outlined by @XAML Lover but I don't get the images appearing at all anymore. I'm not sure whether this is a data binding issue.

Original source