WPF创建一个凹凸效果的边框

1、立体文本边框

样式

<Style x:Key="BorderStyle" TargetType="Border">
            <Setter Property="BorderBrush" Value="#55020403" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="CornerRadius" Value="5" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect
                        BlurRadius="2"
                        Opacity="0.3"
                        ShadowDepth="2"
                        Color="White" />
                </Setter.Value>
            </Setter>
        </Style>

使用

<Border
            Grid.Column="1"
            Width="200"
            Height="100"
            Style="{StaticResource BorderStyle}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="36"
                Foreground="#FF45C4EF"
                Text="10:00:00" />
        </Border>

效果：

2、设置控件边框的阴影Shadow 样式

在一些场景下需要WPF的控件显示阴影边框的效果。主要是通过控件的 DropShadowEffect 对象来进行控制。

1. DropShadowEffect的基本属性：

1. Direction : 设置投影的方向值，单位是角度，默认为 315，其角度值对应的方向如下图所示：
   

2. ShadowDepth：阴影距离控件纹理边框的距离，单位是 pixels，默认值是 5 pixels。将其设置为0时，阴影将均匀的沿着控件四周分布，而不是沿着某一角度来分布

3. BlurRadius：阴影模糊效果的半径，默认为5。设置为0时，将没有模糊的效果，而是清晰的阴影

4. Color： 阴影的颜色

5. Opacity：阴影的不透明度

---

2. 实际显示效果

1） 沿指定角度带模糊效果的阴影

<Border Width="180" Height="100" Background="Pink" CornerRadius="8">
    <Border.Effect>
        <DropShadowEffect Direction="320" BlurRadius="6" ShadowDepth="8" Color="Black" Opacity="0.3"/>
    </Border.Effect>
</Border>

2）沿四周均匀分布的阴影，而不是沿着一个方向，设置ShadowDepth="0"

<Border Width="180" Height="100" Background="Pink" CornerRadius="8">
    <Border.Effect>
        <DropShadowEffect BlurRadius="20" ShadowDepth="0" Color="Black" Opacity="0.4"/>
    </Border.Effect>
</Border>

3）设置控件自身带模糊的效果

<Border Width="180" Height="100" Background="Pink" CornerRadius="8">
    <Border.Effect>
        <BlurEffect Radius="4" KernelType="Box" />
    </Border.Effect>
</Border>

---

3、WPF 立体Border

WPF 立体Border ，用来划分各个功能区块

在资源文件中，添加如下样式代码：

 <Style x:Key="BaseBorder" TargetType="Border">
     <Setter Property="Background" Value="White" />
     <Setter Property="BorderBrush" Value="#EEEEEE" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="CornerRadius" Value="10" />
     <Setter Property="Opacity" Value="1" />
     <Setter Property="Effect">
         <Setter.Value>
             <DropShadowEffect
          BlurRadius="10"
          Opacity="0.3"
          ShadowDepth="3"
          Color="#BBBBBB" />
         </Setter.Value>
     </Setter>
 </Style>
 <Style x:Key="ExternalBorder" TargetType="Border">
     <Setter Property="Effect">
         <Setter.Value>
             <DropShadowEffect
          BlurRadius="10"
          Direction="-225"
          Opacity=".6"
          ShadowDepth="3"
          Color="White" />
         </Setter.Value>
     </Setter>
 </Style>

在使用时：

创建两个嵌套的Border，外部使用ExternalBorder样式，内部使用BaseBorder样式，如：

<Border Width="400" Height="300" Style="{StaticResource ExternalBorder}">
    <Border Style="{StaticResource ResourceKey=BaseBorder}" />
</Border>

如果要在Border里面加控件，加在最里面的Border里。

如果要改背景颜色，可以改BaseBorder样式里的Background属性，要改边框颜色可以改BorderBrush属性。

之所以用了两个Border，是因为在对Border添加阴影的同时，又在外部对左上角加了高亮，模拟光线从左上方照射的感觉，效果比单用一个Border加阴影要更自然，更有高级感，尤其在背景颜色较深时更加明显。

上图：加了高光； 下图：只加了阴影，没有加高光

4、WPF-WPF BitmapEffect （按钮凹凸效果）