[WinUI 3][TabView] タブにアイコンを表示する

この記事では TabView のタブにアイコンを表示する方法について説明をします。

公式サイト情報はコチラを参照してください。

環境

タブにアイコンを表示する

XAML の例

TabView にアイコンを表示するには <TabViewItem.IconSource> を使用します。

以下にコード例を示します。

この例では３つのタブがあり、１つ目は Home アイコンを、２つ目と３つ目のタブには Document アイコンを表示しています。

XAML の例

<Window
    x:Class="WinUISample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUISample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
        <TabView.TabItems>
            <TabViewItem Header="Home">
                <TabViewItem.IconSource>
                    <SymbolIconSource Symbol="Home" />
                </TabViewItem.IconSource>
                <StackPanel>
                    <TextBlock Text="Home Content" />
                </StackPanel>
            </TabViewItem>
            <TabViewItem Header="Document1">
                <TabViewItem.IconSource>
                    <SymbolIconSource Symbol="Document" />
                </TabViewItem.IconSource>
                <StackPanel>
                    <TextBlock Text="Document1 Content" />
                </StackPanel>
            </TabViewItem>
            <TabViewItem Header="Document2">
                <TabViewItem.IconSource>
                    <SymbolIconSource Symbol="Document" />
                </TabViewItem.IconSource>
                <StackPanel>
                    <TextBlock Text="Document2 Content" />
                </StackPanel>
            </TabViewItem>
        </TabView.TabItems>
    </TabView>

</Window>

タブにアイコンを表示する例

WinUi Tips

本サイトでまとめている WinUI Tips の一覧はこちらから確認できます。

Please follow and like us: