WPF入门到跪下 第二章 布局控件

已于 2023-10-13 16:57:26 修改
阅读量752 收藏 5
点赞数
分类专栏： WPF 文章标签： wpf .netcore c#
于 2023-03-12 20:02:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjailsa/article/details/129479569
版权

WPF布局原则

  • 一个窗口中只能包含一个顶级元素。
  • 不应显式设置元素尺寸。
  • 不应使用坐标设置元素的位置（实际开发过程中只能说是尽量不使用了） 。
  • 可以嵌套布局容器。

WPF布局容器简介
StackPanel: 水平或垂直排列元素、Orientation属性分别: Horizontal/ Vertical。

WrapPanel: 水平或垂直排列元素、针对剩余空间不足会进行换行或换列进行排列。

DockPanel: 根据容器的边界、元素进行Dock.Top、Left、Right、Bottom设置。

Grid: 类似table表格、可灵活设置行列并放置控件元素、比较常用。

Border：带边框的布局控件。

Canvas: 使用固定的坐标设置元素的位置、不具备锚定停靠等功能。

Grid

Grid是WPF中最为强大的布局控件，必须掌握，其可以将窗体分割成表格一样，通过行、列来进行布局。

Grid.RowDefinitions/Grid.ColumnDefinitions用于给Grid分配行与列。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
</Grid>

常用属性
ShowGridLines：是否显示表格线，默认为false。
UseLayoutRounding：有时候由于格子分布宽度或高度不足出现非整数像素，导致图形边缘模糊，此时可以将此属性置为true来消除模糊。
Grid.Column和Grid.Row：这两个属性是Grid中的其他子控件中使用的，用来设子控件在整个Grid中的位置。

  • 下标从0开始，默认就是0行0列，即第一行第一列。
<Grid>
    ......
    <Button Content="LeftTop" Grid.Column="0" Grid.Row="0"/>
</Grid>

Grid.ColumnSpan和Grid.RowSpan：Grid的子控件中使用，用来设置跨行或跨列的个数。

<Grid>
    ......
		<Button Content="RightTop" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>

尺寸设置

