如何显示菜单，在Windows应用程序的通用图像点击剩下什么？

问题描述

我目前在Windows通用Apps.In工作，有要求从左侧显示菜单时，用户点击菜单图标。我想添加一个ListView里面和处理基于用户选择的项目SelectionChanged事件。现在，飞出的问题是，它就像打开一个弹出窗口上点击图标，但我真正想要做的是的它应该从窗口的。对于在例如Android版的Gmail应用程序的左侧。请任何人都可以建议如何实现这一目标。请在下面找到我的代码，我在下面飞出补充道：

 <图像源=MS-APPX：///图片/menu_image.png
的Horizo​​ntalAlignment =左
螺纹=Image_Tapped
宽度=60
高度=90
 Grid.Column = 0
 VerticalAlignment =中心> 
< FlyoutBase.AttachedFlyout> 
<&飞出GT; 
将;网格X：名称=SettingsPane
背景={S​​taticResource的AppBackGroundColor}
 Grid.Row =0
宽度=380> 
< Grid.ChildrenTransitions> 
< TransitionCollection> 
< EdgeUIThemeTransition /> 
< / TransitionCollection> 
< /Grid.ChildrenTransitions> 
< Grid.RowDefinitions> 
< RowDefinition高度=自动/> 
< RowDefinition高度=*/> 
< /Grid.RowDefinitions> 
将;的StackPanel Grid.Row =0
保证金=8> 
< TextBlock的名称=SidebarTitletxtblk
字号=25
 TextWrapping =包装
风格={StaticResource的BaseTextBlockStyle}/> 
< / StackPanel的> 
将;的ListView Grid.Row =1
X：名称=LocationPickerList
的SelectionChanged =LocationPickTypeSelected
保证金=0,10,0,0
 ItemContainerStyle ={StaticResource的GenericListViewContainerStyle}
的ItemTemplate ={StaticResource的LocationPickerListItemTemplate}>< /&的ListView GT; 
< /网格和GT; 
< /飞出> 
< /FlyoutBase.AttachedFlyout> 
< /图像> 
  

解决方案

您不能覆盖​​在弹出的标准过渡。如果你想申请别的东西，那么你可以使用一个弹出，而不是和定制，但是你会喜欢的。把它从左侧边缘与幻灯片中的应用EdgeUIThemeTransition（如果它是短）或PaneThemeTransition（如果是全高）=左。

例如：

 <弹出X：NAME = flyoutPaneISOPEN =FALSEIsLightDismissEnabled =真
 WIDTH =320的Horizo​​ntalAlignment =左> 
< Popup.ChildTransitions> 
< TransitionCollection> 
<！ - < EdgeUIThemeTransition边缘=左/>  - > 
< PaneThemeTransition边缘=左/> 
< / TransitionCollection> 
< /Popup.ChildTransitions> 
<电网WIDTH =380HEIGHT ={绑定的ElementName = flyoutPane，路径=身高}背景={ThemeResource FlyoutBackgroundThemeBrush}> 
< TextBlock的文本=网格内容在这里/> 
< /网格和GT; 
< /弹出> 
  

和从按钮单击触发它（你的形象听起来像它应该是一个按钮，而不是使用自来水，除非你有一个备用键盘的方法 - 可以在保持按钮语义模板关闭按钮的外观）

 私人无效Button_Click （对象发件人，RoutedEventArgs E）
 {
 //如果我们想要的弹出尺寸到屏幕
 flyoutPane.Height = Window.Current.Bounds.Height身高是唯一重要的; 
 flyoutPane.IsOpen = TRUE; 
} 
  

如果你正在做很多这样的，您可以创建与自定义控件附类似FlyoutBase.AttachedFlyout属性。

I am currently working on Windows Universal Apps.In that there is requirement to show menu from left side when User clicks on menu icon. I want add a ListView inside it and handle the selectionchanged event based on user's selected item. Now, the problem with Flyout is that it opens like a popup on clicking the icon but what I actually want to do is it should come from left side of the window .For e.g in Gmail application of android. Please can anyone suggest how to achieve this. Please find below my code which I added in Flyout below:

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

解决方案

You can't override the Flyout's standard transition. If you want to apply something else then you can use a Popup instead and customize it however you'd like. To have it slide in from the left apply an EdgeUIThemeTransition (if it's short) or a PaneThemeTransition (if it's full height) with Edge=Left.

For example:

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

And trigger it from your Button Click (your Image sounds like it should be a Button rather than using Tap, unless you have an alternate keyboard method - you can template off the button look while keeping the button semantics).

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

If you're doing many of these you can create a custom control with an attached property similar to FlyoutBase.AttachedFlyout.

这篇关于如何显示菜单，在Windows应用程序的通用图像点击剩下什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！