关于wpf布局的理解

  之前很少做客户端的东西，最近使用wpf做一个监控界面，看着美工给的高大上的效果图，想要根据效果图实现布局效果，还是需要一些技巧和工具的。这里总结下如何根据美工小姐姐的效果图来一步步的在wpf的页面上来实现效果。

前期准备

推荐一个好用的工具Mark man，这里可以获取各个区域的高度、坐标、颜色等信息，方便后面进行布局的

 

如果效果图是蓝湖的，那就不需要再使用这样的工具了

页面布局控件

Viewbox

ViewBox的作用是能够缩放位于其中的控件，以达到更好的展示效果；如果做过winform架构应用开发，其进行布局时，经常会有一个问题，当容器内部的控件超过容器的宽度，控件要么被遮盖、要么被裁剪，很难达到预期的显示效果，而且因winform的界面控件都是通过拖拽来进行布局，属于静态布局，很难做到响应式布局，而WPF中的ViewBox则很好的完善了winfrom在这方面布局中的不足，ViewBox常常与其他布局控件组合使用，来达到较好界面效果

Grid

Grid顾名思义就是“网格”，它的子控件被放在一个一个实现定义好的小格子里面，整齐配列。Grid和其他各个Panel比较起来，功能最多也最为复杂。同时此面板可承载任意元素，包括控件，图形，甚至文字。各种元素依据屏幕坐标确定位置。

StackPanel

栈面板,可以将元素排列成一行或者一列，其特点是：每个元素各占一行或者一列，Orientation属性指定排列方式：Vertical(垂直)【默认】、Horizontal(水平)，默认情况下，水平排列时，每个元素都与面板一样高；垂直排列时，每个元素都与面板一样宽。如果包含的元素超过了面板空间，它只会截断多出的内容。 元素的Margin属性用于使元素之间产生一定得间隔，当元素空间大于其内容的空间时，剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

实现的思路和方法

组合以上三种布局控件，ViewBox嵌套Gird，Gird里面放置StackPanle，StackPanle中再放置Gird，然后将各个组件放置到纵横交错的' 棋盘 '上即可。

最外层 ViewBox放置页面效果图的背景图片

绿色代表页面的3个StackPanel块

蓝色代表页面Gird需要分隔为多少行和多少列，将StackPanel块放到适当的位置即可，这里需要注意Grid.Row和Grid.Column是从0开始计数，ColumnSpan和RowSpan代表合并多少列和行

关于DataGrid的样式设置

  

 

 

后端数据绑定

 List list = new List();
            string inpath = AppDomain.CurrentDomain.BaseDirectory + "Image/jz/in.png";
            string outpath = AppDomain.CurrentDomain.BaseDirectory + "Image/jz/out.png";
            var inimage = CommonHelper.getBitmapImage(inpath);
            var outimage = CommonHelper.getBitmapImage(outpath);
            for (int i = 0; i < 100; i++)
            {
                dynamic d = new ExpandoObject();
                d.name ="  "+ "测试" + i;
                d.opdt = DateTime.Now.ToString("HH:mm:ss");
                if (i % 2 == 0)
                {
                    d.inout = inimage;
                }
                else
                {
                    d.inout = outimage;
                }
                d.department = "交通工程系/汽车维修/2025无人机专业";
                d.room = "南楼/6楼/102";
                d.teacher = "李老师";
                list.Add(d);
            }
            dataGrid1.ItemsSource = list;

最终效果图