原文:[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. Android 带你从源码的角度解析Scroller的滚动实现原理

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17483273),请尊重他人的辛勤劳动成果,谢谢! 今天给大 ...

  2. mysql出现Waiting for table metadata lock的原因及解决方案

    最近经常遇到mysql数据库死锁,郁闷死, show processlist; 时 Waiting for table metadata lock 能一直锁很久 下面有官网的一段话,可以理解下 htt ...

  3. MSSQL - SQL Server2008附加数据库失败 错误号：5120

    附加数据库时,显示错误,错误信息为 一种解决方法为,设置mdf文件所在文件夹的权限(有些资料说只设置mdf文件的权限就好,但我试了不管用),在文件夹上右击——属性——安全,如图所示: 选择组或用户名中 ...

  4. Mac Eclipse+Maven+TestNg+ReportNg 生成测试报告

    TestNG 是java 的单元测试框架,功能很强大,很方便,但是自动生成的测试报告有待改善,可以使用TestNg 自带的TestNG_xslt更改TestNG报告的样式,这里主要讲解ReportNg ...

  5. HDU 4868 Information Extraction(2014 多校联合第一场 H)

    看到这道题时我的内心是奔溃的,没有了解过HTML,只能靠窝的渣渣英语一点一点翻译啊TT. Information Extraction 题意:(纯手工翻译,有些用词可能在html中不是一样的,还多包涵 ...

  6. 高斯消元法~get√

    高斯消元法,是线性代数中的一个算法,可用来求解线性方程组,并可以求出矩阵的秩,以及求出可逆方阵的逆矩阵.高斯消元法的原理是:若用初等行变换将增广矩阵 化为 ,则AX = B与CX = D是同解方程组. ...

  7. Bigcommerce：安装的出错解决方案

    我们在本地安装时报错了,具体如下: 1. The database details you entered are incorrect: You have an error in your SQL s ...

  8. Spring MVC 数据验证——validate注解方式

    1.说明 学习注解方式之前,应该先学习一下编码方式的spring注入.这样便于理解验证框架的工作原理.在出错的时候,也能更好的解决这个问题.所以本次博客教程也是基于编码方式.仅仅是在原来的基础加上注解 ...

  9. cocos2dX 事件之触摸事件和触摸事件集合

    今天, 我们来学习cocos2dX里面的触摸事件与触摸事件合集, 如今的手机游戏交互基本上都是通过触摸交互的, 所以大家明确这节的重要性了吧, 本节篇幅比較大, 所以我就不扯闲话了 先来看看经常使用函 ...

  10. 使用Jmeter至WebService压力测试

    使用Jmeter至WebService压力测试   目中我们使用了Jmeter对webservice进行了压力測试,Apache JMeter是Apache组织开发的基于Java的压力測试工具.用于对 ...