(UWP) 如何为弹出对象设置动画答案

【问题标题】：(UWP) How to animate Flyout object(UWP) 如何为弹出对象设置动画
【发布时间】：2019-02-15 21:49:27
【问题描述】：

我正在制作一个 Flyout 对象。一切正常，我只想让它以某个方向滑入窗口而不是闪入。有人可以举个例子或教程吗？谢谢！

【问题讨论】：

使用DoubleAnimation控制Margin或者控制Canvas.Top/Left/Right/Bottom if元素在Canvas

【解决方案1】：

但 Flyout 具有内置动画。它不是真正基于边缘的 UI，因为它们应该与导致它们显示的上下文相关联，而不是与应用程序窗口边缘相关联。可能是您对从 AppBar 调用的 UI 使用浮出控件，但这仍然是与纯边缘 UI 不同的情况。来自Edge-based animations in default Windows Runtime control behavior。

如果您想为 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>

然后，您可以将此样式应用于您的 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>

【讨论】：