如何使 WPF listview 动态显示图像和标签

Question

我很难为 WPF 窗口创建 UI。我正在尝试（动态）显示一堆带有电影名称的电影海报，直接在图像下方。 ItemsSource 通过foreach 迭代分配给图像列表。图像文件本身可能有不同的大小，但如下所示，我将设置一个统一的大小。

基本上，我的目标是让它看起来像这样：

到目前为止，我的代码只显示一个带有一个大水平行（？）的窗口，图像在中心，没有标签。这是我的 XAML 代码：

<Window x:Name="TVWindow" x:Class="PACS_Pre_Alpha.TV"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TV" Height="746" Width="1000" ResizeMode="NoResize">
<Grid x:Name="TVGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <ListView x:Name="TvBox" HorizontalAlignment="Left" Height="648" VerticalAlignment="Top" Width="994" Grid.Row="5" Grid.Column="5">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="5" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
                    <Image Source="{Binding ImageData}" HorizontalAlignment="Center" VerticalAlignment="Top" />
                    <TextBlock Text="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

我的电影是用这个 C# 代码添加的：

foreach (string tvf in ContentFiles)
{
            string ContentTitle = System.IO.Path.GetFileNameWithoutExtension(tvf);
            MovieData cnt = new MovieData();
            cnt.ImageData = LoadImage(ActualImage);
            cnt.Title = ContentTitle;
            ContentDataList.Add(cnt);

}
        TvBox.ItemsSource = ContentDataList;

编辑：我已经按照@MarkFeldman 的建议更改了我的 XAML 标记，但现在什么也没有出现。 编辑：它目前看起来像这样：

Answer 1

您将提供有关数据本身的更多信息，即它的格式是什么，如何将其分配给 ItemsSource 等。一方面，您没有设置 ItemTemplate，因此您可能想先看一下.例如，如果您有一个包含您的电影数据的类，如下所示：

public class MovieData
{
    private string _Title;
    public string Title
    {
        get { return this._Title; }
        set { this._Title = value; }
    }

    private BitmapImage _ImageData;
    public BitmapImage ImageData
    {
        get { return this._ImageData; }
        set { this._ImageData = value; }
    }

}

然后你会用这样的方式显示它：

<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
            <Image Source="{Binding ImageData}" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <TextBlock Text="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>

更新：

抱歉，我认为您显然仍需要使用 UniformGrid。以下是您的完整 XAML 的外观：

<ListView x:Name="TvBox" HorizontalAlignment="Stretch" VerticalAlignment="Top">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="5" HorizontalAlignment="Stretch"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Image Source="{Binding ImageData}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="UniformToFill" />
                <TextBlock Text="{Binding Title}" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我已经为您提供了 MovieData 类，因此您的 Window 代码应如下所示：

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();

        this.TvBox.ItemsSource = new MovieData[]
        {
            new MovieData{Title="Movie 1", ImageData=LoadImage("image.jpg")},
            new MovieData{Title="Movie 2", ImageData=LoadImage("image.jpg")},
            new MovieData{Title="Movie 3", ImageData=LoadImage("image.jpg")},
            new MovieData{Title="Movie 4", ImageData=LoadImage("image.jpg")},
            new MovieData{Title="Movie 5", ImageData=LoadImage("image.jpg")},
            new MovieData{Title="Movie 6", ImageData=LoadImage("image.jpg")}
        };
    }

    // for this code image needs to be a project resource
    private BitmapImage LoadImage(string filename)
    {
        return new BitmapImage(new Uri("pack://application:,,,/" + filename));
    }
}

在此示例中，我假设您的项目中有一个名为“image.jpg”的图像，该图像已设置为构建操作“资源”，如果您的图像来自其他地方，那么您需要修改 LoadImage 代码相应地。

Answer 2

我用 UniformGrid 做了一些非常相似的事情我看到你没有设置你的 UniformGrid 的行。我在我的游戏应用程序中做到了这一点。很好的方法，但很难做到正确。设置一个 ItemTemplate。并尝试使用 ItemsControl 外部对象而不是列表视图

<ItemsControl  IsEnabled="{Binding GameBoardEnabled}" 
                x:Name="_board" 
                ItemsSource ="{Binding Board}" 
                ItemTemplate= "{DynamicResource GamePieceTemplate}"  >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <!--<StackPanel/>-->
                        <UniformGrid                          
                            Columns="{Binding Columns}" 
                            Rows   ="{Binding Rows}"  />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>