使用WPF制作视频监控多画面切换

　　前言

曾有做过一个产品，有一个功能是视频监控模块，视频监控首先想到的是视频多画面切换功能，由于前端是用WPF开发的，所以当时就做了一个多画面切换组件，效果如下：

　　功能设计前提：

　　由于要使用海康大华天地伟业等视频厂家的视频，对接的方式是通过各个厂家提供的SDK（官网下载），由于播放视频的时候需要传递控件的句柄（Handle），所以要在WPF中使用System.Windows.Forms下的控件Panel

　　具体实现：

　　1、  实现多画面类MultiView，主要提供页面初始化、设置当前画面等功能

  public static class MultiView
    {
        public static int CurrentModel = ;
        public static Dictionary<int, CellPanel> DictPanel = null;
        private static Grid OriginalGrid = null;
        private static Grid TempGrid1 = new Grid();
        private static Grid TempGrid2 = new Grid();
        private static int MaxCellNums = ;

        /// <summary>
        /// 初始化页面
        /// </summary>
        /// <param name="grid">主体</param>
        /// <param name="cellNums">最大画面数</param>
        public static void InitGrid(Grid grid, int cellNums)
        {
            MultiView.OriginalGrid = grid;
            MultiView.MaxCellNums = cellNums;

            MultiView.DictPanel = new Dictionary<int, CellPanel>();
            for (int index = ; index <= MultiView.MaxCellNums; index++)
            {
                CellPanel cellPanel = new CellPanel();
                cellPanel.Index = index;
                MultiView.DictPanel.Add(index, cellPanel);
            }
        }

        /// <summary>
        /// 设置当前画面数
        /// </summary>
        /// <param name="model"></param>
        public static void SetCurrentModel(int model)
        {
            switch (model)
            {
                case :
                    MultiView.SetModelByColumnAndRow(, );
                    break;
                case :
                    MultiView.SetModel3();
                    break;
                case :
                    MultiView.SetModelByColumnAndRow(, );
                    break;
                case :
                    MultiView.SetModel6();
                    break;
                case :
                    MultiView.SetModel8();
                    break;
                case :
                    MultiView.SetModelByColumnAndRow(, );
                    break;
                case :
                    MultiView.SetModel10();
                    break;
                case :
                    MultiView.SetModelByColumnAndRow(, );
                    break;
                case :
                    MultiView.SetModelByColumnAndRow(, );
                    break;
            }

            MultiView.CurrentModel = model;
        }
        /// <summary>
        /// 获取当前画面
        /// </summary>
        /// <returns></returns>
        public static CellPanel CurrentCellPanel()
        {
            for (int index = ; index <= MultiView.MaxCellNums; index++)
            {
                if (MultiView.DictPanel[index].Selected)
                {
                    return MultiView.DictPanel[index];
                }
            }
            return null;
        }

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

            int num = ;
            for (int rowIndex = ; rowIndex < row; rowIndex++)
            {
                for (int columnIndex = ; columnIndex < column; columnIndex++)
                {
                    CellPanel cellPanel = MultiView.DictPanel[num];
                    Grid.SetColumn(cellPanel, columnIndex);
                    Grid.SetRow(cellPanel, rowIndex);
                    MultiView.OriginalGrid.Children.Add(cellPanel);
                    num++;
                }
            }
        }
        /// <summary>
        /// 三画面
        /// </summary>
        public static void SetModel3()
        {
            MultiView.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);
            MultiView.OriginalGrid.ColumnDefinitions.Add(columnDefinition1);
            MultiView.OriginalGrid.ColumnDefinitions.Add(columnDefinition2);
            CellPanel cellPanel = MultiView.DictPanel[];
            Grid.SetColumn(cellPanel, );
            MultiView.OriginalGrid.Children.Add(cellPanel);

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

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

            CellPanel cellPanel = MultiView.DictPanel[];
            Grid.SetColumn(cellPanel, );
            Grid.SetRow(cellPanel, );
            MultiView.OriginalGrid.Children.Add(cellPanel);

            //p2,p3 画面
            Grid.SetColumn(MultiView.TempGrid1, );
            Grid.SetRow(MultiView.TempGrid1, );

            for (int index = ; index < ; ++index)
            {
                cellPanel = MultiView.DictPanel[index + ];
                MultiView.TempGrid1.RowDefinitions.Add(new RowDefinition());
                Grid.SetRow(cellPanel, index);
                MultiView.TempGrid1.Children.Add(cellPanel);
            }
            MultiView.OriginalGrid.Children.Add(MultiView.TempGrid1);
            //p4,p5 画面
            Grid.SetColumn(MultiView.TempGrid2, );
            Grid.SetRow(MultiView.TempGrid2, );

            for (int index = ; index < ; ++index)
            {
                cellPanel = MultiView.DictPanel[index + ];

                MultiView.TempGrid2.ColumnDefinitions.Add(new ColumnDefinition());
                Grid.SetColumn(cellPanel, index);
                MultiView.TempGrid2.Children.Add(cellPanel);
            }
            MultiView.OriginalGrid.Children.Add(MultiView.TempGrid2);

            cellPanel = MultiView.DictPanel[];
            Grid.SetRow(cellPanel, );
            Grid.SetColumn(cellPanel, );
            MultiView.OriginalGrid.Children.Add(cellPanel);
        }
        /// <summary>
        /// 八画面
        /// </summary>
        public static void SetModel8()
        {
            MultiView.Clear();
            MultiView.CreateColumnAndRow(MultiView.OriginalGrid, , );
            MultiView.OriginalGrid.ColumnDefinitions[].Width = new GridLength(0.75, GridUnitType.Star);
            MultiView.OriginalGrid.ColumnDefinitions[].Width = new GridLength(0.25, GridUnitType.Star);
            MultiView.OriginalGrid.RowDefinitions[].Height = new GridLength(0.75, GridUnitType.Star);
            MultiView.OriginalGrid.RowDefinitions[].Height = new GridLength(0.25, GridUnitType.Star);

            CellPanel cellPanel = MultiView.DictPanel[];
            Grid.SetColumn(cellPanel, );
            Grid.SetRow(cellPanel, );
            MultiView.OriginalGrid.Children.Add(cellPanel);

            //p2,p3,p4 画面
            Grid.SetColumn(MultiView.TempGrid1, );
            Grid.SetRow(MultiView.TempGrid1, );

            for (int index = ; index < ; ++index)
            {
                cellPanel = MultiView.DictPanel[index + ];

                MultiView.TempGrid1.RowDefinitions.Add(new RowDefinition());
                Grid.SetRow(cellPanel, index);
                MultiView.TempGrid1.Children.Add(cellPanel);
            }
            MultiView.OriginalGrid.Children.Add(MultiView.TempGrid1);
            //p5,p6,p7 画面
            Grid.SetColumn(MultiView.TempGrid2, );
            Grid.SetRow(MultiView.TempGrid2, );

            for (int index = ; index < ; ++index)
            {
                cellPanel = MultiView.DictPanel[index + ];

                MultiView.TempGrid2.ColumnDefinitions.Add(new ColumnDefinition());
                Grid.SetColumn(cellPanel, index);
                MultiView.TempGrid2.Children.Add(cellPanel);
            }
            MultiView.OriginalGrid.Children.Add(MultiView.TempGrid2);

            cellPanel = MultiView.DictPanel[];
            Grid.SetRow(cellPanel, );
            Grid.SetColumn(cellPanel, );
            MultiView.OriginalGrid.Children.Add(cellPanel);
        }
        /// <summary>
        /// 十画面
        /// </summary>
        public static void SetModel10()
        {
            MultiView.Clear();
            MultiView.CreateColumnAndRow(MultiView.OriginalGrid, , );
            MultiView.OriginalGrid.ColumnDefinitions[].Width = new GridLength(0.77, GridUnitType.Star);
            MultiView.OriginalGrid.ColumnDefinitions[].Width = new GridLength(0.23, GridUnitType.Star);
            MultiView.OriginalGrid.RowDefinitions[].Height = new GridLength(0.8, GridUnitType.Star);
            MultiView.OriginalGrid.RowDefinitions[].Height = new GridLength(0.2, GridUnitType.Star);

            CellPanel cellPanel = MultiView.DictPanel[];
            Grid.SetColumn(cellPanel, );
            Grid.SetRow(cellPanel, );
            MultiView.OriginalGrid.Children.Add(cellPanel);

            //p2,p3,p4,p5 画面
            Grid.SetColumn(MultiView.TempGrid1, );
            Grid.SetRow(MultiView.TempGrid1, );

            for (int index = ; index < ; ++index)
            {
                cellPanel = MultiView.DictPanel[index + ];

                MultiView.TempGrid1.RowDefinitions.Add(new RowDefinition());
                Grid.SetRow(cellPanel, index);
                MultiView.TempGrid1.Children.Add(cellPanel);
            }
            MultiView.OriginalGrid.Children.Add(MultiView.TempGrid1);
            //p6,p7,p8,p9 画面
            Grid.SetColumn(MultiView.TempGrid2, );
            Grid.SetRow(MultiView.TempGrid2, );

            for (int index = ; index < ; ++index)
            {
                cellPanel = MultiView.DictPanel[index + ];

                MultiView.TempGrid2.ColumnDefinitions.Add(new ColumnDefinition());
                Grid.SetColumn(cellPanel, index);
                MultiView.TempGrid2.Children.Add(cellPanel);
            }
            MultiView.OriginalGrid.Children.Add(MultiView.TempGrid2);

            cellPanel = MultiView.DictPanel[];
            Grid.SetRow(cellPanel, );
            Grid.SetColumn(cellPanel, );
            MultiView.OriginalGrid.Children.Add(cellPanel);
        }
        /// <summary>
        /// 索引画面全屏
        /// </summary>
        /// <param name="index">画面索引</param>
        public static void SetFullScreen(int index)
        {
            MultiView.Clear();
            CellPanel cellPanel = MultiView.DictPanel[index];
            Grid.SetColumn(cellPanel, );
            Grid.SetRow(cellPanel, );
            MultiView.OriginalGrid.Children.Add(cellPanel);
        }

        private static void Clear()
        {
            MultiView.OriginalGrid.RowDefinitions.Clear();
            MultiView.OriginalGrid.ColumnDefinitions.Clear();
            MultiView.OriginalGrid.Children.Clear();
            MultiView.TempGrid1.Children.Clear();
            MultiView.TempGrid1.RowDefinitions.Clear();
            MultiView.TempGrid1.ColumnDefinitions.Clear();
            MultiView.TempGrid2.Children.Clear();
            MultiView.TempGrid2.RowDefinitions.Clear();
            MultiView.TempGrid2.ColumnDefinitions.Clear();

        }

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

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

