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的区别-->透明度设置分类