WPF -UI --Border

xiaoxiao2021-02-28  34

 

Border控件总结

Border控件不是一个布局控件,而是一个非常便于使用的元素,经常与布局面板一起使用。所以,在使用布局面板之前,先来学习一下Border控件是非常有必要的。

 

 

1,概念

Border Class

 

 

Draws a border, background, or both around another element. 翻译:在另一个元素周围绘制边界、背景或两者。

通俗点来说,它只能包含一段嵌套内容(一般为布局面板),并为其添加背景或者边框。为了深入地理解Boeder控件,只需要掌握表中列出的属性就可以了。

 

 

Background  使用Brush对象设置边框中所有内容后面的背景。可使用固定颜色背景,也可使用其他更特殊的背景

BorderBrush与BroderThickness使用Brush对象设置位于Border对象边缘的边框的颜色,并设置边框的宽度。为显示边框,必须设置这两个属性

CornerRadius该属性可使边框具有雅致的圆角。CornerRadius的值越大,圆角效果就越明显

Padding该属性在边框和内部的内容之间添加空间(与此相对,Margin属性在边框之外添加空间)

 

<Border BorderThickness="5" BorderBrush="Green" CornerRadius="10" Background="LightGray" HorizontalAlignment="Left" VerticalAlignment="Top" Width="270" Padding="50" Height="250" />

 

Border是一个装饰元素(decorator),装饰元素是特定类型的元素,通常用于在一个对象周围添加某些种类的图形装饰。所有装饰元素都继承自System.Windows.Controls.Decorator类。大多数装饰元素设计用于特定控件。例如,Button控件使用ButtonChrome装饰元素,以获取其特有的圆角和阴影背景效果;而ListBox控件使用ListBoxChrome装饰元素。还有两个更通用的装饰元素,当构造用户界面时它们非常有用。

举例

<Border BorderBrush="Silver" BorderThickness="1" Background="White" CornerRadius="5" Grid.Row="0" Padding="5"> <StackPanel Orientation="Vertical"> <TextBlock Text="Some stuff" /> <Button Content="Click me" Width="50" /> </StackPanel> </Border>

 

这里Border中直接包含一个StackPanel

当然也可以用Border发挥作为一个装饰类的主要职责

在这里着重深究Background  BorderBrush

Background  使用Brush对象设置边框中所有内容后面的背景。可使用固定颜色背景,也可使用其他更特殊的背景

BorderBrush与BroderThickness使用Brush对象设置位于Border对象边缘的边框的颜色,并设置边框的宽度。为显示边框,必须设置这两个属性

 

 

举个例子:

                                <Grid ClipToBounds="True" Margin="5"  Grid.Row="1" Height="40" Width="220"  >                                     <Grid.ColumnDefinitions>                                         <ColumnDefinition Width="60"/>                                         <ColumnDefinition/>                                     </Grid.ColumnDefinitions>                                     <Border x:Name="Border_BorderBrush" Grid.ColumnSpan="2" CornerRadius="0,2,2,0"  BorderThickness="1,1,1,1" BorderBrush="{StaticResource 3}" OpacityMask="#55ffffff"/>                                     <Border x:Name="Border_out" Grid.ColumnSpan="2" CornerRadius="0,2,2,0" BorderThickness="0,1,1,1" BorderBrush="Transparent" Background="{StaticResource 3}" OpacityMask="#11ffffff"/>                                     <Border x:Name="Border_inner" Grid.ColumnSpan="1" OpacityMask="#44ffffff" CornerRadius="0" BorderThickness="0" Background="{StaticResource 3}"/>                                     <Grid Margin="1">                                         <!--<Border  CornerRadius="2" Margin="-1" BorderBrush="Transparent" BorderThickness="0" Opacity="0.15" Background="{StaticResource Brush_SecondNumber}"/>-->                                         <TextBlock  Text="私人订制" Style="{StaticResource TextBlock_PlanTextStyle }" Margin="5,10" HorizontalAlignment="Center" Foreground="{StaticResource Brush_DM}"/>                                     </Grid>                                 </Grid>

 

效果图:

Border_BorderBrush 设置容器整体边框,Border_out设置右边区域背景色,Border_inner设置“私人定制”部分背景色,在的是这里值得一提整个容器只使用了一个主题色,经过设置Border_BorderBrushBorder_outBorder_inner的透明度来进行颜色的递接变换,这一点在软件设置不同主题色时很有用。这里设置不同区域的透明度是通过设置OpacityMask="#44ffffff"来设置的(透明度为44的蒙板),它与Opacity的区别-->透明度设置分类

 

 

 

 

 

转载请注明原文地址: https://www.6miu.com/read-2650225.html

最新回复(0)