在WPF样式的按钮上按比例放大MouseOver

Question

我目前正在从事C＃WPF项目，并且正在尝试制作自定义样式按钮。

我要发生的事情是，当鼠标悬停在按钮上时，它的大小作为动画略有增加，然后当鼠标离开按钮时，动画将按钮的大小减小到原始大小。

以下是我为按钮创建的ControlTemplate。 没有引发任何错误，但是也没有任何反应。

    <Application.Resources>
        <Style x:Key="RoundCorner" TargetType="{x:Type Button}">

            <Setter Property="Foreground" Value="White" />
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Name="ButtonGrid">
                            <Border x:Name="border" CornerRadius="8" BorderBrush="White" BorderThickness="2">
                                <ContentPresenter HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         TextElement.FontWeight="Bold"></ContentPresenter>
                            </Border>

                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" TargetName="border" Value="Blue"/>
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
                                        To="0.95"  Duration="0:0:0.05" />
                                            <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
                                        To="0.95" Duration="0:0:0.05" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
                                        To="1.08"  Duration="0:0:0.05" />
                                            <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
                                        To="1.08" Duration="0:0:0.05" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" TargetName="ButtonGrid" Value="0.25"/>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

感谢您的任何帮助，您可以提供

Answer 1

您的代码有几个问题：

1）您正在尝试设置Rectangle.RenderTransform属性的动画，并且ControlTemplate中没有Rectangle。 RenderTransform是UIElement上的依赖项属性。 因此，您应该删除Rectangle

2）另外，没有将RenderTransform应用于您的网格。

3）修复上述两项之后，如果尝试连续进行动画处理（按钮扩展/缩小大小），请将此Background属性“网格”修复为“透明”，以便网格参与命中测试并响应鼠标悬停。

将样式XAML更新为以下样式，它将起作用：

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
     <Setter Property="Foreground" Value="White"/>
     <Setter Property="HorizontalContentAlignment" Value="Center"/>
     <Setter Property="VerticalContentAlignment" Value="Center"/>
     <Setter Property="Padding" Value="1"/>
     <Setter Property="Template">
        <Setter.Value>
           <ControlTemplate TargetType="{x:Type Button}">
              <Grid Name="ButtonGrid" Background="Transparent">
                 <Border
                    x:Name="border"
                    BorderBrush="White"
                    BorderThickness="2"
                    CornerRadius="8">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontWeight="Bold">
                    </ContentPresenter>
                 </Border>
                 <Grid.RenderTransform>
                    <ScaleTransform />
                 </Grid.RenderTransform>
              </Grid>
              <ControlTemplate.Triggers>
                 <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="BorderBrush" Value="Blue"/>
                    <Trigger.EnterActions>
                       <BeginStoryboard>
                          <Storyboard>
                             <DoubleAnimation
                                Duration="0:0:0.05"
                                Storyboard.TargetName="ButtonGrid"
                                Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
                                To="0.95"/>
                             <DoubleAnimation
                                Duration="0:0:0.05"
                                Storyboard.TargetName="ButtonGrid"
                                Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
                                To="0.95"/>
                          </Storyboard>
                       </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                       <BeginStoryboard>
                          <Storyboard>
                             <DoubleAnimation
                                Duration="0:0:0.05"
                                Storyboard.TargetName="ButtonGrid"
                                Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
                                To="1.08"/>
                             <DoubleAnimation
                                Duration="0:0:0.05"
                                Storyboard.TargetName="ButtonGrid"
                                Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
                                To="1.08"/>
                          </Storyboard>
                       </BeginStoryboard>
                    </Trigger.ExitActions>
                 </Trigger>
                 <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="ButtonGrid" Property="Opacity" Value="0.25"/>
                 </Trigger>
              </ControlTemplate.Triggers>
           </ControlTemplate>
        </Setter.Value>
     </Setter>
  </Style>

另一件事，可以使用VisualStateManager来实现相同的结果，而不是使用Trigger.EnterActions和Trigger.ExitActions 。 使用VisualStateManager比Trigger.EnterActions和ExitActions容易得多。

下面是用于制作动画的VisualStateManager的代码：

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
     <Setter Property="Foreground" Value="White"/>
     <Setter Property="HorizontalContentAlignment" Value="Center"/>
     <Setter Property="VerticalContentAlignment" Value="Center"/>
     <Setter Property="Padding" Value="1"/>
     <Setter Property="Template">
        <Setter.Value>
           <ControlTemplate TargetType="{x:Type Button}">
              <Grid Name="ButtonGrid" Background="Transparent">
                 <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                       <VisualStateGroup.Transitions>
                          <VisualTransition GeneratedDuration="0:0:0.05" To="MouseOver"/>
                          <VisualTransition GeneratedDuration="0:0:0.05" To="Normal"/>
                       </VisualStateGroup.Transitions>
                       <VisualStateGroup.States>
                          <VisualState x:Name="Normal"/>
                          <VisualState x:Name="MouseOver">
                             <Storyboard>
                                <DoubleAnimation
                                   Storyboard.TargetName="ButtonGrid"
                                   Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
                                   To="0.95"/>
                                <DoubleAnimation
                                   Storyboard.TargetName="ButtonGrid"
                                   Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
                                   To="0.95"/>
                             </Storyboard>
                          </VisualState>
                       </VisualStateGroup.States>
                    </VisualStateGroup>
                 </VisualStateManager.VisualStateGroups>
                 <Border
                    x:Name="border"
                    BorderBrush="White"
                    BorderThickness="2"
                    CornerRadius="8">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontWeight="Bold">
                    </ContentPresenter>
                 </Border>
                 <Grid.RenderTransform>
                    <ScaleTransform/>
                 </Grid.RenderTransform>
              </Grid>
              <ControlTemplate.Triggers>
                 <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="BorderBrush" Value="Blue"/>
                 </Trigger>
                 <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="ButtonGrid" Property="Opacity" Value="0.25"/>
                 </Trigger>
              </ControlTemplate.Triggers>
           </ControlTemplate>
        </Setter.Value>
     </Setter>
  </Style>