原文:[WPF] 使用Grid与GridSplitter排版布局

前言

在開發應用程式時，一個很重要的工作項目就是設計使用者介面的排版布局。WPF中所提供的Grid控制項，讓開發人員擁有將版面分割為欄列交錯表格區域的能力。而開發人員在使用Grid控制項分割版面之後，還可以在版面中加入GridSplitter控制項，用以在執行期間提供使用者動態調整表格區域大小的功能。

本篇文章介紹使用Grid控制項與GridSplitter控制項，來設計幾個常見的基本排版布局，為自己留個紀錄也希望能幫助到有需要的開發人員。

一上二下佈局

上圖是一個一上二下的佈局樣式，MSDN網站採用這個佈局樣式來提供各種資訊內容。

  1. <!--Definition-->
  2. <Grid.RowDefinitions >
  3.     <RowDefinition Height="192" />
  4.     <RowDefinition />
  5. </Grid.RowDefinitions>
  6. <Grid.ColumnDefinitions >
  7.     <ColumnDefinition Width="256" />
  8.     <ColumnDefinition />
  9. </Grid.ColumnDefinitions>
  10.  
  11. <!--Panel-->
  12. <Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  Grid.ColumnSpan="2" />
  13. <!--<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon"   />-->
  14. <Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />
  15. <Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />

完成這個佈局樣式可以透過Grid控制項，將版面切割為2欄2列的表格，並且合併第0列中的兩個欄。

  1. <!--Splitter-->
  2. <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />
  3.  
  4. <GridSplitter Grid.Row="1" Grid.Column="0" Background="Transparent"                     HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />

加入GridSplitter控制項：

*在第0列、第0欄表格區域下方，附加一個定義為Grid.ColumnSpan="2"的GridSplitter控制項，用以提供動態調整上下兩列表格區域高度的功能。

*在第1列、第0欄表格區域右方，附加一個GridSplitter控制項，用以提供動態調整下方左右兩欄表格區域寬度的功能。

  1. <Window x:Class="MainWindow"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="MainWindow" Width="1024" Height="768">
  5.     <Grid>
  6.  
  7.         <!--Definition-->
  8.         <Grid.RowDefinitions >
  9.             <RowDefinition Height="192" />
  10.             <RowDefinition />
  11.         </Grid.RowDefinitions>
  12.         <Grid.ColumnDefinitions >
  13.             <ColumnDefinition Width="256" />
  14.             <ColumnDefinition />
  15.         </Grid.ColumnDefinitions>
  16.  
  17.         <!--Panel-->
  18.         <Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  Grid.ColumnSpan="2" />
  19.         <!--<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon"   />-->
  20.         <Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />
  21.         <Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />
  22.  
  23.         <!--Splitter-->
  24.         <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />
  25.         <GridSplitter Grid.Row="1" Grid.Column="0" Background="Transparent"                     HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />
  26.  
  27.     </Grid>
  28. </Window>

在完成加入這些Grid控制項、GridSplitter控制項之後，記得將GridSplitter控制項的背景顏色定義為透明色(Background="Transparent")，用以提供漂亮的排版布局。

一左二右佈局

上圖是一個一左二右的佈局樣式，Outlook採用這個佈局樣式來提供各種資訊內容。

  1. <!--Definition-->
  2. <Grid.RowDefinitions >
  3.     <RowDefinition />
  4.     <RowDefinition />
  5. </Grid.RowDefinitions>
  6. <Grid.ColumnDefinitions >
  7.     <ColumnDefinition Width="256" />
  8.     <ColumnDefinition />
  9. </Grid.ColumnDefinitions>
  10.  
  11. <!--Panel-->
  12. <Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  Grid.RowSpan="2"/>
  13. <Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />
  14. <!--<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />-->
  15. <Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />

完成這個佈局樣式可以透過Grid控制項，將版面切割為2欄2列的表格，並且合併第0欄中的兩個列。

  1. <!--Splitter-->
  2. <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />
  3.  
  4. <GridSplitter Grid.Row="0" Grid.Column="1" Background="Transparent"                  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />

加入GridSplitter控制項：

*在第0列、第0欄表格區域右方，附加一個定義為Grid.RowSpan="2"的GridSplitter控制項，用以提供動態調整左右兩欄表格區域寬度的功能。

