如何在WPF中以漂亮的图块格式显示动态数量的对象?

时间:2013-01-03 13:44:43

标签: c# wpf

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

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

单击“1”将在整个右侧播放视频 点击“2”,右侧将显示2个视频,共2个视频。

现在它唯一的全窗口显示1个视频,另一个将整个窗口拆分为2并显示2个视频,但如果我想要4个视频,我想将主窗口拆分为4并显示4个不同的视频。

实施此方法的最佳方法是什么?

谢谢!

1 个答案:

答案 0 :(得分:5)

根据您在comments中所说的内容,听起来您希望按钮可以创建动态数量的视频并让它们在网格中很好地显示

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

然后我会使用VideoPlayerCollection显示ItemsControlItemsPanelTemplate设置为UniformGridGrid,这会绑定行数和列数到您的GridSize属性。

(您可能需要构建一些AttachedProperties来绑定这些属性,因为Grid没有行/列计数属性,我不记得UniformGrid的Rows和{{1你可以绑定的属性是Columns。我有一个AttachedProperties的例子,用于绑定DependencyProperties RowCount和ColumnCount here如果你对一个例子感兴趣的话< / p>

最后,您的按钮会修改您的Grid's以添加或删除您想要显示的任意数量的项目。

所以你的最终XAML可能看起来像这样:

VideoPlayerCollection

虽然表单后面的<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)); } } ,您可能还需要将GridRowIndex属性添加到ColumnIndex类,以指定VideoPlayer }和Grid.Row每个VideoPlayer应放在。

Grid.Column