[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

时间： 2024-02-26 17:18:58

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

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

原文:WPF案例 (六) 动态切换UI布局   这个Wpf示例对同一个界面支持以ListView或者CardView的布局方式呈现界面,使用控件ItemsControl绑定数据源,使用DataTemplate为ItemsControl分别预定义了ListView和CardView的样式,在程序运行时,可在这两种Layout之间互相切换,界面如下.源代码在这里下载    为ItemsControl定义ListView UI布局的ItemTemplate,并指定MouseOver时DataTempl

WPF的ListView控件自定义布局用法实例_C#教程

本文实例讲述了WPF的ListView控件自定义布局用法.分享给大家供大家参考,具体如下: 概要: 以源码的形式贴出,免得忘记后,再到网上查资料.在VS2008+SP1环境下调试通过 引用的GrayscaleEffect模块,可根据参考资料<Grayscale Effect...>中的位置下载. 正文: 如何布局是在App.xaml中定义源码如下 <Application x:Class="CWebsSynAssistant.App" xmlns="http

关于webview 在移动端重新排版布局的问题

问题描述 关于webview 在移动端重新排版布局的问题 web端没有做 关于手机访问的页面,在手机端可以对web pc版的页面进行重新排版布局和显示,求大神解答 QQ 906539136 解决方案 http://blog.csdn.net/phker/article/details/49621123 解决方案二: webview提供了多个属性,可以设置居中,放大倍数.字数的大小等等.

如何使用Flexbox和CSS Grid，实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来. 使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经被广泛使用了. 同时,CSS Grid 布局也为网页设计行业带来了很大的便利.虽然 CSS Grid 布局未被广泛采用,但是浏览器逐渐开始增加对 CSS Grid 布局的支持. 虽然 Flexbox 和 CSS Grid 可

JS+DIV+CSS排版布局实现美观的选项卡效果_javascript技巧

本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

一组排版布局全不落俗的概念稿网站

  扁平化网页设计的表现大多体现在配色.字体以及布局排版方面,这三样结合得当都能制作出漂亮的网站.在国内很多企业网站的布局架构几乎是一样的,最多就是LOGO和一点颜色变化,看不出什么特色和创新. 作为设计师,应该多花点心思在创新上,比如网页上的布局,其实它是可以变化多样的,正如今天为大家分享40个布局排版好看的网页设计作品,大家可以参考这些布局的设计,从中获得一些灵感. ThoughtSpot Reef MTS Wikipedia Redesign Concept Diker Bau Websi

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

这一节老没意思,啰里啰唆的尽是些HTML的属性,挑几个好玩的List出来,备忘: Padding与Margin的区别: Margin指控件边界与外界的间隙:Padding指的是控件内部内容与控件边界的间隙.两者可以同时使用 . 不再支持 RenderTransform= "scale 3" 改为: <Button> <Button.LayoutTransform> <ScaleTransform ScaleX="3" ScaleY=&q

使用Grid来对WPF页面进行布局排版

对于以前用Windows Form来开发客户端程序的程序员,在使用WPF开发客户端的程序时,在窗体布局上将是他必须面对的一个坎. 布局产生困惑的一个典型场景如下: 我们在开发WPF窗体时候,我们会发现,当我们把菜单控件(Menu).工具条(ToolBar.ToolBarPanel).状态条(StatusBar)这些最常见的页面元素拖动到WPF窗体的时候.我们会发现WPF窗体中,这些页面元素可以放置在任何位置,而不是之前Windows Form那样:主菜单在最上面,状态条在最下面. WPF中每一个

10个在文字排版/网页布局中的常见错误

这篇文章的目的是帮助设计者们和顾客们去理解好的排版技巧的重要性,当避免一些常见的错误的时候.请记住这些错误的大部分是主观的以及在项目.目标或环境能够被改变的 下面列出了10个在排版/布局中使用到的常见错误,这些错误可能在你设计的效果和外观中产生大的影响.当在考虑印刷时它能为你节省时间和金钱. 1.没有足够的行间距(leading) 行间距/leading能改善整页中文字块的阅读效果,这样做是为了当读者阅读下一行的时候不会找不到他们的位置.太小文字可能引起一种受压迫感.记住不同的字体需要不同的行间