Ok, stupid beginner question here, but how do I visually edit what goes into each tab for WPF UI Desktop using Visual Studio 2019?
When I drag the Tab Control into the design window, it places it just fine. But, if I try to add anything, the items do not show up per tab. Is there some trick to be able to edit a multi-tab XAML document visually?
10 Answers, 1 is accepted
Hello Todd,
If I understand this correctly, you want to drag/drop a control in the Visual Studio's designer (from the toolbox) and this operation should add the control into RadTabItem's content. Please correct me if I am wrong.
If this is your case, you can select the corresponding RadTabItem in the designer by clicking on it. Then drag/drop a control inside the area where the content should be.
Note that the design-time selection and adding into the content will work only if the "design" folder is presented in the directory from where the Telerik dlls are referenced. The folder contains dlls implementing additional design-time logic and are automatically used by Visual Studio (without the need of referencing them manually).
Regards,
Martin Ivanov
Progress Telerik
Rank 1
Create a new WPF UI Project for C#.
Add a RAD Tab Control. It appears properly in the design view.
Select a RAD Tab Item in the Design View.
Drag a RAD Button to the Design View. It adds a new TAB and does not put the button in the Design View.
Native Visual Studio Tab Controls and buttons do not do this but work properly.
Rank 1
Rank 1
By the way, you can see the problem in the XAML window. Telerik is not putting the RADButton in the hierarchy of the tab. It is trying to add the button as another tab item. Does not seem to matter what I click.
See below for the code that is created. When I try VS Native controls, they work as expected.
<Grid>
<telerik:RadTabControl HorizontalAlignment="Stretch" Margin="128,49,226,168" VerticalAlignment="Stretch">
<telerik:RadTabItem x:Name="RadTabItem10" Header="Tab item 1"/>
<telerik:RadTabItem x:Name="RadTabItem11" Header="Tab item 2"/>
<telerik:RadTabItem x:Name="RadTabItem12" Header="Tab item 3"/>
<telerik:RadButton Content="Button" Height="Auto" Width="Auto"/>
</telerik:RadTabControl>
</Grid>
Hello Todd,
Thank you for the additional information. I was able to reproduce this on my side. I will investigate this and let you know about my findings tomorrow.
About the Discord, no, Telerik doesn't have a channel there. Also, note that this is a community based forum, which means that it is not necessary to receive an answer from the Telerik team. If you need a guaranteed answer and a shorter timespan between the replies, I would suggest you to use the support system in your telerik.com account, and open a ticket from there.
Regards,
Martin Ivanov
Progress Telerik
Hello Todd,
It turned out that the issue on my side was caused by some dlls mixing. Here are some steps that you can try in order to setup the environment you are looking for.
- Create a new WPF application. No need to use the Telerik Visual Studio Extensions. This can be a clean WPF project.
- Make sure that the Visual Studio ToolBox uses the Telerik version that you want to use in your project. You can ensure this by opening the ToolBox Configuration Wizard and clicking on the Finish button. This will restart Visual Studio.
- When the project starts again, open the Visual Studio ToolBox and find RadTabControl. Then drag drop it into the view. This will add the control with few tabs in XAML.
- Select one of the RadTabItems by clicking on it in the designer or in XAML. This will add a border around it.
- Find an element (for example RadButton) in the toolbox and drag it over the selected tab item. This will show a border indicating that you can drop inside the tab item.
- Drop the element insider the tab item.
You can see those steps shown in the attached picture.
Can you please try this and let me know if it helps?
Regards,
Martin Ivanov
Progress Telerik
Rank 1
It still is not putting it in the right place. It keeps adding the button to the end.
<telerik:RadTabControl HorizontalAlignment="Stretch" Margin="27,34,80,75" VerticalAlignment="Stretch">
<telerik:RadTabItem x:Name="RadTabItem1" Header="Tab item 1"/>
<telerik:RadTabItem x:Name="RadTabItem2" Header="Tab item 2"/>
<telerik:RadTabItem x:Name="RadTabItem3" Header="Tab item 3"/>
<telerik:RadButton Content="Button" Height="Auto" Width="Auto"/>
</telerik:RadTabControl>
I can manually edit the XAML to make it work; but that defeats the whole purpose.
Rank 1
Rank 1
Hello Todd,
Thank you for the additional information. You are on the right track. In order to add items in the RadTabControl's content area, you will need to click onto a RadTabItem in order to select it. However, if you drag/drop over the RadTabItem, its Content gets replaced. To achieve your requirement you will need to drop over the content area when a tab is selected. But, I am afraid that currently, this doesn't work, because of a changed introduced in the design-time related logic of RadTabControl.
I have logged a bug report in our feedback portal where you can track this issue's status. Also, updated your Telerik points.
To work this around, add an empty Grid with a transparent Background to the RadTabItem instances in XAML. This will allow you to drag/drop inside the content area when you select a tab. Check the attached video to see how to do this.
Regards,
Martin Ivanov
Progress Telerik