Which kind of UI should I provide for Cameras monitoring in WPF?

Question

I've been asked to develop a WPF application that retrieves data from some cameras and shows the output on some panes inside the application. I've just found the UserControl to have the video playback and it's based on VideoOSPlatform (by milestone).

My question doesn't concert about how to reproduce the video playback but about the user-interface, I should present.

The scenario is the following. I can have max 6 video playback on the application but eventually, the user can choose which camera to show. (For this I thought about a treeview where the user drags the camera into the workspace.

The main question is about how do I divide the application context to show the playback? I think I can't just use a Grid.RowsDefinition / Grid.ColumnsDefinition and divide it into 6 pieces. What if the user has just one camera active? I would have it fullscreen.

Any suggestion/experience about this? Thanks

Answer 1

Use an ItemsControl with a UniformGrid. The UniformGrid automatically adds rows / columns depending on configuration and amount of items shown.

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

Which then (can) look like this: