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;

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

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类，所以这里的窗口代码应该是这样的：

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

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

Answer 2

我使用UniformGrid做了一些非常相似的事情我发现你没有设置你的UniformGrid的行。我在我的游戏应用程序中这样做了。好的方法但很难做对。设置ItemTemplate。并尝试使用ItemsControl外部对象而不是listview

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

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

2 个答案: