WPF-悬浮按钮 /XAML

先贴效果图

用纯XAML的方法写成Style,便于重复利用:

  1. 正常状态下的阴影距离ShadowDepth,透明度Opacity。
  2. Trigger,状态为鼠标在上(IsMouseOver)时,增加阴影距离,相应的用Transform将按钮位置往左上角移动,确保阴影在原地,降低透明度。
  3. 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]" />

发表评论

电子邮件地址不会被公开。