Search code examples
xamluwpwinui

WinUI 2 - Tabview hides Mics


I'm trying to create a tabview in my UWP app which has the 'mica' effect. What I'm looking for is something similar to the image I attached from the Files app.

Here is my current code:

<Page
    x:Class="InkAev.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:InkAev.Views"
    xmlns:settings="using:InkAev.Views.SettingsViews"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    controls:BackdropMaterial.ApplyToRootOrPageBackground="True">

    <Grid>
        <controls:TabView Background="Transparent"
                      CanReorderTabs="True"
                      IsAddTabButtonVisible="False"
                      TabWidthMode="SizeToContent">
            <controls:TabView.TabItems>
                <controls:TabViewItem IsClosable="False" MinWidth="0">
                    <controls:TabViewItem.IconSource>
                        <controls:SymbolIconSource Symbol="Setting" />
                    </controls:TabViewItem.IconSource>
                    <TextBlock Text="No Mica :("/>
                </controls:TabViewItem>
        </controls:TabView>
    </Grid>
    
</Page>

And I've attached the image of what this produces below.

Files app image

enter image description here


Solution

  • Thank you to FrozenAssassine on Discord for helping me out. Adding the below styling fixed my issue.

    <controls:TabView.Resources>
        <ResourceDictionary>
            <SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="Transparent"/>
        </ResourceDictionary>
    </controls:TabView.Resources>