WPF 在按钮上设置边框以淡入淡出

Question

我正在尝试让我的按钮边框淡入淡出。我有效果，但它应用于整个按钮而不是边框。

App.xamml:

<Style x:Key="PassiveGlow"     
  BasedOn="{StaticResource GlowingButton}"  
  TargetType="{x:Type Button}">   

   <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="False">
      <Trigger.EnterActions>
        <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
         </BeginStoryboard>
      </Trigger.EnterActions>
    </Trigger>
 </Style.Triggers>
</Style>

按钮XAML:

<Button x:Name="LoginButton"
    Padding="5"
    HorizontalAlignment="Left"
    Margin="0,10,0,0"
    Width="100"
    Content="Login"
    ToolTipService.ShowDuration="20000"
    Click="PasswordButtonClick" TabIndex="2"
    Style="{DynamicResource PassiveGlow}">

Answer 1

您可以使用下面描述的样式实现此效果：

<Style x:Key="PassiveGlow"  TargetType="{x:Type Button}">
       <Setter Property="BorderBrush" Value="Red" />
       <Setter Property="BorderThickness" Value="3" />
        <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
       <Style.Triggers>
          <EventTrigger RoutedEvent="Button.Loaded">
          <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation 
                  Storyboard.TargetProperty="BorderBrush.Opacity"
                  From="1.0" To="0.0" Duration="0:0:2" 
                  AutoReverse="True" RepeatBehavior="Forever"/>
              </Storyboard>
               </BeginStoryboard>
         </EventTrigger>       
     </Style.Triggers>
    </Style>

此动画将在加载 Button 后立即开始，并将永远重复，因为我已将 Button.Loaded 用作 RoutedEvent 并将 RepeatBehavior 设置为 Forever。如果你想让这个动画只在鼠标第一次进入按钮时运行，你可以将RoutedEvent改为Button.MouseEnter。另外，请注意我在尝试此示例时没有可用的 material 样式，因此我为按钮添加了一个新的 ControlTemplate 并从样式中删除了 BasedOn="{StaticResource GlowingButton}" 部分。

要使用投影效果而不是边框：

在样式中添加一个setter效果，并将BorderThickness值设置为0。

    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Effect">
        <Setter.Value>
           <DropShadowEffect  ShadowDepth="5" Color="#7D00FE"/>
        </Setter.Value>
    </Setter>

编辑你的故事板以达到目标 Effect.ShadowDepth 属性:

  <Storyboard>
      <DoubleAnimation 
        Storyboard.TargetProperty="Effect.ShadowDepth"
        From="3.0" To="0.0" Duration="0:0:2" 
        AutoReverse="True" RepeatBehavior="Forever"/>
  </Storyboard>

WPF 在按钮上设置边框以淡入淡出

WPF setting a border on a button to fade in and out

wpf

xaml

mahapps.metro