2

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

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

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

目前，它唯一显示 1 个视频的完整窗口图块，以及将整个窗口拆分为 2 个并显示 2 个视频的另一个图块，但如果我想要 4 个视频，我想将主窗口拆分为 4 个并显示 4 个不同的视频。

实现这一点的最佳方法是什么？

谢谢！

4

1 回答 1

5

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

ObservableCollection<VideoPlayer>我将首先在您的DataContext中创建一个包含您想要的视频数量的第二个属性，以及包含VideoPlayerCollection.Count四舍五入的平方根的第二个属性，用于确定网格大小。

然后我会显示VideoPlayerCollectionusing 将ItemsControl其ItemsPanelTemplate设置为 a UniformGridor Grid，它将行数和列数绑定到您的GridSize属性。

（您可能需要构建一些AttachedProperties来绑定这些属性，因为网格没有行/列计数属性，我不记得 UniformGridRows和Columns属性DependencyProperties是否可以绑定到。我有一些示例如果您对示例感兴趣，请在此处绑定Grid'sRowCount 和 ColumnCount的 AttachedProperties）

最后，您的 Buttons 会修改您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));
    }
}

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

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Grid.Column" 
                Value="{Binding ColumnIndex}" />
        <Setter Property="Grid.Row" 
                Value="{Binding RowIndex}" />
    </Style>
</ItemsControl.ItemContainerStyle>
于 2013-01-03T14:43:59.757 回答