C#•6d ago

WPF button animation

I have this button I am trying to animate

8 Replies

I have it rotating but I need to only affect the top part of the image.png file

 <Button x:Name="buttonTrash" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="50" Width="50" BorderBrush="{x:Null}" Cursor="Hand" ToolTip="Trash" Click="buttonTrash_Click" >


     <Button.Background>
         <ImageBrush ImageSource="/Data/icon/3844425_can_trash_icon.png"/>
     </Button.Background>
     <Button.Effect>
         <DropShadowEffect ShadowDepth="10" Opacity="0.5"/>
     </Button.Effect>


     <Button.RenderTransform>
         <TransformGroup>
             <TranslateTransform X="-10" Y="-30"/>
             <RotateTransform x:Name="trashLidRotate" Angle="0" CenterX="10" CenterY="20"  />
         </TransformGroup>
     </Button.RenderTransform>

     <Button.Triggers>
         <EventTrigger RoutedEvent="Button.Click">
             <BeginStoryboard>
                 <Storyboard>
                     <DoubleAnimation
                         Storyboard.TargetName="trashLidRotate" 
                           AutoReverse="True"
                            Storyboard.TargetProperty="Angle"
                          From="0" To="-45" Duration="0:0:3"
                      />
                 </Storyboard>
             </BeginStoryboard>
         </EventTrigger>
     </Button.Triggers>

     
 </Button>

 <Button x:Name="buttonTrash" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="50" Width="50" BorderBrush="{x:Null}" Cursor="Hand" ToolTip="Trash" Click="buttonTrash_Click" >


     <Button.Background>
         <ImageBrush ImageSource="/Data/icon/3844425_can_trash_icon.png"/>
     </Button.Background>
     <Button.Effect>
         <DropShadowEffect ShadowDepth="10" Opacity="0.5"/>
     </Button.Effect>


     <Button.RenderTransform>
         <TransformGroup>
             <TranslateTransform X="-10" Y="-30"/>
             <RotateTransform x:Name="trashLidRotate" Angle="0" CenterX="10" CenterY="20"  />
         </TransformGroup>
     </Button.RenderTransform>

     <Button.Triggers>
         <EventTrigger RoutedEvent="Button.Click">
             <BeginStoryboard>
                 <Storyboard>
                     <DoubleAnimation
                         Storyboard.TargetName="trashLidRotate" 
                           AutoReverse="True"
                            Storyboard.TargetProperty="Angle"
                          From="0" To="-45" Duration="0:0:3"
                      />
                 </Storyboard>
             </BeginStoryboard>
         </EventTrigger>
     </Button.Triggers>

     
 </Button>

how do I rotate only the top part of this image?

Buddy•6d ago

You need to split the image into parts via a photo editing program. Assuming you want to "open the lid" of the trashcan

monkeyoohlalaOP•6d ago

I believe there is a way to animate the image file within visual studio the top pixels of it this rotates the whole image

Buddy•6d ago

At least I am not aware of such effects; but I could be wrong. Wait and see if someone checks in and do some more research in the meantime

monkeyoohlalaOP•6d ago

okay

Buddy•6d ago

You could make a shader I guess, that'd be the only way that I can think of which doesn't require splitting image into parts https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.effects.shadereffect?view=windowsdesktop-9.0

monkeyoohlalaOP•6d ago

what is a shader?

Buddy•6d ago

Code that runs on the GPU Shaders can be tricky though, especially to debug. You'd need a program like RenderDoc to debug them I'd choose the first though (splitting image into parts). Significantly easier

Gaming

Programming

WPF button animation

Did you find this page helpful?