How to change UWP TabViewItem corner radius?

Question

I want to change the default corner radius of TabViewItem. With default corner radius, it looks like this:

But I want it to have sharp edge, which means to set CornerRadius to zero. Like this:

I have tried setting the CornerRadius of the TabView to zero. I also tried using ItemTemplate like this:

<winui:TabView.TabItemTemplate>
    <DataTemplate x:DataType="viewmodels:ShapelistViewModel">
        <winui:TabViewItem
            CornerRadius="0"
            Header="{Binding}" />
    </DataTemplate>
</winui:TabView.TabItemTemplate>

Neither of them worked.

At last, I tried to edit the Template of the TabView, but didn't find anything related to CornerRadius in the Template.

Answer 1

The WinUI TabViewItems determine their CornerRadius based on the OverlayCornerRadius themeresource. To change the corner radius of all your TabViewItems, you can do the following:

<!-- In App.xaml -->
<CornerRadius x:Key="OverlayCornerRadius">0,0,0,0</CornerRadius>

<!-- On your page -->
<winui:TabView.TabItemTemplate>
    <DataTemplate x:DataType="viewmodels:ShapelistViewModel">
        <winui:TabViewItem
            Header="{Binding}">
        </winui:TabViewItem>
    </DataTemplate>
</winui:TabView.TabItemTemplate>

