WPF和Silverlight的衰落Glowy按钮

本教程旨在启发XAML为Windows（WPF），Web（Silverlight）和浏览器（XBAP）构建丰富的应用程序的功能。 我将向您介绍有关使用纯XAML构建有吸引力的渐变发光按钮的信息。 使用XAML，我们不必为外观精美的控件构建用户或自定义控件。 相反，我们使用样式，与应用于Web控件的CSS相同。

为此，我们将创建一个资源字典。 资源字典是一个包含控件样式的文件（例如.css文件）。 为了可重用，我们定义了资源字典。 虽然，您不必创建应用样式的资源字典。 您可以在各自的xaml源代码中以App.xaml或Window或Page级别样式编写应用程序级别样式。

您可以通过从“项目”菜单中添加新的Reosurce词典来添加ResourceDictionary文件。

默认情况下，您的资源字典文件将包含以下标记。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

现在，在介绍样式之前，我们将将此资源文件引入App.xaml

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Generic.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources> 

正如您在上述标记中的<Application.Resources>下所看到的，我们需要合并将在应用程序中使用的资源文件。 我将所有资源文件都保存在Resources文件夹下，您可以指定自己的文件。

完成此操作后，让我们回到定义样式。 这是我们要为按钮定义样式的地方。 现在，为按钮定义衰落的发光样式需要大量的XAML标记。

因此，我将逐步解释每个阶段。

阶段1：追求风格

<Style x:Key="GlowButtonStyle" TargetType="{x:Type Button}">  

首先，我们将定义一个这样的样式，在其中指定样式GlowButtonStyle的可访问名称以及我们要定位的控件的类型，即Button。

然后，我指定按钮的文本颜色。

<Setter Property="Button.Foreground" Value="Black"/> 

要更改按钮的整体外观并创建自己的外观，我们需要覆盖默认的temaplte并定义一个新模板。 这就是大多数代码的全部内容。

我们将在控件的template属性下设置新模板

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}" x:Name="ButtonUpControlTemplate"> 

在上面的标记中，我们为控件设置了一个新模板，所有代码都在<ControlTemplate>标记下。

现在，没有任何内容作为模板，该按钮将仅在窗口中不可见。

阶段2：为“空”按钮提供背景

为此，我们在按钮周围创建一个浅边框以使其出现。

         <Border x:Name="ButtonBorder" 
                  BorderThickness="1"
                  BorderBrush="Gray"> 

现在，对于渐变部分，我们必须在边框背景中绘制按钮的背景渐变。

在给定边框后，我们需要为按钮提供内容设置，如要保留在按钮内的文本中所示。

   <ContentPresenter x:Name="ButtonContentPresenter"
                                VerticalAlignment="Center"  
                                HorizontalAlignment="Center"/> 

ContentPresenter管理内容对齐，并通知空白按钮Canvas它必须在其中容纳一些内容。 如果不指定ContentPresenter，您将看不到按钮内嵌的蚂蚁内容。

现在有关填充控件背景。

                        <Border.Background>
                            <LinearGradientBrush x:Name="ButtonUp"    StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="WhiteSmoke" Offset="0.1"/>
                                <GradientStop Color="LightGray" Offset="0.2"/>
                                <GradientStop Color="White" Offset="0.9"/>
                            </LinearGradientBrush>
                        </Border.Background> 

您可以在Border.Background中将渐变填充设置指定为按钮背景的一部分。 在这里，我定义了一个LinearGradientBrush，它具有一些看起来更好的渐变停止点，并且还指定了StartPoint作为渐变的原点和EndPoint作为渐变的末尾。

然后最后用</ Border>标签关闭Border

</Border> 

阶段3：安排动画Glowy效果

在此之下，我将向您解释动画部分，该部分使鼠标悬停时按钮发光，并在鼠标离开时恢复正常。

当鼠标悬停在按钮上或单击鼠标时，动画效果最适合该按钮。
现在，要处理鼠标悬停时的动画，我们需要在<ControlTemplate.Triggers>标记下为其编写标记。

    <MultiTrigger>
      <MultiTrigger.Conditions>
       <Condition Property="Button.IsMouseOver" Value="True"/>
        </MultiTrigger.Conditions> 

