AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2014-02-28 1125
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:[WPF] 使用Grid与GridSplitter排版布局前言   在開發應用程式時，一個很重要的工作項目就是設計使用者介面的排版布局。WPF中所提供的Grid控制項，讓開發人員擁有將版面分割為欄列交錯表格區域的能力。
原文: [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


文章标签：
C#
关键词：
wpf布局
wpf grid
杰克.陈
目录
相关文章
土木林森
|
3月前
|
C# UED 开发者
WPF与性能优化：掌握这些核心技巧，让你的应用从卡顿到丝滑，彻底告别延迟，实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法，详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈，如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着，通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画，从而有效提升应用性能。通过这些优化措施，WPF应用将更加流畅，用户体验也将得到显著改善。
土木林森
244 1
土木林森
|
3月前
|
开发者 C# Windows
WPF布局大揭秘：掌握布局技巧，轻松创建响应式用户界面，让你的应用程序更上一层楼！
【8月更文挑战第31天】在现代软件开发中，响应式用户界面至关重要。WPF（Windows Presentation Foundation）作为.NET框架的一部分，提供了丰富的布局控件和机制，便于创建可自动调整的UI。本文介绍WPF布局的基础概念与实现方法，包括`StackPanel`、`DockPanel`、`Grid`等控件的使用，并通过示例代码展示如何构建响应式布局。了解这些技巧有助于开发者优化用户体验，适应不同设备和屏幕尺寸。
土木林森
94 0
关关长语
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
关关长语
244 1
老码识途
|
6月前
|
前端开发 C# 索引
浅谈WPF之UI布局
一个成功的软件，离不开人性化的UI设计，如何抓住用户第一视觉，让用户产生依赖感，合适优雅的布局必不可少。本文以一些简单的小例子，简述WPF中布局 面板 控件的使用，仅供学习分享使用，如有不足之处，还请指正。
老码识途
100 1
Rick_1/2
|
前端开发 C# 容器
WPF技术之控件布局
WPF提供了多种布局控件和技术，可以帮助开发人员轻松创建灵活的用户界面。
Rick_1/2
178 0
WPF技术之控件布局
关关长语
|
C#
WPF-布局样式练习-Day01
WPF-布局样式练习-Day01
关关长语
127 0
游客ywxcp53cgkqwi
|
C#
WPF学习—布局
WPF学习—布局
游客ywxcp53cgkqwi
131 0
WPF学习—布局
杰克.陈
|
算法 C#
WPF/UWP 的 Grid 布局竟然有 Bug，还不止一个！了解 Grid 中那些未定义的布局规则
原文:WPF/UWP 的 Grid 布局竟然有 Bug，还不止一个！了解 Grid 中那些未定义的布局规则 版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
杰克.陈
1088 0
杰克.陈
|
C#
[WPF] VisualBrush 中的布局
原文:[WPF] VisualBrush 中的布局 今天插一篇随笔。说一说上周五遇到的一个布局问题，问题大概是这样的：需要在一个快区域上添加一张透明的背景图片，由于区域较大、并且宽高都不是固定大小，图片较小 所以图片需要居中显示。
杰克.陈
966 0
杰克.陈
|
C# Windows
为WPF和Silverlight的Grid添加边框线(zz)
原文:为WPF和Silverlight的Grid添加边框线(zz)   Grid是WPF和Silverlight中的一个重要的布局元素，其他的布局元素还有StackPanel, Canvas, Border等等。
杰克.陈
1332 0