如何通过单击另一个元素在一个元素的 XAML 中进行旋转？答案

【问题标题】：How to make rotation in XAML of one element by clicking on another one?如何通过单击另一个元素在一个元素的 XAML 中进行旋转？
【发布时间】：2014-10-07 16:45:38
【问题描述】：

我有这样的代码（只剪掉需要的部分；这个代码用作用户控件）：

<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>

我想通过单击“br”按钮将图像（“im”）旋转 90 度。此代码不起作用。
但如果我使用这段代码：

<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>

旋转有效（图像通过点击旋转）。第一个有什么问题？

【问题讨论】：

标签： xaml

【解决方案1】：

您是否尝试过 Button.Click Routed 事件而不是 MouseUp。此处解释了 MouseUp 对按钮不起作用的原因：Wpf event not bubbling。

您提供的代码将适用于鼠标右键单击。在鼠标左键单击时，Click 事件正在吞噬鼠标事件。

我尝试了下面的代码，它似乎工作。我使用了一个虚拟图像作为来源。

   <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>

如果您需要更多信息，请告诉我。

【讨论】：