UWP Flyout - анимация - PullRequest
Новая
       26

UWP Flyout - анимация

0 голосов
/ 06 января 2019

Я довольно новичок в программировании Windows, и я создал пользовательский "Flyout", который выглядит как "SettingsFlyout", и я хочу изменить анимацию этого "Flyout", который действует как "SettingsFlyout". я могу управлять анимацией "Flyout"? и если да, могу ли я создать такую ​​же анимацию, как «SettingsFlyout»?

На картинке макет, который я хочу редактировать своей анимацией: enter image description here

1 Ответ

0 голосов
/ 06 января 2019

Вы можете использовать Смещение анимация из Инструментарий сообщества Microsoft для получения анимации. Я добавил пример анимации того, чего вы пытаетесь достичь.

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