Grid`行和列的尺寸默认情况下是按同比例分配的，可以通过三种常见的设置方式：

  • 通过数值进行绝对设置（不推荐），如witdh=200。
  • 通过Auto来进行自动设置，其行列会根据里面的子控件的内容大小来自动设置大小，如width="auto"。
  • 使用通配符*按比例分配，会将设置后的所有*相加，然后将行或列除去已经被占用的空间（没有使用*的其他行或列）后剩下的空间按比例分配。例如width="*"、width="2*"、width="3*"、width="20"，假设Grid的总宽度为100，那么就是100-20=80，然后将80分为6份，各自占有1份、两份和三份。

除了上面三种常用设置外，还可以在RowDefinition或ColumnDefinition元素中通过SharedSizeGroup="GroupName"属性使用尺寸族来进行尺寸共享。

  • 使用时，要在父类的Grid标签中设置<Grid.IsSharedSizeScope>true</Grid.IsSharedSizeScope>，打开共享尺寸区域。
<Window ......>
    <Grid Grid.IsSharedSizeScope="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="5"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" SharedSizeGroup="TestGroup"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Label>只是做个小测试我这里比较长</Label>
        </Grid>
        <Grid Grid.Row="2" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="TestGroup"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Label Content="short"></Label>
        </Grid>
    </Grid>
</Window>

分割器-GridSplitter

GridSplitter是在Grid容器中使用的分割器，可以通过滑动来控制Grid行列的长或宽。

  • 注意，GridSplitter只能使用在Grid中，如果希望横向分割上下滑动，需要设置其HorizontalAlignment="Stretch"即横向填充以及VerticalAlignment="Center"水平居中，希望纵向切割左右滑动亦然。
<Window ......>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="LeftTop" Grid.Column="0" Grid.Row="0"/>
        <Button Content="RightTop" Grid.Column="1" Grid.Row="0"/>
        <GridSplitter Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="5" ></GridSplitter>
        <Button Content="RightTop" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2"/>
    </Grid>
</Window>

在这里插入图片描述

StackPanal

StackPanel也称为堆栈面板，主要用于垂直或水平排列元素、在容器的可用尺寸内放置有限个元素，元素的尺寸总和(长/高)不允许超过StackPanel的尺寸, 否则超出的部分不可见。

  • 在StackPanel中的控件会根据StackPanel的排列方向进行自适应填充。

常用属性
Orientation：设置布局方向，可以设为Horizontal（水平）或Vertical（垂直）。默认为Vertical。
HorizontalAlignment：子元素的水平放置方式。
VerticalAlignment：子元素的垂直放置方式。

<Window ......>
    <StackPanel Name="stackPanel1" Margin="100 100 100 100" Orientation="Horizontal" HorizontalAlignment="Center">
        <Button Content="Button1" Margin="20 20 20 20"/>
        <Button Content="Button2" Margin="20 20 20 20"/>
        <Button Content="Button3" Margin="20 20 20 20"/>
        <Button Content="Button4" Margin="20 20 20 20"/>
        <Button Content="Button5" Margin="20 20 20 20"/>
        <Button Content="Button6" Margin="20 20 20 20"/>
    </StackPanel>
</Window>

在这里插入图片描述

WrapPanel

WrapPanel在StackPanel功能的基础上具备在尺寸变更后自动适应容器的宽高进行换行换列处理，是唯一一个不能被Grid取代的布局控件。

  • 与StackPanel相反、WrapPanel的Orientation默认为Horizontal。
  • 在WrapPanel中的控件不会根据其排列方向进行自适应填充，会保持原有的默认大小。

常用属性
Orientation：设置布局方向，可以设为Horizontal（水平）或Vertical（垂直）。默认为Vertical。
HorizontalAlignment：子元素的水平放置方式。
VerticalAlignment：子元素的垂直放置方式。

<Window ......>
		<WrapPanel Margin="100 100 100 100" VerticalAlignment="Center">
        <Button Content="Button1" Margin="20 20 20 20"/>
        <Button Content="Button1" Margin="20 20 20 20"/>
        <Button Content="Button1" Margin="20 20 20 20"/>
        <Button Content="Button1" Margin="20 20 20 20"/>
        <Button Content="Button1" Margin="20 20 20 20"/>
        <Button Content="Button1" Margin="20 20 20 20"/>
        <Button Content="Button1" Margin="20 20 20 20"/>
    </WrapPanel>
</Window>

在这里插入图片描述

DockPanel

DockPanel控件对象有附加依赖属性DockPanel.Dock, 该属性有效值为: Top、Left、Right、Bottom。默认为Left。

  • 子元素可以通过DockPanel.Dock属性搭配子元素在控件中的排序，来设置在容器中的展示位置和方式，千变万化，可以细细体会。

常用属性

LastChildFill：该属性默认为true，容器中的最后一个元素填充DockPanel所有空间。

<Window ......>
    <DockPanel >
        <Button Content="Buttonleft" DockPanel.Dock="Left"/>
        <Button Content="ButtonRight" DockPanel.Dock="Right"/>
        <Button Content="ButtonTop" DockPanel.Dock="Top"/>
        <Button Content="ButtonBottom" DockPanel.Dock="Bottom"/>
        <Button Content="ButtonCenter"/>
    </DockPanel>
</Window>

在这里插入图片描述

Border

Border是一个带有边框的布局控件，需要注意的是Border内只能有一个子元素。 若要显示多个子元素，需要在其中放置容器（Panel或StackPanel等）控件， 然后再在容器控件中进行布局。
常用属性
BorderBrush：设置边框颜色。
BorderThickness：设置边框粗细。
Background：设置背景颜色。
CornerRadius：边框四个角的弧度。

<Window ......>
		<Border BorderBrush="Black" BorderThickness="1" Background="Transparent" Margin="10 10 10 10" Padding="20 20 20 20" CornerRadius="30">
        <StackPanel Name="stackPanel1" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="Button1" Margin="20 20 20 20"/>
            <Button Content="Button2" Margin="20 20 20 20"/>
            <Button Content="Button3" Margin="20 20 20 20"/>
            <Button Content="Button4" Margin="20 20 20 20"/>
            <Button Content="Button5" Margin="20 20 20 20"/>
            <Button Content="Button6" Margin="20 20 20 20"/>
        </StackPanel>
    </Border>
</Window>

在这里插入图片描述

UniformGrid

UniformGrid布局空间的特性在于可以自动为子控件设置行和列，默认情况下，会根据子控件的数量设置同样数量的行和列，例如当有四个Button子控件，则分割为2行2列；当有五个Button子控件，由于2行2列放不下，因此同时增加1行1列，因此分割为3行3列。

<Window x:Class="WPFStudy.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:local="clr-namespace:WPFStudy"
        Title="MainWindow" Height="450" Width="800">
    <UniformGrid>
        <Button Content="button1"/>
        <Button Content="button2"/>
        <Button Content="button3"/>
        <Button Content="button4"/>
        <Button Content="button5"/>
    </UniformGrid>
</Window>

在这里插入图片描述

常用属性
Rows、Columns：设置控件的行和列，然后子控件按序排列，当子控件数量超出所设定的行列时不显示。

Canvas

Canvas控件通过从窗体左上角为原点的X、Y坐标（默认）来给子控件进行定位，用的较少。

常用属性
Canvas.Bottom、Canvas.Left、Canvas.Right、Canvas.Top：子控件通过这四个属性来设置自己的坐标，其中Top的优先级高于Bottom，Left的优先级高于Right。

Canvas在C#中设置子控件的位置
在C#中直接对Canvas中的子控件对象进行设置时，是无法直接通过Canvas.Top这样的方式去设置子控件在Canvas中的位置的，此时需要使用如下几个静态方法：

  • Canvas.SetBottom(UIElement element, double length)
  • Canvas.SetLeft(UIElement element, double length)
  • Canvas.SetRight(UIElement element, double length)
  • Canvas.SetTop(UIElement element, double length)

InkCanvas

InkCanvas的布局方式与Canvas相同，但是InkCanvas控件可以通过一些属性来设置一些特殊的功能，达到与用户进行交互的效果。

常用属性
EditingMode：设置容器的编辑模式。

  • Ink：可以在容器中笔画，可以用于签名、绘画等场景。

    <Window x:Class="WPFStudy.Share"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFStudy"
        mc:Ignorable="d"
        Title="Share" Height="450" Width="800">
    <InkCanvas EditingMode="Ink">
    </InkCanvas>
</Window>

在这里插入图片描述

  • Select：可以圈中或选中控件进行移动。
  • GestureOnly：配合手势操作，类似于手机的手势操作，需要触控屏配合。

Strokes：设置或获取控件中的墨迹，一般通过代码来使用。

StrokeCollection player1;

void InitializePlayersCanvases()
{
    player1 = inkCanvas1.Strokes;
}

DefaultDrawingAttributes：设置笔画的样式。

<InkCanvas EditingMode="Ink">
    <InkCanvas.DefaultDrawingAttributes>
        <DrawingAttributes Color="Red" Width="10" Height="10"/>
    </InkCanvas.DefaultDrawingAttributes>
		......
</InkCanvas>
SchuylerEX
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
C#WPF常用的9种布局方式详解
qq_30725967的博客
07-16 1万+
本文介绍WPF中常用的九种布局，Grid、StackPanel、WrapPanel、DockPanel、UniformGrid、Canvas、ScrollViewer、ViewBox、Border。
WPF入门到跪下 第九章 用户控件与自定义控件
jjailsa的博客
01-10 1915
创建自定义控件创建完成后，项目中会新增一个MyCustomControl.cs文件和一个含有Generic.xaml的Themes文件夹。MyCustomControl.cs文件用于处理自定义控件的逻辑，Generic.xaml文件则负责界面显示。主题文件思考一个问题，当我们在编辑界面上右键Button按钮编辑样式-编辑副本，然后xaml文件中会出来Button的默认模板代码，这些默认模板是从哪里来的？其实就是从Button的Generic.xaml文件获取的。
WPF基础控件
代码改变世界
06-05 1426
在这篇博客中，我们将探讨 WPF 中一些常用的控件，包括 TextBlock、Label、ListBox、DataGrid、ListView、ToggleButton 等。我们将介绍每个控件的作用、常用属性和事件，并提供示例代码来演示它们的用法。无论您是初学者还是有经验的 WPF 开发者，本文都将为您提供有价值的信息，帮助您更好地理解和使用这些控件。
WPF入门到精通:2.WPF常用控件及布局
神奇少年的博客
08-20 1689
在WPF中，我们可以使用各种不同的控件来构建我们的用户界面。以下介绍常见的WPF控件及布局
第二章：WPF常用控件介绍
鲤籽鲲的博客
11-03 5062
WPF常用控件介绍
WPF 布局控件
Love_HBB的专栏
09-01 1562
WPF基础，界面布局控件汇总
WPF（一） WPF基本控件与布局
Hello World!
08-19 5263
WPF（Windows Presentation Foundation）是微软推出的基于Windows的用户界面框架，中文译为“Windows呈现基础”，属于.NET Framework 3.0的一部分。WPF类似于WinForm技术框架，但是相比于WinForm，WPF对大部分基础功能进行了更加强大的拓展，并且引入了XAML标记语言，真正实现了开发人员和设计人员的前后端分离，并且衍生出了一套MVVM开发框架。
WPF 项目开发入门（二） WPF 页面布局
zhtbs的博客
07-18 6240
WPF布局与排版功能介绍
WPF编程基础入门 ——— 第三章 布局（七）布局面板Grid
m0_46334316的博客
05-30 5853
WPF布局——布局面板GridWPF——Grid布局控件Grid简单实例——按钮排列Grid简单实例——登录界面 WPF——Grid布局控件 尽管上一篇讲解的UniformGrid能够布局统一单元格，但是很多布局中需要构建单元格大小不等，具有跨越式单元格(Span Cells) 和空白列等功能。而Grid能实现上述这些功能，它是一个使用灵活、能构建复杂UI的布局控件。 Grid最简单的用法是通过设置RowDefinitions和ColumnDefinitions属性定义单元格的总数。其中，RowDefini
WPF编程基础入门 ——— 第三章 布局（二）布局面板Canvas
m0_46334316的博客
05-29 1753
WPF布局——布局面板Canvas（二）WPF——Canvas布局控件Canvas实例——五个按钮Canvas实例——矩形重叠 WPF——Canvas布局控件 Canvas(画布) 是WPF中最简单的布局控件，是用于存储控件的容器，不会自动调整内部元素的排列及大小，它仅支持用显式坐标定位控件。可以使用Left、 Top、Right和Bottom附加属性在Canvas中定位控件。实质上,在选择每个控件停靠角时，附加属性的值是作为外边距使用的。如果一个控件没有使用任何附加属性,它会被放在Canvas的左上方(等
WPF编程基础入门 ——— 第三章 布局（一）布局原则
m0_46334316的博客
05-25 1956
WPF 布局简述 WPF布局是通过面板(Panel)对页面元素进行全面规划和安排。简单地说，就是把一些控件有条理地摆放在界面上合适的位置。在应用程序界面设计中，合理的元素布局至关重要，它可以方便用户操作，并用清晰的页面逻辑呈现用户信息。 如果内置布局控件不能清足需要,用户还可以创建自定义的布局元素。 WPF——布局（一）WPF 布局简述WPF 布局原则合成布局元素1.根据内容调整尺寸2.两段布局布局机制布局通用属性布局面板布局面板的类型及其使用规则小结 WPF 布局原则 WinForm的布局是采用基于坐标的
WPF布局、控件、事件、绑定、MVVM基础入门
03-26
在"hello-WPF"这个项目中，你可能通过创建简单的WPF窗口，使用不同的布局容器来组织控件，设置控件的事件处理，实现数据绑定，以及应用MVVM模式来理解这些基本概念。随着深入学习，你可以创建更复杂的用户界面，利用...
WPF的ListView控件自定义布局用法实例
09-02
在WPF中，ListView控件是一个非常常用的组件，它用于展示数据集合，并提供了多种布局方式。自定义布局允许开发者根据需求灵活设计ListView显示的内容和样式。本实例将深入讲解如何在WPF中自定义ListView控件的布局。...
WPF 自定义控件库 常用控件封装&常用控件样式重写
03-26
总结，"WPF 自定义控件库 常用控件封装&常用控件样式重写"涉及到的核心技术包括WPF控件的封装、样式重写和控件库的构建，这些都是提升WPF应用界面设计和用户体验的关键手段。通过深入理解和运用这些知识，开发者能够...
wpf入门第二篇 MVVM与binding
03-23
wpf入门第二篇 MVVM与binding的示例代码，详情可以查看博主的这篇博客： https://blog.csdn.net/wf824284257/article/details/88758707
wpf 环形进度条，自定义控件
sunjay117的专栏
07-25 1143
// CircleProgress.xaml 的交互逻辑。
WPF MVVM框架：CommunityToolkit.Mvvm包使用介绍
zhaotianff的专栏
07-25 741
40 MvvmLight中的命令类也叫RelayCommand，使用方法大同小异，但是在引发CanExeCutechanged事件时，有点区分，这点会在后面说明。
ASP.NET CORE依赖注入全面解析：理解DependencyInjectionAbstractions的核心
Hellc007的博客
07-23 1158
依赖注入是一种设计模式，它允许对象接收它们的依赖项，而不是在对象内部创建它们的依赖项。这种方式有助于提高代码的可测试性和可维护性。ASP.NET Core提供了一个内置的依赖注入框架，位于命名空间。：用于注册服务。：用于解析服务。：描述服务的生命周期和实现方式。是ASP.NET Core依赖注入的抽象层，定义了DI容器的基础接口和类。
C#初级——List 容器
最新发布
wacanda的博客
07-31 315
在C#中，容器通常指的是用于存储和组织数据的集合类。本文介绍的容器是内部使用数组来存储元素，当添加元素超出当前数组容量时，会自动调整大小（扩容）。
wpf 获取父控件宽度
03-30
可以使用控件的父控件的 ActualWidth 属性来获取父控件的宽度。 例如，假设你有一个 Grid 控件，你想获取它的父控件（例如 Window）的宽度。你可以使用以下代码： ```csharp double parentWidth = ((FrameworkElement)myGrid.Parent).ActualWidth; ``` 在这个例子中，myGrid 是一个 Grid 控件，它的父控件是 Window，我们使用了 FrameworkElement 类型转换和 ActualWidth 属性来获取 Window 的宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SchuylerEX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值