CODEWITHSUNDEEP
wpfxamlbutton
user3376217
user3376217

Reputation: 35

Making a button rotate in XAML in a WPF form

I need to make a Button rotate when pressed, but I cannot sem to figure out what's wrong with my code. I just started using XAML today so it's probably something very obvious. When I run my code I get this error at runtime:

A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll

Additional information: Het initialiseren van System.Windows.Controls.Button heeft een uitzondering veroorzaakt. regelnummer 63 en >regelpositie 15.

This is the code I have so far:

<Button x:Name="ArrowButton" HorizontalAlignment="Left" Margin="148,198,0,0" VerticalAlignment="Top" Width="360" Height="360">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="UpArrow">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
Storyboard.TargetName="UpArrow"  
Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
From="0" To="360" Duration="0:0:2" 
RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
    <Button.Background>
        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF3F3F3" Offset="0"/>
            <GradientStop Color="#FFEBEBEB"/>
            <GradientStop Color="#00CDCDCD"/>
        </LinearGradientBrush>
    </Button.Background>
    <Image Source="upArrow.png" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" Height="360" Width="360" RenderTransformOrigin="0.5,0.5" MouseDown="Image_MouseDown">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="90"/>
                <TranslateTransform/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
</Button>

Upvotes: 0

Views: 4684

Answers (2)

Matan Givoni
Matan Givoni

Reputation: 1126

My advice when making animation, don't try to figure how to that in code! you have blend for that. (When you are making graphics you don't draw them by code you do that by drawing, same as animation) Only when really needed, edit your code to add a finish touch.

Just used blend for the job: 

<Window.Resources>
    <Storyboard x:Key="OnClick1">
        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="UpArrow">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-360"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ArrowButton">
        <BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
    </EventTrigger>
</Window.Triggers>
<Grid x:Name="MainGrid" Grid.Row="0">
    <Button x:Name="ArrowButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" RenderTransformOrigin="0.5,0.5">
        <Image x:Name="UpArrow" Width="30" Height="30" RenderTransformOrigin="0.5, 0.5" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Button>
</Grid>

Upvotes: 0

dkozl
dkozl

Reputation: 33394

One problems is that you try to rotate target UpArrow and there is no element with such name so name your Image

<Image x:Name="UpArrow" ... />

second problem is that you use TransformGroup so you need to specify Transform you want to animate

<DoubleAnimation 
    Storyboard.TargetName="UpArrow"  
    Storyboard.TargetProperty="RenderTransform.Children[2].(RotateTransform.Angle)" 
    From="0" 
    To="360" 
    Duration="0:0:2" 
    RepeatBehavior="Forever" />

so your XAML should look something like this:

<Button x:Name="ArrowButton" HorizontalAlignment="Left" Margin="148,198,0,0" VerticalAlignment="Top" Width="360" Height="360">
   <Button.Triggers>
      <EventTrigger RoutedEvent="Button.Click">
         <BeginStoryboard>
            <Storyboard>
               <DoubleAnimation 
                  Storyboard.TargetName="UpArrow"  
                  Storyboard.TargetProperty="RenderTransform.Children[2].(RotateTransform.Angle)" 
                  From="0" 
                  To="360" 
                  Duration="0:0:2" 
                  RepeatBehavior="Forever" />
            </Storyboard>
         </BeginStoryboard>
      </EventTrigger>
   </Button.Triggers>
   <Button.Background>
      <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
         <GradientStop Color="#FFF3F3F3" Offset="0"/>
         <GradientStop Color="#FFEBEBEB"/>
         <GradientStop Color="#00CDCDCD"/>
      </LinearGradientBrush>
   </Button.Background>
   <Image 
      x:Name="UpArrow" 
      Source="upArrow.png" 
      Stretch="Fill" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" 
      Height="360" 
      Width="360" 
      RenderTransformOrigin="0.5,0.5">
      <Image.RenderTransform>
         <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="90"/>
            <TranslateTransform/>
         </TransformGroup>
      </Image.RenderTransform>
   </Image>
</Button>

Upvotes: 3

Related Questions