【WPF学习】第十章 WPF布局示例

  前几章用了相当大的篇幅研究有关WPF布局容器的复杂内容。在掌握了这些基础知识后,就可以研究几个完整的布局示例。通过研究完整的布局示例,可更好的理解各种WPF布局概念在实际窗口中的工作方式。

一、列设置

  布局容器(如Grid面板)使得窗口创建整个布局结构变得非常容易。例如,分析如下显示的窗口及设置。该窗口在一个表格结构中排列各个组件——标签、文本框以及按钮。

  为创建这一表格,首先定义网格的行和列。行定义足够简单——只需要将每行的尺寸设置为所含内容的高度。这意味着所有行都将使用最大元素的高度,在该示例中,最大的元素是第三列中的Browse按钮。

  接下来需要创建列。第一列和最后一列的尺寸要适合其内容(分别是标签文本和Browse按钮)。中间列占用所有剩余空间,这意味着当窗口变大时,该列的尺寸会增加,这样可有更大的空间显示选择的文件夹(如果希望拉伸不超过一定的最大宽度,在定义列时可使用MaxWidth属性,就像对单个元素使用MaxWidth属性一样)。

  现在已经具备了基本结构,接下来只需要在恰当的单元格中放置元素。然而,还需要仔细考虑边距和对其方式。每个元素需要基本的边距(3个单位较恰当)以在其周围添加一些空间。此外,标签和文本框的垂直方向上需要剧中,因为他们没有Browse按钮高。最后,文本框需要使用自动设置尺寸模式,这样它会被拉伸以充满整列。

  示例完整的代码如下所示:

<Window x:Class="LayoutDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Margin="3,3,10,3">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.Column="0" Margin="3" VerticalAlignment="Center">Home:</Label>
        <TextBox Grid.Row="0" Grid.Column="1" Margin="3" Height="Auto" VerticalAlignment="Center"></TextBox>
        <Button Grid.Row="0" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
        <Label Grid.Row="1" Grid.Column="0" Margin="3" VerticalAlignment="Center">Network:</Label>
        <TextBox Grid.Row="1" Grid.Column="1" Margin="3" Height="Auto" VerticalAlignment="Center"></TextBox>
        <Button Grid.Row="1" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
        <Label Grid.Row="2" Grid.Column="0" Margin="3" VerticalAlignment="Center">Web:</Label>
        <TextBox Grid.Row="2" Grid.Column="1" Margin="3" Height="Auto" VerticalAlignment="Center"></TextBox>
        <Button Grid.Row="2" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
        <Label Grid.Row="3" Grid.Column="0" Margin="3" VerticalAlignment="Center">Secondary:</Label>
        <TextBox Grid.Row="3" Grid.Column="1" Margin="3" Height="Auto" VerticalAlignment="Center"></TextBox>
        <Button Grid.Row="3" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
    </Grid>
</Window>

  一个不是非常明显的事实是,因为使用了Grid控件,所以该窗口时非常灵活的。没有任何一个元素——标签、文本框以及按钮——时通过硬编码来定位和设置尺寸的。因此,可通过简单地修改ColumnDefinition元素来快速改变整个网络。甚至,如果添加了包含更长标签文本的行(迫使第一列更宽),就会调整整个网格使其保持一致,包括已经添加的行。如果希望在两行之间添加元素——例如,添加分割线以区分窗口的不同部分——可保持网格的列定义不变,但使用ColumnSpan属性拉伸某个元素,使其覆盖更大的区域。

二、动态内容

  与上面的演示的列设置一样,当修订应用程序时,可方便地修改使用WPF布局容器的窗口并且可以很容易地时窗口适应对应用程序的修订。这样的灵活性不仅能使开发人员在设计时受益,而且如果需要显示在运行时变化很大的内容,这样是非常有用的。

  一个例子是本地化文本——对于不同的区域,在用户界面中显示的文本需要翻译成不同的语言。在老式的基于坐标的应用程序中,改变窗口中的文本会造成混乱,部分原因是少了英语文本翻译成许多语言后会变得特别大。尽管允许改变元素的尺寸以适应更大的文本,但这样做警察会使整体窗口失去平衡。

  下图演示WPF布局控件时如何聪明地解决这一问题。在这个示例中,用户界面可选择短文本和长文本。当使用长文本时,包含文本的按钮会自动改变其尺寸,而对其他内容也会相应的调整位置。并且因此改变了尺寸的按钮共享同一布局容器(在该例中是一个表格列),所以整个用户界面都会改变尺寸。最终结果是所有按钮保持一致的尺寸——最大按钮的尺寸。

               

  为实现这个效果,窗口使用一个具有两行两列的表格进行分割。左边的列包含可改变大小的按钮,而右边的列包含文本框。底行用于放置Close按钮,底行和顶行位于同一个表格中,从而可以根据顶行改变尺寸。

  示例完整代码如下所示:

