WPF基本布局容器与控件

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="200"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button Content="按钮1" Grid.Row="0" Grid.Column="0"/>
    <TextBox Grid.Row="0" Grid.Column="1"/>
    <Button Content="按钮2" Grid.Row="1" Grid.Column="1" />
    <StackPanel Orientation="Vertical"  Grid.Row="1" Grid.Column="0">
        <Button Width="194" Height="45" Content="按钮1" />
        <Button Width="194" Height="45" Content="按钮2"/>
        <Button Content="按钮3" Height="45" Width="200"/>
        <Button Content="按钮4" Height="45" Width="200"/>
        <Button Content="按钮5" Height="45" Width="200"/>
    </StackPanel>
</Grid>

效果如下，这样就成功创建了一个两行两列的表格

🌷StackPanel

堆叠容器：

将其子元素按照单个方向堆叠起来一个接一个地排列

方向：Orientation

垂直排列：Vertical

水平排列：Horizontal

例如：我们在第二行第一列的表格中放入一个堆叠栈控件

XML 复制代码

<StackPanel Orientation="Vertical"  Grid.Row="1" Grid.Column="0">
    <StackPanel Orientation="Horizontal">
        <Button Content="按钮 1"/>
        <Button Content="按钮 2"/>
        <Button Content="按钮 3"/>
    </StackPanel>
</StackPanel>

效果如下，可以看到我们把Vertical改成Horizontal就变成水平堆叠了

🌷DockPanel：

停靠容器：

DockPanel的核心思想是"停靠" 。你可以想象一个码头，船只可以停靠在码头的上下左右不同位置。在 DockPanel中，子控件可以"停靠"在面板的四个边缘（左、右、上、下）或填充剩余的中心区域。

属性：

停靠方式：Dock

Top:顶部

Bottom:底部

Left：左边

Right：右边

例如：我们在刚刚创建的表格中的第一行第二列添加一个DockPanel控件

XML 复制代码

<DockPanel>
    <Button Content="顶部按钮" DockPanel.Dock="Top"/>
    <Button Content="左侧按钮" DockPanel.Dock="Left"/>
    <Button Content="右侧按钮" DockPanel.Dock="Right"/>
    <Button Content="底部按钮" DockPanel.Dock="Bottom"/>
    <TextBox />
</DockPanel>

效果如图

🌷WrapPanel

换行容器：

WrapPanel 属于 布局控件（Panel） 的一种，它会按照指定的方向（水平或垂直）依次排列子元素，当空间不足时，自动将元素换行或换列继续排列。

排列方向：Orientation

水平方向：Horizontal（从左到右排列，一行排满后自动换到下一行）

竖直方向：Vertical（从上到下排列，一列排满后自动换到下一列）

常用属性：

属性	说明
Orientation	排列方向：`Horizontal`（水平）或 `Vertical`（垂直）
ItemWidth	所有子元素的固定宽度（可选）
ItemHeight	所有子元素的固定高度（可选）
Background	背景色
Margin / Padding	外边距 / 内边距

例如：设置一个自动换行容器，在里面添加几个按钮

XML 复制代码

  <WrapPanel Orientation="Horizontal" Background="LightGray">
        <Button Content="按钮1" Width="100" Height="50" Margin="5"/>
        <Button Content="按钮2" Width="80" Height="50" Margin="5"/>
        <Button Content="按钮3" Width="120" Height="50" Margin="5"/>
        <Button Content="按钮4" Width="90" Height="50" Margin="5"/>
        <Button Content="按钮5" Width="110" Height="50" Margin="5"/>
    </WrapPanel>

效果如下图：窗口宽度变化时，按钮会自动换行

缺点：

不支持滚动，如果控件超出限制，超出部分则会被截掉，为了解决这个问题，可以搭配着<ScrollViewer VerticalScrollBarVisibility="Auto">来使用

将ScrollViewer套在容器外面即可支持滚动

例如：

