locked
MenuFlyout applied to listview item crashes app

    Question

  • I am unable to apply a menu flyout to a listview. I assume my app crashes once the my app attempts to load the specified XAML.

    I've viewed similar questions that have been posted, however all efforts were futile.

    Hence, my app continues to crash as long as I have the listview item's menuflyout XAML snippet in place.

    This menu flyout does works when this XAML snippet is applied to a hyperlink button. But again, on a listview item, the app just crashes repeatedly.

    My code is below:

    XAML:

    <ListView x:Name="ContactList" ScrollViewer.VerticalScrollBarVisibility="Visible"
            
    ItemsSource="{Binding SelectedCategory.Contacts}"
            
    SelectedItem="{Binding SelectedContact, Mode=TwoWay, Converter={StaticResource NullToBoolConverter}}"
            
    DisplayMemberPath="Name">         
       
    <ListViewItem>
           
    <Interactivity:Interaction.Behaviors>
               
    <Core:EventTriggerBehavior EventName="Holding">
                   
    <behaviors:MoveContactBehavior />
               
    </Core:EventTriggerBehavior>
           
    </Interactivity:Interaction.Behaviors>

           
    <FlyoutBase.AttachedFlyout>
               
    <MenuFlyout>
                   
    <MenuFlyoutItem Text="Family"
                                       
    Command="{Binding MoveCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Text}" />
                   
    <MenuFlyoutItem Text="Friend"
                                       
    Command="{Binding MoveCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Text}" />
                   
    <MenuFlyoutItem Text="Business"
                                       
    Command="{Binding MoveCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Text}" />
               
    </MenuFlyout>
           
    </FlyoutBase.AttachedFlyout>
       
    </ListViewItem>
    </ListView>

    Behavior:

    public class MoveContactBehavior : DependencyObject, IAction
    {
        public object Execute(object sender, object parameter)
        {
            var senderElement = sender as FrameworkElement;
            FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(senderElement);

            flyoutBase.ShowAt(senderElement);

            return null;
        }
    }


    Tuesday, August 19, 2014 11:22 AM

Answers

  • I fixed it.

    I removed DisplayMemberPath from the ListView and added a DataTemplate.
    Everything works now.


    Thursday, August 21, 2014 2:59 AM

All replies

  • Hi Scott,

    I build a simple project to test using flyout in listview. It works fine. Code looks like below.

    <ListView x:Name="itemListView" Margin="120,0,0,60" SelectionChanged="itemListView_SelectionChanged" >
    
                <FlyoutBase.AttachedFlyout>
    
                    <MenuFlyout>
    
                        <MenuFlyoutItem Text="Family"  />
    
                        <MenuFlyoutItem Text="Friend"  />
    
                        <MenuFlyoutItem Text="Business"  />
    
                    </MenuFlyout>
    
                </FlyoutBase.AttachedFlyout>
    
                <ListView.ItemTemplate>
    
                    <DataTemplate>
    
                        <Grid Height="110" Margin="6">
    
                            <Grid.ColumnDefinitions>
    
                                <ColumnDefinition Width="Auto"/>
    
                                <ColumnDefinition Width="*"/>
    
                            </Grid.ColumnDefinitions>
    
                            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
    
                                <Image Source="{Binding Image}" Stretch="UniformToFill"/>
    
                            </Border>
    
                            <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
    
                                <TextBlock Text="{Binding Title}"  TextWrapping="NoWrap"/>
    
                                <TextBlock Text="{Binding Subtitle}" TextWrapping="NoWrap"/>
    
                                <TextBlock Text="{Binding Description}"  MaxHeight="60"/>
    
                            </StackPanel>
    
                        </Grid>
    
                    </DataTemplate>
    
                </ListView.ItemTemplate>
    
            </ListView>
    
    private void itemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    
            {
    
                var senderElement = sender as FrameworkElement;
    
                FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(senderElement);
    
                flyoutBase.ShowAt(senderElement);
    
            }
    

    Please check your code. If you need more help, post a simple sample here using OneDrive.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, August 20, 2014 6:04 AM
    Moderator
  • Thank you for your help.

    In my case, I need to invoke the flyout on a listviewitem event.

    Your example is based on just a listview event.

    Any suggestions?

    Wednesday, August 20, 2014 8:15 PM
  • I fixed it.

    I removed DisplayMemberPath from the ListView and added a DataTemplate.
    Everything works now.


    Thursday, August 21, 2014 2:59 AM