为了指定在哪个触发器上执行指定的动作，我们需要在<MultiTrigger.Conditions>标记下指定触发器条件。

在这里，我们检查Button的属性。 如果将鼠标悬停在其上并且属性值满足条件。 然后，我们将动画代码编写如下：

         <MultiTrigger.EnterActions>
         <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOver}"/>
            </MultiTrigger.EnterActions> 

在<MultiTrigger.EnterActions>中，我们启动彩色动画的情节提要，该情节提要引用同一文件中的动画资源。

    <Storyboard x:Key="ButtonAnimationOver">
            <ParallelTimeline>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" From ="WhiteSmoke" To="PaleGoldenrod" Duration="0:0:0.50"/>
            <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" From ="LightGray" To="PaleGoldenrod" Duration="0:0:0.50"/>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" From ="White" To="PaleGoldenrod" Duration="0:0:0.50"/>
            </ParallelTimeline>
    </Storyboard> 

此StoryBoard播放ColorAnimation，该动画将在Duration属性中指定的时间内将按钮的当前渐变颜色更改为PaleGoldenRed Color。

当鼠标离开控件焦点时，我们为该效果编写ExitActions，如下所示

        <MultiTrigger.ExitActions>
         <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOut}"/>
            </MultiTrigger.ExitActions> 

和退出动画

    <Storyboard x:Key="ButtonAnimationOut">
            <ParallelTimeline>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To ="WhiteSmoke" From="PaleGoldenrod" Duration="0:0:0.50"/>
            <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="LightGray" From="PaleGoldenrod" Duration="0:0:0.50"/>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="White" From="PaleGoldenrod" Duration="0:0:0.50"/>
            </ParallelTimeline>
    </Storyboard> 

现在已经可以将样式应用于按钮了，现在转到要样式化的按钮并应用样式。

   <Button Content="Button4" Height="42" x:Name="button1" Width="85" Style="{StaticResource GlowButtonStyle}"/> 

我们在样式属性中为按钮指定样式名称，这就是将按钮样式设置为Fading Glowy Button所需的全部。

这是完整的资源字典代码。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Style for application Background-->
    <Style x:Key="ApplicationBackground" TargetType="{x:Type Window}">
        <Setter Property="Control.Background" Value="WhiteSmoke"/>
    </Style>   
    <Storyboard x:Key="ButtonAnimationOver">
            <ParallelTimeline>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" From ="WhiteSmoke" To="PaleGoldenrod" Duration="0:0:0.50"/>
            <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" From ="LightGray" To="PaleGoldenrod" Duration="0:0:0.50"/>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" From ="White" To="PaleGoldenrod" Duration="0:0:0.50"/>
            </ParallelTimeline>
    </Storyboard>
    <Storyboard x:Key="ButtonAnimationOut">
            <ParallelTimeline>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To ="WhiteSmoke" From="PaleGoldenrod" Duration="0:0:0.50"/>
            <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="LightGray" From="PaleGoldenrod" Duration="0:0:0.50"/>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="White" From="PaleGoldenrod" Duration="0:0:0.50"/>
            </ParallelTimeline>
    </Storyboard> 
    <!-- Common Button Style-->
    <Style x:Key="GlowButtonStyle" TargetType="{x:Type Button}"> 
        <Setter Property="Button.Foreground" Value="Black"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}" x:Name="ButtonUpControlTemplate">
                    <Border x:Name="ButtonBorder" 
                  BorderThickness="1"
                  BorderBrush="Gray">
                        <ContentPresenter x:Name="ButtonContentPresenter"
                                VerticalAlignment="Center"  
                                HorizontalAlignment="Center"/>
                        <Border.Background>
                            <LinearGradientBrush x:Name="ButtonUp"    StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="WhiteSmoke" Offset="0.1"/>
                                <GradientStop Color="LightGray" Offset="0.2"/>
                                <GradientStop Color="White" Offset="0.9"/>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Button.IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOver}"/>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOut}"/>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary> 

From: https://bytes.com/topic/xaml/insights/889097-fading-glowy-button-wpf-silverlight