Как сделать откидную панель?

Question

Это код XAML до сих пор

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="Flip_Panel.MainWindow"
        x:Name="Window"
        Title="MainWindow"
        Width="750"
        Height="550"
        Loaded="Window_Loaded">
    <StackPanel x:Name="Panel">
        <Grid Margin="10"
              x:Name="Flip"
              Height="480"
              Width="750">
            <StackPanel x:Name="Front">
                <Image x:Name="Vinodh_Object"></Image>
            </StackPanel>
            <StackPanel x:Name="Back"
                        Height="480"
                        Width="750">
                <Image x:Name="Thilak_Object"></Image>
            </StackPanel>
        </Grid>
        <Button x:Name="FlipButton"
                Width="100"
                Height="25"
                Content="Flip to Back"
                HorizontalAlignment="Center"
                Margin="0,-50,0,0"></Button>
        <Button x:Name="FlipButton1"
                Width="100"
                Height="25"
                Content="Flip to Front"
                HorizontalAlignment="Center"
                Margin="0,-50,0,0"></Button>
    </StackPanel>
</Window>

Сейчас Когда происходит событие первого щелчка, я хочу, чтобы панель перевернулась, а затем, когда я снова после нажатия, хочу, чтобы панель снова перевернулась, чтобы показать первое изображение?

Как мне действовать дальше?

Спасибо

Answer 1

Я использую то, что создает впечатление переворачивания. Вы можете добавить свои собственные имена переменных, но это может помочь вам начать работу.

<Storyboard Name="sbFlip"
            x:Key="sbFlip">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                   Storyboard.TargetName="frontSideContainer"
                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                              Value="0" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
                                   Storyboard.TargetName="backPanel"
                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3"
                              Value="1" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbReverse"
            x:Key="sbReverse">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                   Storyboard.TargetName="backPanel"
                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                              Value="0" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
                                   Storyboard.TargetName="frontSideContainer"
                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3"
                              Value="1" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

По сути, это изменение высоты одной панели и отображение другой. Это даст вам эффект переворота.

Если вы хотите выполнить это на C #, вы можете использовать что-то вроде следующего:

    public void Flip()
    {
        if (!Reversed)
        {
            Storyboard sbFlip = Resources["sbFlip"] as Storyboard;
            sbFlip.Begin();
            Reversed = true;
        }
        else
        {
            Reversed = false;
            Storyboard sbReverse = Resources["sbReverse"] as Storyboard;
            sbReverse.Begin();
        }
    }