ProgressBar track height is not overridable

[AndrewKeepCoding]

Describe the bug

The ProgressBar track height is not overridable.
For example, the code below should render a ProgresBar with a track that fills (or almost fills) the green border,

<Grid>
    <Grid.Resources>
        <x:Double x:Key="ProgressBarTrackHeight">50</x:Double>
    </Grid.Resources>
    <ProgressBar
        Height="50"
        BorderBrush="LightGreen"
        BorderThickness="1"
        Maximum="100"
        Value="70" />
</Grid>

but renders this instead:

Steps to reproduce the bug

Use the code above.

Expected behavior

ProgressBarTrackHeight should be applied to the track height.

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.4.2: 1.4.231008000

Windows version

No response

Additional context

This issue was supposed to be fixed by #6061.

[AndrewKeepCoding]

For those who needs a quick workaround until this issue gets fixed, something like this seems to work so far:

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()
    {
        // FindDescendants() is from the CommunityToolkit.WinUI.Extensions NuGet package.
        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();
    }
}

[castorix]

If I add MinHeight ="50", I get (with 1.4.230822000 version) :

[AndrewKeepCoding]

That's way simple if you won't change the Height dynamically.

So, we can do:

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

Thanks!

[gegao18]

Thanks for reporting this. Closing issue now that there's a MinHeight workaround.

[FireController1847]

@gegao18 Not sure if that's really a solid solution here — it's still not possible to change the height of the progress bar dynamically. It seems to me like the workaround doesn't work for this particular case.

[FireController1847]

For those who needs a quick workaround until this issue gets fixed, something like this seems to work so far:

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()
{
    // FindDescendants() is from the CommunityToolkit.WinUI.Extensions NuGet package.
    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();
}

}

It's ugly, but here's the version I got to work on my .NET MAUI project, in case anyone is interested:

using Microsoft.Maui.Handlers;
#if WINDOWS
using CommunityToolkit.WinUI;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Shapes;
using Microsoft.UI.Xaml.Controls;
using System.Linq;
#endif

namespace MVVM.Handlers {

    /// <summary>
    /// Used to provide customizations for the ProgressBar.
    /// </summary>
    public class CustomProgressBarHandler : ProgressBarHandler {

#if WINDOWS
        /// <inheritdoc/>
        protected override ProgressBar CreatePlatformView() {
            ProgressBar progressBar = base.CreatePlatformView();

            // Apply height patches
            long callbackToken = 0;

            // Manually searches for sub-elements and updates their associated heights.
            void UpdateHeight() {
                foreach (FrameworkElement element in progressBar.FindDescendants().OfType<FrameworkElement>().Where(x => x is Grid or Rectangle)) {
                    element.Height = progressBar.Height;
                }
            }

            // Called when the <see cref="FrameworkElement.HeightProperty"/> for the progress bar is changed.
            void OnHeightPropertyChanged(DependencyObject sender, DependencyProperty property) {
                UpdateHeight();
            }

            // Attach events
            progressBar.Loaded += (sender, e) => {
                callbackToken = progressBar.RegisterPropertyChangedCallback(ProgressBar.HeightProperty, OnHeightPropertyChanged);

                // Update height to our desired styling
                progressBar.Height = 50;
            };
            progressBar.Unloaded += (sender, e) => {
                progressBar.UnregisterPropertyChangedCallback(ProgressBar.HeightProperty, callbackToken);
            };

            return progressBar;
        }
#endif

    }

}

This avoids the creation of a new class which creates all sorts of weird issues with resources and default styling.