2、 实现单通道画面控件CellPanel

1） 前台页面

<UserControl x:Class="MultiviewControl.CellPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
             xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
             BorderThickness="" BorderBrush="Silver">
    <Grid Background="Black">
        <wfi:WindowsFormsHost >
            <wf:Panel x:Name="panel" AutoSize="true" Dock="Fill"/>
        </wfi:WindowsFormsHost>
    </Grid>
</UserControl>

2） 后台实现

  public partial class CellPanel : System.Windows.Controls.UserControl
     {
         public int Index;
         public bool Selected;

         private bool isFull = false;
         private SolidColorBrush SelectedColor = new SolidColorBrush(Colors.YellowGreen);
         private SolidColorBrush MouseEnterColor = new SolidColorBrush(Colors.Red);
         private SolidColorBrush NormalColor = new SolidColorBrush(Colors.Silver);

         public CellPanel()
         {
             this.InitializeComponent();
             this.panel.Click += new EventHandler(this.panel_Click);
             this.panel.DoubleClick += new EventHandler(this.panel_DoubleClick);
             this.panel.MouseEnter += new EventHandler(this.panel_MouseEnter);
             this.panel.MouseLeave += new EventHandler(this.panel_MouseLeave);
             this.panel.SizeChanged += new EventHandler(this.panel_SizeChange);
             this.Selected = false;
         }

         public void panel_Click(object sender, EventArgs e)
         {
             foreach (CellPanel cellPanel in MultiView.DictPanel.Values)
             {
                 cellPanel.Selected = false;
                 cellPanel.BorderBrush = NormalColor;
             }
             this.Selected = true;
             this.BorderBrush = SelectedColor;
         }
         public void panel_DoubleClick(object sender, EventArgs e)
         {
             if (this.isFull)
             {
                 MultiView.SetCurrentModel(MultiView.CurrentModel);
             }
             else
             {
                 MultiView.SetFullScreen(this.Index);
             }

             this.isFull = !this.isFull;
         }
         private void panel_MouseEnter(object sender, EventArgs e)
         {
             if (!this.Selected)
             {
                 this.BorderBrush = MouseEnterColor;
             }
         }

         private void panel_MouseLeave(object sender, EventArgs e)
         {
             if (!this.Selected)
             {
                 this.BorderBrush = NormalColor;
             }
         }
         private void panel_SizeChange(object sender, EventArgs e)
         {
             this.panel.Size = new System.Drawing.Size((int)this.Width - , (int)this.Height - );
         }

     }

　　3、新建一个窗体MainWindow，调用MutiView类

　　   1） 前台页面

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

2） 后台实现

  public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             MultiView.InitGrid(this.grid, );
             MultiView.SetCurrentModel();
         }

         private void btn_Click(object sender, RoutedEventArgs e)
         {
             Button btn = sender as Button;
             int index = ;
             if(btn.Tag != null)
             {
                 MultiView.SetCurrentModel(Convert.ToInt32( btn.Tag));
             }

         }

     }

多画面切换就OK了！希望能对大家有用！