【WPF应用40】WPF 基本控件 - Border：详解与实例

摘要： 本文将介绍 WPF 中的基本控件 - Border，包括其概述、功能、用法和如何在 WPF 应用程序中使用 Border 控件。我们将详细探讨 Border 控件的属性、事件和样式，并提供一个实用的实例来帮助您更好地理解和使用 Border 控件。

1. 概述

Border 控件是 WPF (Windows Presentation Foundation) 中的一个基本控件，用于在 WPF 应用程序中创建矩形边框。它是一个透明的容器，可以围绕其他控件绘制边框和背景，而不影响其布局。Border 控件非常灵活，可以通过设置其属性来定制边框的外观和行为，使其成为 WPF 开发人员的一个实用工具。

2. 功能

Border 控件具有以下功能：

• 创建矩形边框：Border 控件可以在 WPF 应用程序中创建矩形边框，通过设置其宽度和高度属性。
• 设置背景：Border 控件可以设置背景颜色或图像，通过设置 Background 属性。
• 定制边框样式：Border 控件可以定制边框的颜色、宽度和线型，通过设置 BorderBrush 和 BorderThickness 属性。
• 添加内部控件：Border 控件可以容纳其他控件，使其成为子控件的容器。
• 响应鼠标事件：Border 控件可以响应鼠标事件，如鼠标进入、离开、点击等，通过事件处理程序。

3. 用法

要在 WPF 应用程序中使用 Border 控件，首先需要在 XAML 文件中导入命名空间：

xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

然后在 XAML 文件中添加 Border 控件，如下所示：

<controls:Border Width="200" Height="200" Background="Red" BorderBrush="Black" BorderThickness="2">
    <!-- 内部控件 -->
</controls:Border>

在上面的示例中，我们设置了 Border 控件的宽度和高度为 200，背景颜色为红色，边框颜色为黑色，边框厚度为 2。然后，我们将一个内部控件（例如 TextBlock）放入 Border 控件中，如下所示：

<controls:Border Width="200" Height="50" Background="Red" BorderBrush="Black" BorderThickness="2">
    <TextBlock Text="Hello, World!" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
</controls:Border>

在上面的示例中，我们在 Border 控件中添加了一个 TextBlock 控件，并设置了它的文本、字体大小和对齐方式。

4. 属性

Border 控件有很多属性可以用于定制它的外观和行为。下面是一些常用的属性：

• Width：设置 Border 控件的宽度。
• Height：设置 Border 控件的高度。
• Background：设置 Border 控件的背景颜色或图像。
• BorderBrush：设置 Border 控件的边框颜色。
• BorderThickness：设置 Border 控件的边框厚度。
• Padding：设置 Border 控件内部控件的内边距。

5. 事件

Border 控件还有一些事件可以用于响应它的某些行为。下面是一些常用的事件：

• MouseEnter：当鼠标指针进入 Border 控件区域时触发。
• MouseLeave：当鼠标指针离开 Border 控件区域时触发。
• MouseLeftButtonDown：当鼠标左键按下时触发。
• MouseLeftButtonUp：当鼠标左键释放时触发。

6. 示例

下面是一个简单的实例，演示如何使用 Border 控件：

<Window x:Class="WpfApp1.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
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <Border Width="200" Height="200" Background="Red" BorderBrush="Black" BorderThickness="2">
            <TextBlock Text="Hello, World!" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <Border Width="200" Height="200" Background="Yellow" BorderBrush="Black" BorderThickness="2" Padding="10">
            <TextBlock Text="This is a Border control with padding." FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <Border Width="200" Height="200" Background="Green" BorderBrush="Black" BorderThickness="2" RenderTransformOrigin="0.5,0.5">
            <TextBlock Text="Border with RenderTransform" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
            <RotateTransform Angle="45" />
        </Border>

        <Button Content="Click me" Width="100" Height="50" Margin="10" Click="Button_Click">
            <Button.Effect>
                <DropShadowEffect Color="Black" Opacity="0.5" Direction="270" BlurRadius="10" RenderingBias="Performance" />
            </Button.Effect>
        </Button>

    </StackPanel>
</Window>

在这个实例中，我们创建了一个窗口，其中包含三个 Border 控件。第一个 Border 控件是一个简单的矩形，显示红色的背景和黑色的边框。第二个 Border 控件具有黄色背景和黑色边框，并且具有 10 的内边距。第三个 Border 控件具有绿色背景和黑色边框，并且应用了一个旋转转换，使文本倾斜 45 度。

此外，我们还有一个按钮，当点击时，它将应用一个阴影效果，使按钮看起来更有立体感。

7. 如何在WPF应用程序中使用Border控件

要在 WPF 应用程序中使用 Border 控件，您需要按照以下步骤操作：

1. 导入命名空间：在 XAML 文件中导入命名空间 xmlns:controls=“clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls”。
2. 添加 Border 控件：在 XAML 文件中添加 Border 控件，设置其属性，如宽度和高度、背景、边框样式等。
3. 添加内部控件：在 Border 控件内部添加其他控件，如文本块、按钮等。
4. 应用样式和模板：可以通过样式和模板来定制 Border 控件的外观和行为。

8. 总结

Border 控件是 WPF 中的一个基本控件，用于在 WPF 应用程序中创建矩形边框。通过设置其属性和样式，您可以轻松地定制 Border 控件的外观和行为。在本篇博客中，我们介绍了 Border 控件的基本用法、属性和事件，并提供了一个简单的实例来帮助您更好地理解和使用 Border 控件。希望这篇博客能帮助您更好地理解和使用 Border 控件，并在您的 WPF 应用程序中发挥其潜力。