XML 复制代码

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <WrapPanel Orientation="Horizontal">
        <Button Content="按钮1" Width="100" Height="50" Margin="5"/>
        <Button Content="按钮2" Width="100" Height="50" Margin="5"/>
        <Button Content="按钮3" Width="100" Height="50" Margin="5"/>
        <Button Content="按钮4" Width="100" Height="50" Margin="5"/>
        <Button Content="按钮5" Width="100" Height="50" Margin="5"/>
        <Button Content="按钮6" Width="100" Height="50" Margin="5"/>
        <Button Content="按钮7" Width="100" Height="50" Margin="5"/>
    </WrapPanel>
</ScrollViewer>

效果如下图，增加了一个滚动条可以滚动

🌷UniformGrid

均匀网格布局：

这是 WPF / UWP / Silverlight 等 XAML 技术中的一种布局容器，特点是将空间平均分成若干行和列，每个单元格大小相同。

核心属性：

属性	说明
Rows	行数（固定）
Columns	列数（固定）
FirstColumn	第一列的索引（默认 0）
Background	背景色

例如：

XML 复制代码

<UniformGrid Rows="2" Columns="3" Background="LightGray">
    <Button Content="按钮1"/>
    <Button Content="按钮2"/>
    <Button Content="按钮3"/>
    <Button Content="按钮4"/>
    <Button Content="按钮5"/>
    <Button Content="按钮6"/>
</UniformGrid>

效果如下图：

🌷Canvas

画布布局：

Canvas 是 WPF / UWP / Silverlight 等 XAML 技术里的一种布局容器，它的特点是完全自由定位子元素，就像在一张空白画布上 "手工摆放" 控件。

核心定位属性：

属性	说明
Canvas.Left	子元素左边缘距离 Canvas 左边缘的像素数
Canvas.Top	子元素上边缘距离 Canvas 上边缘的像素数
Canvas.Right	子元素右边缘距离 Canvas 右边缘的像素数
Canvas.Bottom	子元素下边缘距离 Canvas 下边缘的像素数

例如：

XML 复制代码

<Canvas Background="LightGray" Width="300" Height="200">
    <Button Content="左上角"
        Canvas.Left="10" Canvas.Top="10"
        Width="100" Height="30"/>

    <Button Content="右下角"
        Canvas.Right="10" Canvas.Bottom="10"
        Width="100" Height="30"/>

    <Button Content="中间"
        Canvas.Left="100" Canvas.Top="80"
        Width="100" Height="30"/>
</Canvas>

效果如下图：

菜单控件：

Menu是一个层次化的命令容器，通常以水平条的形式出现在窗口顶部（即"菜单栏"），包含一系列可选择的项目。用户点击一个项目时，可能会执行一个命令，也可能会展开一个包含更多项目的子菜单。

一个典型的菜单结构通常如下：

cs 复制代码

[文件] [编辑] [视图] [帮助]
  │      │      │      │
  │      │      │      └── 查看帮助文档，关于...
  │      │      │
  │      │      └── 刷新，缩放，工具栏...
  │      │
  │      └── 复制，粘贴，查找...
  │
  └── 新建，打开，保存，退出...

关键属性：

MenuItem:

设置菜单文本

若有二级三级菜单可以用缩进来添加

例如：我们做一个简单的包含菜单的界面

XML 复制代码

<Window x:Class="MyWPFtest.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"
        xmlns:local="clr-namespace:MyWPFtest"
        mc:Ignorable="d"
        Title="MainWindow" Height="443" Width="800">
    <DockPanel>
        <!-- 将菜单停靠在窗口顶部 -->
        <Menu DockPanel.Dock="Top">
            <!-- 文件菜单 -->
            <MenuItem Header="_文件">
                <!-- 下划线表示助记键，Alt+F可快速访问 -->
                <MenuItem Header="_新建" Click="NewFile_Click"/>
                <MenuItem Header="_打开..." Click="OpenFile_Click"/>
                <Separator/>
                <!-- 分隔线 -->
                <MenuItem Header="_退出" Click="Exit_Click"/>
            </MenuItem>

            <!-- 编辑菜单 -->
            <MenuItem Header="_编辑">
                <MenuItem Header="_复制" Click="Copy_Click"/>
                <MenuItem Header="_粘贴" Click="Paste_Click"/>
            </MenuItem>

            <!-- 帮助菜单 -->
            <MenuItem Header="_帮助">
                <MenuItem Header="_关于" Click="About_Click"/>
            </MenuItem>
        </Menu>

        <!-- 窗口的其他内容 -->
        <Grid>
            <TextBlock Text="主内容区域" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </DockPanel>
