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

最新推荐文章于 2024-07-18 11:51:44 发布
最新推荐文章于 2024-07-18 11:51:44 发布
阅读量1.5k 收藏 8
点赞数 6
文章标签： wpf 音视频 c# .net .net core
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/redfox6843/article/details/126118193
版权

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制作视频监控多画面切换》
源码下载！！！

redfox6843
关注
【基于C#的WPF多视频监控管理系统】MultiviewControl.zip
02-23
WPF开发的视频监控，可实现多视频画面切换功能，代码详细，可以直接在VS2015版上运行。
wpf控件 完美九宫格 自定义窗体
01-29
原版本：http://download.csdn.net/download/beilinu/6645569 此为修改的版本，解决了wpf中九宫格显示存在白线的问题
WPF中实现九宫格绘图
weixin_33807284的博客
12-15 820
1、问题的起源。 首先我们看一下QQ2009的面板，普通状态下是这样的： 当我们最大化或是拉伸界面后，界面会变成这个样子： 我们可以看到，经过拉伸后的界面背景并没有被等比例拉伸，通过分析我们发现，其实界面是用了一张背景图片，原始图如下： 通过对比我们可以看到，界面在帖图时采取了四角固定，中间部分拉伸的方法来保证背景在拉伸时不变形。按照一般的绘制方法...
WPF控件，九宫格，自定义窗体
12-02
WPF控件，九宫格，自定义窗体，结构比较乱，自己整理下吧
WPF九宫格拼图
01-14
资源不错，代码简易，适合初学者， 在两边加了9个图片元素，中间画了个Canvas拼图盘，代码里面都有解释。推荐可以下载。
.net6 WPF开发的可拖拽换位【九宫格】
redfox6843的专栏
07-25 1221
本程序 是用WPF开发的一个DEMO，您可以用鼠标左键拖拽 其中一个格子 与 另外的格子交换位置
九宫格数独题目生成器.rar
04-16
数独是一种逻辑推理游戏，其玩法是在9x9的九宫格内填入数字1至9，每个数字在每一行、每一列以及每一个3x3的小九宫格内只能出现一次。九宫格数独题目生成器就是根据这个规则，通过算法随机生成符合要求的数独盘面。 ...
WPF 实现图片切成九宫格控件~
dotNET跨平台
01-18 510
WPF开发者QQ群：340500857 由于微信群人数太多入群请添加小编微信号yanjinhuawechat 或 W_Feng_aiQ邀请入群需备注WPF开发者 P...
WPF实现九宫格拼图携带动画
04-13
这个Demo是我通过学习https://www.cnblogs.com/tanl/p/5710842.html这个网址，并且有感而发，因为Grid交换的时候动画不好处理，所以个人觉得换成Canvas添加动画比较简单一些，所以写了一个带动画小案例，效果还可以，可以学习学习。
WPF Mvvm中多视图切换
04-25
看到网上好多都是在WPF下的视图切换，自已就做了一个Mvvm下的，用到了数据绑定、数据模板、命令等。
wpf 一些自定义控件源码，好看方便
10-19
wpf 一些自定义控件源码，好看方便
WPF的Mvvmlight框架，非常好看
m0_67912832的博客
03-10 761
WPF的Mvvmlight框架，非常好看。 编号:92188668787454852千锤百炼
WPF实现手风琴照片墙展示效果
dnazhd的博客
10-27 993
实现效果如下： 思路：这里利用了Grid自适应的特点，引入GridLengthAnimation动画效果。 步骤： 1、GridLengthAnimation类 internal class GridLengthAnimation : AnimationTimeline { static GridLengthAnimation() { FromProperty = DependencyProperty.Register("
九宫格基本布局
aomangzheng8695的博客
07-11 197
在我的前一篇教程《九宫格基本布局》中，我介绍了用相对定位加绝对定位的方法来制作九宫格的基本布局。这是一种比较符合人们惯性思维的方法，好像制作过程中一切都是顺理成章的事情，然而因为IE6让人恶心的奇偶性BUG，使得这种布局方法要想通用变得有点遥不可及，因为国内大多数用户还是用着IE6，我们不能因此而丢掉这部分用户。 这个BUG目前是无药可治，也没有什么Hack技巧能运用，唯一...
WPF Border实现九宫格背景画刷
记事本
10-27 1042
 Xaml &lt;customcontrol:NineGridBorder ImageMargin="2,2,2,8" Image="/xxxxx;component/Images/xxxx.png"&gt; &lt;Grid&gt; &lt;/Grid&gt; &lt;/customcont...
WPF 实现3维视频凸面墙
huangshanchun的专栏
05-09 1283
WPF 实现3维视频凸面墙，支持自动旋转、上下滑动移动、左右滑动旋转、点击播放视频等效果。 1.视频凸面墙 2.点击播放视频效果 3.上下滑动效果
WPF实现简单的9宫格键盘移动方块
weixin_43377805的博客
04-14 311
在学习wpf中第一个简单的小程序
C#WPF九宫格图片背景实例
最新发布
qq_30725967的博客
07-18 501
C#WPF九宫格图片背景实例
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值