C# WPF入门学习主线篇（十八）—— Border布局容器

C# WPF入门学习主线篇（十八）—— Border布局容器

欢迎来到C# WPF入门学习系列的第十八篇。在前几篇文章中，我们已经探讨了 Canvas、StackPanel、WrapPanel、DockPanel、Grid 和 UniformGrid 布局容器及其使用方法。本篇博客将介绍另一种非常实用且简单的布局容器——Border。通过本文，您将学习如何使用 Border 来为控件添加边框、背景及其他视觉效果，并了解 Border 的常见属性和应用场景。

什么是Border布局容器？

Border 是WPF中的一种布局容器，用于为单个子控件添加边框、背景及其他装饰。Border 通常用于美化界面或分隔不同部分的内容。它只能包含一个子控件，但可以通过嵌套其他布局容器实现更复杂的布局。

Border的常见属性

Border 主要有以下几个重要的属性，可以帮助开发者灵活地控制其外观和行为：

• BorderBrush: 设置边框的颜色。
• BorderThickness: 设置边框的厚度。
• Background: 设置边框内的背景颜色。
• CornerRadius: 设置边框的圆角半径。
• Padding: 设置子控件与边框之间的内边距。
• Child: 设置 Border 的子控件。

使用Border布局容器的示例

基本使用示例

以下是一个简单的XAML代码示例，展示了如何使用 Border 为一个文本框添加边框和背景：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Border Example" Height="200" Width="300">
    <Grid>
        <!-- 定义一个 Border 布局容器 -->
        <Border BorderBrush="Black" BorderThickness="2" Background="LightGray" CornerRadius="10" Padding="10" Margin="10">
            <!-- 在 Border 中添加一个 TextBlock -->
            <TextBlock Text="Hello, Border!" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
    </Grid>
</Window>
1
2
3
4
5
6
7
8
9
10
11
12

在上面的代码中，我们创建了一个 Border，并为其设置了边框颜色、边框厚度、背景颜色和圆角半径，同时在 Border 中添加了一个 TextBlock 作为子控件。

动态设置Border的示例

在后台代码中，您可以动态设置 Border 的属性，并添加子控件：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 动态创建一个 Border 并设置其属性
            Border dynamicBorder = new Border
            {
                BorderBrush = new SolidColorBrush(Colors.Black),
                BorderThickness = new Thickness(2),
                Background = new SolidColorBrush(Colors.LightGray),
                CornerRadius = new CornerRadius(10),
                Padding = new Thickness(10),
                Margin = new Thickness(10)
            };

            // 动态创建一个 TextBlock 并添加到 Border 中
            TextBlock textBlock = new TextBlock
            {
                Text = "Hello, Dynamic Border!",
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };

            dynamicBorder.Child = textBlock;

            // 将动态创建的 Border 添加到窗口的内容中
            this.Content = dynamicBorder;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在上面的代码中，我们动态创建了一个 Border，设置其属性，并添加了一个 TextBlock 作为子控件，最后将 Border 添加到窗口的内容中。

Border布局容器的应用场景

美化界面

Border 可以为控件添加边框和背景，使界面更加美观。例如，可以使用 Border 为按钮添加边框，使其更具视觉吸引力。

内容分隔

Border 可以用于分隔界面的不同部分，使布局更加清晰。例如，可以使用 Border 将标题与内容分隔开来，增强用户体验。

圆角效果

通过设置 CornerRadius 属性，Border 可以实现圆角效果，使控件看起来更加柔和。例如，可以使用 Border 为图片添加圆角，使其更符合现代UI设计风格。

总结

本文详细介绍了WPF中的 Border 布局容器，包括其常见属性、使用方法及应用场景。通过 Border，开发者可以轻松为控件添加边框、背景及其他装饰，使界面更加美观和清晰。在实际开发中，Border 常常用于美化界面和分隔内容。接下来，我们将继续探讨其他布局容器及其应用。