Question

所以我的问题非常简单：

我有一个带有两个对象的StackPanel：一个按钮和一个矩形（通过单击按钮填充图像）。现在，另外一件事就是当点击按钮时，整个堆栈面板必须颠倒翻转，并且必须保持在同一个位置。

我尝试使用＆＃34; 0.5,0.5＆＃34;上的RenderTransformOrigin-property设置。但是我没有运气好..无论是堆叠板移动到另一个位置还是消失了（越界）

<Window x:Class="WpfApplication1.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow" Height="350" Width="525">
   <Grid>
       <StackPanel Name="pnlFlip" RenderTransformOrigin="0.5,0.5">
           <Button Content="Test" Margin="200,78,197,-78" Name="btnTest" Click="btnTest_Click" Height="30"/>
           <Rectangle Margin="175,146,162,-239" Name="rectTest" Fill="Red" Height="127"/>
       </StackPanel>
   </Grid>
</Window>

我的按钮代码如下：

private int scale = 1;
private int angle = 180;

private void btnTest_Click(object sender, RoutedEventArgs e)
{
    ImageBrush img = new ImageBrush();
    img.ImageSource = new BitmapImage(new Uri("pack://application:,,,/WpfApplication1;component/Resources/Images/logo.jpg"));
    rectTest.Fill = img;
    //Trying a ScaleTranfsformObject
    ScaleTransform st = new ScaleTransform();
    if(scale == 1)
    {
        scale = -1;
        st.ScaleY = scale;
    }
    else
    {
        scale = 1;
        st.ScaleY = scale;
    }
    //Trying a RotateTransform Object
    RotateTransform rt = new RotateTransform();
    if(angle == 180)
    {
        rt.Angle = angle;
        angle += 180;
    }
    else
    {
        rt.Angle = angle;
        angle -= 180;
    }
    pnlFlip.RenderTransform = rt;
}

那么我做错了什么/如何解决这个问题呢？

Answer 1

使用storyboard比在click处理程序中直接在代码中设置它更好。您将在UI中获得平滑的变化。

以下将仅使用XAML实现您的目标，而无需任何代码。在RenderTransformOrigin中设置StackPanel是在运行旋转变换后将其保持在中心位置。

要在点击时激活动画，我们只需添加一个Button.Trigger处理程序，该处理程序在DoubleAnimation上具有故事板，可将StackPanel中的角度更改为180度。 XAML的其余部分就是您之前所拥有的。

<StackPanel x:Name="pnlFlip" RenderTransformOrigin="0.5,0.5">           
    <StackPanel.RenderTransform>
        <RotateTransform />
    </StackPanel.RenderTransform>
    <Button Content="Test" Margin="200,78,197,-78" Name="btnTest" Height="30">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="180" Storyboard.TargetName="pnlFlip" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"  />                               
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
    <Rectangle Margin="175,146,162,-239" Name="rectTest" Fill="Red" Height="127"/>
</StackPanel>

Answer 2

这在我的计算机上运行正常（减去资源中图像的代码。）

以下是应用程序启动时的外观： enter image description here

以下是点击按钮后的效果： enter image description here

这部分不符合您的意图？

请注意，您可以使用三元运算符删除条件分支并减少代码，如下所示：

angle = angle == 180 ? 0 : 180;
rt.Angle = angle;

WPF - 将堆叠板旋转180°并保持在同一位置

2 个答案: