Question

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

Answer 1

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

如果您想为立项申请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>

（UWP）如何为飞出对象设置动画

1 个答案: