使用 WPF 和 XAML 创建滚动的图像网格 [英] Creating a scrolling grid of images using WPF and XAML

问题描述

我目前有以下 XAML 代码，但是当我运行我的应用程序时，会出现滚动条，但我无法滚动浏览图像列表(滚动条不起作用).

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#代码:

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;
        }

}

}

我尝试了@XAML Lover 概述的方法，但我根本看不到图像了.我不确定这是否是数据绑定问题.

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.

推荐答案

TextBlock 隐藏了整个 ListView，从而阻止了用户输入.看看修改后的 XAML，

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>

这篇关于使用 WPF 和 XAML 创建滚动的图像网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！