Image Animation с кнопки WPF

Question

У меня есть image в button, я написал animation, что приводит к Grow или Shrink Когда IsMouseOver Встречается, однако я не хочу кнопку сам Grows или Shrinks но изображение в Button имеет до Grow или Shrink. Есть ли у вас какие-либо идеи? Я весь твой.

вот мой .xaml

<Button Margin="355,0,0,0" Width="100" Height="300" Click="Button_Click_1"> 
     <Image Source="img/blue.jpg" /> 
     <Button.Style> 
      <Style TargetType="Button"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Trigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ThicknessAnimation Duration="0:0:0.250" To="0" 
            Storyboard.TargetProperty="BorderThickness" /> 
            <DoubleAnimation Duration="0:0:0.350" To="320" 
            Storyboard.TargetProperty="Height" /> 
            <DoubleAnimation Duration="0:0:0.350" To="120" 
            Storyboard.TargetProperty="Width" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
         <Trigger.ExitActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ThicknessAnimation Duration="0:0:0.250" To="0" 
            Storyboard.TargetProperty="BorderThickness" /> 
            <DoubleAnimation Duration="0:0:0.550" To="300" 
            Storyboard.TargetProperty="Height" /> 
            <DoubleAnimation Duration="0:0:0.550" To="100" 
            Storyboard.TargetProperty="Width" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.ExitActions> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Button.Style> 
    </Button> 

Answer 1

Вы можете просто применить Style к Image вместо Button.

<Button ...> 
    <Image ...> 
     <Image.Style> 
      <Style TargetType="Image"> 
       <Style.Triggers> 
        <!-- You get the idea --> 

Обратите внимание, что Image не имеет Border контроля, поэтому вы не можете использовать BorderThickness анимации на Image, вы можете вместо этого применить эту анимацию на Button, как вы делали раньше.

Кроме того, для того, чтобы оживить ваш Image, потребуется Height. В противном случае, вы можете использовать From свойство на DoubleAnimation как это:

<DoubleAnimation Duration="0:0:0.350" From="300" To="320" 
       Storyboard.TargetProperty="Height" /> 

Answer 2

Вы должны дать высоту и ширину изображения, иначе получите исключение. Как сказал Майк, он не может использовать BorderThickness.

<Button> 
     <Image Source="Edit.png" Height="50" Width="50"> 
      <Image.Style> 
       <Style TargetType="Image"> 
        <Style.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Trigger.EnterActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <!--<ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />--> 
             <DoubleAnimation Duration="0:0:0.350" To="320" Storyboard.TargetProperty="Height" /> 
             <DoubleAnimation Duration="0:0:0.350" To="120" Storyboard.TargetProperty="Width" /> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.EnterActions> 
          <Trigger.ExitActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <!--<ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />--> 
             <DoubleAnimation Duration="0:0:0.550" To="300" Storyboard.TargetProperty="Height" /> 
             <DoubleAnimation Duration="0:0:0.550" To="100" Storyboard.TargetProperty="Width" /> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.ExitActions> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </Image.Style> 
     </Image> 
    </Button> 

Answer 3

Или вы могли бы попробовать это

<Button Margin="355,0,0,0" Width="100" Height="300" Click="Button_Click_1"> 
      <Border Width="50" Height="150"> 
       <Border.Style> 
        <Style TargetType="Border"> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ThicknessAnimation Duration="0:0:0.250" To="0" 
            Storyboard.TargetProperty="BorderThickness" /> 
              <DoubleAnimation Duration="0:0:0.350" To="320" 
            Storyboard.TargetProperty="Height" /> 
              <DoubleAnimation Duration="0:0:0.350" To="120" 
            Storyboard.TargetProperty="Width" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
           <Trigger.ExitActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ThicknessAnimation Duration="0:0:0.250" To="0" 
            Storyboard.TargetProperty="BorderThickness" /> 
              <DoubleAnimation Duration="0:0:0.550" To="150" 
            Storyboard.TargetProperty="Height" /> 
              <DoubleAnimation Duration="0:0:0.550" To="50" 
            Storyboard.TargetProperty="Width" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.ExitActions> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </Border.Style> 
       <Image Source="MyImage.jpg" Stretch="UniformToFill"/> 
      </Border> 
     </Button>