如何在 XAML 中为矩形描边厚度设置动画？

Question

我一直在尝试更改按钮的笔触粗细，但我似乎遗漏了一些东西。基本想法是我希望按钮看起来被放大，因为我缩小了矩形周围的透明笔触（边框）。

以下是我使用过的变体：

<DoubleAnimation To="10" 
      Storyboard.TargetName="innerRectangle" 
      Storyboard.TargetProperty="(Rectangle.StrokeProperty).StrokeThickness">
</DoubleAnimation>

我还使用了以下行：

<DoubleAnimation To="10" 
      Storyboard.TargetName="innerRectangle" 
      Storyboard.TargetProperty="StrokeThickness">
</DoubleAnimation>

还有：

<DoubleAnimation To="10" 
      Storyboard.TargetName="innerRectangle" 
      Storyboard.TargetProperty="(Rectangle.StrokeThickness)">
</DoubleAnimation>

以上都不起作用。

整个代码如下：

<Style x:Key="SecondaryButton"  TargetType="Button">
    <!--<Setter Property="Background" Value="LightSkyBlue"></Setter>
    <Setter Property="Foreground" Value="Black"></Setter>-->
    <Setter Property="Padding" Value="5"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent" x:Name="RootGrid">

                    <Border x:Name="Outline" BorderBrush="Transparent" BorderThickness="2">
                    <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" 
                                   VerticalAlignment="Stretch" Stroke="Red" 
                                   StrokeThickness="15" Fill="LightSkyBlue" 
                                   RadiusX="15" RadiusY="15"  />
                    </Border>
                    <ContentPresenter x:Name="Text" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black"/>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <!--<Storyboard>
                                    <ColorAnimation To="Black" Storyboard.TargetName="Text" Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"></ColorAnimation>
                                    <ColorAnimation To="LightSkyBlue"  Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"></ColorAnimation>
                                </Storyboard>-->
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <!--<ColorAnimation To="LightBlue"  Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"></ColorAnimation>-->
                                    <DoubleAnimation To="10" 
                                                     Storyboard.TargetName="innerRectangle" 
                                                     Storyboard.TargetProperty="(Rectangle.StrokeThickness)"
                                                     >
                                    </DoubleAnimation>
                                    <!--<ColorAnimation To="LightSkyBlue"
                                                    Storyboard.TargetName="innerRectangle"
                                                    Storyboard.TargetProperty="(Rectangle.Stroke).(SolidColorBrush.Color)">
                                    </ColorAnimation>-->
                                    <!--<ColorAnimation To="Red"  
                                                    Storyboard.TargetName="Outline" 
                                                    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                    </ColorAnimation>-->
                                </Storyboard>                                    
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation To="10" 
                                                     Storyboard.TargetName="innerRectangle" 
                                                     Storyboard.TargetProperty="StrokeThickness">
                                    </DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

确保你Enable Dependent Animations。