WPF - Turn StackPanel 180 ° и остаться на том же месте

Question

Так что мой вопрос довольно прост:

У меня есть StackPanel с двумя объектами: кнопка и прямоугольник (который заполняется с изображением, нажав на кнопку). Теперь, еще одна вещь, которая должна произойти, - это когда кнопка нажата, вся панель стека должна быть перевернута вверх дном, и она должна оставаться в одном месте.

Я попытался с RenderTransformOrigin-свойством, установленной на «0.5,0.5» , но у меня нет никакой удачи с этим .. либо StackPanel перемещен в другое место или оно исчезло (вне границ)

<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

Использование раскадровки лучше подход, чем устанавливать это непосредственно в коде в обработчик щелчка. Вы получите плавные изменения в пользовательском интерфейсе.

После этого вы достигнете своей цели только с помощью XAML, без какого-либо кода. Значение RenderTransformOrigin в StackPanel - это то, что удерживает его в центре после запуска поворотного преобразования.

Чтобы активировать анимацию при щелчке, мы просто добавляем обработчик Button.Trigger, у которого есть раскадровка на DoubleAnimation, чтобы изменить угол на 180 градусов в StackPanel. Остальная часть 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

Это прекрасно работает на моем компьютере

Вот как это выглядит, когда приложение запускается:

А вот как это выглядит после того, как я нажимаю кнопка:

Какая часть этого не соответствует вашим намерениям?

Обратите внимание, что вы можете использовать тройной оператор, чтобы удалить ваши условные ветви и сократить код, например, так:

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