Border 边框

BorderRegionStyle

此样式用于包裹一个控件区域，配合基础xaml定义中的几个DropShadowEffect资源可制作如下效果：

Border

以上效果的xaml代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<UniformGrid Margin="32,32,0,0" Columns="3" Rows="2">
    <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32">
        <Border Background="{DynamicResource PrimaryBrush}">
            <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
        </Border>
    </Border>
    <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow1}">
        <Border Background="{DynamicResource InfoBrush}">
            <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
        </Border>
    </Border>
    <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow2}">
        <Border Background="{DynamicResource WarningBrush}">
            <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
        </Border>
    </Border>
    <Border Style="{StaticResource BorderRegion}" Width="200" Height="200"  Margin="0,0,32,32" Effect="{StaticResource EffectShadow3}">
        <Border Background="{DynamicResource DangerBrush}">
            <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
        </Border>
    </Border>
    <Border Style="{StaticResource BorderRegion}" Width="200" Height="200"  Margin="0,0,32,32" Effect="{StaticResource EffectShadow4}">
        <Border Background="{DynamicResource AccentBrush}">
            <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
        </Border>
    </Border>
    <Border Style="{StaticResource BorderRegion}" Width="200" Height="200"  Margin="0,0,32,32" Effect="{StaticResource EffectShadow5}">
        <Border Background="{DynamicResource BorderBrush}">
            <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
    </Border>
</UniformGrid>

提示：新版本中使用的BorderRegion，有别于老版本使用样式BorderRegionStyle，由直角变更为圆角

BorderVerticallySplitter

此样式使用1单位宽度的Border来分割横向排列的控件。

用例：

1
2
3
4
5
6
7
8
9
10
11
<StackPanel Height="20" Orientation="Horizontal">
    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
    <Border Style="{StaticResource BorderVerticallySplitter}"/>
    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
    <Border Style="{StaticResource BorderVerticallySplitter}"/>
    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
    <Border Style="{StaticResource BorderVerticallySplitter}"/>
    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
    <Border Style="{StaticResource BorderVerticallySplitter}"/>
    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
</StackPanel>

BorderVerticallySplitter

BorderHorizontallySplitter

此样式使用1单位高度的Border来分割纵向排列的控件。

用例：

1
2
3
4
5
6
7
8
9
10
11
<StackPanel Width="20">
    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
    <Border Style="{StaticResource BorderHorizontallySplitter}"/>
    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
    <Border Style="{StaticResource BorderHorizontallySplitter}"/>
    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
    <Border Style="{StaticResource BorderHorizontallySplitter}"/>
    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
    <Border Style="{StaticResource BorderHorizontallySplitter}"/>
    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
</StackPanel>

BorderHorizontallySplitter

BorderCircular

此样式借助BorderElement.Circular附加属性可实现圆形Border。

用例：

1
<Border Style="{StaticResource BorderCircular}" Background="OrangeRed" Width="100" Height="100"/>

BorderCircular

BorderClip

此样式在BorderCircular基础上添加了裁剪功能，常用于显示圆形Image。

用例：

1
2
3
<Border Style="{StaticResource BorderClip}" Width="100" Height="100">
    <Image Source="/HandyControlDemo;component/Resources/Img/Album/2.jpg"/>
</Border>

BorderClip