Disapearing Items for ListBox when ItemContainerStyle is set

5 posts, 1 answers
  1. Steffen
    Steffen avatar
    4 posts
    Member since:
    Sep 2016

    Posted 29 Sep Link to this post

    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"
    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"
    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.}

     

  2. Steffen
    Steffen avatar
    4 posts
    Member since:
    Sep 2016

    Posted 29 Sep in reply to Steffen Link to this post

    I am sorry, the zip-file was probably to large as attachment. If somebody need this, I'll upload or mail it.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Geri
    Admin
    Geri avatar
    60 posts

    Posted 30 Sep Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  5. Steffen
    Steffen avatar
    4 posts
    Member since:
    Sep 2016

    Posted 30 Sep Link to this post

    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

  6. Geri
    Admin
    Geri avatar
    60 posts

    Posted 03 Oct Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready