Drag out a frame content

[minh]

Hi Telerik support team,

I have a TabbedWindow with RadTabItems generated dynamically from code behind. In each RadTabItem, there is frame that I navigated to a Page.

The trouble is that: When a user drags a tab out of a host TabbedWindow, if the drop is inside a RadTabItem (I meant users just drag out the header and drop inside a tab), the tab is not dragging out. In plus, since this moment, all drag-out is not working even drop area is outside a tab.

Many thanks for your support

Here is my code in C#:

var newRadTab = new RadTabItem();
newRadTab.HeaderTemplate = (DataTemplate)this.Resources["HeaderTemplate"];
var frame = new Frame() { Name = "displayMainContent" };
frame.NavigationUIVisibility = NavigationUIVisibility.Hidden;
frame.ContextMenu = new ContextMenu() { Visibility = Visibility.Hidden };
newRadTab.Content = frame;

 

And Xaml as below:

<telerik:RadTabbedWindow x:Class="WpfConcept.MainTabbedWindow" x:Name="radTabbedWindow"
        IsContentPreserved="False"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:self="clr-namespace:WpfConcept"
        mc:Ignorable="d"  PreviewTabClosed="OnWindowPreviewClosed" PreviewClosed="radTabbedWindow_PreviewClosed"
        MinWidth="380" MinHeight="260"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" Loaded="OnWindowLoaded"
        Width="1800" Height="1000" Header="Concept Family Office v.8.0.1"
        ItemsSource="{Binding Data}"
        DisplayMemberPath="Header" AddButtonVisibility="Hidden">

[Dinko | Tech Support Engineer]

Hi minh,

Thank you for the provided code snippets.

In your post, you mentioned that the RadTabbedWindow is populated in dynamically in code behind with RadTabItems. But in the second code snippet, the RadTabbedWindow ItemsSource property is a bound. May I ask you to share the code which populates the control. This way, I can try to reproduce this behavior on my side.

In data binding scenario, it's recommended to bind the RadTabbedWIndow to a collection of business objects. More information you can find Data Binding help article in our documentation which describes how you can use the control in MVVM scenario.

I looking forward to your reply.

Regards,
Dinko
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

[minh]

Hi Dinko,

Thank you for your reply.

Sorry for the confusion in my code snippet. In fact, I didn't use ItemsSource property but only the population in dynamically of the RadTabbedWindows.

Below is the code behide:

 

var newRadTab = new RadTabItem();
newRadTab.HeaderTemplate = (DataTemplate)this.Resources["HeaderTemplate"];
var frame = new Frame() { Name = "displayMainContent" };
frame.NavigationUIVisibility = NavigationUIVisibility.Hidden;
frame.ContextMenu = new ContextMenu() { Visibility = Visibility.Hidden };
newRadTab.Content = frame;
this.Items.Add(newRadTab);

 

In this case, this = radTabbedWindow control.

 

And the xaml is:

<telerik:RadTabbedWindow x:Class="WpfConcept.MainTabbedWindow" x:Name="radTabbedWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:self="clr-namespace:WpfConcept"
        mc:Ignorable="d"  PreviewTabClosed="OnWindowPreviewClosed" PreviewClosed="radTabbedWindow_PreviewClosed"
        MinWidth="380" MinHeight="260"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" Loaded="OnWindowLoaded"
        Width="1800" Height="1000" Header="Concept Family Office v.8.0.1"
        DisplayMemberPath="Header" AddButtonVisibility="Hidden"
                    >

 

If you require further information, please do not hesitate write me back.

Many thanks in advance for your support.

[Petar Mladenov]

Hello Мinh,

I guess you populate the tabs in the Loaded event handler. I tried your code and added in a sample project but I am unable to replicate any issues with the drag drop behavior.
Could you please take a look at my test project and modify it if needed so that the issue is reproducible ? Thank you in advance for your cooperation.

Regards,
Petar Mladenov
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

[minh]

Hi Petar, 
Thank you for your reply.
I tried to attach the .zip file of code but not success (file extension not allow). Would you please download from here?

https://wetransfer.com/downloads/8d8970aa7e3a7bd8dca1ab031d04b80220190718115103/c902b3

Please try to drag-out the tab 1 and drop it inside tab 2, then re-drag-in to the host TabbedWindow. From this moment, we can not drag-drop inside the tab 2 any more.
If you do drag-out and drag-in many time (>4 times), nothing can move.
Thank you for your support.

[Petar Mladenov]

Hi Minh,

Thank you for details. I managed to reproduce this issue and I logged it in our portal where you can track its status:
https://feedback.telerik.com/wpf/1419419-dragging-new-window-is-impossible-in-scenarios-with-control-which-covers-the-content-of-the-window-completely

I also updated your telerik account points.
As a workaround, I hope you can use the following code at your side:

private void TabbedWindow_Loaded(object sender, RoutedEventArgs e)
        {
            var newRadTab = new RadTabItem();
            newRadTab.Header = "Tab 1";
            var frame = new Frame() { Name = "displayMainContent", AllowDrop = false };
            frame.NavigationUIVisibility = NavigationUIVisibility.Hidden;
            frame.Navigate(new EmptyPage());
            newRadTab.Content = frame;
            this.Items.Add(newRadTab);

            var newRadTab2 = new RadTabItem();
            newRadTab2.Header = "Tab 2";
            var frame2 = new Frame(){ AllowDrop = false };
            frame2.NavigationUIVisibility = NavigationUIVisibility.Hidden;
            frame2.Navigate(new EmptyPage());
            newRadTab2.Content = frame2;
            this.Items.Add(newRadTab2);
        }

2 changes compared to your original code are the AllowDrop settings.

Regards,
Petar Mladenov
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

[minh]

Hi Petar,

Thank you so much. It's working your workaround solution.

Best regards,

Minh Tuan