</Window>

其效果如下：

🌷TextBlock

标题框：

显示只读文本，不能直接编辑。

常用属性：

属性	作用
Text	显示的文本内容
FontSize	字体大小
Foreground	文字颜色
Background	背景颜色
TextAlignment	文本对齐方式（Left/Center/Right/Justify）
TextWrapping	是否自动换行（Wrap/NoWrap）
TextTrimming	文字超出时省略方式（CharacterEllipsis/WordEllipsis/None）
FontWeight	字体粗细（Normal/Bold 等）
FontStyle	字体样式（Normal/Italic）
FontFamily	字体
LineHeight	行高

示例：

XML 复制代码

<TextBlock Text="这是一个标题" 
           FontSize="20" 
           Foreground="Blue" 
           TextAlignment="Center" 
           TextWrapping="Wrap"/>

🌷TextBox：

文本框：

让用户输入和编辑文本。

常用属性：

属性	作用
Text	当前输入的文本
IsReadOnly	是否只读
AcceptsReturn	是否允许回车换行（多行模式）
VerticalScrollBarVisibility	垂直滚动条显示方式（Auto/Visible/Hidden/Disabled）
HorizontalScrollBarVisibility	水平滚动条显示方式
MaxLength	最大输入长度
TextAlignment	文本对齐方式
TextWrapping	是否自动换行
Background / Foreground	背景 / 前景色
BorderThickness	边框厚度
BorderBrush	边框颜色

示例：

XML 复制代码

<TextBox Text="请输入用户名"
         Width="200"
         Height="30"
         MaxLength="20"
         IsReadOnly="False"
         AcceptsReturn="True"
         VerticalScrollBarVisibility="Auto"/>

🌷Button

按钮：

触发命令或事件，可显示文字、图片或复杂布局，支持点击事件和命令绑定。

常用属性:

属性	作用
Content	按钮内容（文字或其他控件）
IsEnabled	是否启用按钮（false 时不可点击）
Background / Foreground	背景 / 前景色
Width / Height	宽 / 高
HorizontalAlignment / VerticalAlignment	对齐方式
Margin	外边距
Padding	内边距
Command	绑定的命令（MVVM）
CommandParameter	命令参数

示例

XML 复制代码

<Button Content="点击我"
        Width="100"
        Height="35"
        Background="LightBlue"
        Click="Button_Click"/>

cs 复制代码

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("按钮被点击了！");
}

🌷Label

常用属性：

属性	作用
Content	标签文本或控件
Target	关联的输入控件（快捷键聚焦）
FontSize / Foreground	字体大小 / 颜色
HorizontalContentAlignment	内容水平对齐
VerticalContentAlignment	内容垂直对齐

示例：

XML 复制代码

<StackPanel>
    <Label Content="_用户名:" Target="{Binding ElementName=txtUser}"/>
    <TextBox x:Name="txtUser" Width="150"/>
</StackPanel>

🌷CheckBox

复选框：

允许用户进行多选，可三态（勾选 / 未勾选 / 半选），常用于选项列表

常用属性：

属性	作用
IsChecked	是否勾选（bool? 类型，支持 null 半选）
Content	显示文本或控件
IsThreeState	是否支持三态（True/False/Null）
Checked	勾选事件
Unchecked	取消勾选事件
Indeterminate	半选事件

示例：

XML 复制代码

<CheckBox Content="记住密码"
          IsChecked="True"
          IsThreeState="False"
          Checked="CheckBox_Checked"/>

cs 复制代码

private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
    MessageBox.Show("记住密码已勾选");
}

🌷RadioButton

单选按钮：

单选按钮，同组内只能选中一个，适用于性别选择、单选题等

常用属性：

属性	作用
IsChecked	是否选中
Content	显示文本或控件
GroupName	分组名称（同组互斥）
IsEnabled	是否启用

示例：

XML 复制代码

<StackPanel>
    <RadioButton Content="男" GroupName="Gender" IsChecked="True"/>
    <RadioButton Content="女" GroupName="Gender"/>
</StackPanel>

🌷Slider

滑动条：

通过滑动选择数值，适用于音量调节、亮度控制、参数设置

常用属性：

属性	作用
Value	当前值
Minimum	最小值
Maximum	最大值
TickFrequency	刻度间隔
IsSnapToTickEnabled	是否吸附到刻度
Orientation	方向（Horizontal/Vertical）
AutoToolTipPlacement	自动提示位置
AutoToolTipPrecision	自动提示精度

示例：

XML 复制代码

<Slider Minimum="0"
        Maximum="100"
        Value="50"
        TickFrequency="10"
        IsSnapToTickEnabled="True"
        Orientation="Horizontal"
        ValueChanged="Slider_ValueChanged"/>

cs 复制代码

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    Console.WriteLine($"当前值: {e.NewValue}");
}

🌷Image

图片控件：

显示图片，支持多种图片格式，可设置拉伸方式和透明度

常用属性：

属性	作用
Source	图片源（本地路径或资源路径）
Stretch	拉伸方式（None/Uniform/UniformToFill/Fill）
Width / Height	显示尺寸
Opacity	透明度（0~1）
IsVisible	是否可见
StretchDirection	拉伸方向（Both/UpOnly/DownOnly）

示例：

XML 复制代码

<!-- 本地文件 -->
<Image Source="C:\Images\logo.png" Stretch="Uniform" Width="200"/>

<!-- 项目资源 -->
<Image Source="pack://application:,,,/Assets/logo.png" Stretch="Uniform"/>

🌷Border

边框控件:

在 WPF / UWP / Silverlight / Xamarin 等 XAML 技术里，Border 不是一个布局面板，而是一个装饰性容器，主要用来给其他控件或布局加边框、背景、圆角等装饰效果。

基本概念:

Border 只能有一个子元素（Child），如果需要给多个控件加边框，通常先把它们放进一个布局容器（如 Grid、StackPanel），再把这个容器放进 Border 里。
可以同时设置 边框颜色、粗细、圆角、背景色 等视觉属性。

常用属性

属性	说明
BorderThickness	边框厚度（可为单边设置，如 `1,2,3,4` 表示左上右下）
BorderBrush	边框颜色（SolidColorBrush、LinearGradientBrush 等）
CornerRadius	圆角半径（可为每个角单独设置）
Background	背景色
Padding	内边距（内容与边框的间距）
Child	子元素（只能有一个）

例如：

XML 复制代码

<Border BorderThickness="2"
        BorderBrush="Blue"
        CornerRadius="8"
        Background="LightYellow"
        Padding="10">
    <StackPanel>
        <TextBlock Text="这是一个带边框的面板" FontSize="16" FontWeight="Bold"/>
        <Button Content="点击我" Margin="5"/>
    </StackPanel>
</Border>

效果如下：

🌷ViewBox

视图框：

它是 WPF / UWP / Silverlight 等 XAML 技术中的一个自适应缩放容器 ，主要作用是保持内容的比例不变，并自动缩放以适应可用空间。

基本概念：

ViewBox 可以包含一个子元素（通常是布局容器或控件）。
当 ViewBox 的大小变化时，它会自动缩放内部内容，保持原始宽高比，防止变形。
常用于需要自适应不同屏幕尺寸或窗口大小的场景。

常用属性：

属性	说明
Child	子元素（只能有一个）
Stretch	拉伸方式（如何填充可用空间）
StretchDirection	拉伸方向限制（只放大、只缩小或双向）

拉伸方式（Stretch）选项

值	说明
Fill	充满容器，不保持比例（可能变形）
Uniform（默认）	保持宽高比，缩放以适应容器（可能有留白）
UniformToFill	保持宽高比，填满容器（可能裁剪内容）
None	不缩放，保持原始大小

例如：我们在上面的Border代码示例前面加上ViewBox

添加前：

添加后：

🌷ScrollViewer：

滚动容器控件：

它就是 "给内容加滚动功能的容器"------ 比如长文本、大表格、多控件组成的复杂面板，只要放进 ScrollViewer，就能解决 "内容显示不下" 的问题。

核心属性：

自动管理滚动条：

ScrollViewer 会根据内容尺寸和自身尺寸的对比，自动显示 / 隐藏滚动条：

当内容宽度 > ScrollViewer 宽度 → 显示「水平滚动条（HorizontalScrollBar）」
当内容高度 > ScrollViewer 高度 → 显示「垂直滚动条（VerticalScrollBar）」
当内容完全能显示时 → 自动隐藏滚动条（避免占用空间）

支持手动控制滚动行为：

通过属性可以强制开启 / 关闭滚动条，或控制滚动逻辑，常用关键属性如下：

属性名	作用	可选值 / 示例
`HorizontalScrollBarVisibility`	控制水平滚动条显示规则	- `Auto`（默认）：内容超宽时显示- `Visible`：强制显示（即使内容不超宽）- `Hidden`：强制隐藏（内容超宽也不显示，无法横向滚动）- `Disabled`：禁用横向滚动（滚动条隐藏，且无法通过代码滚动）
`VerticalScrollBarVisibility`	控制垂直滚动条显示规则	同上（`Auto`/`Visible`/`Hidden`/`Disabled`）
`CanContentScroll`	控制 "滚动单位"	- `True`：按 "逻辑单位" 滚动（如 ListBox 按 "项" 滚动）- `False`（默认）：按 "物理像素" 滚动（平滑滚动，适合文本、图片）
`ScrollToHorizontalOffset(double)`	代码中控制横向滚动位置	示例：`myScrollViewer.ScrollToHorizontalOffset(200);`（横向滚动到 200 像素位置）
`ScrollToVerticalOffset(double)`	代码中控制纵向滚动位置	示例：`myScrollViewer.ScrollToVerticalOffset(150);`（纵向滚动到 150 像素位置）

子控件：

ScrollBar ：滚动条

ScrollViewer 会自动创建并管理 ScrollBar，无需手动写 ScrollBar 代码。

🌷Rectangle:

矩形控件：

在界面上绘制一个矩形（或正方形），本质是 "可视化的图形元素"，而非容器（不能包裹其他控件），本质是 "可视化的图形元素"，而非容器（不能包裹其他控件）。

核心属性：

属性名	作用	示例 / 说明
`Fill`	矩形内部填充色	- `Fill="Red"`（纯色）- `Fill="{StaticResource PrimaryColor}"`（引用资源色）- `Fill="Transparent"`（完全透明，常用作交互区域）
`Stroke`	矩形边框颜色	- `Stroke="Black"`（黑色边框）- `Stroke="Transparent"`（隐藏边框，默认值）
`StrokeThickness`	边框粗细（单位：像素）	- `StrokeThickness="2"`（2 像素粗的边框）- 若 `StrokeThickness="0"`，即使设了 `Stroke` 也看不到边框
`Width` / `Height`	矩形的固定宽 / 高	- `Width="200" Height="100"`（200x100 像素的矩形）- 若不设置，矩形会默认 "撑满父容器"（比如放在 Grid 单元格中会占满整个单元格）
`RadiusX` / `RadiusY`	矩形圆角大小（X 轴 / Y 轴方向的圆角半径）	- `RadiusX="10" RadiusY="10"`（10 像素圆角的矩形，类似胶囊按钮）- 若为 0，则是直角矩形（默认）
`Margin`	矩形与其他控件的间距	- `Margin="10"`（上下左右各 10 像素间距）- `Margin="5,10,5,10"`（上 5、右 10、下 5、左 10）
`HorizontalAlignment` / `VerticalAlignment`	矩形在父容器中的对齐方式	- `HorizontalAlignment="Center"`（水平居中）- `VerticalAlignment="Top"`（垂直靠上）- 默认是 `Stretch`（拉伸填满父容器的对应方向）示例1

示例一：绘制一个 "圆角蓝色色块"（常用作按钮背景 / 卡片背景）

XML 复制代码

<!-- 200x100 像素、10像素圆角、蓝色填充、无边框的矩形 -->
<Rectangle 
    Width="200" 
    Height="100" 
    Fill="#2196F3" 
    RadiusX="10" 
    RadiusY="10" 
    Stroke="Transparent" />

效果如下图：

