先贴效果图
用纯XAML的方法写成Style,便于重复利用:
- 正常状态下的阴影距离ShadowDepth,透明度Opacity。
- Trigger,状态为鼠标在上(IsMouseOver)时,增加阴影距离,相应的用Transform将按钮位置往左上角移动,确保阴影在原地,降低透明度。
- Trigger,状态为鼠标按下(IsPressed)时,阴影距离为0,相应地往右下移动位置。
<style x:key="bbtn" targettype="Button"> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect Opacity="0.5" BlurRadius="2" ShadowDepth="3"/> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect Opacity="0.4" BlurRadius="2" ShadowDepth="5"/> </Setter.Value> </Setter> <Setter Property="RenderTransform"> <Setter.Value> <TranslateTransform X="-2" Y="-2"/> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect Opacity="1" BlurRadius="2" ShadowDepth="0"/> </Setter.Value> </Setter> <Setter Property="RenderTransform"> <Setter.Value> <TranslateTransform X="2" Y="2"/> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </style>
接着在Button控件中设置Style,绑定到静态资源
<Button Style="{StaticResource bbtn}" Content="[TEXT HERE]" />