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_BorderBrush,Border_out和Border_inner的透明度来进行颜色的递接变换,这一点在软件设置不同主题色时很有用。这里设置不同区域的透明度是通过设置OpacityMask="#44ffffff"来设置的(透明度为44的蒙板),它与Opacity的区别-->透明度设置分类