Problem with ListBox.ItemsPanel and Touch Screen

[Nicolas]

Hello,

I'm working on an app which needs to list many items (kind of 50 000 sometimes) with a custom items template.
Everything is working fine while controlling with the mouse, but it's buggy with a touch screen. In order to be able to click on a button or a checkbox inside any of the items, you need to swipe somewhere on the main list before.

Here is a part of my code : (scj: controls are derived from telerik: controls with only one or two more properties)

my XAML :

<scj:scjListBox Visibility="Visible" Grid.Column="2" x:Name="lstItemsSmall" ItemsSource="{Binding Path=Modeles}" Style="{DynamicResource ModelesStyleSmall}" Background="#FF525252">
                <scj:scjListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <scj:scjVirtualizingWrapPanel ItemWidth="300" ItemHeight="300"></scj:scjVirtualizingWrapPanel>
                    </ItemsPanelTemplate>
                </scj:scjListBox.ItemsPanel>
            </scj:scjListBox>

resource file - style :

<Style TargetType="scj:scjListBox" x:Key="ModelesStyleSmall">
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="telerik:RadListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="BorderBrush" Value="Transparent" />
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="FontSize" Value="12" />
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="telerik:RadListBoxItem">
                                <Border CornerRadius="5" BorderBrush="#FF565656" BorderThickness="1" Margin="5" Padding="5" Background="#FF606060">
                                    <Grid>
                                        <ContentPresenter x:Name="HeaderElement" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0"
                                            ContentTemplate="{StaticResource ProduitsDataTemplateSmall}"/>
                                    </Grid>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

resource file - data template :

<DataTemplate x:Key="ProduitsDataTemplateSmall">
        <scj:scjGrid Height="280" Width="280">
            <scj:scjGrid.RowDefinitions>
                <RowDefinition Height="200"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
            </scj:scjGrid.RowDefinitions>
            <scj:scjGrid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
            </scj:scjGrid.ColumnDefinitions>
            <Image Grid.Row="0" Grid.ColumnSpan="3" Source="{Binding Path=ImagePhoto}"></Image>
            <scj:scjTextBlock Grid.Row="1" Grid.ColumnSpan="3" NoTranslate="True" Text="{Binding Path=DisplayCodeName}" TextWrapping="Wrap" HorizontalAlignment="Left"></scj:scjTextBlock>
            <scj:scjButton Grid.Row="2" Grid.Column="0" NoTranslate="True" Style="{StaticResource ButtonStyle}" Click="btnPanier_Click" Tag="{Binding Path=sIdModele, Mode=OneWay}">
                <Image Source="Images/panier_ajout.png" Width="32" Height="32"></Image>
            </scj:scjButton>
            <scj:scjButton Grid.Row="2" Grid.Column="1" NoTranslate="True" Style="{StaticResource ButtonStyle}" Click="btnLoupe_Click" Tag="{Binding Path=sIdModele, Mode=OneWay}">
                <Image Source="Images/loupe.png" Height="32" Width="32"></Image>
            </scj:scjButton>
            <scj:scjCheckBox Grid.Row="2" Grid.Column="2" x:Name="chkStatut" NoTranslate="True" BorderBrush="Black" BorderThickness="0.3" Checked="chkStatut_Checked" Unchecked="chkStatut_Checked" HorizontalAlignment="Center" VerticalAlignment="Center">
                <scj:scjCheckBox.LayoutTransform>
                    <ScaleTransform ScaleX="3" ScaleY="3"></ScaleTransform>
                </scj:scjCheckBox.LayoutTransform>
            </scj:scjCheckBox>
        </scj:scjGrid>
    </DataTemplate>

I have tried on a :
-Win7 with mouse, everything is OK (smooth scrolling, clicking on the buttons, on the checkbox...)
-Win7 with touch, impossible to click on any button nor checkbox of an item (button gets focused but no event raised, checkbox get focused but not checked, but smooth scolling the list works fine)
-Win8 with touch, I need to swipe before clicking, or checking a box on an item (but smooth scolling works fine)

I haven't modified any touch behavior  at all. I need virtualization because of the number of items to load (from 15 to 50 000), and I need the control to act like an android app with touch smooth scrolling.

