如何在 Windows 通用应用程序中单击图像时从左侧显示菜单？

Question

我目前正在开发 Windows 通用应用程序。当用户单击菜单图标时，需要从左侧显示菜单。我想在其中添加一个 ListView 并根据用户的选定项目处理 selectionchanged 事件。现在，Flyout 的问题在于它在单击图标时像弹出窗口一样打开，但我真正想要做的是 它应该来自窗口的左侧。例如在 android 的 Gmail 应用程序中。请任何人都可以建议如何实现这一目标。请在下面找到我在 Flyout 中添加的代码：

<Image Source="ms-appx:///Images/menu_image.png"
                       HorizontalAlignment="Left"
                       Tapped="Image_Tapped"
                       Width="60"
                       Height="90"
                       Grid.Column="0"
                       VerticalAlignment="Center">
                    <FlyoutBase.AttachedFlyout>
                        <Flyout>
                            <Grid x:Name="SettingsPane"
              Background="{StaticResource AppBackGroundColor}"
              Grid.Row="0"
              Width="380">
                                <Grid.ChildrenTransitions>
                                    <TransitionCollection>
                                        <EdgeUIThemeTransition/>
                                    </TransitionCollection>
                                </Grid.ChildrenTransitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <StackPanel Grid.Row="0"
                       Margin="8">
                                    <TextBlock Name="SidebarTitletxtblk"
                           FontSize="25"
                           TextWrapping="Wrap"
                           Style="{StaticResource BaseTextBlockStyle}" />
                                </StackPanel>
                                <ListView Grid.Row="1"
                     x:Name="LocationPickerList"
                     SelectionChanged="LocationPickTypeSelected"
                     Margin="0,10,0,0"
                     ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
                     ItemTemplate="{StaticResource LocationPickerListItemTemplate}"></ListView>
                            </Grid>
                        </Flyout>
                    </FlyoutBase.AttachedFlyout>
                </Image>

Answer 1

您不能覆盖 Flyout 的标准过渡。如果您想应用其他内容，则可以使用 Popup 并根据需要自定义它。要让它从左侧滑入，请应用 EdgeUIThemeTransition（如果它很短）或 PaneThemeTransition（如果它是全高），Edge=Left。

例如：

<Popup x:Name="flyoutPane" IsOpen="False" IsLightDismissEnabled="True" 
     Width="320" HorizontalAlignment="Left">
    <Popup.ChildTransitions>
        <TransitionCollection>
            <!--<EdgeUIThemeTransition Edge="Left" />-->
            <PaneThemeTransition Edge="Left" />
        </TransitionCollection>
    </Popup.ChildTransitions>
    <Grid Width="380" Height="{Binding ElementName=flyoutPane, Path=Height}"  Background="{ThemeResource FlyoutBackgroundThemeBrush}" >
        <TextBlock Text="Grid contents here" />
    </Grid>
</Popup>

并从您的 Button Click 触发它（您的 Image 听起来应该是一个 Button 而不是使用 Tap，除非您有备用键盘方法 - 您可以模板化按钮外观，同时保持按钮语义）。

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Height is only important if we want the Popup sized to the screen
    flyoutPane.Height = Window.Current.Bounds.Height;
    flyoutPane.IsOpen = true;
}

如果您正在执行其中的许多操作，您可以创建一个带有类似于 FlyoutBase.AttachedFlyout 的附加属性的自定义控件。