[WPF] 使用Grid与GridSplitter排版布局
原文:[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排版布局的更多相关文章
- WPF中Grid布局
WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...
- WPF Blend Grid 布局
这几天都在用blend拖拽界面.我想要的效果是 放大后出现的效果是 但实际出来的效果是放大以后能看到所有的控件,缩小以后窗体就把控件个遮住了.怎么办? 在WPF中提供了9种布局方式,具体Grid,Ca ...
- 3、Grid、GridSplitter 网格分离器、SharedSizeGroup 共享尺寸组
Grid——网格布局,是WPF中最强大的布局容器,可以实现任何其他容器的布局.一个网格中只展示一个元素,若要展示多元素,可用容器 布局舍入:网格的边界有时会模糊,如三等分100宽度无法被整除.推荐设定 ...
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- WPF中Grid容器中VerticalAlignment和HorizonAlignment和Margin的关系。
在WPF中,经常使用Grid容器,来布局我们想要显示的对象. 这就不可避免的要和布局在其中的控件的VerticalAlignment特性,HorizonAlignment特性,以及Magin特性打交道 ...
- 网页万能排版布局插件,web视图定位布局创意技术演示页
html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> &l ...
- 周末充电之WPF(二 ) .窗口的布局
登录窗口布局:[ Grid 布局 -Grid.RowDefinitions / Grid.ColumnDefinitions] 代码如下: <Window x:Class="login ...
- WPF笔记(2.8 常用的布局属性)——Layout
原文:WPF笔记(2.8 常用的布局属性)--Layout 这一节老没意思,啰里啰唆的尽是些HTML的属性,挑几个好玩的List出来,备忘:Padding与Margin的区别:Margin指控件边界与 ...
- WPF案例 (六) 动态切换UI布局
原文:WPF案例 (六) 动态切换UI布局 这个Wpf示例对同一个界面支持以ListView或者CardView的布局方式呈现界面,使用控件ItemsControl绑定数据源,使用DataTempla ...
随机推荐
- Java中怎么控制线程訪问资源的数量
在API中是这样来描写叙述Semaphore 的 Semaphore 通经常使用于限制能够訪问某些资源(物理或逻辑的)的线程数目. 一个计数信号量.从概念上讲,信号量维护了一个许可集.如有必要,在许可 ...
- Python中字符串的方法及注释
先整理到这里:用的时候便于查询.相当于自己的资料库吧. capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) ...
- Effective C++_笔记_条款00_基本术语
(整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 下面是每一位C++程序员都应该了解的C++词汇. 1 C++中 ...
- shell基础(转)
shell基础1:文件安全与权限 http://bbs.chinaunix.net/forum/viewtopic.php?t=434579&highlight=wingger 附:Linux ...
- boost::asio网络传输错误码的一些实验结果(recv error_code)
错误码很重要,可以由此判断网络连接到底发生了神马事情,从而驱动高层逻辑的行为.只有笼统的错误码判断的网络层是不够规范的,鄙人觉得有些错误码还是需要在网络层就区分开的,特此记录一些当前实验的错误码以及发 ...
- Swift - 使用xib添加新界面
除了使用storyboard外,我们还可以使用xib来设计并创建页面. 1,下面通过一个样例来演示: (1)点击主界面的“信息”按钮,页面切换到信息界面 (2)点击信息界面的“返回”,关闭信息界面,回 ...
- 插件 - 提示窗体(ArtDialog)
效果: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default. ...
- Oracle PL/SQL 非预定义异常、自定义异常处理、RAISE_APPLICATION_ERROR
抛出异常 Oracle有三种类型的异常错误: 1. 预定义(Predefined)异常 ORACLE预定义的异常情况大约有24个.对这种异常情况的处理,无需在程序中定义,由ORACLE自动将其引发. ...
- 辛星与您解读PHP页面跳转的几种实现方式
因为页面跳转的使用是很频繁的,因此这里给出几种方式,事实上我想我并没有归纳全,毕竟函数那么多,要一下想起来还是特别麻烦的,于是,想到哪里就记到哪里把,等着以后再整理汇总. 第一种方式就是使用heade ...
- 使用Boost库中的组件进行C++内存管理
C++标准库中的auto_ptr,智能指针,部分的解决了获取资源自动释放的问题 在Boost中,提供了6中智能指针:scoped_ptr, scoped_array, shared_ptr, shar ...