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

Question

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

<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 并根据需要对其进行自定义。要让它从左侧滑入，请应用 Edge=Left 的 EdgeUIThemeTransition（如果它很短）或 PaneThemeTransition（如果它是全高）。

例如：

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

并通过您的按钮点击触发它（您的图像听起来应该是一个按钮而不是使用点击，除非您有备用键盘方法 - 您可以在保持按钮语义的同时模板化按钮外观）。

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。

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

How to show menu from left on image click in windows Universal apps?

c#

windows-8.1

win-universal-app