怎么做翻盖?

时间:2011-04-18 16:16:06

标签: c# wpf xaml

到目前为止这是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>

现在当第一次点击事件发生时,我希望面板翻转,然后当我再次点击后我希望面板再次翻转以显示第一张图像?

我如何从这里开始?

由于

1 个答案:

答案 0 :(得分:2)

我使用的东西给人以翻转的印象。您需要添加自己的变量名称,但这可能有助于您入门。

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