前言
曾有做过一个产品，有一个功能是视频监控模块，视频监控首先想到的是视频多画面切换功能，由于前端是用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了！希望能对大家有用！