WPF 【视频墙 一 至 九宫格 框架功能】

admin • • 人工智能

WPF 【视频墙 一 至 九宫格 框架功能】

前言

随着人工智能的不断发展，工业上的机器视觉目标检测技术也越来越多，很多人都开启了学习机器学习，但做为人机交互部分也是必不可少的。本文主要介绍了在C/S端为用户展示监视器部分的屏幕墙基本框架功能。

一、程序截图

四画面
三画面
九宫画面

二、思路

整个画面都是用Grid控件化分出来的。

1.分屏的格子3画面、6画面、8画面

这几个画面的格子都是以一个大一些的主屏，周围多个小屏半包围的模式。这样每个画面都需要3个Grid控件来组合，一个做为主画面，其它两个放在右和下做为副屏。

2.分屏的格子1画面、4画面、9画面

这几个画面的格子都是一样大小的平均摆放，所以这样的每个画面只需要1个Grid控件就可以了。

三、代码实现

1.主要的Grid操作类用来分割画面

    /// <summary>
    /// 多监视器视图
    /// </summary>
    public static class MultiMonitorView
    {    
        public static Dictionary<int, Panel> DictPanel = null; //内容控件
        private static Grid OriginalGrid = null;
        private static Grid childrenGrid1 = new Grid();
        private static Grid childrenGrid2 = new Grid();
        private static int iMaxCellNums = 0;
        public static int iCurrentModel = 0;
        /// <summary>
        /// 初始化页面
        /// </summary>
        /// <param name="grid">主体</param>
        /// <param name="cellNums">最大画面数</param>
        public static void InitGrid(Grid grid, int cellNums)
        {          
            OriginalGrid = grid;
            iMaxCellNums = cellNums;
            DictPanel = new Dictionary<int, Panel>();
            for (int index = 1; index <= iMaxCellNums; index++)
            {
                DockPanel cellPanel = new DockPanel();
                cellPanel.LastChildFill = true;
                cellPanel.Background = System.Windows.Media.Brushes.Blue;
                Border border = new Border();
                border.BorderThickness=new Thickness(0.5, 0.5, 0.5, 0.5);
                border.BorderBrush = System.Windows.Media.Brushes.White;
                border.Name = "border" + index;   
                //可以在border中加入视频控件
                cellPanel.Children.Add(border);           
                cellPanel.Tag = index;
                DictPanel.Add(index, cellPanel);
            }
        }

        /// <summary>
        /// 设置当前画面数
        /// </summary>
        /// <param name="model"></param>
        public static void SetCurrentModel(int model)
        {
            switch (model)
            {
                case 1:
                    SetModelByColumnAndRow(1, 1);
                    break;
                case 3:
                    SetModel3();
                    break;
                case 4:
                    SetModelByColumnAndRow(2, 2);
                    break;
                case 6:
                    SetModel6();
                    break;
                case 8:
                    SetModel8();
                    break;
                case 9:
                    SetModelByColumnAndRow(3, 3);
                    break;
                case 10:
                    SetModel10();
                    break;
                case 16:
                    SetModelByColumnAndRow(4, 4);
                    break;
                case 25:
                    SetModelByColumnAndRow(5, 5);
                    break;
            }

            iCurrentModel = model;
        }
        /// <summary>
        /// 获取当前画面
        /// </summary>
        /// <returns></returns>
        public static Panel CurrentCellPanel()
        {
            for (int index = 1; index <= iMaxCellNums; index++)
            {
                if (DictPanel[index].IsSealed)
                {
                    return DictPanel[index];
                }
            }
            return null;
        }

        /// <summary>
        /// 通过行列数设置画面分割
        /// </summary>
        /// <param name="column">列</param>
        /// <param name="row">行</param>
        public static void SetModelByColumnAndRow(int column, int row)
        {
            Clear();
            CreateColumnAndRow(OriginalGrid, row, column);

            int num = 1;
            for (int rowIndex = 0; rowIndex < row; rowIndex++)
            {
                for (int columnIndex = 0; columnIndex < column; columnIndex++)
                {
                    Panel cellPanel = DictPanel[num];
                    Grid.SetColumn(cellPanel, columnIndex);
                    Grid.SetRow(cellPanel, rowIndex);
                    OriginalGrid.Children.Add(cellPanel);
                    num++;
                }
            }
        }
        /// <summary>
        /// 三画面
        /// </summary>
        public static void SetModel3()
        {
            Clear();
            ColumnDefinition columnDefinition1 = new ColumnDefinition();
            ColumnDefinition columnDefinition2 = new ColumnDefinition();
            columnDefinition1.Width = new GridLength(0.618, GridUnitType.Star);
            columnDefinition2.Width = new GridLength(0.382, GridUnitType.Star);
            OriginalGrid.ColumnDefinitions.Add(columnDefinition1);
            OriginalGrid.ColumnDefinitions.Add(columnDefinition2);
            Panel cellPanel = DictPanel[1];
            Grid.SetColumn(cellPanel, 0);
            OriginalGrid.Children.Add(cellPanel);

            for (int index1 = 0; index1 < 2; ++index1)
            {
                cellPanel = DictPanel[index1 + 2];
                childrenGrid1.RowDefinitions.Add(new RowDefinition());
                Grid.SetRow(cellPanel, index1);
                childrenGrid1.Children.Add(cellPanel);
            }

            Grid.SetColumn(childrenGrid1, 1);
            OriginalGrid.Children.Add(childrenGrid1);
        }
        /// <summary>
        /// 六画面
        /// </summary>
        public static void SetModel6()
        {
            Clear();
            CreateColumnAndRow(OriginalGrid, 2, 2);
            OriginalGrid.ColumnDefinitions[0].Width = new GridLength(0.66, GridUnitType.Star);
            OriginalGrid.ColumnDefinitions[1].Width = new GridLength(0.34, GridUnitType.Star);
            OriginalGrid.RowDefinitions[0].Height = new GridLength(0.67, GridUnitType.Star);
            OriginalGrid.RowDefinitions[1].Height = new GridLength(0.33, GridUnitType.Star);

            Panel cellPanel = DictPanel[1];
            Grid.SetColumn(cellPanel, 0);
            Grid.SetRow(cellPanel, 0);
            OriginalGrid.Children.Add(cellPanel);
            //p2,p3 画面
            Grid.SetColumn(childrenGrid1, 1);
            Grid.SetRow(childrenGrid1, 0);
            for (int index = 0; index < 2; ++index)
            {
                cellPanel = DictPanel[index + 2];
                childrenGrid1.RowDefinitions.Add(new RowDefinition());
                Grid.SetRow(cellPanel, index);
                childrenGrid1.Children.Add(cellPanel);
            }
            OriginalGrid.Children.Add(childrenGrid1);
            //p4,p5 画面
            Grid.SetColumn(childrenGrid2, 0);
            Grid.SetRow(childrenGrid2, 1);
            for (int index = 0; index < 2; ++index)
            {
                cellPanel = DictPanel[index + 4];
                childrenGrid2.ColumnDefinitions.Add(new ColumnDefinition());
                Grid.SetColumn(cellPanel, index);
                childrenGrid2.Children.Add(cellPanel);
            }
            OriginalGrid.Children.Add(childrenGrid2);
            cellPanel = DictPanel[6];
            Grid.SetRow(cellPanel, 1);
            Grid.SetColumn(cellPanel, 1);
            OriginalGrid.Children.Add(cellPanel);
        }
        /// <summary>
        /// 八画面
        /// </summary>
        public static void SetModel8()
        {
            Clear();
            CreateColumnAndRow(OriginalGrid, 2, 2);
            OriginalGrid.ColumnDefinitions[0].Width = new GridLength(0.75, GridUnitType.Star);
            OriginalGrid.ColumnDefinitions[1].Width = new GridLength(0.25, GridUnitType.Star);
            OriginalGrid.RowDefinitions[0].Height = new GridLength(0.75, GridUnitType.Star);
            OriginalGrid.RowDefinitions[1].Height = new GridLength(0.25, GridUnitType.Star);
            Panel cellPanel = DictPanel[1];
            Grid.SetColumn(cellPanel, 0);
            Grid.SetRow(cellPanel, 0);
            OriginalGrid.Children.Add(cellPanel);
            //p2,p3,p4 画面
            Grid.SetColumn(childrenGrid1, 1);
            Grid.SetRow(childrenGrid1, 0);
            for (int index = 0; index < 3; ++index)
            {
                cellPanel = DictPanel[index + 2];
                childrenGrid1.RowDefinitions.Add(new RowDefinition());
                Grid.SetRow(cellPanel, index);
                childrenGrid1.Children.Add(cellPanel);
            }
            OriginalGrid.Children.Add(childrenGrid1);
            //p5,p6,p7 画面
            Grid.SetColumn(childrenGrid2, 0);
            Grid.SetRow(childrenGrid2, 1);
            for (int index = 0; index < 3; ++index)
            {
                cellPanel = DictPanel[index + 5];
                childrenGrid2.ColumnDefinitions.Add(new ColumnDefinition());
                Grid.SetColumn(cellPanel, index);
                childrenGrid2.Children.Add(cellPanel);
            }
            OriginalGrid.Children.Add(childrenGrid2);
            cellPanel = DictPanel[8];
            Grid.SetRow(cellPanel, 1);
            Grid.SetColumn(cellPanel, 1);
            OriginalGrid.Children.Add(cellPanel);
        }
       
         /// <summary>
        /// 清空所有的分割
        /// </summary>
        private static void Clear()
        {
            OriginalGrid.RowDefinitions.Clear();
            OriginalGrid.ColumnDefinitions.Clear();
            OriginalGrid.Children.Clear();
            childrenGrid1.Children.Clear();
            childrenGrid1.RowDefinitions.Clear();
            childrenGrid1.ColumnDefinitions.Clear();
            childrenGrid2.Children.Clear();
            childrenGrid2.RowDefinitions.Clear();
            childrenGrid2.ColumnDefinitions.Clear();
        }

        private static void CreateColumnAndRow(Grid grid, int row, int column)
        {
            for (int index = 0; index < row; ++index)
            {
                grid.RowDefinitions.Add(new RowDefinition());
            }

            for (int index = 0; index < column; ++index)
            {
                grid.ColumnDefinitions.Add(new ColumnDefinition());
            }
        }
    }

