14、wpf之Border装饰器使用小记

一、简介

Border是一个装饰器控件， 用于在另一个元素四周绘制边框或背景。

Border只能包含一个控件，如果想包含多个控件需要中间加一层，让Border去包含一个布局控件，布局控件再包含其他控件。

二、常用属性

既然是装饰器，就是对所包含控件的四周做些操作，常用的这么几个：边框颜色、厚度、边框背景，这些 属性一般都在一起使用。

2.1 边框颜色和厚度(BorderBrush/BorderThickness)

默认边框厚度是0，所以单独设置边框颜色是看不到什么效果的，需要把边框厚度设置下才能看到。

    <Grid Margin="10">
        <Border BorderBrush="Red" BorderThickness="2">
            <StackPanel Margin="10">
                <Button Content="fengtun"/>
                <Button Content="jioabi"/>
                <Button Content="yanggaoxiong"/>

            </StackPanel>
        </Border>
    </Grid>

这个边框厚度值可以分别设置上下左右四个方向的

    <Grid Margin="10">
        <Border BorderBrush="Red" BorderThickness="1 5 10 20">
            <StackPanel Margin="10">
                <Button Content="engtun"/>
                <Button Content="jioabi"/>
                <Button Content="anggaoxiong"/>

            </StackPanel>
        </Border>
    </Grid>

2.2  圆角(CornerRadius)

设置Border的角倒圆的程度，同样的可以分别设置4个角的值

        <Border BorderBrush="Red" BorderThickness="1 5 10 20" CornerRadius="1,5,10,20">
            <StackPanel Margin="10">
                <Button Content="engtun"/>
                <Button Content="jioabi"/>
                <Button Content="anggaoxiong"/>

            </StackPanel>
        </Border>

2.3 边框背景(Background) 

Background 属性属于 Brush 类型,所以可操作性非常强，处理使用简单的颜色之外，还可以使用渐变色作为背景。

    <Grid Margin="10">
        <Border BorderBrush="Red" BorderThickness="1 5 10 20" CornerRadius="1,5,10,20">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#1ca6ff" Offset="0.5"/>
                    <GradientStop Color="#f8024e" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <StackPanel Margin="10">
                <Button Content="engtun"/>
                <Button Content="jioabi"/>
                <Button Content="anggaoxiong"/>

            </StackPanel>
        </Border>
    </Grid>

三、引用文献

3.1 WPF - 随笔分类 - microsoft-zhcn - 博客园