(UWP) Как анимировать объект Flyout

Question

Я делаю объект Flyout.Все работает нормально, я просто хочу, чтобы он скользил в окно в определенном направлении, а не мигал. Кто-нибудь может привести пример или учебник?Спасибо!

Answer 1

Вы можете использовать Анимации пользовательского интерфейса на основе Edge .

Но у Flyout есть встроенная анимация.на самом деле это не пользовательский интерфейс, основанный на краях, потому что они должны быть связаны с контекстом, который заставил их отображать, а не с краем окна приложения.Может случиться так, что вы используете всплывающие окна для пользовательского интерфейса, который вызывается из панели приложений, но это все равно ситуация, отличная от пользовательского интерфейса с чистыми краями.Из Анимации на основе ребер в стандартном поведении Windows Runtime по умолчанию .

Если вы хотите применить EdgeUIThemeTransition для всплывающей подсказки.Вы можете отредактировать его FlyoutPresenterStyle следующим образом:

<Style x:Key="FlyoutFlyoutPresenterStyle1" TargetType="FlyoutPresenter">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Background" Value="{ThemeResource FlyoutPresenterBackground}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}"/>
        <Setter Property="Padding" Value="{ThemeResource FlyoutContentThemePadding}"/>
        <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}"/>
        <Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}"/>
        <Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}"/>
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="FlyoutPresenter">
                    <Border BackgroundSizing="OuterBorderEdge" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{ThemeResource FlyoutBorderThemePadding}">
                        <Border.Transitions>
                            <TransitionCollection>
                                <EdgeUIThemeTransition Edge="Right"></EdgeUIThemeTransition>
                            </TransitionCollection>
                        </Border.Transitions>
                        <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

И затем вы можете применить этот стиль для своей Flyout.

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Label="Flyout" Icon="Flag" >
            <AppBarButton.Flyout>
                <Flyout FlyoutPresenterStyle="{StaticResource FlyoutFlyoutPresenterStyle1}">
                    <Grid Height="500" Width="300" Background="LightBlue">
                    </Grid>
                </Flyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Page.BottomAppBar>