示例二：绘制一个 "黑色边框、透明填充" 的矩形（常用作输入框边框）

XML 复制代码

<Rectangle 
    Width="300" 
    Height="40" 
    Stroke="Black" 
    StrokeThickness="1" 
    Fill="Transparent" />

效果：一个空心的长方形边框，可放在 TextBox 外层作为自定义输入框样式。

🎈Icon网站：

Memory Icons:

Material Design Icons（MaterialDesignInXamlToolkit 里的 PackIcon）包含 非常多的图标，几乎覆盖了常见的 UI 场景。

它的图标来自 Material Design Icons 项目 （开源，几百个图标），可以直接通过 Kind 属性调用。

常见的图标分类

1. 常用操作类

复制代码

ContentCopy       // 复制
ContentCut        // 剪切
ContentPaste      // 粘贴
Save              // 保存
Print             // 打印
Delete            // 删除
Search            // 搜索
Menu              // 菜单

2. 导航类

复制代码

ArrowLeft         // 左箭头
ArrowRight        // 右箭头
ArrowUp           // 上箭头
ArrowDown         // 下箭头
Home              // 主页
Back              // 返回
Forward           // 前进
ChevronLeft       // 左小箭头
ChevronRight      // 右小箭头

3. 通讯类

复制代码

Email             // 邮件
Message           // 消息
Phone             // 电话
VideoCall         // 视频通话
Share             // 分享

4. 社交类

复制代码

Facebook
Twitter
Instagram
Github
Linkedin

5. 系统 / 设备类

复制代码

Wifi
Bluetooth
Battery
Bell              // 通知
Settings          // 设置

6. 编辑 / 文档类

复制代码

Edit              // 编辑
FileDocument      // 文件
FileText          // 文本文件
Folder            // 文件夹

如何查看所有图标

如果你用的是 MaterialDesignInXamlToolkit，可以：

在 Visual Studio 里输入 <materialDesign:PackIcon Kind=" 后，智能提示（IntelliSense） 会列出所有可用的图标名称。
或者去官网查看完整图标清单：
- Material Design Icons 官方网站
- MaterialDesignInXamlToolkit 图标文档

💡 小技巧如果你想快速预览某个图标，可以写：

复制代码

<materialDesign:PackIcon Kind="IconName" Width="24" Height="24" Foreground="Black"/>

然后把 IconName 换成你想试的名字

WPF基本布局容器与控件

🌷Grid

表格容器：

设置行高列宽：

关键字：

RowDefinition：定义行高

ColumnDefinition：定义列宽

width:

表格索引：

Grid.Row:行

Grid.Coumn:列

🌷StackPanel

堆叠容器：

方向：Orientation

垂直排列：Vertical

水平排列：Horizontal

🌷DockPanel：

停靠容器：

属性：

停靠方式：Dock

Top:顶部

Bottom:底部

Left：左边

Right：右边

🌷WrapPanel

换行容器：

排列方向：Orientation

水平方向：Horizontal（从左到右排列， 一行排满后自动换到下一行**）**

竖直方向：Vertical（从上到下排列， 一列排满后自动换到下一列**）**

常用属性：

缺点：

🌷UniformGrid

均匀网格布局：

核心属性：

🌷Canvas

画布布局：

核心定位属性：

🌷Menu

菜单控件：

关键属性：

MenuItem:

Header:

设置菜单文本

若有二级三级菜单可以用缩进来添加

🌷TextBlock

标题框：

常用属性：

🌷TextBox：

文本框：

常用属性：

🌷Button

按钮：

常用属性:

🌷Label

标签:

常用属性：

🌷CheckBox

复选框：

常用属性：

🌷RadioButton

单选按钮：

常用属性：

🌷Slider

滑动条：

常用属性：

🌷Image

图片控件：

常用属性：

🌷Border

边框控件:

基本概念:

常用属性

🌷ViewBox

视图框：

基本概念：

常用属性：

拉伸方式（Stretch）选项

🌷ScrollViewer：

滚动容器控件：

核心属性：

水平方向：Horizontal（从左到右排列，一行排满后自动换到下一行）

竖直方向：Vertical（从上到下排列，一列排满后自动换到下一列）