Silverlight - 如何影响 VisualState 的属性

Question

我有以下代码：

<Style x:Key="GoButton" TargetType="Button">
    <Setter Property="Background" Value="#FF2B832C"/>
    <Setter Property="Foreground" Value="#FFfdf7bd"/>
    <Setter Property="FontSize" Value="30" />
    <Setter Property="Padding" Value="3"/>
    <Setter Property="BorderThickness" Value="3"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="#4d9e41" Offset="0" />
                <GradientStop Color="#294c22" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" To="35" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="5">
                        <Grid Background="{TemplateBinding Background}" Margin="0">
                            <Border x:Name="BackgroundAnimation" Background="#FF448DCA" CornerRadius="5" Opacity="0"/>
                            <Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.8,1" StartPoint="0,0">
                                        <GradientStop Color="#66b04d" Offset="0"/>
                                        <GradientStop Color="#66b04d" Offset="0.375"/>
                                        <GradientStop Color="#2d822d" Offset="0.625"/>
                                        <GradientStop Color="#2d822d" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </Border>
                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="6" RadiusX="6"/>
                    <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="5" RadiusX="5" Stroke="#FF6DBDD1" StrokeThickness="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当用户鼠标悬停在按钮上时，我想更改 FontSize。但是这段代码不起作用，如果我删除字符串，但没有我的动画，它会起作用：

<DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" To="35" />

如何正确做？

Answer 1

通过将模板中的 <ContentPresenter> 替换为

，我让你的动画工作了

<ContentControl x:Name="nestedContentControl" ContentTemplate="{TemplateBinding ContentTemplate}" 
                Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

然后将 MouseOver 动画的Storyboard.TargetName 设置为nestedContentControl。

问题似乎是为Storyboard.TargetName 提供了一个值。虽然您可以访问模板应用到的控件的名称（即使用此模板的按钮），但情节提要似乎无法访问模板化控件。因此，我们在模板中嵌套了另一个 ContentControl（Button 本身就是一个 ContentControl）并使用它。

但是，使用另一个 ContentControl 也有其缺点。我必须添加 Foreground="{TemplateBinding Foreground}" 属性，以便它获取您正在使用的前景色。根据您需要使用的其他属性，您很可能需要进一步添加此类“直通”绑定。

请注意，Focused VisualState 上还有一个动画。此动画无法按原样工作，因为您尚未为其指定 TargetName。我不知道对此有什么建议，因为我不确定您要达到的目标。

最后，在回答这个问题时，我还发现了 a similar question 关于动画模板父对象的属性。在这种情况下，解决方案似乎是在代码隐藏中连接动画。