The following forum(s) are migrating to a new home on Microsoft Q&A (Preview): Developing Universal Windows apps!

Ask new questions on Microsoft Q&A (Preview).
Interact with existing posts until December 13, 2019, after which content will be closed to all new and existing posts.

Learn More

 none
How can I use MenuFlyout in GridView? RRS feed

  • Question

  • I write MenuFlyout in GridView's ItemTemplate:

    Template.xaml:

    <DataTemplate x:Key="ShellListItemDataTemplate">
            <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemControlAcrylicWindowBrush}">
                <Grid Margin="10" Width="200" Height="100">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
    
                    <TextBlock Text="{Binding ShellAddress}" Grid.Row="0" HorizontalAlignment="Center"/>
                    <TextBlock Text="{Binding CreateTime}" HorizontalAlignment="Center" Grid.Row="1"/>
                </Grid>
                
                <!--菜单-->
                <Border.ContextFlyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="文件管理" Click="MenuFlyoutItem_Click" Tag="FileManager"/>
                        <MenuFlyoutItem Text="远程命令" Click="MenuFlyoutItem_Click" Tag="RemoteShell"/>
                        <MenuFlyoutSeparator/>
                        <MenuFlyoutItem Text="编辑" Click="MenuFlyoutItem_Click" Tag="Modify"/>
                        <MenuFlyoutItem Text="删除" Click="MenuFlyoutItem_Click" Tag="Delete"/>
                    </MenuFlyout>
                </Border.ContextFlyout>
            </Border>
        </DataTemplate>

    Then used in MainPage.xaml:

    <GridView Name="shellList" Margin="5" Grid.Row="1" SelectionMode="Single" IsItemClickEnabled="True" ItemTemplate="{StaticResource ShellListItemDataTemplate}" ItemClick="shellList_ItemClick"/>
    

    But I don't know why didn't invoker MenuFlyoutItem_Click.
    It's UWP framkwork's bug?
    This way is ok in WPF.
    I hope somebody can help me, thanks.
    Sunday, November 3, 2019 6:06 AM

Answers

  • Hi,

    I tired your code in my side. The code works correctly.

    <Page.Resources>
            <DataTemplate x:Key="ShellListItemDataTemplate">
                <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemControlAcrylicWindowBrush}">
                    <Grid Margin="10" Width="200" Height="100">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <!--<TextBlock Text="{Binding ShellAddress}" Grid.Row="0" HorizontalAlignment="Center"/>
                        <TextBlock Text="{Binding CreateTime}" HorizontalAlignment="Center" Grid.Row="1"/>-->
                    </Grid>
    
                    <!--菜单-->
                    <Border.ContextFlyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Text="文件管理" Click="MenuFlyoutItem_Click" Tag="FileManager"/>
                            <MenuFlyoutItem Text="远程命令" Click="MenuFlyoutItem_Click" Tag="RemoteShell"/>
                            <MenuFlyoutSeparator/>
                            <MenuFlyoutItem Text="编辑" Click="MenuFlyoutItem_Click" Tag="Modify"/>
                            <MenuFlyoutItem Text="删除" Click="MenuFlyoutItem_Click" Tag="Delete"/>
                        </MenuFlyout>
                    </Border.ContextFlyout>
                </Border>
            </DataTemplate>
        </Page.Resources>
    
        <Grid>
            <GridView Name="shellList"
                      Margin="5" Grid.Row="1"
                      SelectionMode="Single"
                      IsItemClickEnabled="True"
                      ItemTemplate="{StaticResource ShellListItemDataTemplate}" 
                      ItemClick="shellList_ItemClick"/>
        </Grid>

    What's the target version of your app? What's the version of your device? I tried your code in a blank app. I know it might be more complicated in your real scenario. So could you please share me a simple demo to reproduce the issue? Please delete all the sensitive code and just keep some code that could reproduce the issue. This will be helpful to locate the problem.

    By the way, We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!

    Best regards,

    Roy



    "Developing Universal Windows apps" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.


    Monday, November 4, 2019 6:05 AM
    Moderator

All replies

  • Hi,

    I tired your code in my side. The code works correctly.

    <Page.Resources>
            <DataTemplate x:Key="ShellListItemDataTemplate">
                <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemControlAcrylicWindowBrush}">
                    <Grid Margin="10" Width="200" Height="100">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <!--<TextBlock Text="{Binding ShellAddress}" Grid.Row="0" HorizontalAlignment="Center"/>
                        <TextBlock Text="{Binding CreateTime}" HorizontalAlignment="Center" Grid.Row="1"/>-->
                    </Grid>
    
                    <!--菜单-->
                    <Border.ContextFlyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Text="文件管理" Click="MenuFlyoutItem_Click" Tag="FileManager"/>
                            <MenuFlyoutItem Text="远程命令" Click="MenuFlyoutItem_Click" Tag="RemoteShell"/>
                            <MenuFlyoutSeparator/>
                            <MenuFlyoutItem Text="编辑" Click="MenuFlyoutItem_Click" Tag="Modify"/>
                            <MenuFlyoutItem Text="删除" Click="MenuFlyoutItem_Click" Tag="Delete"/>
                        </MenuFlyout>
                    </Border.ContextFlyout>
                </Border>
            </DataTemplate>
        </Page.Resources>
    
        <Grid>
            <GridView Name="shellList"
                      Margin="5" Grid.Row="1"
                      SelectionMode="Single"
                      IsItemClickEnabled="True"
                      ItemTemplate="{StaticResource ShellListItemDataTemplate}" 
                      ItemClick="shellList_ItemClick"/>
        </Grid>

    What's the target version of your app? What's the version of your device? I tried your code in a blank app. I know it might be more complicated in your real scenario. So could you please share me a simple demo to reproduce the issue? Please delete all the sensitive code and just keep some code that could reproduce the issue. This will be helpful to locate the problem.

    By the way, We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!

    Best regards,

    Roy



    "Developing Universal Windows apps" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.


    Monday, November 4, 2019 6:05 AM
    Moderator
  • Hi Roy:
    Thanks for your reply.
    DataTemplate write in Page.Resources it's ok. It's solve mine question.

    Previously, I wrote the DataTemplate in a separate xaml file, which caused this problem.
    I have packaged a project to help you reproduce the problem.
    I remember that this operation is possible in WPF.

    https://share.weiyun.com/5v7rqpf

    Monday, November 4, 2019 10:34 AM
  • Hi,

    Well, UWP and WPF are different. They might have some similar parts but they have more parts different. When you defined the style in a separate Xaml file, the Click event could not find the event handler because you don't have a code-behind for the Xaml file. Using x:bind for your click event in the style will show similar behavior.

    Best regards,

    Roy


    "Developing Universal Windows apps" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.

    Tuesday, November 5, 2019 2:17 AM
    Moderator