[Solved] RadRibbonTab not Disconnecting Items on Binding

[Tony]

Hi Telerik:

I believe I have found a bug relating to how the RadRibbonTab handles things when its ItemsSource is set.

 Please see the attached demo app.

 Am I doing something wrong?  If so, please advise.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication5"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WpfApplication5.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="659" Width="1131.575">
    <Grid>
        <ListBox x:Name="List1" HorizontalAlignment="Left" Width="483" Height="73" VerticalAlignment="Top" Margin="30,77,0,0"/>
        <ListBox x:Name="List2" Margin="30,223,0,0" HorizontalAlignment="Left" Width="483" Height="84" VerticalAlignment="Top"/>
        <Button x:Name="btnBindList1" Content="Bind List 1" HorizontalAlignment="Left" Margin="513,77,0,0" VerticalAlignment="Top" Width="102" Click="btnBindList1_Click"/>
        <Button x:Name="btnBindList2" Content="Bind List 2" HorizontalAlignment="Left" Margin="518,223,0,0" VerticalAlignment="Top" Width="102" Click="btnBindList2_Click"/>
        <Label x:Name="label" Content="First - Click "Bind List 1".  The items will bind.  This is what I expect to happen." HorizontalAlignment="Left" Margin="30,43,0,0" VerticalAlignment="Top"/>
        <telerik:RadRibbonView x:Name="radRibbonView" VerticalAlignment="Top" Margin="30,385,108,0">
            <telerik:RadRibbonTab Header="RibbonTab" x:Name="radRibbonTab"/>
        </telerik:RadRibbonView>
        <Button x:Name="btnBindRibbon" Content="Bind Ribbon to New Tab" HorizontalAlignment="Left" Margin="518,360,0,0" VerticalAlignment="Top" Width="158" Click="btnBindRibbon_Click"/>
        <Button x:Name="btnBindRibbon_Copy" Content="Bind Ribbon Again" HorizontalAlignment="Left" Margin="518,571,0,0" VerticalAlignment="Top" Width="193" Click="btnBindRibbon_Click"/>
        <Label x:Name="label_Copy" Content="Second - Click "Bind List 2".  The list is bound and visual items jump to List2.  This is what I expect to happen." HorizontalAlignment="Left" Margin="30,192,0,0" VerticalAlignment="Top"/>
        <Label x:Name="label_Copy1" Content="Third - Click "Bind Ribbon to New Tab".  The list is bound and visual items jump into the ribbon.  This is also what I expect to happen." HorizontalAlignment="Left" Margin="30,321,0,0" VerticalAlignment="Top" Width="799" Height="27"/>
        <Label x:Name="label_Copy2" Content="Last - Click "Bind Ribbon Again" (it calls the same code as above).  When I do this, I get an error.  I expect items to jump like they did the first time." HorizontalAlignment="Left" Margin="30,537,0,0" VerticalAlignment="Top" Width="799" Height="27"/>
    </Grid>
</Window>

 

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication5 {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {


        System.Collections.ObjectModel.ObservableCollection<object> items;

        public MainWindow() {
            InitializeComponent();
            items = new System.Collections.ObjectModel.ObservableCollection<object> { "a", "b", "c" };

            items.Add(new Button() { Content = "Test Button" });
            items.Add(new TextBox() { Text = "Test Textbox!" });
        }

        private void Button_Click_1(object sender, RoutedEventArgs e) {
            Button button = sender as Button;
            string clickedString = button.DataContext as string;
            items.Remove(clickedString);

        }

        private void btnBindList1_Click(object sender, RoutedEventArgs e) {
            e.Handled = true;
            List1.ItemsSource = items;

        }

        private void btnBindList2_Click(object sender, RoutedEventArgs e) {
            e.Handled = true;
            List2.ItemsSource = items;
        }

        private void btnBindRibbon_Click(object sender, RoutedEventArgs e) {
            e.Handled = true;
            var Tab = new Telerik.Windows.Controls.RadRibbonTab() { Header = "New Tab" };
            radRibbonView.Items.Add(Tab);
            radRibbonView.SelectedItem = Tab;

            Tab.ItemsSource = items;



        }
    }
}

[Petar Marchev]

Hello Tony,

Thank you for attaching the code snippets.

We do not consider this to be a bug. I see that in the items collection you hold the visual elements directly. When you set the items source of the second list box, the visual elements disappear from the first list box. The items source of the first listbox has not changed a bit, but still the items disappeared from it. This is actually not what we expected, even though you mentioned that this is what you expect. Bottom line is that the ItemsSource of the first list box did not change, but the items disappeared, so this alone seems to be a glitch.

I did not investigate to see why the ribbon throws an exception, but I think that you should not be able to add the same visual element into two locations. And the element should definitely not disappear from one tab, after all, this tab's ItemsSource contains this element and so should the tab.

Let us know if we can assist you with anything else.

Regards,
Petar Marchev
Telerik

[Tony]

Hi Petar,

Thank you for the response.  What is the proper way of me ensuring that the control is "disconnected" before binding it?  I have tried a number of different ways and I always seem to get the error with Telerik's ribbon.     

[Petar Marchev]

Hi Tony,

As I explained earlier, you shouldn't try to add the same visual element into two different locations in the visual tree. You should not ensure to disconnect it. You need to have different visuals for the different items sources.

Regards,
Petar Marchev
Telerik

[Tony]

Hi Petar,

Thank you for the note.  This works as I would expect with all other controls.  If the control is bound to another ItemSource, it stays in the ItemSource and simply changes its parent.  Can you escalate this?  It seems incorrect that the ribbonbar's functionality should be inconsistent with the rest of the .NET framework's controls.     

[Petar Marchev]

Hi Tony,

Thank you for your feedback, however, we do not plan to change the behavior of the control at this stage. The WPF framework does not allow one visual element to exist in more than one location in the visual tree. The ListBox strategy of resolving this issue is to disconnect the visual from its current parent, thus stealing it. However as this is not a common scenario we use another approach (throwing an error in this case) preventing it from happening at all.

If we were to implement the change you propose undesired side effect will occur. When you see the first tab, you will see the visual in the tab. When you switch to the second tab, the visual will appear here (but disappear from the first). When later you switch back to the first tab - the visual would no longer be there.

If you need assistance on how to achieve the results you are after, you can give us more information and we will assist you with that.

Regards,
Petar Marchev
Telerik