0

我有一个这样定义的按钮样式：

<LinearGradientBrush x:Key="Brush_NavButtonBorder0" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#00383f47" Offset="0" />
    <GradientStop Color="#FF383f47" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_NavButtonBorder4" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#FF414f5a" Offset="0" />
    <GradientStop Color="#11414f5a" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_NavButtonBackground" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#FF3f505a" Offset="0" />
    <GradientStop Color="#FF37454e" Offset="0.75" />
    <GradientStop Color="#FF2f3c44" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_NavButtonPressedBackground" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#FF3f505a" Offset="1" />
    <GradientStop Color="#FF37454e" Offset="0.25" />
    <GradientStop Color="#FF2f3c44" Offset="0" />
</LinearGradientBrush>

<Style x:Key="NavigationButton" TargetType="Button">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Foreground" Value="Gainsboro" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Background" Value="{StaticResource Brush_NavButtonBackground}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}" x:Name="MainControlTemplate">
                <Grid>
                    <Border x:Name="outerBorder" CornerRadius="5" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder0}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" />
                    <Border Margin="1" CornerRadius="4" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder4}" Background="Transparent" SnapsToDevicePixels="True">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!--<Setter TargetName="outerBorder" Property="BorderBrush" Value="Gray" />-->
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="outerBorder"
                                                    Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                    To="Gray"
                                                    Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{StaticResource Brush_NavButtonPressedBackground}" />
                        <Setter TargetName="content" Property="RenderTransform" >
                            <Setter.Value>
                                <TranslateTransform X="2.0" Y="2.0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.5" />
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这种风格有几个问题： 1. 当我将鼠标悬停在一个按钮上时，所有其他使用这种风格的按钮都会对动画做出反应，而不仅仅是我结束的按钮。2. 我想为整个边框的颜色设置动画，而不仅仅是第 0 个渐变停止点，但我似乎找不到这样做的方法。

ColorAnimation 部分上方的注释行几乎完全符合我的要求，只是它立即在 MouseOver 上显示灰色 BorderBrush - 我希望它显示带有动画的灰色 BorderBrush。

这似乎应该很简单，但我不知道如何做到这一点。有谁知道如何以正确的方式做到这一点？

4

1 回答 1

2

它更改所有按钮边框的原因是您实际上是在更改渐变画笔中的颜色。由于相同的渐变画笔在所有具有该样式的按钮实例之间共享，因此所有画笔的边框都会发生变化。

有很多方法可以解决这个问题，但其中之一是使有问题的画笔成为样式本身的资源，因此不会以相同的方式共享。以下代码片段演示了您需要更改的所有内容（从顶级资源中删除 Brush_NavButtonBorder0，并将其添加到按钮样式的资源中）：

编辑：包括更新的完整样式

<Color x:Key="BorderColor">#00383f47</Color>

<!-- Other Brushes (NOT Brush_NavButtonBorder0) -->

<Style x:Key="NavigationButton" TargetType="Button">
  <Setter Property="FocusVisualStyle" Value="{x:Null}" />
  <Setter Property="Foreground" Value="Gainsboro" />
  <Setter Property="FontSize" Value="14" />
  <Setter Property="Background" Value="{StaticResource Brush_NavButtonBackground}" />
  <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}" x:Name="MainControlTemplate">
            <ControlTemplate.Resources>
                <LinearGradientBrush x:Key="Brush_NavButtonBorder0" StartPoint="0,0" EndPoint="0,1" >
                            <GradientStop Color="{StaticResource BorderColor}" Offset="0" />
                    <GradientStop Color="#FF383f47" Offset="1" />
                </LinearGradientBrush>
            </ControlTemplate.Resources>
            <Grid>

                <Border x:Name="outerBorder" CornerRadius="5" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder0}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" />


                <Border Margin="1" CornerRadius="4" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder4}" Background="Transparent" SnapsToDevicePixels="True">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <!--<Setter TargetName="outerBorder" Property="BorderBrush" Value="Gray" />-->
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="outerBorder"
                                        Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                        To="Gray"
                                        Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="outerBorder"
                                        Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                        To="{StaticResource BorderColor}"
                                        Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="{StaticResource Brush_NavButtonPressedBackground}" />
                    <Setter TargetName="content" Property="RenderTransform" >
                        <Setter.Value>
                            <TranslateTransform X="2.0" Y="2.0" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value="0.5" />
                </Trigger>
                <!--<Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
                </Trigger>-->
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

这将意味着每个按钮实例都有自己的 LinearGradientBrush 副本，并且您的鼠标悬停触发动画只会影响鼠标悬停的按钮。

同样，有许多不同的方法可以解决这个问题，但上面的代码片段是我能想到的最简单的给定您当前的代码。

于 2012-06-22T00:35:53.043 回答