Create a scrollable image grid using WPF and XAML

I currently have the following XAML code, but when I start my application, the ScrollBars appear, but I cannot view the list of images (the scroll bar is not working).

<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 problem and I am using the appropriate containers to host the images.

My goal looks something like this:

enter image description here

C # code:

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 described by @XAML Lover, but I don't get the images anymore. I'm not sure if this is a data binding issue.

+3


source to share


2 answers


The TextBlock hides the entire ListView that is blocking user input. Take a 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>

      

+3


source


Put your xaml to display images in a grid, then set that grid inside the scrollviewer control and set the orientation and alignment you want and you have a solution.



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

      

+2


source







All Articles