c# - Posición del evento ItemClick en un Windows Phone ListView 8.1

windows-phone-8.1 winrt-xaml

Question

Tengo un ListView que muestra los productos en un carrito de compras. La datatemplate define un incremento y un botón de cantidad decreciente para cada producto.

Si el usuario desea presionar uno de estos botones, existe la posibilidad de que toquen junto al botón, por lo que se activará el evento ItemClick . Quiero desactivar ItemClick en el área del botón. Tuve la idea de obtener la posición donde se produjo el evento ItemClick y determinar si está en el área deshabilitada que definí.

¿Es posible? ¿Alguna otra idea?

Answer 1

Sugerencia 1
Es posible que pueda escuchar ManipulationStarted root de DataTemplate y verificar e.Position en el controlador de eventos si la entrada estaba cerca de los botones. Si está demasiado cerca establece un bool como IsCloseToStepperButtons en true y busca ese bool en el controlador de eventos ItemClick .

No lo he probado, pero creo que los eventos se disparan en el orden deseado.

Sugerencia 2
Puede omitir todo el evento ItemClick y agregar un detector de eventos a la otra parte de DataTemplate . Coloque un margen entre las dos partes para evitar clics accidentales.

Answer 2

¿Por qué hacerlo de la manera difícil?

Puede cambiar DataTemplate de manera que cada ListViewItem se divida en dos partes, "change amount part" y "item''s info part" :

    <ListView ItemClick="OnItemClick">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="100"/>
                                </Grid.ColumnDefinitions>
                                <!-- This is the item''s info part -->
                                <StackPanel Orientation="Horizontal" Grid.Column="0" >
                                    <TextBlock Text="{Binding Title}" />
                                    <TextBlock Text="{Binding Qnty}" />
                                </StackPanel>
                                <!-- This is the change amount part -->
                                <StackPanel Tag="Oops!" Orientation="Horizontal" Grid.Column="1" >
                                    <Button Content="▲" />
                                    <Button Content="▼" />
                                </StackPanel>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

Ahora puede probar una de las siguientes formas de manejar ItemClick correctamente:

Primera solución: puede averiguar cuál fue OriginalSource que generó el evento ItemClick . si era la "parte del importe del cambio" , entonces el usuario probablemente lo tocó por error y el evento debería cancelarse, si era la "parte de información del artículo" entonces el evento debería ser levantado:

    private void OnItemClick(object sender, ItemClickEventArgs e)
    {
        var tag = ((FrameworkElement)e.OriginalSource).Tag;

        if (tag != null && tag.ToString() == "Oops!")
        {
            return;
        }
        //else: do whatever needs to be done on item click
    }

Segunda solución: puede configurar ListView a SelectionMode="None" e IsItemClickEnabled="False" , y luego agregué manipuladores Tapped para cada elemento manualmente (por ejemplo, ItemTapped para la parte de información del artículo y OnIncreaseTapped y OnDecreaseTapped para los botones):

    <ListView ItemClick="OnItemClick" SelectionMode="None" IsItemClickEnabled="False">
         ...
                                <!-- This is the item''s info part -->
                                <StackPanel Orientation="Horizontal" Tapped = "OnItemTapped" Grid.Column="0" >
                                    <TextBlock Text="{Binding Title}" />
                                    <TextBlock Text="{Binding Qnty}" />
                                </StackPanel>
                                <!-- This is the change amount part -->
                                <StackPanel Tag="Oops!" Orientation="Horizontal" Grid.Column="1" >
                                    <Button Content="▲" Tapped = "OnIncreaseTapped"/>
                                    <Button Content="▼" Tapped = "OnDecreaseTapped"/>
                                </StackPanel>
                            </Grid>

Tercera solución: ¿Por qué incluso dejar que el usuario toque el área incorrecta? Prefiero deshacerme de esta área usando una ItemTemplate como esta:

en lugar de esto:

Answer 3

Hay una manera simple de hacer esto. Use un elemento como el "área deshabilitada" alrededor de estos botones de incremento / decremento. En el controlador ItemClick , if (e.OriginalSource == **the element which is the disabled area**) return; .

Esto funciona, porque ItemClickedEventArgs es un RoutedEventArgs que siempre contiene el elemento de donde se originó. Consulte https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemclickeventargs