none
menu flyout on listview item, UWP help needed RRS feed

  • Question

  • hi all

    so I have the following code working which shows a menuflyout when a listview item is being held

    but I want the WHOLE of the listview item to respond to the HOLDING event, not just the TEXT that is in the listview item. How can I achieve that ?

    If the user holds on the listview item but NOT on the actual listview item TEXT/DATA then the menu flyout DOESN'T SHOW and that's not good.

    here is the code:

    I've wrapped the content of the data template in a border where I've attached the flyout. This is probably where the problem is but I can't figure out another way!

    <Page.Resources>
    
            <MenuFlyout x:Key="ItemMenuFlyout">
              
                <MenuFlyoutItem Text="option 1" 
                             Click="ItemMenuFlyoutOption1_Click"/>
                <MenuFlyoutItem Text="option 2" 
                             Click="ItemMenuFlyoutOption2_Click"/>
                <MenuFlyoutItem Text="option 3" 
                             Click="ItemMenuFlyoutOption3_Click"/>
            </MenuFlyout>
    
        </Page.Resources>

    ...

    <ListView x:Name="listViewSavedList" 
                                          ItemsSource="{Binding SavedList}" 
                                          SelectionMode="Multiple"
                                          Margin="12,12,18,0" SelectionChanged="listViewSavedList_SelectionChanged">
    
                                    <ListView.ItemTemplate>
        
                                        <DataTemplate>
    
                                            <Border FlyoutBase.AttachedFlyout="{StaticResource ItemMenuFlyout}" Holding="Border_Holding" >
    
                                                <StackPanel>
                                                    <TextBlock Text="{Binding SavedName}" Margin="0,6,0,0"></TextBlock>
                                                    <StackPanel Orientation="Horizontal" Margin="0,0,0,6" >
                                                        <TextBlock Text="{Binding LanguageAsFull, Converter={StaticResource lc}}" Foreground="#FF898989" FontSize="13" ></TextBlock>
                                                        <TextBlock Foreground="#FF898989" Margin="0,0,4,0" FontSize="13">,</TextBlock>
                                                        <TextBlock Text="{Binding WordCount}" Foreground="#FF898989" Margin="0,0,2,0" FontSize="13"></TextBlock>
                                                        <TextBlock Foreground="#FF898989" FontSize="13"> words</TextBlock>
                                                    </StackPanel>
                                                </StackPanel>
                                            
                                            </Border>
    
    
    
                                        </DataTemplate>
                                        
                                    </ListView.ItemTemplate>
                                    
                                </ListView>

    here is a screenshot of what's working (TEXT of the listview item is being HELD):

    here is a screenshot of what is not working (the menu flyout doesn't show here but it should! here the listview item is being HELD but not on the TEXT itself):

    thanks for your help!


    cypripri


    • Edited by cypripri Thursday, August 6, 2015 12:21 AM
    Thursday, August 6, 2015 12:18 AM

Answers

  • Hello cypripri,

    If you set BorderThickness="5" and BorderBrush="Red" on your Border in the itemtemplate, you could see the caused reason:

    The border only convers text area.

    A workaround is to set a fixed length for the border as below:

    <Border Width="1000" BorderThickness="5" BorderBrush="Red"  FlyoutBase.AttachedFlyout="{StaticResource ItemMenuFlyout}" Holding="Border_Holding">

    While this make app not be flexible enough for different size screen, so another workaround may be better, to set the ItemContainerStyle and make its item to be stretch: </border>

    <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    			</Style>
    </ListView.ItemContainerStyle>

    By the way, please check this guide post to add a tag for the thread title. 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.

    • Edited by Fred Bao Thursday, August 6, 2015 9:16 AM
    • Marked as answer by cypripri Thursday, August 6, 2015 12:37 PM
    Thursday, August 6, 2015 9:13 AM

All replies

  • Hello cypripri,

    If you set BorderThickness="5" and BorderBrush="Red" on your Border in the itemtemplate, you could see the caused reason:

    The border only convers text area.

    A workaround is to set a fixed length for the border as below:

    <Border Width="1000" BorderThickness="5" BorderBrush="Red"  FlyoutBase.AttachedFlyout="{StaticResource ItemMenuFlyout}" Holding="Border_Holding">

    While this make app not be flexible enough for different size screen, so another workaround may be better, to set the ItemContainerStyle and make its item to be stretch: </border>

    <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    			</Style>
    </ListView.ItemContainerStyle>

    By the way, please check this guide post to add a tag for the thread title. 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.

    • Edited by Fred Bao Thursday, August 6, 2015 9:16 AM
    • Marked as answer by cypripri Thursday, August 6, 2015 12:37 PM
    Thursday, August 6, 2015 9:13 AM
  • thanks Fred.

    this makes sense and the 2nd work around works well.

    thanks again :)


    cypripri

    Thursday, August 6, 2015 12:38 PM