c# - 如何在 WPF 中以漂亮的磁贴格式显示动态数量的对象？

Question

我想制作可以显示 1 或 2 个视频的应用程序。

在窗口的左侧，将有 2 个标记为“1”或“2”的按钮作为我要在应用程序右侧显示的图 block 数。

点击“1”将在整个右侧播放视频。
通过单击“2”，将在右侧以 2 个图 block 显示 2 个视频。

目前它只有一个显示 1 个视频的全窗口图 block ，另一个图 block 将整个窗口拆分为 2 个并显示 2 个视频，但如果我想要 4 个视频，我想将主窗口拆分为 4 个并显示 4 个不同的视频视频。

实现它的最佳方法是什么？

谢谢!

Answer 1

根据你在 comments 中所说的，听起来你想要按钮创建动态数量的视频并让它们在网格中很好地显示

我会首先在您的 DataContext 中创建一个 ObservableCollection<VideoPlayer> 来保存您想要的视频数量，并创建一个包含 VideoPlayerCollection.Count 平方根的第二个属性，向上取整，以确定网格大小。

然后我会使用 VideoPlayerCollection 显示 ItemsControl ，它的 ItemsPanelTemplate 设置为 UniformGrid 或 Grid ，它将行数和列数绑定(bind)到您的 GridSize 属性。

(您可能需要构建一些 AttachedProperties 来绑定(bind)这些属性，因为 Grid 没有行/列计数属性，而且我不记得 UniformGrid 的 Rows 和 Columns 属性是否是您可以绑定(bind)到的 DependencyProperties . 我有一些附加属性的示例，用于绑定(bind) Grid's RowCount 和 ColumnCount here 如果您对示例感兴趣)

最后，您的按钮将修改您的 VideoPlayerCollection 以添加或删除您想要显示的项目。

因此您的最终 XAML 可能如下所示:

<DockPanel>

    <StackPanel DockPanel.Dock="Left">
        <Button Content="One Window" 
                Command="{Binding ModifyVideoCountCommand}"
                CommandParameter="1" />
        <Button Content="Two Windows" 
                Command="{Binding ModifyVideoCountCommand}"
                CommandParameter="2" />
        <Button Content="Four Windows" 
                Command="{Binding ModifyVideoCountCommand}"
                CommandParameter="4" />
    </StackPanel>

    <ItemsControl ItemsSource="{Binding VideoPlayerCollection}"
                  ItemTemplate="{StaticResource VideoPlayerTemplate}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="{Binding GridSize}" Columns="{Binding GridSize}" />
            </ItemsPanelTemplate>
        </ItemsPanelTemplate>
    </ItemsControl>

</DockPanel>

虽然表单后面的 DataContext 将包含这些属性:

ICommand ModifyVideoCountCommand { get; set; }
ObservableCollection<VideoPlayer> VideoPlayerCollection { get; set; }
int GridSize 
{
    get
    {
        return Math.Ceiling(Math.Sqrt(VideoPlayerCollection.Count));
    }
}

根据您是否使用 Grid，您可能还需要将 RowIndex 和 ColumnIndex 属性添加到您的 VideoPlayer 类，以指定每个 VideoPlayer 应放置在哪个 Grid.Row 和 Grid.Column 中。

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Grid.Column" 
                Value="{Binding ColumnIndex}" />
        <Setter Property="Grid.Row" 
                Value="{Binding RowIndex}" />
    </Style>
</ItemsControl.ItemContainerStyle>