【WPF.NET开发】构造动态布局

本文内容

  1. 系统必备
  2. 创建项目
  3. 配置默认的 Grid Panel 控件
  4. 向面板中添加控件
  5. 测试布局
  6. 汇总所有内容
  7. 后续步骤

在动态定位中,您通过指定子元素相对于父元素应该如何排列以及应该如何包装来排列子元素。 您还可以将窗口和控件设置为在其内容扩展时自动扩展。

适用于 Visual Studio 的 WPF 设计器提供了许多支持动态定位的

Panel 控件。 可以通过将一个 Panel 控件添加为另一个的子控件来组合 Panel 控件。 您可以使用下列 Panel 控件在您的应用程序中动态定位元素:

  • Grid

  • DockPanel

  • WrapPanel

  • StackPanel

  • UniformGrid

重要事项
只要可能,就最好使用动态布局。 动态布局是最灵活的,适应诸如本地化之类的内容更改,并且允许最终用户最大限度地控制他们的环境。

在本演练中,您将执行下列任务:

  • 创建一个 WPF 应用程序。

  • 配置默认的

    Grid Panel 控件。

  • 将控件添加到面板中。

  • 测试布局。

下面的插图说明您的应用程序将如何显示。

显示的对话框和菜单命令可能会与"帮助"中的描述不同,具体取决于您现用的设置或版本。 若要更改设置,请在**"工具"** 菜单上选择**"导入和导出设置"**。

1、系统必备

您需要以下组件来完成本演练:

  • Visual Studio 2010 及以上版本

2、创建项目

第一个过程是为该应用程序创建项目。

创建项目

  1. 使用 Visual Basic 或 Visual C# 创建一个名为 DynamicLayout 的新 WPF 应用程序项目。

    在本演练中,您将不会编写任何代码。 为项目选择的语言是用于应用程序中代码隐藏页面的语言。

    MainWindow.xaml 将在 WPF 设计器中打开。

  2. 在"设计"视图中,选择该窗口。

  3. 在**"属性"**窗口中,设置 Window

    的下列属性:

    Property
    宽度 400
    高度 200
    SizeToContent WidthAndHeight

    还可以使用大小调整控点在"设计"视图中调整该窗口的大小。

  4. 在**"文件"菜单上,单击"全部保存"**。

3、配置默认的 Grid Panel 控件

默认情况下,新的 WPF 应用程序包含一个带有

Grid 面板的 Window

。 在此过程中,您向该网格中添加四个行和四个列。 您将每一列的宽度都设置为 *,这样可用的宽度会在四列之间均分。 您将其中三行的高度设置为"Auto",因此这三行可以调整大小以容纳其内容。 您将另一行的高度设置为 *,因此该行将使用剩余的可用高度。

添加 Panel 控件

  1. 在"设计"视图中,选择该网格。

  2. (可选)在**"属性"**窗口中,找到 ShowGridLines 属性并选中该复选框。

    当该应用程序运行时,网格线将显示在窗口上。 这适用于调试,但对于生产代码,您应该清除 ShowGridLines 属性的复选框。

  3. 在**"属性"**窗口中,找到 ColumnDefinitions 属性并单击"属性值"列中的省略号按钮。

    将出现**"集合编辑器"**对话框。

    1. 单击四次**"添加"**添加四列。

    2. 将第一行的 Width 属性设置为 Auto。

    3. 将第二行的 Width 属性设置为 *。

    4. 将第三行的 Width 属性设置为 Auto。

    5. 将第四行的 Width 属性设置为 Auto。

    6. 单击**"确定"以关闭"集合编辑器"**并返回到 WPF 设计器。

      现在该网格中有四列,但仅有一列显示。 其 Width 属性被设置为 Auto 的列会暂时隐藏,因为它们没有任何内容。 对于本演练,这样是可以的。 为了避免将来出现这种情况,您可以在工作时使用星号调整大小,然后在完成后改成"Auto"。

  4. 在**"属性"**窗口中,找到 RowDefinitions 属性并单击"属性值"列中的省略号按钮。

    将出现**"集合编辑器"**对话框。

    1. 单击四次**"添加"**添加四行。

    2. 将第一行的 Height 属性设置为 Auto。

    3. 将第二行的 Height 属性设置为 Auto。

    4. 将第三行的 Height 属性设置为 *。

    5. 将第四行的 Height 属性设置为 Auto。

    6. 单击**"确定"以关闭"集合编辑器"**并返回到 WPF 设计器。

      现在该网格中有四行,但仅有一行显示。 其 Height 属性设置为 Auto 的行会暂时隐藏,因为它们没有任何内容。 对于本演练,这样是可以的。 为了避免将来出现这种情况,您可以在工作时使用星号调整大小,然后在完成后改成"Auto"。

  5. 在**"文件"菜单上,单击"全部保存"**。

4、向面板中添加控件

接下来,您可以向面板中添加控件并使用 Grid

的 Column

Row 附加属性来对它们进行动态定位。

