之前很少做客户端的东西,最近使用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;
最终效果图