*在第0列、第1欄表格區域下方，附加一個GridSplitter控制項，用以提供動態調整右方上下兩欄表格區域高度的功能。

  1. <Window x:Class="MainWindow"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="MainWindow" Width="1024" Height="768">
  5.     <Grid>
  6.  
  7.         <!--Definition-->
  8.         <Grid.RowDefinitions >
  9.             <RowDefinition />
  10.             <RowDefinition />
  11.         </Grid.RowDefinitions>
  12.         <Grid.ColumnDefinitions >
  13.             <ColumnDefinition Width="256" />
  14.             <ColumnDefinition />
  15.         </Grid.ColumnDefinitions>
  16.  
  17.         <!--Panel-->
  18.         <Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  Grid.RowSpan="2"/>
  19.         <Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />
  20.         <!--<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />-->
  21.         <Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />
  22.  
  23.         <!--Splitter-->
  24.         <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />
  25.         <GridSplitter Grid.Row="0" Grid.Column="1" Background="Transparent"                  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />
  26.  
  27.     </Grid>
  28. </Window>

在完成加入這些Grid控制項、GridSplitter控制項之後，記得將GridSplitter控制項的背景顏色定義為透明色(Background="Transparent")，用以提供漂亮的排版布局。

四分割佈局

上圖是一個四分割的佈局樣式，電視牆採用這個佈局樣式來提供各種資訊內容。

  1. <!--Definition-->
  2. <Grid.RowDefinitions >
  3.     <RowDefinition />
  4.     <RowDefinition />
  5. </Grid.RowDefinitions>
  6. <Grid.ColumnDefinitions >
  7.     <ColumnDefinition />
  8.     <ColumnDefinition />
  9. </Grid.ColumnDefinitions>
  10.  
  11. <!--Panel-->
  12. <Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  />
  13. <Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />
  14. <Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />
  15. <Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />

完成這個佈局樣式可以透過Grid控制項，將版面切割為2欄2列的表格。

  1. <!--Splitter-->
  2. <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />
  3.  
  4. <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2"    HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />

加入GridSplitter控制項：

*在第0列、第0欄表格區域下方，附加一個定義為Grid.ColumnSpan="2"的GridSplitter控制項，用以提供動態調整上下兩列表格區域高度的功能。

*在第0列、第0欄表格區域右方，附加一個定義為Grid.RowSpan="2"的GridSplitter控制項，用以提供動態調整左右兩欄表格區域寬度的功能。

  1. <Window x:Class="MainWindow"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="MainWindow" Width="1024" Height="768">
  5.     <Grid>
  6.  
  7.         <!--Definition-->
  8.         <Grid.RowDefinitions >
  9.             <RowDefinition />
  10.             <RowDefinition />
  11.         </Grid.RowDefinitions>
  12.         <Grid.ColumnDefinitions >
  13.             <ColumnDefinition />
  14.             <ColumnDefinition />
  15.         </Grid.ColumnDefinitions>
  16.  
  17.         <!--Panel-->
  18.         <Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  />
  19.         <Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />
  20.         <Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />
  21.         <Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />
  22.  
  23.         <!--Splitter-->
  24.         <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />
  25.         <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2"    HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />
  26.  
  27.     </Grid>
  28. </Window>

在完成加入這些Grid控制項、GridSplitter控制項之後，記得將GridSplitter控制項的背景顏色定義為透明色(Background="Transparent")，用以提供漂亮的排版布局。

原始碼下載

點此下載原始碼：GridLayoutSample.rar

