(UWP) 如何為彈出對象設置動畫

Question

我正在制作一個 Flyout 對象。 一切正常，我只想讓它在某個方向滑入窗口而不是閃入。有人可以舉個例子或教程嗎？ 謝謝！

Answer 1

您可以使用基於 Edge 的 UI 動畫。

但是 Flyout 具有內置動畫。 它並不是真正的基於邊緣的 UI，因為它們應該與導致它們顯示的上下文相關聯，而不是與應用程序窗口邊緣相關聯。 可能您對從 AppBar 調用的 UI 使用浮出控件，但這與純邊緣 UI 的情況仍然不同。 來自默認 Windows 運行時控件行為中基於 Edge 的動畫。

如果要為 Flyout 應用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>

然后，您可以將此樣式應用於您的彈出窗口。

<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>