This is a migrated thread and some comments may be shown as answers.

Problem with ListBox.ItemsPanel and Touch Screen

2 Answers 290 Views
VirtualizingWrapPanel
This is a migrated thread and some comments may be shown as answers.
Nicolas
Top achievements
Rank 1
Nicolas asked on 20 Mar 2014, 05:39 PM
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 :)

2 Answers, 1 is accepted

Sort by
0
Accepted
Nick
Telerik team
answered on 24 Mar 2014, 03:00 PM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Nicolas
Top achievements
Rank 1
answered on 26 Mar 2014, 12:59 PM
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.
Tags
VirtualizingWrapPanel
Asked by
Nicolas
Top achievements
Rank 1
Answers by
Nick
Telerik team
Nicolas
Top achievements
Rank 1
Share this question
or