uwp基本轉換不起作用

Question

我有一個超級基本的UWP應用程序。我需要顯示一個良好的過渡彈出，但似乎無法使它的工作？！？我做錯了什麼？我在代碼後面打開彈出窗口popup1.IsOpen = true

PS：請不要建議我使用其他控件。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

     <Popup x:Name="popup1"> 
      <Popup.Transitions> 
       <TransitionCollection> 
        <PopupThemeTransition FromHorizontalOffset="100"/> 
       </TransitionCollection> 
      </Popup.Transitions> 

      <Border x:Name="brd1" Background="Blue" > 
       <Button x:Name="btnClose" Background="White" Click="btnClose_Click" Margin="100">test</Button> 
      </Border> 
     </Popup> 

     <Button x:Name="btnOpen" Click="btnOpen_Click">go</Button> 

    </Grid> 

Answer 1

有幾種方法可以解決這個問題。你可以用interactivity和behaviors替換你的事件，但由於你沒有在你的示例代碼中使用它們，所以我不會分享它。所以我寫了一個代碼示例來讓你的動畫工作。

我已經創建了具有native和storyboard動畫一些示例代碼：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.Resources> 
     <Storyboard x:Name="ShowPopup"> 
      <PopInThemeAnimation Storyboard.TargetName="MyPopup" /> 
     </Storyboard> 
     <Storyboard x:Name="HidePopup"> 
      <PopOutThemeAnimation Storyboard.TargetName="MyPopup" /> 
     </Storyboard> 
    </Grid.Resources> 
    <Popup x:Name="MyPopup" IsOpen="True" 
     HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <Popup.Transitions> 
      <TransitionCollection> 
       <PopupThemeTransition /> 
      </TransitionCollection> 
     </Popup.Transitions> 
     <Grid Height="200" Width="200" Background="Red"> 
      <StackPanel> 
       <Button Content="Hide (Native)" HorizontalAlignment="Center" Click="hide_native_click"/> 

       <Button Content="Hide (Storyboard)" HorizontalAlignment="Center" Click="hide_storyboard_click"/> 
      </StackPanel> 
     </Grid> 
    </Popup> 
    <StackPanel> 
     <Button Content="Show Popup (Native)" HorizontalAlignment="Left" VerticalAlignment="Top" Click="show_native_click"/> 

     <Button Content="Show Popup (Storyboard)" HorizontalAlignment="Left" VerticalAlignment="Top" Click="show_storyboard_click"/> 
    </StackPanel> 
</Grid> 

和後面的代碼看起來像下面：

private void hide_native_click(object sender, RoutedEventArgs e) 
{ 
    MyPopup.IsOpen = false; 
} 

private void hide_storyboard_click(object sender, RoutedEventArgs e) 
{ 
    HidePopup.Begin(); 
} 

private void show_native_click(object sender, RoutedEventArgs e) 
{ 
    MyPopup.IsOpen = true; 
} 

private void show_storyboard_click(object sender, RoutedEventArgs e) 
{ 
    ShowPopup.Begin(); 
}