c# - 如何做翻盖面板？

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();
        }
    }