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即可。

相关推荐
hqwest3 小时前
C#WPF实战出真汁08--【消费开单】--餐桌面板展示
c#·wpf·ui设计·wpf界面设计
orangapple3 小时前
WPF 打印报告图片大小的自适应(含完整示例与详解)
c#·wpf
三千道应用题1 天前
WPF&C#超市管理系统(6)订单详情、顾客注册、商品销售排行查询和库存提示、LiveChat报表
开发语言·c#·wpf
✎ ﹏梦醒͜ღ҉繁华落℘2 天前
开发WPF项目时遇到的问题总结
wpf
hqwest3 天前
C#WPF实战出真汁06--【系统设置】--餐桌类型设置
c#·.net·wpf·布局·分页·命令·viewmodel
Vae_Mars3 天前
WPF中使用InputBindings进行快捷键绑定
wpf
hqwest3 天前
C#WPF实战出真汁05--左侧导航
开发语言·c#·wpf·主界面·窗体设计·视图viewmodel
hqwest3 天前
C#WPF实战出真汁01--项目介绍
开发语言·c#·wpf
wuty0074 天前
WPF 实现支持动态调整高度的文本显示控件
wpf·scrollviewer·extentheight·自动高度控件·动态调整高度
范纹杉想快点毕业7 天前
C 语言主控开发与显控开发能力体系及技术栈详解,STM32、QT、嵌入式、边缘系统显示
stm32·单片机·tcp/ip·microsoft·fpga开发·51单片机·wpf