Another solution is to retemplate the TabViewItem by putting this style in your App.xaml:

    <Style TargetType="winui:TabViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="winui:TabViewItem">

                    <Grid x:Name="LayoutRoot"
                        Padding="{TemplateBinding Padding}"
                        Margin="-1,0,0,0"> <!-- This item will cover the separator on its left side. -->

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="LeftColumn" Width="0"/>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition x:Name="RightColumn" Width="0"/>
                        </Grid.ColumnDefinitions>
                        
                        <Grid.RenderTransform>
                            <ScaleTransform x:Name="LayoutRootScale" />
                        </Grid.RenderTransform>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />

                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPointerOver}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderPointerOverCloseButtonBackground}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderPointerOverCloseButtonForeground}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPressed}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderPressedCloseButtonBackground}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderPressedCloseButtonForeground}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundSelected}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
                                        <Setter Target="LayoutRoot.Background" Value="Transparent"/>
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="PointerOverSelected">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPointerOver}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
                                        <Setter Target="LayoutRoot.Background" Value="Transparent"/>
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="PressedSelected">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPressed}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
                                        <Setter Target="LayoutRoot.Background" Value="Transparent"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled" />

                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundDisabled}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewButtonForegroundDisabled}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderDisabledCloseButtonBackground}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderDisabledCloseButtonForeground}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="DataVirtualizationStates">
                                <VisualState x:Name="DataAvailable" />

                                <VisualState x:Name="DataPlaceholder" />
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="ReorderHintStates">
                                <VisualState x:Name="NoReorderHint" />

                                <VisualState x:Name="BottomReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation Direction="Bottom"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="TopReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation Direction="Top"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="RightReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation Direction="Right"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="LeftReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation Direction="Left"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.2"
                                          To="NoReorderHint" />
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="DragStates">
                                <VisualState x:Name="NotDragging" />

                                <VisualState x:Name="Dragging">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="Opacity"
                                             To="{ThemeResource ListViewItemDragThemeOpacity}"
                                             Duration="0" />
                                        <DragItemThemeAnimation TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="DraggingTarget" />

                                <VisualState x:Name="MultipleDraggingPrimary" />

                                <VisualState x:Name="MultipleDraggingSecondary" />

                                <VisualState x:Name="DraggedPlaceholder" />

                                <VisualState x:Name="Reordering">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="Opacity"
                                             To="{ThemeResource ListViewItemReorderThemeOpacity}"
                                             Duration="0:0:0.240" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="ReorderingTarget">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="Opacity"
                                             To="{ThemeResource ListViewItemReorderTargetThemeOpacity}"
                                             Duration="0:0:0.240" />
                                        <DoubleAnimation Storyboard.TargetName="LayoutRootScale"
                                             Storyboard.TargetProperty="ScaleX"
                                             To="{ThemeResource ListViewItemReorderTargetThemeScale}"
                                             Duration="0:0:0.240" />
                                        <DoubleAnimation Storyboard.TargetName="LayoutRootScale"
                                             Storyboard.TargetProperty="ScaleY"
                                             To="{ThemeResource ListViewItemReorderTargetThemeScale}"
                                             Duration="0:0:0.240" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="MultipleReorderingPrimary" />

                                <VisualState x:Name="ReorderedPlaceholder">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="DragOver">
                                    <Storyboard>
                                        <DropTargetItemThemeAnimation TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.2" To="NotDragging" />
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="IconStates">
                                <VisualState x:Name="Icon"/>
                                <VisualState x:Name="NoIcon">
                                    <VisualState.Setters>
                                        <Setter Target="IconBox.Visibility" Value="Collapsed"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="TabWidthModes">
                                <VisualState x:Name="StandardWidth"/>

                                <VisualState x:Name="Compact">
                                    <VisualState.Setters>
                                        <Setter Target="IconBox.Margin" Value="0,0,0,0"/>
                                        <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
                                        <Setter Target="IconColumn.Width" Value="{ThemeResource TabViewItemHeaderIconSize}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="CloseIconStates">
                                <VisualState x:Name="CloseButtonVisible"/>
                                <VisualState x:Name="CloseButtonCollapsed">
                                    <VisualState.Setters>
                                        <Setter Target="CloseButton.Visibility" Value="Collapsed"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border x:Name="TabSeparator"
                            HorizontalAlignment="Right"
                            Width="1"
                            Grid.Column="1"
                            BorderBrush="{ThemeResource TabViewItemSeparator}"
                            BorderThickness="1"
                            Margin="{ThemeResource TabViewItemSeparatorMargin}"/>

                        <Grid x:Name="TabContainer"
                            Grid.Column="1"
                            Background="{ThemeResource TabViewItemHeaderBackground}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Control.IsTemplateFocusTarget="True"
                            Padding="{ThemeResource TabViewItemHeaderPadding}"
                            FocusVisualMargin="{TemplateBinding FocusVisualMargin}">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="IconColumn" Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Viewbox x:Name="IconBox"
                                MaxWidth="{ThemeResource TabViewItemHeaderIconSize}"
                                MaxHeight="{ThemeResource TabViewItemHeaderIconSize}"
                                Margin="{ThemeResource TabViewItemHeaderIconMargin}">
                                <ContentControl x:Name="IconControl"
                                    Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TabViewTemplateSettings.IconElement}"
                                    IsTabStop="False"
                                    Foreground="{ThemeResource TabViewItemIconForeground}"
                                    HighContrastAdjustment="None" />
                            </Viewbox>

                            <ContentPresenter x:Name="ContentPresenter"
                                Grid.Column="1"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Header}"
                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                FontWeight="{TemplateBinding FontWeight}"
                                FontSize="{ThemeResource TabViewItemHeaderFontSize}"
                                Foreground="{ThemeResource TabViewItemHeaderForeground}"
                                OpticalMarginAlignment="TrimSideBearings"
                                HighContrastAdjustment="None" />

                            <Button x:Name="CloseButton"
                                Grid.Column="2"
                                Width="{ThemeResource TabViewItemHeaderCloseButtonSize}"
                                Height="{ThemeResource TabViewItemHeaderCloseButtonSize}"
                                FontSize="{ThemeResource TabViewItemHeaderCloseFontSize}"
                                Margin="{ThemeResource TabViewItemHeaderCloseMargin}"
                                Content="&#xE711;"
                                IsTextScaleFactorEnabled="False"
                                IsTabStop="False"
                                Background="{ThemeResource TabViewItemHeaderCloseButtonBackground}"
                                Foreground="{ThemeResource TabViewItemHeaderCloseButtonForeground}"
                                Style="{StaticResource TabViewCloseButtonStyle}"
                                HighContrastAdjustment="None" />
                        </Grid>
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>