向面板中添加控件

  1. 在**"工具箱" "公用"**组中,将一个 Label

    控件拖到

    Grid 上。

  2. 在**"属性"**窗口中,设置

    Label 的下列属性:

    Property
    Content Name:
    Grid.Column 0
    Grid.ColumnSpan 1
    Grid.Row 0
    Grid.RowSpan 1
    宽度 Auto
    高度 23
    HorizontalAlignment Stretch
    VerticalAlignment Top
    Margin 20,20,10,10
  3. 在**"工具箱" "公用"**组中,将一个 Label

    控件拖到

    Grid 上。

  4. 在**"属性"**窗口中,设置

    Label 的下列属性:

    Property
    Content Password:
    Grid.Column 0
    Grid.ColumnSpan 1
    Grid.Row 1
    Grid.RowSpan 1
    宽度 Auto
    高度 23
    HorizontalAlignment Stretch
    VerticalAlignment Top
    Margin 20,10,10,10
  5. 在**"工具箱" "公用"**组中,将一个

    TextBox 控件拖到

    Grid 上。

  6. 在**"属性"**窗口中,设置

    TextBox 的下列属性:

    Property
    Grid.Column 1
    Grid.ColumnSpan 3
    Grid.Row 0
    Grid.RowSpan 1
    宽度 Auto
    高度 Auto
    HorizontalAlignment Stretch
    VerticalAlignment Stretch
    Margin 10,20,20,10
  7. 在**"工具箱" "公用"**组中,将一个 TextBox

    控件拖到

    Grid 上。

  8. 在**"属性"**窗口中,设置

    TextBox 的下列属性:

    Property
    Grid.Column 1
    Grid.ColumnSpan 3
    Grid.Row 1
    Grid.RowSpan 1
    宽度 Auto
    高度 Auto
    HorizontalAlignment Stretch
    VerticalAlignment Stretch
    Margin 10,10,20,10
  9. 在**"工具箱" "公用"**组中,将一个 Button

    控件拖到 Grid

    上。

  10. 在**"属性"**窗口中,设置

    Button 的下列属性:

    Property
    Content 确定
    Grid.Column 2
    Grid.ColumnSpan 1
    Grid.Row 3
    Grid.RowSpan 1
    宽度 75
    高度 23
    HorizontalAlignment Stretch
    VerticalAlignment Stretch
    Margin 10,10,6,20
  11. 在**"工具箱" "公用"**组中,将一个

    Button 控件拖到

    Grid 上。

  12. 在**"属性"**窗口中,设置 Button

    的下列属性:

    Property
    Content 取消
    Grid.Column 3
    Grid.ColumnSpan 1
    Grid.Row 3
    Grid.RowSpan 1
    宽度 75
    高度 23
    HorizontalAlignment Stretch
    VerticalAlignment Stretch
    Margin 6,10,20,20
  13. 在**"文件"菜单上,单击"全部保存"**。

5、测试布局

最后,您运行该应用程序,并验证随着用户调整窗口的大小以及控件的内容扩展并超出控件的大小该布局是否动态地更改。

测试布局

  1. 在**"调试"菜单上,单击"启动调试"**。

    该应用程序启动并且该窗口将显示。

  2. 在"名称"文本框中,随便键入一些内容以填充该文本框。 键入到该文本框的末尾处时,该文本框和窗口都会扩展以容纳键入的文本。

  3. 关闭该窗口。

  4. 在**"调试"菜单上,单击"启动调试"**。

    该应用程序启动并且该窗口将显示。

  5. 在垂直方向和水平方向调整该窗口的大小。

    列将均匀扩展以使用可用空间。 文本框拉伸以填充扩展的列。 三个行保持其高度,第四行扩展以使用可用空间。

  6. 关闭该窗口。

  7. 在"设计"视图中,选择"名称"标签。

  8. 在**"属性"**窗口中,将 Content 属性更改为"请在此处输入您的全名:"。

    在"设计"视图中,该标签扩展以容纳文本。

  9. 在**"调试"菜单上,单击"启动调试"**。

    该应用程序启动并且该窗口将显示。 标签控件可显示更长的文本。

  10. 关闭该窗口。

6、汇总所有内容

下面是完成的 MainWindow.xaml 文件:

XAML复制

复制代码
<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

7、后续步骤

您可以尝试了解如何通过将本演练中的

Grid 面板替换为以下面板来利用动态布局实现不同效果:

  • DockPanel

  • WrapPanel

  • StackPanel

  • UniformGrid

相关推荐
“抚琴”的人16 小时前
【机械视觉】C#+VisionPro联合编程———【六、visionPro连接工业相机设备】
c#·工业相机·visionpro·机械视觉
FAREWELL0007518 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
tadus_zeng18 小时前
Windows C++ 排查死锁
c++·windows
EverestVIP18 小时前
VS中动态库(外部库)导出与使用
开发语言·c++·windows
CodeCraft Studio18 小时前
Excel处理控件Spire.XLS系列教程:C# 合并、或取消合并 Excel 单元格
前端·c#·excel
勘察加熊人20 小时前
forms实现连连看
c#
hvinsion20 小时前
PPT助手:一款集计时、远程控制与多屏切换于一身的PPT辅助工具
c#·powerpoint·ppt·ppt助手·ppt翻页
weixin_3077791321 小时前
使用C#实现从Hive的CREATE TABLE语句中提取分区字段名和数据类型
开发语言·数据仓库·hive·c#
抛物线.1 天前
inhibitor_tool
windows
时光追逐者1 天前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor