14. Notes on using border decorator of WPF

One 、 brief introduction

Border Is a decorator control , Use to draw a border or background around another element .

Border Can only contain one control , If you want to include multiple controls, you need to add a layer in the middle , Give Way Border To include a layout control , The layout control contains other controls .

Two 、 Common properties

Since it's a decorator , Is to do some operations around the contained controls , There are several commonly used ： Border color 、 The thickness of the 、 Border background , these Attributes are generally used together .

2.1 Border color and thickness (BorderBrush/BorderThickness)

The default border thickness is 0, So you can't see any effect by setting the border color alone , You need to set the border thickness to see .

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

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

This border thickness value can be set in the up, down, left and right directions respectively

    <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  Round corners (CornerRadius)

Set up Border The degree of rounding of the corners , The same can be set separately 4 Values for angles

        <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 Border background (Background) 

Background Attribute belongs to Brush type , So the operability is very strong , Handle using simple colors beyond , You can also use gradients as backgrounds .

    <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、 ... and 、 Citations

3.1 WPF - Essay classification - microsoft-zhcn - Blog Garden