Applying Custom DataTemplate to ListBox

6 posts, 0 answers
  1. Shaun
    Shaun avatar
    31 posts
    Member since:
    Jul 2011

    Posted 19 May 2015 Link to this post

    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

  2. Geri
    Admin
    Geri avatar
    60 posts

    Posted 20 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Shaun
    Shaun avatar
    31 posts
    Member since:
    Jul 2011

    Posted 29 May 2015 in reply to Geri Link to this post

    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?

  5. Geri
    Admin
    Geri avatar
    60 posts

    Posted 01 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Shaun
    Shaun avatar
    31 posts
    Member since:
    Jul 2011

    Posted 02 Jun 2015 in reply to Geri Link to this post

    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?

  7. Geri
    Admin
    Geri avatar
    60 posts

    Posted 03 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready