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:
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 to share
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 to share