2.调用方法

XAML代码

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid ShowGridLines="True"   >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <Grid x:Name="grid" />
        <StackPanel Orientation="Horizontal" Grid.Row="1">
            <Button Content="1画 面" Tag="1" Click="btn_Click" Margin="6" Width="60"/>
            <Button Content="3画 面" Tag="3" Click="btn_Click" Margin="6" Width="60"/>
            <Button Content="4画 面" Tag="4" Click="btn_Click" Margin="6" Width="60"/>
            <Button Content="6画 面" Tag="6" Click="btn_Click" Margin="6" Width="60"/>
            <Button Content="8画 面" Tag="8" Click="btn_Click" Margin="6" Width="60"/>
        </StackPanel>
    </Grid>
</Window>

CS代码

using System;
using System.Windows;
using System.Windows.Controls;
namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            MultiMonitorView.InitGrid(this.grid, 8);
            MultiMonitorView.SetCurrentModel(4);
        }
        private void btn_Click(object sender, RoutedEventArgs e)
        {
            Button btn = (Button)sender ;   
            if (btn.Tag != null)
            {
                MultiMonitorView.SetCurrentModel(Convert.ToInt32(btn.Tag));
            }
        }
    }
}

总结

这个程序主要功能都在MultiMonitorView中，前台只是画了格子，在使用时可以在每个格子里添加上自己的控件就可以成为一个完成的视频监控大屏了。最后希望这个文章对大家有帮助！

参考资料：
hellodev：《使用WPF制作视频监控多画面切换》
源码下载！！！

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码

)">
< <上一篇
下一篇>>