关于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的样式设置

<!--设置表格行头的样式-->

<DataGrid.RowHeaderStyle>
                                <Style TargetType="DataGridRowHeader">
                                    <Setter Property="Foreground" Value="#162166"/>
                                    <Setter Property="FontSize" Value="20" />
                                    <Setter Property="Height" Value="70" />
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="White" Offset="0"/>
                                                <!--这里用到了两种颜色  也可以多层  这样就可以产生一种渐变的效果或立体感-->
                                                <GradientStop Color="SkyBlue" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </DataGrid.RowHeaderStyle>

  <!--设置表格列头的样式-->

 <DataGrid.ColumnHeaderStyle>
                                <Style TargetType="DataGridColumnHeader">
                                    <!--<Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                <GradientStop Color="#f1f8fe" Offset="0"/>
                                                <GradientStop Color="#f1f8fe" Offset="0.5"/>
                                                <GradientStop Color="#f1f8fe" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>-->
                                    <Setter Property="Foreground" Value="#1d1f6c"/>
                                    <Setter Property="FontSize" Value="30" />
                                    <Setter Property="Height" Value="70" />
                                    <Setter Property="FontWeight" Value="Bold" />
                                </Style>
                            </DataGrid.ColumnHeaderStyle>

 <!--设置表格行数据的样式-->

 <DataGrid.RowStyle>
                                <Style TargetType="DataGridRow">
                                    <Setter Property="Foreground" Value="#162166"/>
                                    <Setter Property="FontSize" Value="20" />
                                    <Setter Property="Height" Value="70" />
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <!--当鼠标经过时 改变颜色-->
                                            <Setter Property="Background" Value="SkyBlue"/>
                                            <Setter Property="Foreground" Value="White"/>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </DataGrid.RowStyle>

<!--设置表格元素的样式，比如元素的上下垂直居中-->

<DataGrid.CellStyle>
                                <Style TargetType="DataGridCell">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="DataGridCell">
                                                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left">
                                                    <ContentPresenter></ContentPresenter>
                                                </TextBlock>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                    
                                </Style>
                            </DataGrid.CellStyle>

<!--设置数据源绑定字段-->

 

<DataGrid.Columns>
                            <DataGridTextColumn  Header="  姓名" Width="125" Binding="{Binding name}"/>
                            <DataGridTextColumn Header="进出时间" Width="150" Binding="{Binding opdt}"/>
                            <!--绑定图片数据源显示-->
                            <DataGridTemplateColumn  Header="" Width="150">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <Image Height="28"  Source="{Binding inout}"/>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>
                                <DataGridTextColumn Header="部门" Width="500" Binding="{Binding department}"/>
                                <DataGridTextColumn Header="宿舍" Width="250" Binding="{Binding room}"/>
                            <DataGridTextColumn Header="班主任" Width="125" Binding="{Binding teacher}"/>
                        </DataGrid.Columns>

后端数据绑定

 List<dynamic> list = new List<dynamic>();
            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;

最终效果图