<Window x:Class="LayoutDemo.LayoutWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LayoutWindow" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0">
            <Button Name="btnPrev" Margin="10,10,10,3">Prev</Button>
            <Button Name="btnNext" Margin="10,3,10,3">Next</Button>
            <CheckBox Name="chkLongText" Margin="10,10,10,10"  Checked="chkLongText_Checked" Unchecked="chkLongText_UnChecked">Show Long Text</CheckBox>
        </StackPanel>
        <TextBox Grid.Row="0" Grid.Column="1" Margin="0,10,10,10" TextWrapping="Wrap" Grid.RowSpan="2">
            This is a test that demonstrates how buttons adapt themselfes to fit the content they contain when they aren‘t explicitly sized.This behavior makes localization much easier.
        </TextBox>
        <Button Grid.Row="1" Grid.Column="0" Name="btnClose" Margin="10,3,10,10">
            Close
        </Button>
    </Grid>
</Window>

  后台代码如下所示:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace LayoutDemo
{
    /// <summary>
    /// LayoutWindow.xaml 的交互逻辑
    /// </summary>
    public partial class LayoutWindow : Window
    {
        public LayoutWindow()
        {
            InitializeComponent();
        }

        private void chkLongText_Checked(object sender, RoutedEventArgs e)
        {
            this.btnPrev.Content = "<-Go to the Previous Window";
            this.btnNext.Content = "Go to the Next Window ->";
        }

        private void chkLongText_UnChecked(object sender, RoutedEventArgs e)
        {
            this.btnPrev.Content = "Prev";
            this.btnNext.Content = "Next";
        }
    }
}

  Visiblity属性是UIEelement基类的一部分,因此放置于WPF窗口中的任何内容都支持该属性。该属性可使用三个值,它们来自System.Windows.Visiblity枚举,如下表所示:

   名    称          说    明     
Visible 元素在窗口中正常显示
Collapsed 元素不显示,也不占用任何空间
Hidden 元素不显示,但仍为其保留空间(换句话说,会在元素可能先生和ide地方保留空白空间)。如果需要隐藏和显示元素,又不希望改变窗口布局和窗口中剩余元素的相对位置,使用该设置是非常方便的。

原文地址:https://www.cnblogs.com/Peter-Luo/p/12231279.html

时间: 2024-11-05 20:24:51

【WPF学习】第十章 WPF布局示例的相关文章

WPF学习(一)--布局控件简介

WPF的4种基本布局介绍 1.Grid的布局 这个就没啥特别好说的,其实,基本上复杂的布局,都需要用到Grid. 主要就是对行和列进行进行设置和定义. 1.行表格 列表格: 包含行和列的表格 2.StackPanel 垂直方向: 3.DockPanel 4.WarpPanel

WPF学习之旅---页面布局

WPF布局执行工作 测量:容器遍历所有子元素,并询问子元素所期望的尺寸 排列:容器在合适的位置放置子元素,并设置最终尺寸 height,width:元素期望尺寸 Actualheight,Actualwidth:实际尺寸 布局继承机制 DispatherObject:WPF应用程序使用单线程亲和模式,每个用户界面只被一个单线程使用. DependebcyObject:依赖属性,在winform控件中,控件通常默认保存初始化值,这样就浪费资源,依赖属性就是解决这一问题,默认的属性只保存一份 Vis

【WPF学习】创建WPF应用程序的三种方式

