Question

我目前有以下XAML代码，但是当我运行我的应用程序时，会出现ScrollBars但我无法滚动图像列表（滚动条无法正常工作）。

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

我不确定导致此问题的原因以及我是否使用适当的容器来存放图像。

我的目标是以下布局：

enter image description here

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概述的方法，但我不再让图像显示出来了。我不确定这是否是数据绑定问题。

Answer 1

TextBlock隐藏了整个ListView，它阻止了用户输入。查看修改后的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

将您的xaml显示图片放在网格中，然后将该网格放在scrollviewer控件中并设置所需的方向和对齐，您将获得解决方案。

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

使用WPF和XAML创建滚动图像网格

2 个答案: