Customizing-Appearance.md

layout	post
title	Customizing Appearance — TabbedWindow | Syncfusion®
description	Templates, new-tab button, and tab state styling guidance for TabbedWindow.
platform	WPF
control	TabbedWindow
documentation	ug

Customizing Appearance

This page shows how to customize SfTabItem header and content templates, style the new‑tab button, and tune tab visual states for the TabbedWindow UX.

Header and Content templates for SfTabItem

Use ItemTemplate and ContentTemplate to present icons, badges, editable headers, and rich content inside tabs. Keep header templates lightweight to avoid layout overhead when many tabs are open.

{% tabs %}

{% highlight XAML %}

<syncfusion:SfTabControl ItemsSource="{Binding OpenTabs}" ItemTemplate="{StaticResource TabHeaderTemplate}" ContentTemplate="{StaticResource TabContentTemplate}" /> {% endhighlight %}

{% highlight C# %}

{% endtabs %}

Styling the new‑tab button

NewTabButtonTemplate

Control visibility and appearance of the new‑tab button using EnableNewTabButton and NewTabButtonTemplate. Provide accessible content and keyboard focus visuals for the button.

{% tabs %}

{% highlight XAML %}

<syncfusion:SfTabControl NewTabButtonTemplate="{StaticResource NewTabButtonTemplate}" EnableNewTabButton="True" /> {% endhighlight %} {% endtabs %}

NewTabButtonStyle

NewTabButtonStyle targets the internal Button used for the new‑tab affordance and controls visual properties such as size, background, border and padding without replacing the element tree.

{% tabs %}

{% highlight XAML %}

<syncfusion:SfTabControl EnableNewTabButton="True" x:Name="maintabcontrol"> syncfusion:SfTabControl.NewTabButtonStyle <Style TargetType="{x:Type Button}"> </Style> </syncfusion:SfTabControl.NewTabButtonStyle> <syncfusion:SfTabItem Header="Tab 1" Content="Tab 1 Content"/> <syncfusion:SfTabItem Header="Tab 2" Content="Tab 2 Content"/> <syncfusion:SfTabItem Header="Tab 3" Content="Tab 3 Content"/> </syncfusion:SfTabControl>

{% endhighlight %}

{% endtabs %}