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属性Grid修复为Transparent，以便Grid参与命中测试并做出响应鼠标悬停。

将您的样式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>

在WPF样式按钮上放大MouseOver

1 个答案: