C#/XAML: Storyboard Animation

[Verwijderd]

Beste Tweakenaars,

Ik had een vraagje. Op het moment ben ik bezig met 'Storyboard animation' in een WPF-applicatie en ik wil dat een knop van A naar B ronddraait (binnen een canvas) en weer terug (AutoReverse = "True"), alleen het lukt maar niet en weet ik niet meer wat er fout gaat ...

Programma:
Visual Studio 2017

Programmeer/-Opmaaktaal:
XAML

Applicatie:
WPF

Wat moet er gebeuren?
Na 1 Click-event moet de knop van A naar B ronddraaien (360 graden Celsius) en weer terug.

XAML-code:

XML:

        <Canvas Name="canvRight" Grid.Column="1" Grid.Row="1" Background="#FFE2E6AD" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Label>Column 1</Label>
            <Button Canvas.Left="5" Canvas.Top="65" Height="25" Width="77" Name="mySpinButton">
                <Button.RenderTransform>
                    <TransformGroup>
                        <RotateTransform x:Name="spinArround" Angle="0"/>
                    </TransformGroup>
                </Button.RenderTransform>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="spinArround" Storyboard.TargetProperty="(RotateTransform.Angle)" From="0" To="90" Duration="0:0:0.4" />
                                <DoubleAnimation Storyboard.TargetName="spinArround" Storyboard.TargetProperty="(RotateTransform.Angle)" From="90" To="0" Duration="0:0:0.4" />
                                <DoubleAnimation Storyboard.TargetName="spinArround" Storyboard.TargetProperty="(RotateTransform.Angle)" From="0" To="180" Duration="0:0:0.4" />
                                <DoubleAnimation Storyboard.TargetName="spinArround" Storyboard.TargetProperty="(RotateTransform.Angle)" From="180" To="0" Duration="0:0:0.4" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </Canvas>

bij voorbaat bedankt voor de moeite.

Update: 17-4-18 ^{werkende code}

XML:

            <Button Canvas.Left="5" Canvas.Top="65" Height="25" Width="77" Name="btnSpinButton" Content="SpinMyBTN">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <!-- Go from 5 to 175-->
                                <DoubleAnimation From="5" To="175" Duration="0:0:2" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="True" />
                                <!-- Spin Around 360 degrees while moving from 5 to 175-->
                                <DoubleAnimation From="0" To="360" Duration="0:0:2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" AutoReverse="True" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
                <Button.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>       <!-- (TransformGroup.Children)[0] -->
                        <SkewTransform/>        <!-- (TransformGroup.Children)[1] -->
                        <RotateTransform/>      <!-- (TransformGroup.Children)[2] -->
                        <TranslateTransform/>   <!-- (TransformGroup.Children)[3] -->
                    </TransformGroup>
                </Button.RenderTransform>
            </Button>

[ Voor 27% gewijzigd door Verwijderd op 17-04-2018 18:29 ]

[Broken]

Wat gebeurd er wel of niet?
Misschien kun je toelichten wat er exact gebeurd en wat je getest hebt. Nu lijkt het op een huiswerk dump met zoek het uit

[Lethalis]

https://stackoverflow.com...ctangle-animation-in-xaml

Misschien is de TargetProperty niet specifiek genoeg?

In het voorbeeld op SO staat er nog een RenderTransform voor.

Ik heb verder weinig ervaring met WPF, maar dat verschil valt me op

Dus (Button.RenderTransform).(RotateTransform.Angle) proberen. En eventueel de TransformGroup tags verwijderen voor de test, zodat de RotateTransform direct onder de RenderTransform valt.

[ Voor 25% gewijzigd door Lethalis op 05-04-2018 08:44 ]

[RobIII]

Verwijderd schreef op woensdag 4 april 2018 @ 22:25:
Na 1 Click-event moet de knop van A naar B ronddraaien (360 graden Celsius) en weer terug.

Heb je Fire = true gedaan?

[Verwijderd]

Ik wil jullie allemaal bedanken, het is me gelukt om dit voor elkaar te krijgen.

[RobIII]

Verwijderd schreef op dinsdag 17 april 2018 @ 17:56:
Ik wil jullie allemaal bedanken, het is me gelukt om dit voor elkaar te krijgen.

Post dan ook effe de oplossing, dan hebben anderen er ook nog wat aan...

[Verwijderd]

De code die ik heb gebruikt is:

XML:

            <Button Canvas.Left="5" Canvas.Top="65" Height="25" Width="77" Name="btnSpinButton" Content="SpinMyBTN">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <!-- Go from 5 to 175-->
                                <DoubleAnimation From="5" To="175" Duration="0:0:2" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="True" />
                                <!-- Spin Around 360 degrees while moving from 5 to 175-->
                                <DoubleAnimation From="0" To="360" Duration="0:0:2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" AutoReverse="True" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
                <Button.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>       <!-- (TransformGroup.Children)[0] -->
                        <SkewTransform/>        <!-- (TransformGroup.Children)[1] -->
                        <RotateTransform/>      <!-- (TransformGroup.Children)[2] -->
                        <TranslateTransform/>   <!-- (TransformGroup.Children)[3] -->
                    </TransformGroup>
                </Button.RenderTransform>
            </Button>

[ Voor 188% gewijzigd door Verwijderd op 17-04-2018 18:27 ]