uwp - UWP Flyout - 动画

Question

我是 Windows 编程的新手，我创建了一个看起来像“SettingsFlyout”的自定义“Flyout”，我想更改这个“Flyout”的动画，就像“SettingsFlyout”一样。我可以控制“Flyout”的动画吗？如果是这样，我可以创建与“SettingsFlyout”相同的动画吗？

在图片中我要编辑他的动画的布局：

标签： uwpflyoutwindows-8.1-universal

Answer 1

您可以使用Microsoft 社区工具包中的偏移动画来实现动画。我已经添加了您想要实现的示例动画。

Microsoft.Toolkit.Uwp.UI.Animations；

//主页.Xaml

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" 
    x:Name="YourPage"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Button Click="settings_clicked" Content="Settings"/>
        <Grid x:Name="Settings_Popup_Grid" Background="Transparent" Tapped="SettingsPopup_Grid_Tapped" Visibility="Collapsed"/>
        <Popup HorizontalAlignment="Right" IsLightDismissEnabled="False"  IsOpen="False"  Opened="SettingsPopup_Opened" Closed="SettingsPopup_Closed" x:Name="SettingsPopup" VerticalAlignment="Stretch"  >
            <Border x:Name="SettingsPopupBorder" Width="320" Background="{ThemeResource SystemControlBackgroundAccentBrush}" BorderBrush="{StaticResource SystemControlBackgroundChromeMediumLowBrush}"  Height="{Binding ActualHeight, ElementName=View_Grid,Mode=OneWay}"  BorderThickness="1" VerticalAlignment="Stretch">
                <ListView>
                    <ListViewItem Content="Settings" Foreground="White" FontWeight="SemiBold"></ListViewItem>
                </ListView>
            </Border>
        </Popup>
    </Grid>
</Page>

//MainPage.Xaml.cs

 public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void settings_clicked(object sender, RoutedEventArgs e)
        {
            SettingsPopupBorder.Height = ((Frame)Window.Current.Content).ActualHeight;
            SettingsPopup.IsOpen = true;

            if (SettingsPopup.IsOpen)
                Settings_Popup_Grid.Visibility = Visibility.Visible;
            else
                Settings_Popup_Grid.Visibility = Visibility.Collapsed;
        }
        private async void SettingsPopup_Grid_Tapped(object sender, TappedRoutedEventArgs e)
        {
            await SettingsPopup.Offset(offsetX: 0,
                         offsetY: 0,
                         duration: 300, delay: 0).StartAsync();

            SettingsPopup.IsOpen = false;
        }
        private void SettingsPopup_Closed(object sender, object e)
        {
            Settings_Popup_Grid.Visibility = Visibility.Collapsed;
        }
        private async void SettingsPopup_Opened(object sender, object e)
        {
            await SettingsPopup.Offset(offsetX: -320,
                            offsetY: 0,
                              duration: 300, delay: 0).StartAsync();
        }
    }