WPF同时平移和缩放，缩放似乎使用原始位置

如何解决WPF同时平移和缩放，缩放似乎使用原始位置

我试图将图像翻转到右侧，同时将其翻转（这是一张卡）。我可以将其翻转到位，也可以将其单独移至目的地，而不会出现问题。

将两个转换结合起来无法按我的预期工作。图像将平移，然后在启动ScaleX时将其移回原始点。因此，如果我将其翻译为+300，则比例尺-1似乎将其翻译为-300。它具有翻转效果，但是我希望它可以翻转到位。

理想情况下，它会在移动时翻转，但一次只能翻转一步。

我相信问题是，缩放适用于Translate的扩大空间。即使我在移动它，它也会使用相对于原始位置的新位置（或堆叠面板已加宽），因此它会翻转到原始位置的另一侧。我需要它仅使用卡本身的宽度来翻转它的中心。因此，从X = 0开始，移动到X = 300，然后将ScaleX视为X = 300是ScaleX的原点（因为它将X = 300的新头寸当作X = 0进行交易，从而导致原地翻转）。这是我不知所措，无法在线找到的内容，我了解正在发生的事情，但不是实现目标的正确方法。许多单一的转换信息，但是当它们像这样组合时就没有。

        <Canvas Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Top">
            <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin=".5,.5">
                <StackPanel.RenderTransform>
                    <TransformGroup>
                        <TransformGroup.Children>
                            <TransformCollection>
                                <TranslateTransform x:Name="TransformTranslate" X="10" Y="10" />
                                <ScaleTransform x:Name="TransformScale" ScaleX="1" ScaleY="1" CenterX="0" CenterY="0"/>
                            </TransformCollection>
                        </TransformGroup.Children>
                    </TransformGroup>
                </StackPanel.RenderTransform>
                <StackPanel.Triggers>
                    <EventTrigger RoutedEvent="MouseDown">
                        <BeginStoryboard>
                            <Storyboard>
                                <!-- Slide the card -->
                                <DoubleAnimation Storyboard.TargetName="TransformTranslate"
                                                         Storyboard.TargetProperty="(TranslateTransform.X)"
                                                         From="10" To="300" Duration="0:0:1" BeginTime="0:0:0"/>
                                <DoubleAnimation Storyboard.TargetName="TransformTranslate"
                                                         Storyboard.TargetProperty="(TranslateTransform.X)"
                                                         From="300" To="10" Duration="0:0:0" BeginTime="0:0:4" />

                                <!-- Flip(Scale) the image -->
                                <DoubleAnimation Storyboard.TargetName="TransformScale"
                                                            Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                                            From="1" To="-1" Duration="0:0:2" BeginTime="0:0:1" />
                                <DoubleAnimation Storyboard.TargetName="TransformScale"
                                                            Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                                            From="0" To="1" Duration="0:0:0" BeginTime="0:0:3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </StackPanel.Triggers>

                <Border Background="{Binding CardDisplay.Background}"  Width="200" Height="278" Grid.ColumnSpan="2">
                    <Image Source="/Images/CardBack.png" Width="200" Height="300" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Top">
                    </Image>
                </Border>
            </StackPanel>
        </Canvas>