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加阴影要更自然,更有高级感,尤其在背景颜色较深时更加明显。

上图:加了高光; 下图:只加了阴影,没有加高光

我个人更喜欢上面加了高光的这种,如果要去掉高光,只用一个BaseBorder即可。

相关推荐
玉面小君3 天前
从 WPF 到 Avalonia 的迁移系列实战篇6:Trigger、MultiTrigger、DataTrigger 的迁移
wpf·avalonia
招风的黑耳4 天前
Java生态圈核心组件深度解析:Spring技术栈与分布式系统实战
java·spring·wpf
lfw20194 天前
WPF 数据绑定模式详解(TwoWay、OneWay、OneTime、OneWayToSource、Default)
wpf
Magnum Lehar4 天前
3d wpf游戏引擎的导入文件功能c++的.h实现
3d·游戏引擎·wpf
FuckPatience5 天前
WPF Telerik.Windows.Controls.Data.PropertyGrid 自定义属性编辑器
wpf
almighty275 天前
C#WPF控制USB摄像头参数:曝光、白平衡等高级设置完全指南
开发语言·c#·wpf·usb相机·参数设置
军训猫猫头5 天前
12.NModbus4在C#上的部署与使用 C#例子 WPF例子
开发语言·c#·wpf
我要打打代码5 天前
在WPF项目中使用阿里图标库iconfont
wpf
拾忆,想起6 天前
Redisson 分布式锁的实现原理
java·开发语言·分布式·后端·性能优化·wpf
weixin_464078076 天前
wpf依赖注入驱动的 MVVM实现(含免费源代码demo)
wpf