Applying Custom DataTemplate to ListBox

[Shaun]

I have a scenario where I apply a custom RadListBoxItem DataTemplate to my ListBox which has been working correctly for months if not years.

I have been trying our program on a touch device for the first time (Surface Pro 2) and realised I cannot select any item (with touch) without causing the program to crash.

I have broken the fault down to a far simpler program which still shows the same problem.

 

<telerik:RadListBox x:Name="lstmain"/>

Dim DT As New DataTemplate With {.DataType = GetType(RadListBoxItem), .VisualTree = New FrameworkElementFactory(GetType(RadListBoxItem))}
lstmain.ItemTemplate = DT
lstmain.ItemsSource = Results

 

Results is a returned observable collection of C_SearchItem

 

Dim Results As New ObservableCollection(Of C_SearchItem)

 

Public Class C_SearchItem    

    Public ErrorCode As Integer

End Class

 

Using the above code. (RadListBox with default RadListBoxItem) causes the below error.

Object reference not set to an instance of an object.

   at Telerik.Windows.Controls.Internal.ListBoxTouchableElement.TapDown(TapDownArguments args)
   at Telerik.Windows.Input.Touch.TouchableElements.TapTouchableElementBase.Telerik.Windows.Input.Touch.TouchableElements.ITapTouchableElement.TapDown(TapDownArguments args)
   at Telerik.Windows.Input.Touch.GestureHandlers.TapGestureHandler.TapUp(Point point)
   at Telerik.Windows.Input.Touch.TouchHandler.RegisterTouchUp(TouchHandlerArgs args)
   at Telerik.Windows.Input.Touch.TouchHandlersController.RegisterTouchUp(Point point, TouchPoint[] touchPoints, Boolean& handled)
   at Telerik.Windows.Input.Touch.TouchHandlersController.Owner_TouchUp(Object sender, TouchEventArgs e)
   at System.Windows.Input.TouchEventArgs.InvokeEventHandler(Delegate genericHandler, Object genericTarget)
   at System.Windows.RoutedEventArgs.InvokeHandler(Delegate handler, Object target)
   at System.Windows.RoutedEventHandlerInfo.InvokeHandler(Object target, RoutedEventArgs routedEventArgs)
   at System.Windows.EventRoute.InvokeHandlersImpl(Object source, RoutedEventArgs args, Boolean reRaised)
   at System.Windows.UIElement.RaiseEventImpl(DependencyObject sender, RoutedEventArgs args)
   at System.Windows.UIElement.RaiseTrustedEvent(RoutedEventArgs args)
   at System.Windows.UIElement.RaiseEvent(RoutedEventArgs args, Boolean trusted)
   at System.Windows.Input.InputManager.ProcessStagingArea()
   at System.Windows.Input.InputManager.ProcessInput(InputEventArgs input)
   at System.Windows.Input.TouchDevice.RaiseTouchUp()
   at System.Windows.Input.TouchDevice.ReportUp()
   at System.Windows.Input.StylusLogic.PromoteMainUpToTouch(StylusDevice stylusDevice, StagingAreaInputItem stagingItem)
   at System.Windows.Input.StylusLogic.PromoteMainToTouch(ProcessInputEventArgs e, StylusEventArgs stylusEventArgs)
   at System.Windows.Input.StylusLogic.PromoteMainToOther(ProcessInputEventArgs e)
   at System.Windows.Input.StylusLogic.PostProcessInput(Object sender, ProcessInputEventArgs e)
   at System.Windows.Input.InputManager.RaiseProcessInputEventHandlers(ProcessInputEventHandler postProcessInput, ProcessInputEventArgs processInputEventArgs)
   at System.Windows.Input.InputManager.ProcessStagingArea()
   at System.Windows.Input.InputManager.ProcessInput(InputEventArgs input)
   at System.Windows.Input.StylusLogic.InputManagerProcessInput(Object oInput)
   at System.Windows.Input.StylusLogic.PreProcessInput(Object sender, PreProcessInputEventArgs e)
   at System.Windows.Input.InputManager.ProcessStagingArea()
   at System.Windows.Input.InputManager.ProcessInput(InputEventArgs input)
   at System.Windows.Input.InputProviderSite.ReportInput(InputReport inputReport)
   at System.Windows.Interop.HwndMouseInputProvider.ReportInput(IntPtr hwnd, InputMode mode, Int32 timestamp, RawMouseActions actions, Int32 x, Int32 y, Int32 wheel)
   at System.Windows.Interop.HwndMouseInputProvider.FilterMessage(IntPtr hwnd, WindowMessage msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   at System.Windows.Interop.HwndSource.InputFilterMessage(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   at MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   at MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
   at System.Windows.Threading.Dispatcher.LegacyInvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
   at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
   at MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
   at System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
   at System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
   at System.Windows.Threading.Dispatcher.Run()
   at System.Windows.Application.RunDispatcher(Object ignore)
   at System.Windows.Application.RunInternal(Window window)
   at System.Windows.Application.Run(Window window)
   at System.Windows.Application.Run()
   at ShieldServices1._7.App.Main() in C:\Applications\ShieldServices1.7\ShieldServices1.7\App.xaml.vb:line 25

 

If I replace RadListBox with the standard ListBox as follows there is no error.

<ListBox x:Name="lstmain"/>

Dim DT As New DataTemplate With {.DataType = GetType(ListBoxItem), .VisualTree = New FrameworkElementFactory(GetType(ListBoxItem))}
lstmain.ItemTemplate = DT
lstmain.ItemsSource = Results

 

I am using the latest release v.2015.1.401.45

 

Regards

 

Shaun Critten

[Geri]

Hi Shaun,

Thank you for contacting us.

As seen on the snippet, in the custom DataTemplate, you're placing a RadListBoxItem, which results with a RadListBoxItem inside RadListBoxItem and we don't recommend doing it. If you remove the RadListBoxItem from the ItemTemplate everything will work as expected. For example check the following snippet:

Dim DT As New DataTemplate With {.DataType = GetType(RadListBoxItem), .VisualTree = New FrameworkElementFactory(GetType(TextBlock))}

Additional information on the topic can be found in our article about the custom DataTemplate in RadListBox.

Hope this helps. Also, if you have any further queries, please do not hesitate to contact us.

Regards,
Geri
Telerik

[Shaun]

Hi Geri,

Thanks for the reply, I have been away/busy and have finally got back to looking at this problem. I have created a sample project that shows the problem I am having.

 CustomListBoxItem.zip

By doing this I have narrowed down the problem to setting the style resource in my custom RadListBoxItem in the UC_Basic control.

Private Sub LBIBasic_Initialized(sender As Object, e As EventArgs) Handles Me.Initialized
            SetResourceReference(StyleProperty, "RadListBoxItemStyle")
        End Sub

This makes sense that there may be an issue applying the default style to the custom control.

The problem I now have is when I comment out this line. Non of the content of my custom RadListBoxItem is displayed. I just get a thin line where the content should be.

Could you provide an example of how to create a custom user control inheriting from the RadListBoxItem, looking how it does with the style enabled, and compatible with a touch screen device?

[Geri]

Hi Shaun,

Thank you for the additional information.

In order to achieve the desired behavior, you can use UserControl as implemented in the modified project - the custom RadListBoxItem control is replaced by UserControl, which is used as a DataTemplate for RadLIstBoxItem's content and works and looks just the same.

Please, try this out and let us know whether it works for you.

Regards,
Geri
Telerik

[Shaun]

Hi Geri,

 Thanks, that worked great. I now have the usercontrol setup scrolling on a touch screen. It has led me to another problem though.

 The usercontrols I actually use in my program for the listbox can be quite large and when scrolling using touch it can be a bit "clunky". Looking through your forums I found the following post.

http://www.telerik.com/forums/scrolling-entire-elements-problem

It recommends using:

ScrollViewer.CanContentScroll="False"

 This allows for smooth scrolling however when you scroll using touch it only moves a very, very small amount and is not usable.

 If you use the same sample as you made for me with that flag and add another 10-20 items, you will see the problem I get when scrolling through the items.

Is it something to do with they way my usercontrol is setup?

[Geri]

Hi Shaun,

There is something you can do to make the scrolling better for this scenario. You can use ScrollViewer.CanContentScroll="False" and modify the ItemsPanel of RadListBox by using a StackPanel as ItemsPanelTemplate:

<telerik:RadListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel/>
    </ItemsPanelTemplate>
</telerik:RadListBox.ItemsPanel>

However, this way the virtualization of RadListBox will be lost and in case you have a large number of items, performance may suffer.

Hope this helps.

Regards,
Geri
Telerik