Reputation: 35
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
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
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