Glow效果

Question

如何在WPF生成可重复使用的ButtonStyle使得Button的Content（无论是）得到发光效果时，鼠标悬停。

这样的预期效果（左=正常，右=鼠标）

我已经定义了一个Button但Style我需要什么样的Triggers实现呢？

<Style x:Key="GlowEffectButton" TargetType="Button"> 
    <Setter Property="Template"> 
     <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        //... ?? 
       </ControlTemplate> 
     </Setter.Value> 
    </Setter> 

我可能会使用一个Image或Path作为ButtonContent。

<Button Style="{StaticResource GlowEffectButton}"> 
     <Button.Content> 
      //IMAGE OR PATH as Content 
     </Button.Content> 
</Button/> 

有没有办法来发光效果设置为一个广义ButtonStyle？如果我仅将Button内容限制为仅使用XAML矢量/ Path，是否可以制作？

Answer 1

像这样的事情应该满足您的需求

资源

<Window.Resources> 
     <SolidColorBrush Color="White" Opacity="0.8" x:Key="HalfTransBrush"></SolidColorBrush> 
     <Style TargetType="{x:Type Path}"> 
      <Setter Property="StrokeThickness" Value="1"/> 
      <Setter Property="Stroke" Value="White"/> 
      <Setter Property="Fill" Value="Gainsboro"/> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}, Path=IsMouseOver, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True"> 
        <Setter Property="Fill" Value="{StaticResource HalfTransBrush}" /> 
        <Setter Property="Effect"> 
         <Setter.Value> 
          <DropShadowEffect BlurRadius="10" Color="White" ShadowDepth="0"></DropShadowEffect> 
         </Setter.Value> 
        </Setter> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
     <Style TargetType="{x:Type Button}"> 
      <Setter Property="OverridesDefaultStyle" Value="True"/> 
      <Setter Property="Background" Value="Black"></Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border Name="border" 
          BorderThickness="1" 
          Background="{TemplateBinding Background}"> 
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Window.Resources> 

使用

<Button Width="50" Height="50"> 
       <Path> 
        <Path.Data> 
         <PathGeometry> 
          <PathGeometry.Figures> 
           <PathFigure StartPoint="0,0" IsClosed="True"> 
            <LineSegment Point="1,1"/> 
            <LineSegment Point="30,20"/> 
            <LineSegment Point="40,25"/> 
            <LineSegment Point="30,40"/> 
            <LineSegment Point="10,10"/> 
           </PathFigure> 
          </PathGeometry.Figures> 
         </PathGeometry> 
        </Path.Data> 
       </Path> 
      </Button> 

结果

注意

因为您可以根据需要修改颜色和不透明度调整等。这是一个非常简单的例子，针对一个路径。按钮的模板是也许不是对你很有用处，因为你可能有自己的自定义风格

干杯