Question

我目前正在使用Windows Universal Apps.In当用户点击菜单图标时，需要从左侧显示菜单。我想在其中添加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来定制它，不管你喜欢什么。要让它从左侧滑入，请使用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>

从你的按钮点击触发它（你的图像听起来应该是按钮而不是使用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的附加属性创建自定义控件。

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

1 个答案: