tabview MAUI

Hello Jun,

I am not quite certain why the above code is not working, as I do not have the implementations of the TabHeaderTextColor and the TabSelectedLineColor converters. A wild speculation is that you are binding the result of the TabSelectedLineColor converter to the IsVisible property, which is of type bool, not Color.

As I have mentioned in my previous post, the new TabView control is a complete rewrite, so the documentation form Xamarin.Forms might not be relevant in all cases. To help you out, I have created a small demo application, which overrides the default Style and ControlTemplate of the header items.

The important part here is you can take advantage of the VisualStateManager to style the header items, based on their state:

<Style x:Key="HeaderItemStyle" TargetType="telerikMauiControls:TabViewHeaderItem">
    <Setter Property="ContentPadding" Value="10" />
    <Setter Property="TextColor" Value="Black" />
    <Setter Property="FontFamily" Value="SegoeMDL2Assets" />
    <Setter Property="FontSize" Value="24" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="BorderColor" Value="Transparent" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="DarkGray" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="MediumBlue" />
                        <Setter Property="BorderColor" Value="MediumBlue" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

We simply style the header items for the default (Normal) state and then override the values of some properties for the other states (Disabled, Selected etc.). This is very convenient, as we do not have to resort to custom logic and converters for each property. Also, such approach eliminates the necessity to override the ControlTemplate in many cases. Of course, nothing stops us from redefining the ControlTemplate for our needs:

<ControlTemplate x:Key="HeaderItemTemplate">
    <VerticalStackLayout>
        <Label Text="{TemplateBinding Text}"
                Margin="{TemplateBinding ContentPadding}"
                TextColor="{TemplateBinding TextColor}"
                FontFamily="{TemplateBinding FontFamily}"
                FontSize="{TemplateBinding FontSize}"
                FontAttributes="{TemplateBinding FontAttributes}"
                TextDecorations="{TemplateBinding TextDecorations}"
                HorizontalTextAlignment="{TemplateBinding HorizontalTextAlignment}"
                VerticalTextAlignment="{TemplateBinding VerticalTextAlignment}" />
        <BoxView HeightRequest="4"
                    BackgroundColor="{TemplateBinding BorderColor}" />
    </VerticalStackLayout>
</ControlTemplate>

The above ControlTemplate is much simpler, as we just use TemplateBinding to bind to the corresponding styling properties. The VisualStateManager should take care of the rest.

While waiting for the documentation of the new TabView to become more complete, here is a short list of the styling properties available to the TabViewHeaderItem:

• BackgroundColor - specifies the background color of the header item
• BorderColor - specifies the border color of the header item
• BorderThickness - specifies the border thickness of the header item
• CornerRadius - specifies the corner radius of the header item
• ContentPadding - specifies the padding of the inner content of the header item
• TextColor - specifies the color of the text in the header item
• FontFamily - specifies the font family of the text in the header item
• FontSize - specifies the font size of the text in the header item
• FontAttributes - specifies the font attributes of the text in the header item
• TextDecorations - specifies the decorations of the text in the header item
• HorizontalTextAlignment - specifies the horizontal alignment of the text in the header item
• VerticalTextAlignment - specifies the vertical alignment of the text in the header item
• ImageSource - specifies the source of the image icon in the header item
• ImageAspect - specifies the aspect of the image icon in the header item
• ImageWidth - specifies the width of the image icon in the header item
• ImageHeight - specifies the height of the image icon in the header item
• ImageSpacing - specifies the spacing between the image icon and the text in the header item
• ImagePosition - specifies the position of the image icon relative to the text (Left, Top, Right, Bottom)

Attached to my post you can find the demo application, which creates the following customized header:

I hope this should help you style the TabView according to your needs. If you have more questions about this, do not hesitate to ask.

Kind regards,

Ivan

Hi,

it works. in stead of using "IsVisible", I use now "BackgroundColor", Thanks! Cheers !:-)

If I tried to add more Tab, it will work during the View Contructor:

public partial class TabContentView : ContentView

{

public TabContentView()
{
            InitializeComponent();

       var tabViewItem = new TabViewItem
            {
                HeaderText = "Tab1",
                Content = new Label
                {
                    Text = "My Custom Tab Content"
                }
            };

            this.PlotDataTabView.Items.Add(tabViewItem);}  // This shows extra Tab in UI

}

I tried to add some extra Tab from code behind (by clicking the button):

<telerikInput:RadButton x:Name="button" 
                  Text="Click me!"  
                  BorderThickness="2" 
                  BorderColor="#4488F6" 
                  AutomationId="button"
                  Clicked="button_Clicked"/>

private void button_Clicked(object sender, System.EventArgs e)
        {
            var tabViewItem = new TabViewItem
            {
                HeaderText = "Tab1",
                Content = new Label
                {
                    Text = "My Custom Tab Content"
                }
            };

            this.PlotDataTabView.Items.Add(tabViewItem); // It shows NO extra Tab in UI
        }

 <telerik:RadTabView x:Name="PlotDataTabView" GridLayout.Row="0"
                                HeaderItemStyle="{StaticResource HeaderItemStyle}"
                                 HeaderItemTemplate="{StaticResource HeaderItemTemplate}" >

                <telerik:TabViewItem HeaderText="t1" >
                    <telerikInput:RadButton x:Name="button" 
                  Text="Click me!"  
                  BorderThickness="2" 
                  BorderColor="#4488F6" 
                  AutomationId="button"
                  Clicked="button_Clicked"/>
                </telerik:TabViewItem>
                <telerik:TabViewItem HeaderText="t2" >
                   <Label Text = tab2 />
                </telerik:TabViewItem>
                <telerik:TabViewItem HeaderText="t3" >
                     <Label Text = tab3 />
                </telerik:TabViewItem>                

            </telerik:RadTabView>

Please, help.

Hello Jun,

Attached you can find the test application I have used in my attempt to reproduce the problem. According to my tests, adding a new tab dynamically on button click works as expected. I assume you are using the latest preview version 0.4.0 from January.

Could you check if the problem is still reproducible on your side with my application? If the problem persists, please, give us some more details on what platform an OS version you are testing. If the problem is not reproducible with my application, but you still cannot make it work for you, perhaps sending us a small repro application could help us isolate the reason.

Regards,

Ivan

Hi Tobias, you're correct that the MAUI TabView's structure is different form Xamarin.Forms and the older approach no longer works. This is because there's no shared visual tree between the TabHeader and the Tab content, please read Ivan's answer below for a better description.

However, this doesn't mean you cannot find the connection between what tab header belongs to which tab. In fact, the HeaderText can be used for that!

Please see my Multi-Window Tearable Tabs demo. In it, you'll see that I am able to get the original tab from the tab header's BindingContext in order to move it to a new window.

As to how you'd use this knowledge, you would need to write a behavior (or similar) to be able to use code to get those references, as it cannot be done in XAML with bindings alone. In the behavior, you can pass both a reference to the TabView and the TabViewHeaderItem, this is enough to find the original tab.