Hello,
I have changed the status of the item to "Declined". This is not an issue in the TabView control.
Here is more information about the tabs: Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. All tabs are in one panel - the header panel. When one header item is not visible - it is not visible inside the panel. When there are not visible items at all, the panel is also not visible. This is by design and the way how the TabView works.
Regards,
Didi
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi Brandon,
My apologies for making it more complicated that it have needed to be. Let me be more direct with a few statements directly addressing your numbered items.
Now, please let me go into more detail to explain and offer a way you can solve both problems
This is by design, because there are no "offscreen" tab contents (explained below)... however, there is still a bug. The bug is that the content area is not being hidden when that TabViewItem is currently selected (or it is the only TabViewItem).
If you want to hide everything, use IsVisible on the RadTabView itself (instead of the the TabViewItem):
<telerik:RadTabView IsVisible="False" .../>
More Detail: What I was trying to explain, in my overly complicated answer, is that the tab header and the content area are not connected together as a single continuous UI element that can be hidden as a whole. Although they are visually designed to appear connected, there is only ever 1 primary tab content area and area is shared by all the tab headers. When the user tabs on a tab header, we programmatically swap out the content area's content to that tab item's content (i.e. there are no "offscreen" tab content areas).
Please run try my example and click the button multiple times (which sets IsVisible = !IsVisible), it will show and hide that TabViewItem's header accordingly.
Important: If you have the TabView inside a parent that "squeezes", like a VerticalStackLayout or Auto-sized Grid RowDefiniton, then that space may not be given back to the TabView. This is a long-known problem in Xamarin.Forms that is still present in MAUI, you can see a solution here Controls Are Not Appearing.
If you can update my demo so that it replicates the header problem (without being inside a StackLayout or Auto-sized Grid row), please do that and send the project back to me. I will include it with the backlog item for the dev team.
Now that you've explained what you're trying to do, I have another idea for you to try. Instead of trying to manually handle IsVisible for that TabViewItem, you can just remove and add it to the TabView as needed using Items.Add() (and Items.Remove()).
To explain:
1) Move the CT TabViewItem's definition to local Resources, instead of inside the TabView.
2) Now you can add it, if needed.
Regards,
Lance | Manager Technical Support
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hi Lance,
Thank you for your reply. You may misunderstood my message. Actually, there are 2 problems. Let me elaborate.
1. Cannot set whole tab item as invisible when open the whole TabView.
I want to use the same tab view for different scenario and the CT is not the first tab item. I do not want to show it when I open this page for some cases. But the IsVisible field is no effect when I set it to false during open this page.
2. The tab Header is always invisible and it is not related to the IsVisible Field. I am not using the IsVisible field to control the header, I am using IsVisible to control the whole tab item. Even when I removed the IsVisible setting. The header is still hidden.
Regards,
Brandon
Hello Brandon,
Thank you for reporting this behavior, and sharing a screenshot. Before I go into my findings, I should back up and explain how the TabView works.
This is because the RadTabView is a UI virtualized control that reuses the main content area. You can conceptualize the TabView as having 1 main content area and many tab headers, each of those tab headers invoke content updates of that main area.
Here's a visual representation:
When you select a tab header, the main content area gets replaced with the selected TabViewItem.Content. The main content area is supposed to always be visible with the currently selected tab's contents.
I have a few comments to explain the situation.
The problem you're experiencing is because you've set IsVisible to the currently selected TabViewItem. Also, since there is only 1 TabViewItem, that it is going to be the selected item by default. This has a couple issues associated with it:
I will add this issue to the backlog. Since we're still in preview and are actively working multiple items, I cannot make any sort of promise as to when this can get handled.
So, I have an idea that you can use as a workaround for this.
Add a blank "placeholder" TabViewItem, this will allow you to keep the tab header's panel always visible AND will allow you to switch to blank content when you hide the last TabViewItem.
I have attached a demo project that shows these in action. Run it and click the button. You will see the following at runtime:
Here's the relevant code:
<telerik:RadBorder BorderColor="LightBlue"
BorderThickness="1"
CornerRadius="15">
<Grid RowDefinitions="*,Auto">
<telerik:RadTabView x:Name="tabView">
<telerik:TabViewItem HeaderText="CT">
<Label Text="This is the content of the CT tab" />
</telerik:TabViewItem>
<!-- This is a placeholder item that will allow the TabView to be empty -->
<telerik:TabViewItem HeaderText=""/>
</telerik:RadTabView>
<Button Text="Toggle Tab1 Visibility"
Grid.Row="1"
Clicked="Button_OnClicked" />
</Grid>
</telerik:RadBorder>
private void Button_OnClicked(object sender, EventArgs e)
{
// To demonstrate the approach, change the IsVisible value for the first TabViewItem
tabView.Items[0].IsVisible = !tabView.Items[0].IsVisible;
// Important: Only if we are still on Tab 1, we need to change to the next tab
if (tabView.SelectedItem == tabView.Items[0])
{
tabView.SelectedItem = tabView.Items[1];
}
}
I have opened a separate Feature Request on your behalf to ask the developers to consider adding a property or feature that allows you to prevent hiding the header items panel if there are no remaining header items. See > Keep TabHeader panel visible when no headers are remaining.
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.