[WPF] 使用Grid与GridSplitter排版布局的更多相关文章

  1. WPF中Grid布局

    WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...

  2. WPF Blend Grid 布局

    这几天都在用blend拖拽界面.我想要的效果是 放大后出现的效果是 但实际出来的效果是放大以后能看到所有的控件,缩小以后窗体就把控件个遮住了.怎么办? 在WPF中提供了9种布局方式,具体Grid,Ca ...

  3. 3、Grid、GridSplitter 网格分离器、SharedSizeGroup 共享尺寸组

    Grid——网格布局,是WPF中最强大的布局容器,可以实现任何其他容器的布局.一个网格中只展示一个元素,若要展示多元素,可用容器 布局舍入:网格的边界有时会模糊,如三等分100宽度无法被整除.推荐设定 ...

  4. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  5. WPF中Grid容器中VerticalAlignment和HorizonAlignment和Margin的关系。

    在WPF中,经常使用Grid容器,来布局我们想要显示的对象. 这就不可避免的要和布局在其中的控件的VerticalAlignment特性,HorizonAlignment特性,以及Magin特性打交道 ...

  6. 网页万能排版布局插件，web视图定位布局创意技术演示页

    html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> &l ...

  7. 周末充电之WPF（二 ） .窗口的布局

    登录窗口布局:[ Grid 布局 -Grid.RowDefinitions / Grid.ColumnDefinitions] 代码如下: <Window x:Class="login ...

  8. WPF笔记(2.8 常用的布局属性)——Layout

    原文:WPF笔记(2.8 常用的布局属性)--Layout 这一节老没意思,啰里啰唆的尽是些HTML的属性,挑几个好玩的List出来,备忘:Padding与Margin的区别:Margin指控件边界与 ...

  9. WPF案例 (六) 动态切换UI布局

    原文:WPF案例 (六) 动态切换UI布局 这个Wpf示例对同一个界面支持以ListView或者CardView的布局方式呈现界面,使用控件ItemsControl绑定数据源,使用DataTempla ...

随机推荐

  1. Cordys BOP 4平台开发入门实战演练——Webservices开发（0基础）

    0.文章导读 本文档针对Cordys BOP-4 WS-AppServer基础功能进行验证和高速开发指导.(高级实践文档请參考兴许文档). 0.1.WS-AppServer概述 WS-AppServe ...

  2. Effective C++_笔记_条款06_若不想使用编译器自动生成的函数，就该明确拒绝

    (整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 通常如果你不希望class支持某一特定机能,只要不声明对应函数就 ...

  3. 使用JDBC处理数据库大容量数据类型

    在本文将介绍如何使用JDBC操作MySQL数据库对于大容量数据类型的读取.在之前的博客中已经介绍了如何使用JDBC来操作数据库对各种数据的增删改查,那么大容量数据类型的数据操作又为何不同呢. 原因在于 ...

  4. How to initialize a static const map in c++?

    #include <map> using namespace std; struct A{ static map<int,int> create_map() { map< ...

  5. Delphi与Vista提供的UAC控制（1-代表资源编号，24-资源类型为RTMAINIFEST，最后用brcc32编译成资源文件）

    Vista提供的UAC机制,是Vista的新增功能之一.它的主要目的是防止对于操作系统本身的恶意修 改.如果想对于Vista的 系统设置进行改动,必须通过UAC的验 证才能够进行.通过这样的手段,大大 ...

  6. 站在OC的基础上快速理解Swift的类与结构体

    阅读此文章前,您已经有一定的Object-C语法基础了!) 2014年,Apple推出了Swift,最近开始应用到实际的项目中. 首先我发现在编写Swift代码的时候,经常会遇到Xcode不能提示,卡 ...

  7. jQuery实现可编辑表格

    在很多的网页中,这个可编辑表格在许多地方都是非常有用,配合上AJAX技术能够实现很好的用户体验,下面我 们就jQuery来说明一下可编辑表格的实现步骤 首先是HTML代码,非常简单 <!DOCT ...

  8. Qt之VLFeat SLIC超像素分割(Cpp版)

    源地址:http://yongyuan.name/blog/vlfeat-slic-with-qt.html 近段时间学了点Qt,恰好前段时间用借助VLfeat以及OpenCV捣鼓了SLIC超像素分割 ...

  9. haproxy配置监控redis主备切换(转)

    环境前提:     redis sentinel配置,三台主机,且配置运行良好        配置文件中添加: frontend ft_redis  bind 0.0.0.0:6379 name re ...

  10. Java魔法堂：JVM的运行模式 （转）

    一.前言 JVM有Client和Server两种运行模式.不同的模式对应不同的应用场景,而JVM也会有相应的优化.本文将记录JVM模式的信息,以便日后查阅. 二.介绍 在$JAVA_HOME/jre/ ...