说到WPF项目,肯定会想到XAML,这两者是相互补充的技术,其实它们也是相互独立的,所以可以创建不使用XAML的WPF项目,今天就讲一讲创建WPF应用程序的三种不同的编码方式. 1.只使用代码:这种方法类似于传统的Windows窗体应用程序,通过代码语句生成用户界面.这种方法在编写WPF项目时很不常见,但是也不完全是没有优点的,它的潜在优点是可以随意定制应用程序.例如想只用代码创建一个窗体,那么需要新建一个Class(注意不是新建一个Window),在Class的代码中继承Window,然后写一

WPF学习笔记之-WPF概述篇(两大亮点)

WPF的两大亮点 一.硬件加速 WPF 图形显示是基于DirectX(最初是为游戏显示开发的图形显示引擎),而非GDI/GDI+. WPF的目标是将尽可能多的工作交给显卡处理,所以复杂图形通常属于渲染范围(由GPU处理)而不属于处理器范围(由计算机的CPU处理).也就是说,可以让CPU空闲下来去完成其他工作,充分利用显卡的功能,并且还可以充分利用未来新显卡所具备的不断增加的新功能. WPF渲染级别(WPF TIERS) 显卡功能的区别是非常重要的.当WPF访问显卡时,它会考虑许多因素,包括显卡上

【WPF学习】第二十章 内容控件

原文:[WPF学习]第二十章 内容控件 内容控件(content control)是更特殊的控件类型,它们可包含并显示一块内容.从技术角度看,内容控件时可以包含单个嵌套元素的控件.与布局容器不同的是,内容控件只能包含一个子元素,而布局容器主要愿意可以包含任意多个牵头元素. 正如前面所介绍,所有WPF布局容器都继承自抽象类Panel,该类提供了对包含多个元素的支持.类似地,所有内容控件都继承自抽象类ContentControl.下图显示了ContentControl类的层次结构. 图 Conten

【WPF学习】第三十章 元素绑定——绑定到非元素对象

原文:[WPF学习]第三十章 元素绑定--绑定到非元素对象 前面章节一直都在讨论如何添加链接两个各元素的绑定.但在数据驱动的应用程序中,更常见的情况是创建从不可见对象中提取数据的绑定表达式.唯一的要求是希望显示的信息必须存储在公有属性中.WPF数据绑定数据结构不能获取私有信息或公有字段. 当绑定到非元素对象时,需要放弃Binding.ElementName属性,并使用以下属性中的一个: Source:该属性是指向源对象的引用--换句话说,是提供数据的对象. RelativeSource:这是引用

WPF学习笔记系列之一 (布局详情)

布局:StackPanel  栈布局:控件不会拐弯且多出的不再显示.DockPanel   停靠布局 吸在上边下边或左右.WrapPanel    环绕布局   一行控件会拐弯Canvas  进行基于坐标的布局 Grid中若不指定Grid.Row属性及Grid.Column则默认为:0行,0列.RowDefinitions ColumnDefinitions ShowGridLines=true <ColumnDefinition Width="100"></Colu

【WPF学习】第四十四章 图画

原文:[WPF学习]第四十四章 图画 通过上一章的学习,Geometry抽象类表示形状或路径.Drawing抽象类扮演了互补的角色,它表示2D图画(Drawing)--换句话说,它包含了显示矢量图像或位图需要的所有信息. 尽管有几类画图类,但只有GeometryDrawing类能使用已经学习过的几何图形.它增加了决定如何绘制图形的画笔和填充细节.可将GeometryDrawing对象视为矢量插图中的形状.例如,可将标准的窗口元文件格式(.wmf)转换成准备插入用户界面的GeometryDrawi

【WPF学习】第五十二章 动画性能

通常,为用户界面应用动画只不过是创建并配置正确的动画和故事板对象.但在其他情况下,特别是同时发生多个动画时,可能需要更加关注性能.特定的效果更可能导致这些问题——例如,那些涉及视频.大位图以及多层透明等的效果通常需要占用更多CPU开销.如果不谨慎实现这类效果,运行它们使可能造成明显抖动,或者会从其他同时运行的应用程序抢占CPU时间. 幸运的是,WPF提供了几个可提供帮助的技巧.接下来的几节将学习降低最大帧率以及缓存计算机显卡中的位图,这两种技术可以减轻CPU的负担. 一.期望的帧率 正如前面所学