按比例放大MouseOver WPF風格

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沒有矩形。 RenderTransform是UIElement上的依賴項屬性。所以，你應該刪除Rectangle

2）此外，沒有RenderTransform應用到您的網格。

3）修復上述兩個項目後，如果您嘗試獲得連續動畫（按鈕擴大/縮小大小），將該集合Background屬性Grid修復爲Transparent，以便Grid參與命中測試並響應Mouse 。

更新你的風格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> 

另一件事，而不是使用Trigger.EnterActions和Trigger.ExitActions，你可以使用VisualStateManager來達到同樣的效果。使用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>