CODEWITHSUNDEEP
xaml
alr
alr

Reputation: 1452

How to make rotation in XAML of one element by clicking on another one?

I have such code (cut only part which is needed; this code is used as a UserControl):

<Grid>
        <Image x:Name="im" HorizontalAlignment="Left" Height="120" Width="120">
            <Image.RenderTransform>
                <RotateTransform Angle="0" CenterX="60" CenterY="60" />
            </Image.RenderTransform>
        </Image>
        <Button x:Name="br" Content="Right" Width="55">
            <Button.Triggers>
                <EventTrigger RoutedEvent="MouseUp">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="im" Storyboard.TargetProperty="RenderTransform.Angle" By="90" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>

I'd like to rotate image ("im") by 90 degrees by clicking the "br" button. This code doesn't work.
But if I use this code:

<Grid>
        <Image x:Name="im" HorizontalAlignment="Left" Height="120" Width="120">
            <Image.RenderTransform>
                <RotateTransform Angle="0" CenterX="60" CenterY="60" />
            </Image.RenderTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="MouseUp">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="im" Storyboard.TargetProperty="RenderTransform.Angle" By="90" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
        <Button x:Name="br" Content="Right" Width="55">
        </Button>
    </Grid>

rotation works (image is rotating by clicking on it). What's wrong with the first one?

Upvotes: 0

Views: 1063

Answers (1)

DareToExplore
DareToExplore

Reputation: 259

Did you tried the Button.Click Routed event instead of MouseUp. The reason for MouseUp not working for button is explained here: Wpf event not bubbling.

The code you provided will work on Right button click of mouse. On left button click of mouse, the Click event is swallowing up the Mouse events.

I tried the below code and it seems to work. I have used a dummy image as source.

   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Image x:Name="im" HorizontalAlignment="Left" Height="120" Width="120" Source="..\Images\info.png">
            <Image.RenderTransform>
                <RotateTransform Angle="0" CenterX="60" CenterY="60" />
            </Image.RenderTransform>
        </Image>
        <Button x:Name="br" Grid.Row="1" Content="Right" Width="55">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="im" Storyboard.TargetProperty="RenderTransform.Angle" By="90" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>

Let me know in case you need any more information.

Upvotes: 2

Related Questions