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

前言

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

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

一上二下佈局

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

<!--Definition-->
<Grid.RowDefinitions >
<RowDefinition Height="192" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="256" />
<ColumnDefinition />
</Grid.ColumnDefinitions> <!--Panel-->
<Border Grid.Row="0" Grid.Column="0" Background="LightCoral" Grid.ColumnSpan="2" />
<!--<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />-->
<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />
<Border Grid.Row="1" Grid.Column="1" Background="LightGreen" />

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

<!--Splitter-->
<GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="5" /> <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控制項,用以提供動態調整下方左右兩欄表格區域寬度的功能。

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="1024" Height="768">
<Grid> <!--Definition-->
<Grid.RowDefinitions >
<RowDefinition Height="192" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="256" />
<ColumnDefinition />
</Grid.ColumnDefinitions> <!--Panel-->
<Border Grid.Row="0" Grid.Column="0" Background="LightCoral" Grid.ColumnSpan="2" />
<!--<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />-->
<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />
<Border Grid.Row="1" Grid.Column="1" Background="LightGreen" /> <!--Splitter-->
<GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="5" />
<GridSplitter Grid.Row="1" Grid.Column="0" Background="Transparent" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="5" /> </Grid>
</Window>

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

一左二右佈局

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

<!--Definition-->
<Grid.RowDefinitions >
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="256" />
<ColumnDefinition />
</Grid.ColumnDefinitions> <!--Panel-->
<Border Grid.Row="0" Grid.Column="0" Background="LightCoral" Grid.RowSpan="2"/>
<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />
<!--<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />-->
<Border Grid.Row="1" Grid.Column="1" Background="LightGreen" />

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

<!--Splitter-->
<GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="5" /> <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控制項,用以提供動態調整右方上下兩欄表格區域高度的功能。

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="1024" Height="768">
<Grid> <!--Definition-->
<Grid.RowDefinitions >
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="256" />
<ColumnDefinition />
</Grid.ColumnDefinitions> <!--Panel-->
<Border Grid.Row="0" Grid.Column="0" Background="LightCoral" Grid.RowSpan="2"/>
<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />
<!--<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />-->
<Border Grid.Row="1" Grid.Column="1" Background="LightGreen" /> <!--Splitter-->
<GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="5" />
<GridSplitter Grid.Row="0" Grid.Column="1" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="5" /> </Grid>
</Window>

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

四分割佈局

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

<!--Definition-->
<Grid.RowDefinitions >
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions> <!--Panel-->
<Border Grid.Row="0" Grid.Column="0" Background="LightCoral" />
<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />
<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />
<Border Grid.Row="1" Grid.Column="1" Background="LightGreen" />

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

<!--Splitter-->
<GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="5" /> <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控制項,用以提供動態調整左右兩欄表格區域寬度的功能。

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="1024" Height="768">
<Grid> <!--Definition-->
<Grid.RowDefinitions >
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions> <!--Panel-->
<Border Grid.Row="0" Grid.Column="0" Background="LightCoral" />
<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />
<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />
<Border Grid.Row="1" Grid.Column="1" Background="LightGreen" /> <!--Splitter-->
<GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="5" />
<GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="5" /> </Grid>
</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. lucene做简单的文件索引

    package com.mylucene; import java.io.File; import java.io.FileReader; import java.io.IOException; im ...

  2. Linear Regression(线性回归)(二)—正规方程(normal equations)

    (整理自AndrewNG的课件,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 在上篇博客中,我们提出了线性回归的概念,给出了一种使代价函数最小的 ...

  3. Windows下与Linux下编写socket程序的区别 《转载》

     原文网址:http://blog.chinaunix.net/uid-2270658-id-308160.html [[Windows]] [Windows: 头文件的区别] #include< ...

  4. HDU 3584 三维树状数组

    三维树状数组模版.优化不动了. #include <set> #include <map> #include <stack> #include <cmath& ...

  5. SQL server语句练习

    相关表: <span style="white-space:pre">create table DEPT ( <span style="white-sp ...

  6. 四个机器学习一步一步入门约束波尔兹曼机RBM

  7. jquery的ajax提交form表单方式总结

    方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...

  8. Esper学习之四:Context

    上周末打球实在太累了,就没来得及更新,只是列了个提纲做做准备,发现Context还是有很多内容的.结果也花了不少时间才写完,所以这篇需要各位慢慢消化,并且最好多写几个例子加深理解. 如果有不了解Esp ...

  9. Qt4在linux下的安装

    1.下载SDK ftp://ftp.informatik.hu-berlin.de/pub/Mirrors/ftp.troll.no/QT/qtsdk/qt-sdk-linux-x86-opensou ...

  10. Unicode 字符集与它的编码方式

    正式内容開始之前,我们先来了解一个基本概念,编码字符集. 编码字符集:编码字符集是一个字符集,它为每个字符分配一个唯一数字.Unicode 标准的核心是一个编码字符集,字母"A"的 ...