How to change the ProgressBarTrackHeight height in WinUI 3?

Question

I want to change the height of the ProgressBarTrackHeight of the progressbar in WinUI-3. I dont know how to do it please help me with a code example.

<ProgressBar Width="130" Value="30" />

Answer 1

There's an issue about this in the GitHub repo.

As a workaround, until the issue gets fixed, you can create a custom ProgressBar:

public class CustomProgressBar : ProgressBar
{
    private long _heightPropertyChangedCallBackToken;

    public CustomProgressBar() : base()
    {
        Loaded += OnLoaded;
        Unloaded += OnUnloaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        _heightPropertyChangedCallBackToken = RegisterPropertyChangedCallback(HeightProperty, OnHeightPropertyChanged);
        ApplyHeight();
    }

    private void OnUnloaded(object sender, RoutedEventArgs e)
    {
        UnregisterPropertyChangedCallback(HeightProperty, _heightPropertyChangedCallBackToken);
    }

    private void ApplyHeight()
    {
        foreach (FrameworkElement element in this.FindDescendants()
            .OfType<FrameworkElement>()
            .Where(x => x is Grid or Rectangle))
        {
            element.Height = Height;
        }
    }

    private void OnHeightPropertyChanged(DependencyObject sender, DependencyProperty dp)
    {
        ApplyHeight();
    }
}

Now the Height property should just work:

<local:CustomProgressBar
    Height="50"
    Width="130"
    Value="30" />

Note that FindDescendants is from the CommunityToolkit.WinUI.Extensions NuGet package.

UPDATE

In the GitHub repo, a better option was suggested for the case that you won't change the Height dynamically. Instead of creating a custom ProgressBar, you just need to set the MinHeight:

<Grid>
    <Grid.Resources>
        <x:Double x:Key="ProgressBarTrackHeight">50</x:Double>
    </Grid.Resources>
    <ProgressBar
        MinHeight="{StaticResource ProgressBarTrackHeight}"
        Maximum="100"
        Value="70" />
</Grid>