How to change font size (specifically chevron size) of BreadcrumbBar control?-CodePudding

I am designing an app using Windows App SDK and WinUI 3 and trying to figure out a way to change the size of the chevrons in BreadcrumbBar. I created a data item template to change the styling of the BreadcrumbBarItem(s) but now need to adjust the font size of the chevrons to match that of the text.

Essentially I am trying match the settings app design in Windows 11, as seen in the image below. Any thoughts on how to accomplish this?

Windows 11 Settings App - BreadcrumbBar

CodePudding user response：

You can do it this way:

MainWindow.xaml.cs

using Microsoft.UI;
using Microsoft.UI.Xaml;
using System.Collections.Generic;

namespace BreadcrumbBars;

public record Item(string Text, double FontSize, double Width);

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    public List<Item> Items = new()
    {
        new Item(Text: "Item#1", FontSize: 30.0, Width: 300.0),
        new Item(Text: "Item#2", FontSize: 20.0, Width: 200.0),
        new Item(Text: "Item#3", FontSize: 10.0, Width: 100.0),
    };
}

MainWindow.xaml

<Grid.Resources>
    <!-- You can find this in the generic.xaml. -->
    <x:Double x:Key="BreadcrumbBarChevronFontSize">30</x:Double>
</Grid.Resources>
<Grid>
    <BreadcrumbBar ItemsSource="{x:Bind Items}">
        <BreadcrumbBar.ItemTemplate>
            <DataTemplate x:DataType="local:Item">
                <TextBlock
                    Width="{x:Bind Width}"
                    FontSize="{x:Bind FontSize}"
                    Text="{x:Bind Text}" />
            </DataTemplate>
        </BreadcrumbBar.ItemTemplate>
    </BreadcrumbBar>
</Grid>