Как я могу анимировать ScaleTransform из нескольких триггеров?

Question

Прежде всего: я просто пытаюсь начать работу с WPF и немного поиграть с ним, поэтому все может быть не совсем оптимальным, и я счастлив за любое предлагаемое улучшение.

Я имею следующий стиль и шаблон для моих кнопок и попытаться масштабировать их больше при наведении курсора мыши и меньше для мыши, который делает почти работу:

<Style TargetType="{x:Type Button}"> 
     <Setter Property="Background" Value="{x:Null}" /> 
     <Setter Property="Width" Value="80" /> 
     <Setter Property="Height" Value="80" /> 
     <Setter Property="Margin" Value="10" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid Name="ButtonGrid" Width="{TemplateBinding Width}" 
          Height="{TemplateBinding Height}" ClipToBounds="True" RenderTransformOrigin="0.5, 0.5"> 

         <Grid.RenderTransform> 
          <ScaleTransform></ScaleTransform> 
         </Grid.RenderTransform> 

         <Viewbox Stretch="Uniform"> 
          <Canvas Name="svg2" Width="100" Height="100"> 
           <Canvas.RenderTransform> 
            <TranslateTransform X="-322.04954" Y="-476.16966"/> 
           </Canvas.RenderTransform> 
           <Path Name="path2985" Fill="#FFFFFFFF" StrokeThickness="2" Stroke="#FFDB2325" StrokeMiterLimit="4"> 
            <Path.Data> 
             <PathGeometry Figures="m 166.96292 92.089554 c 0 43.240226 -35.05313 78.293346 -78.293349 78.293346 -43.240223 0 -78.29335 -35.05312 -78.29335 -78.293346 0 -43.240224 35.053127 -78.29335 78.29335 -78.29335 43.240219 0 78.293349 35.053126 78.293349 78.29335 z" FillRule="NonZero"/> 
            </Path.Data> 
            <Path.RenderTransform> 
             <MatrixTransform Matrix="0.6305699 0 0 0.6305699 316.13718 468.10076"/> 
            </Path.RenderTransform> 
           </Path> 
           <Path Name="path2987" Fill="#FFDB2325"> 
            <Path.Data> 
             <PathGeometry Figures="m 145.26718 89.259674 a 61.314068 61.314068 0 1 1 -122.628138 0 61.314068 61.314068 0 1 1 122.628138 0 z" FillRule="NonZero"/> 
            </Path.Data> 
            <Path.RenderTransform> 
             <MatrixTransform Matrix="0.63076923 0 0 0.63076923 319.0945 469.8674"/> 
            </Path.RenderTransform> 
           </Path> 
          </Canvas> 
         </Viewbox> 

         <!-- Present Content (text) of the button. --> 
         <DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="Center" VerticalAlignment="Center"> 
          <ContentPresenter x:Name="myContentPresenter" Margin="20" 
     Content="{TemplateBinding Content}" 
     TextBlock.Foreground="White" /> 
         </DockPanel> 
        </Grid> 

        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Trigger.EnterActions> 
           <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.EnterActions> 
          <Trigger.ExitActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation 
              Storyboard.TargetName="ButtonGrid" 
              Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)" 
              To="1.00" Duration="0:0:0.05" /> 
             <DoubleAnimation 
              Storyboard.TargetName="ButtonGrid" 
              Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
              To="1.00" Duration="0:0:0.05" /> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.ExitActions> 
         </Trigger> 

         <Trigger Property="IsPressed" Value="True"> 
          <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.00" Duration="0:0:0.05" /> 
             <DoubleAnimation 
              Storyboard.TargetName="ButtonGrid" 
              Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
              To="1.00" Duration="0:0:0.05" /> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.ExitActions> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Проблема заключается в том, что при нажатии на кнопку , триггер MouseOver либо больше не выполняется, либо масштаб не работает. Таким образом, кнопка больше не масштабируется на MouseOver.

Много спасибо за подсказки :)

Answer 1

Изменить IsMouseOver Триггер MultiTrigger и Move IsPressed Trigger над IsMouseOver мульти триггера, как, как показано ниже.

<ControlTemplate.Triggers> 
         <Trigger Property="IsPressed" Value="True"> 
          <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> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsMouseOver" Value="True"/> 
           <Condition Property="IsPressed" Value="False"/> 
          </MultiTrigger.Conditions> 
          <MultiTrigger.EnterActions> 
           <BeginStoryboard > 
            <Storyboard > 
             <DoubleAnimation 
             Storyboard.TargetName="ButtonGrid" 
             Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)" 
             To="1.08" Duration="0:0:0.05" /> 
             <DoubleAnimation 
             Storyboard.TargetName="ButtonGrid" 
             Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)" 
             To="1.08" Duration="0:0:0.05" /> 
            </Storyboard> 
           </BeginStoryboard> 
          </MultiTrigger.EnterActions> 
          <MultiTrigger.ExitActions> 
           <BeginStoryboard> 
            <Storyboard > 
             <DoubleAnimation 
             Storyboard.TargetName="ButtonGrid" 
             Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)" 
             To="1.00" Duration="0:0:0.05" /> 
             <DoubleAnimation 
             Storyboard.TargetName="ButtonGrid" 
             Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)" 
             To="1.00" Duration="0:0:0.05" /> 
            </Storyboard> 
           </BeginStoryboard> 
          </MultiTrigger.ExitActions> 
         </MultiTrigger>       
        </ControlTemplate.Triggers>