Question

我在Windows编程中还很陌生，我创建了一个自定义的“ Flyout”，看起来像“ SettingsFlyout”，并且我想更改此“ Flyout”的动画，就像“ SettingsFlyout”一样。可以控制“跳出”的动画吗？如果可以，我是否可以像“ SettingsFlyout”一样创建相同的动画？

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

Answer 1

您可以使用Microsoft community toolkit中的 Offset 动画来获得动画。我添加了一个示例动画，说明您要实现的目标。

Microsoft.Toolkit.Uwp.UI.Animations;

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

UWP飞出-动画

1 个答案: