How to expand and collapse flyout on Mouse Pressing and holding for long time and Releasing

Question

How to expand and collapse flyout on Mouse Pressing and holding for long time and Releasing?

I have a ListView with Datatemplate with Grid inside. So Mouse press and hold of each Item a Flyout should slide out. And on Releasing the mouse press the flyout should collapse. This should work for Mouse press and hold and Touch mode also.

Touch mode is working with Holding event. But this is not working for Mouse press and hold. Please help me to achieve this by Mouse Press and hold

<ListView.ItemTemplate>
                        <DataTemplate x:DataType="model:CustomerQueueModel">
                            <Grid x:Name="CustomerTile" Holding="CustomerTile_Holding" Background="Transparent">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30"/>

private void CustomerTile_Holding(object sender, HoldingRoutedEventArgs e)
        {
            if (e.HoldingState == Windows.UI.Input.HoldingState.Started)
            {
                var customerTile = (FrameworkElement)sender;
                if (!string.IsNullOrEmpty((customerTile.DataContext as CustomerQueueModel).Customer.Description))
                    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
            }
            else
            {
                FlyoutBase flyout;
                flyout = (FlyoutBase)((FrameworkElement)sender).FindName("descriptionFlyout");
                flyout.Hide();
                e.Handled = true;
            }

        }

                                    <ColumnDefinition Width="2*"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition  Width="1*"/>
                                    <ColumnDefinition  Width="1*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{x:Bind CustomerAssignmentLetter}" Grid.Column="0" HorizontalAlignment="Right" Style="{ThemeResource CustomerNameStyle}"/>
                                <TextBlock Text="{x:Bind Customer.CustomerName}" Grid.Column="1" Style="{ThemeResource CustomerNameStyle}"/>
                                <TextBlock  Grid.Column="2" Style="{ThemeResource ProximityNameStyle}" HorizontalAlignment="Center">
                                    <Run Text="{x:Bind WaitTime}"/>
                                    <Run Text="min."/>
                                </TextBlock>
                                <TextBlock Text="{x:Bind Distance, Converter={StaticResource DistanceToValueConverter}}" Grid.Column="3" Style="{ThemeResource ProximityNameStyle}" TextAlignment="Right"/>
                                <Ellipse  Grid.Column="4" Fill="{x:Bind StatusCircle, Converter={StaticResource StatusToColor}}" Style="{ThemeResource customerCircleStyle}"/>
                                
                                <FlyoutBase.AttachedFlyout>
                                    <Flyout Placement="Right" x:Name="descriptionFlyout">
                                        <TextBlock Text="{x:Bind Customer.Description}"/>
                                    </Flyout>
                                </FlyoutBase.AttachedFlyout>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>

Answer 1

Mouse input doesn't produce Holding events by default, no matter how long a mouse button is held down, or which button is held. However, mouse devices and some pen devices can fire RightTapped when a right mouse button or equivalent is pressed and released.

Note  There is a way to treat mouse actions as hold actions if you use your own GestureRecognizer and specify HoldWithMouse in settings.

https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.holding.aspx?f=255&MSPPError=-2147217396

hope it helps.

Answer 2

ManipulatingStated event is disabling the Scrolling mode of the ListView. How to handle that?

Answer 3

HI Sunil A M,

Please read the sticky posts, especially the Guide to posting: subject line tags and Known Issues for Windows 10 SDK and Tools .

We have no idea what kind of project you are using for developing Universal App? Is it windows 8.1 or Win10 UWP app?

>>ManipulatingStated event is disabling the Scrolling mode of the ListView. How to handle that?

Could you post what you have done so far or provide the reproduction sample? 

---

Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.