Disapearing Items for ListBox when ItemContainerStyle is set

[Steffen]

We got problem (or maybe an issue) in the RadListBox with enabled Drag&Drop. In our Project we simply want to Drag&Drop Customers from a RadListBox to a RadScheduleView. For displaying the customer business objects into the list we use a simple data-template.

If we compile the project without the line 33 into the MainWindow.xaml the items are shown into the listbox. If we use the line, the items disappear, but the listbox could be used as drop-target from the calendar.

The problem occurred with the telerik wpf version 2016.3.914.45.NoXaml (folder-name of the library linked to the project) and the office 2016 style. We found out, that the problem was not reproducible with an older telerik version or another theme.

Is there any workaround or fix? Thank you for your help.

 

I attached the demo-project with the problem as zip-file with a password, for making it possible for you to reproduce the problem I attached the whole telerik classes. Because this the file is password covered. If you want to unpack the file, please request the password per e-mail.

App.xaml

 

01.<Application x:Class="TestApp1.App"
02.             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
05.             StartupUri="MainWindow.xaml">
06.    <Application.Resources>
07.        <ResourceDictionary>
08.            <ResourceDictionary.MergedDictionaries>
09.                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/System.Windows.xaml" />
10.                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.xaml" />
11.                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.Input.xaml" />
12.                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />
13.                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.RibbonView.xaml" />
14.                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.ScheduleView.xaml" />
15.            </ResourceDictionary.MergedDictionaries>
16.        </ResourceDictionary>
17.    </Application.Resources>
18.</Application>

 

MainWindow.xaml

 

01.<Window x:Class="TestApp1.MainWindow"
02.        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
05.        xmlns:local="clr-namespace:TestApp1"
06.        xmlns:drag="clr-namespace:Telerik.Windows.DragDrop.Behaviors;assembly=Telerik.Windows.Controls"
07.        Title="MainWindow" Height="350" Width="525">
08.
09.    <Window.Resources>
10.        <Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem">
11.            <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
12.            <Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
13.        </Style>
14.        <DataTemplate x:Key="CustomerItem">
15.            <TextBlock Foreground="Blue" Text="{Binding Name}" />
16.        </DataTemplate>
17.    </Window.Resources>
18.
19.    <Window.DataContext>
20.        <local:ViewModel/>
21.    </Window.DataContext>
22.
23.    <Grid>
24.        <Grid.ColumnDefinitions>
25.            <ColumnDefinition Width="5*"/>
26.            <ColumnDefinition Width="5*"/>
27.        </Grid.ColumnDefinitions>
28.
29.        <telerik:RadListBox x:Name="ListBox"
30.                            AllowDrop="False"
31.                            ItemsSource="{Binding CustomersSource}"
32.                            ItemTemplate="{StaticResource CustomerItem}"
33.                            ItemContainerStyle="{StaticResource DraggableListBoxItem}">
34.            <telerik:RadListBox.DragVisualProvider>
35.                <telerik:ScreenshotDragVisualProvider />
36.            </telerik:RadListBox.DragVisualProvider>
37.            <telerik:RadListBox.DataConverter>
38.                <local:AppointmentToCustomerConverter />
39.            </telerik:RadListBox.DataConverter>
40.            <telerik:RadListBox.DragDropBehavior>
41.                <telerik:ListBoxDragDropBehavior AllowReorder="True" telerik:DragDropManager.TouchDragTrigger="TapAndHold" />
42.            </telerik:RadListBox.DragDropBehavior>
43.        </telerik:RadListBox>
44.
45.        <telerik:RadScheduleView x:Name="scheduleView"
46.                                 Grid.Column="1"
47.                                 AppointmentsSource="{Binding AppointmentsSource}">
48.            <telerik:RadScheduleView.ViewDefinitions>
49.                <telerik:WeekViewDefinition />
50.            </telerik:RadScheduleView.ViewDefinitions>
51.            <telerik:RadScheduleView.DragDropBehavior>
52.                <local:ScheduleViewDragDropBehavior />
53.            </telerik:RadScheduleView.DragDropBehavior>
54.        </telerik:RadScheduleView>
55.    </Grid>
56.</Window>

 

ViewModel.cs

 

01.using System;
02.using System.Collections;
03.using System.Collections.Generic;
04.using System.Collections.ObjectModel;
05.using System.Linq;
06.using System.Text;
07.using Telerik.Windows.Controls;
08.using Telerik.Windows.Controls.ScheduleView;
09.using Telerik.Windows.DragDrop.Behaviors;
10.
11.namespace TestApp1
12.{
13.    public class Customer
14.    {
15.        public string Name { get; set; }
16.    }
17.
18.    public class ViewModel : ViewModelBase
19.    {
20.        private ObservableCollection<Customer> customersSource;
21.        private ObservableCollection<Appointment> appointmentsSource;
22.
23.        public ViewModel()
24.        {
25.            this.CustomersSource = new ObservableCollection<Customer> {
26.                new Customer{ Name = "Customer 1" }, new Customer{ Name = "Customer 2" }, new Customer{ Name = "Customer 3" },
27.                new Customer{ Name = "Customer 4" }, new Customer{ Name = "Customer 5" }, new Customer{ Name = "Customer 6" },
28.                new Customer{ Name = "Customer 7" }, new Customer{ Name = "Customer 8" }, new Customer{ Name = "Customer 9" },
29.            };
30.            this.AppointmentsSource = new ObservableCollection<Appointment>();
31.        }
32.
33.        public ObservableCollection<Customer> CustomersSource
34.        {
35.            get { return customersSource; }
36.            set { customersSource = value; this.OnPropertyChanged("CustomersSource"); }
37.        }
38.
39.        public ObservableCollection<Appointment> AppointmentsSource
40.        {
41.            get { return appointmentsSource; }
42.            set { appointmentsSource = value; this.OnPropertyChanged("AppointmentsSource"); }
43.        }
44.    }
45.    public class ScheduleViewDragDropBehavior : Telerik.Windows.Controls.ScheduleViewDragDropBehavior
46.    {
47.        public object customers { get; set; }
48.        public override IEnumerable<IOccurrence> ConvertDraggedData(object data)
49.        {
50.            if (DataObjectHelper.GetDataPresent(data, typeof(Customer), false))
51.            {
52.                var customers = DataObjectHelper.GetData(data, typeof(Customer), true) as IEnumerable;
53.                if (customers != null)
54.                {
55.                    var newApp = customers.OfType<Customer>().Select(c => new Appointment { Subject = c.Name });
56.                    return newApp;
57.                }
58.            }
59.            return base.ConvertDraggedData(data);
60.        }
61.    }
62.    public class AppointmentToCustomerConverter : DataConverter
63.    {
64.        public override string[] GetConvertToFormats()
65.        {
66.            return new string[] { typeof(ScheduleViewDragDropPayload).FullName, typeof(Customer).FullName };
67.        }
68.        public override object ConvertTo(object data, string format)
69.        {
70.            var payload = DataObjectHelper.GetData(data, typeof(ScheduleViewDragDropPayload), false) as ScheduleViewDragDropPayload;
71.            if (payload != null)
72.            {
73.                var customers = payload.DraggedAppointments;
74.                return customers.OfType<Appointment>().Select(a => new Customer { Name = a.Subject });
75.            }
76.            return null;
77.        }
78.    }
79.}

 

[Steffen]

I am sorry, the zip-file was probably to large as attachment. If somebody need this, I'll upload or mail it.

[Geri]

Hi Steffen,

Thank you very much for the code you provided.
Using it I was able to recreate the scenario you describe.

I believe the reason the RadListBox items are not visible is that the BasedOn property is not set in the "DraggableListBoxItem" style that is targeting RadListBoxItem. In a nutshell, if you want to keep the default style of any element and change explicitly only a few things, you should use BasedOn property. Otherwise, only the defined values will be applied to the targeted element and nothing more.

More about this property you can read here:
https://msdn.microsoft.com/en-us/library/system.windows.style.basedon(v=vs.110).aspx

That explains why removing line 33 makes the items visible again - if no style is applied, RadListBox items appear with their default style.

Please try to add BasedOn property as shown below and let us know whether it makes any difference:

<Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem" BasedOn="{StaticResource RadListBoxItemStyle}" />

I tested it with older themes and observed the same behavior, so maybe something in your project has changed. It would be helpful if you could check that.

In case the suggested approach does not help you, we would greatly appreciate the sample runnable project you mention, just to be sure we're on the same page and we'll investigate further.

Looking forward to your reply.

Regards,
Geri
Telerik by Progress

[Steffen]

Hi Geri,

thank you! This solves the problem for me.

But here is something interesting: I have here a project without the BasedOn-property which works pretty good, but why? If I change the item-type from string to customer or whatever it continues working. But if I remove the linked telerik dll's and use the telerik-wizard to rebind the libraries it stops working.

Download the sample-project here.

Tanks for your support!

Steffen

[Geri]

Hello Steffen,

I'm glad everything is ok now.

The BasedOn property works as I described only when Implicit Styles are used, i.e. NoXAML assemblies. When XAML assemblies are referenced, all components of the style of the targeted element are automatically retrieved, and there is no need to base your style on any other style. Furthermore, all additional changes declared in the style would still be applied.

If I understand your scenario right, in the project you sent us, XAML assemblies were used initially, but the Wizard has referenced NoXAML dlls to your project and that is the reason the RadListBox items are not visible without changing the code.

You can check the type of the assemblies after you have used the wizard - go to the assemblies folder of your application, right click on a dll, select Properties, then go to Details tab - if the assembly is NoXAML it would be indicated with braces in the File Description.

Hope this helps.
Should you have any further questions or concerns, please don't hesitate to contact us.

Regards,
Geri
Telerik by Progress

[David]

This fix helped me immensely. I have been looking for the solution to this problem for two weeks.

Can someone check the documentation and please update it would have saved me a lot of time.

https://docs.telerik.com/devtools/wpf/controls/radlistbox/drag-and-drop/features-dragdrop?_ga=2.260033866.1320052235.1582560334-1820217730.1512166590

 

 

 

[Dinko | Tech Support Engineer]

Hi David,

We appreciated the provided feedback. This behavior is described in our Styling the Controls help article. Still, you are right that we can add this to the mentioned article. That is why I have logged an item to our backlog to update the RadListBox-> Overview article to mention the case with implicit style and NoXAML scenario. 

I have updated your Telerik Points for the provided feedback.

Regards,
Dinko
Progress Telerik