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 :
resource file - style :
resource file - data template :
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 :)
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 :)