Creating a scrolling grid of images using WPF and XAML

Question

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.

Answer 1

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>

Answer 2

Put your xaml of displaying the pictures in a grid then put that grid inside scrollviewer control and set the desired orientation and alignments and you will get the solution.

<ScrollViewer orientation="" VerticleAllignment="" HorizontalAllignment="">
<Grid>
Place your xaml here...
</Grid>
</ScrollViewer>