The screencapture shows the final window. Each light gray item contains a picture, 2 buttons and a checkbox.

My question is, is there a way to make it work with a touch screen, and how ?

Thank you for reading :)

[Nick]

Hello Nicolas,

The behavior you are experiencing is very strange. Rather unfortunately, we are not able to tell what exactly goes wrong based solely on the provided snippets. May I ask you to prepare a small sample where we can reproduce the problem and send it so we can debug it on our side and provide a solution in the shortest terms? 

Thank you in advance. 

Regards,
Nik
Telerik

 

 

[Nicolas]

I have found a solution to my problem, I used a ListView instead of a ListBox and it works.

Here is my solution (if somebody else needs it) :

<scj:scjListView Visibility="Visible" x:Name="lstItemsSmall" ItemsSource="{Binding Path=Modeles}" ItemContainerStyle="{DynamicResource ModelesStyleSmall}" Background="#FF525252">
    <scj:scjListView.ItemsPanel>
        <ItemsPanelTemplate>
            <scj:scjVirtualizingWrapPanel ItemWidth="300" ItemHeight="350"></scj:scjVirtualizingWrapPanel>
        </ItemsPanelTemplate>
    </scj:scjListView.ItemsPanel>
</scj:scjListView>

<Style TargetType="ListViewItem" x:Key="ModelesStyleSmall">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <Border CornerRadius="5" BorderBrush="#FF565656" BorderThickness="1" Margin="5" Padding="5" Background="#FF606060">
                    <Grid>
                        <ContentPresenter x:Name="HeaderElement" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"
                            ContentTemplate="{StaticResource ProduitsDataTemplateSmall}"></ContentPresenter>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<DataTemplate x:Key="ProduitsDataTemplateSmall">

    <scj:scjGrid>

        <scj:scjGrid.RowDefinitions>

            <RowDefinition Height="200"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>

            <RowDefinition Height="50"></RowDefinition>

        </scj:scjGrid.RowDefinitions>

        <scj:scjGrid.ColumnDefinitions>

            <ColumnDefinition Width="1*"></ColumnDefinition>

            <ColumnDefinition Width="1*"></ColumnDefinition>

            <ColumnDefinition Width="1*"></ColumnDefinition>

        </scj:scjGrid.ColumnDefinitions>

         

        <Image Grid.Row="0" Grid.ColumnSpan="3" Source="{Binding Path=ImagePhoto}"></Image>

         

        <scj:scjTextBlock Grid.Row="1" Grid.ColumnSpan="3" NoTranslate="True" Text="{Binding Path=DisplayCodeName}" TextWrapping="Wrap" HorizontalAlignment="Left"></scj:scjTextBlock>

         

        <scj:scjButton Grid.Row="2" Grid.Column="0" NoTranslate="True" Style="{StaticResource ButtonStyle}" Click="btnPanier_Click" Tag="{Binding Path=sIdModele, Mode=OneWay}">

            <Image Source="Images/panier_ajout.png" Width="32" Height="32"></Image>

        </scj:scjButton>

        <scj:scjButton Grid.Row="2" Grid.Column="1" NoTranslate="True" Style="{StaticResource ButtonStyle}" Click="btnLoupe_Click" Tag="{Binding Path=sIdModele, Mode=OneWay}">

            <Image Source="Images/loupe.png" Height="32" Width="32"></Image>

        </scj:scjButton>

        <scj:scjCheckBox Grid.Row="2" Grid.Column="2" x:Name="chkStatut" NoTranslate="True" BorderBrush="Black" BorderThickness="0.3" Checked="chkStatut_Checked" Unchecked="chkStatut_Checked" HorizontalAlignment="Center" VerticalAlignment="Center">

            <scj:scjCheckBox.LayoutTransform>

                <ScaleTransform ScaleX="3" ScaleY="3"></ScaleTransform>

            </scj:scjCheckBox.LayoutTransform>

        </scj:scjCheckBox>        

    </scj:scjGrid>

</DataTemplate>

I can use virtualization and smooth scrolling at the same time, on Win7 with a mouse and Win8 with a touch screen.

Thank you for your answer, even if you couldn't reproduce the error.