WPF 控件专题 Border控件详解

^@^lemon tea^@^

已于 2022-06-13 16:20:27 修改

阅读量6.6k

点赞数 4

分类专栏： # WPF 控件专题文章标签： WPF Border控件详解 Border控件基本使用 Border

于 2022-06-13 09:57:33 首次发布

本文链接：https://blog.csdn.net/BYH371256/article/details/125202232

版权

WPF 控件专题专栏收录该内容

53 篇文章 100 订阅

订阅专栏

1、Border介绍

Border（边框）是一个装饰的控件，此控件绘制一个边框、一个背景。Border 中只能有一个子控件（Child），若要显示多个子元素，需要在父Border元素中放置一个附加Panel元素，然后可以将子元素放置在该 Panel 元素中。

**************************************************************************************************************

2、Border 的几个常用的属性介绍

Background：填充 Border 边界之间的区域或者说是绘制该区域的背景，是一个Brush对象。

BorderBrush：用于绘制外部边框颜色，是Brush对象。

BorderThickness：设置 Border 边框的宽度，是Thickness（描述矩形周围框架的粗细）对象。

CornerRadius：该值表示将 Border 的角倒圆的程度，设置四周的圆角大小。

Effect：获取或设置要应用于 UIElement 的位图效果。

HorizontalAlignment：在父元素(如 Panel 或项控件)中组合此元素时所应用的水平对齐特征。

VerticalAlignment：在父元素（如面板或项控件）中组合此元素时所应用的垂直对齐特征。

IsEnabled：该值指示是否在用户界面中启用此元素 (UI)，使能，可用或者不可用。

IsHitTestVisible：该值声明是否可以返回此元素作为其呈现内容的某些部分的点击测试结果；简单的说是点击时是否穿透该控件。

IsMouseOver 该值指示鼠标指针是否位于此元素（包括可视化树中的子元素）的上方。大多用于属性触发器，改变Border的外观的显示。

Margin：获取或设置元素的外边距。

Height/Width：高度/宽度。 MaxHeight/MaxWidth：最大高度/最大宽度。 MinHeight/MinWidth：最小高度/最小宽度。

Name：元素的标识名称。该名称提供引用，以便代码隐藏（如事件处理程序代码）可在 XAML 处理器处理期间构造标记元素后引用它。

Opacity：透明度。

Padding：获取或设置描述Thickness及其子元素之间的空间量的Border值。

Visibility：可见性。

SnapsToDevicePixels：对齐设备像素；如果元素应以符合呈现到设备像素为true ，否则为false。用于抗锯齿

**************************************************************************************************************

3、具体示例

<!-- 基本属性使用 -->
<Border x:Name="border1" Margin="10" Width="280" Height="100" Background="#555a64"  BorderBrush="Cyan" 
		BorderThickness="1 1 1 1" CornerRadius="5 5 5 5" HorizontalAlignment="Left" VerticalAlignment="Top">
	<Button Content="Border 的子元素" Width="120" Height="35"/>
</Border>
<!-- 添加多个子元素 -->
<Border x:Name="border2" Margin="10" Width="280" Height="100" Background="#555a64"  BorderBrush="Cyan" 
		BorderThickness="1 1 1 1" CornerRadius="5 5 5 5" HorizontalAlignment="Left" VerticalAlignment="Top">
	<UniformGrid>
		<!-- 也可使用Grid、StackPanel、Canvas、WrapPanel、DockPanel等 添加多个子元素--> 
		<Button Content="Border 的子元素1" Width="120" Height="35"/>
		<Button Content="Border 的子元素2" Width="120" Height="35"/>
		<Button Content="Border 的子元素3" Width="120" Height="35"/>
	</UniformGrid>
</Border>
<!-- 透明度设置 -->
<Border x:Name="border3" Margin="10" Width="280" Height="100" Background="#555a64" BorderBrush="Cyan" 
		BorderThickness="1 1 1 1" CornerRadius="5 5 5 5" HorizontalAlignment="Left" VerticalAlignment="Top" Opacity="0.5">
	<Button Content="Border 的子元素1" Width="120" Height="35"/>
</Border>
<!-- 使能设置 同时对Border里面的子元素起作用 -->
<Border x:Name="border4" Margin="10" Width="280" Height="100" Background="#555a64"  BorderBrush="Cyan" 
		BorderThickness="1 1 1 1" CornerRadius="5 5 5 5" HorizontalAlignment="Left" VerticalAlignment="Top" IsEnabled="False">
	<Button Content="Border 的子元素1" Width="120" Height="35"/>
</Border>
<!-- 阴影设置 -->
<Border x:Name="border5" Margin="10" Width="280" Height="100" Background="#555a64"  BorderBrush="Cyan" 
		BorderThickness="1 1 1 1" CornerRadius="5 5 5 5" HorizontalAlignment="Left" VerticalAlignment="Top">
	<Border.Effect>
		<DropShadowEffect Color="White" BlurRadius="15" ShadowDepth="2"  Opacity="0.35" Direction="270"/>
	</Border.Effect>
</Border>
<!-- Border 可见性   Collapsed：隐藏，不保留布局空间；Hidden：隐藏，保留布局空间；Visible：可见 -->
<Border x:Name="border6" Visibility="Hidden" Margin="10" Width="280" Height="100" Background="#555a64"  
		BorderBrush="Cyan" BorderThickness="1 1 1 1" CornerRadius="5 5 5 5" HorizontalAlignment="Left" VerticalAlignment="Top">
	<Button Content="Border 的子元素1" Width="120" Height="35"/>
</Border>
<!--  简单的属性触发器 IsMouseOver -->
<Border x:Name="border7" Margin="10" Width="280" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" SnapsToDevicePixels="True">
	<Border.Style>
		<Style TargetType="{x:Type Border}">
			<Setter Property="Background" Value="#555a64"/>
			<Setter Property="BorderBrush" Value="Cyan"/>
			<Setter Property="CornerRadius" Value="5"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Style.Triggers>
				<Trigger Property="IsMouseOver" Value="False">
					<Setter Property="Background" Value="YellowGreen"/>
					<Setter Property="BorderBrush" Value="Teal"/>
					<Setter Property="CornerRadius" Value="15 15 15 15"/>
					<Setter Property="BorderThickness" Value="2"/>
				</Trigger>
			</Style.Triggers>
		</Style>
	</Border.Style>
</Border>

*************************************************************************************************************

4、效果图