WPF -UI --Border

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

猜你喜欢