如何做翻轉板？

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