我应该为 WPF 中的摄像头监控提供哪种 UI?
Which kind of UI should I provide for Cameras monitoring in WPF?
我被要求开发一个 WPF 应用程序,该应用程序从某些相机检索数据并在应用程序内的某些窗格上显示输出。我刚刚发现 UserControl 可以播放视频,它基于 VideoOSPlatform(作者 milestone)。
我的问题不是关于如何重现视频播放而是关于用户界面,我应该提出。
场景如下。我最多可以在应用程序上播放 6 个视频,但最终,用户可以选择要显示的摄像头。 (为此,我想到了一个树视图,用户可以在其中将相机拖到工作区中。
主要问题是如何划分application context来显示回放?我想我不能只用一个 Grid.RowsDefinition / Grid.ColumnsDefinition
把它分成 6 块。如果用户只有一个摄像头处于活动状态怎么办?我会全屏显示它。
对此有任何suggestion/experience吗?
谢谢
将 ItemsControl 与 UniformGrid 结合使用。 UniformGrid 根据配置和显示的项目数量自动添加行/列。
<ItemsControl Grid.Row="0" ItemsSource="{Binding LoadedDevices}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="5"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black">
<Grid>
<views:DeviceView x:Name="display" Img="{Binding DeviceImage}"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
然后(可以)看起来像这样:
我被要求开发一个 WPF 应用程序,该应用程序从某些相机检索数据并在应用程序内的某些窗格上显示输出。我刚刚发现 UserControl 可以播放视频,它基于 VideoOSPlatform(作者 milestone)。
我的问题不是关于如何重现视频播放而是关于用户界面,我应该提出。
场景如下。我最多可以在应用程序上播放 6 个视频,但最终,用户可以选择要显示的摄像头。 (为此,我想到了一个树视图,用户可以在其中将相机拖到工作区中。
主要问题是如何划分application context来显示回放?我想我不能只用一个 Grid.RowsDefinition / Grid.ColumnsDefinition
把它分成 6 块。如果用户只有一个摄像头处于活动状态怎么办?我会全屏显示它。
对此有任何suggestion/experience吗? 谢谢
将 ItemsControl 与 UniformGrid 结合使用。 UniformGrid 根据配置和显示的项目数量自动添加行/列。
<ItemsControl Grid.Row="0" ItemsSource="{Binding LoadedDevices}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="5"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black">
<Grid>
<views:DeviceView x:Name="display" Img="{Binding DeviceImage}"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
然后(可以)看起来像这样: