Issues with Rotating ProgressBar for Vertical Orientation In WinUI App

Question

Hi,

I am working on a custom StepBar control, and the Horizontal orientation is functioning as expected.

However, I am encountering issues when implementing the Vertical orientation.

Since the ProgressBar control does not have an Orientation property, I am using a CompositeTransform to rotate it vertically. Here is the code snippet I am using:

<ProgressBar Name="PART_ProgressBarBack"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Center"
             RenderTransformOrigin="0.5,0.5">
    <ProgressBar.RenderTransform>
        <CompositeTransform Rotation="90" />
    </ProgressBar.RenderTransform>
</ProgressBar>

The behavior is problematic:

1. When I resize the app, the ProgressBar's size and position change unexpectedly.
2. If I set HorizontalAlignment="Left", the ProgressBar disappears.

I would like to know how to correctly rotate the ProgressBar for a vertical layout without affecting its size or position.

I have attached a sample app to demonstrate the issue.

Thank you for your assistance!

https://github.com/user-attachments/files/18348236/StepBar-Vertical-Sample.zip

Answer 1

I finally solved this problem myself. my goal was this:

I was changing the width of the progressbar on app sizechanged, and it seems like rotation in WinUI has issues that were resolved by changing the height of a border (instead of width) which include progressbar and using the LayoutTransform control.

If anyone has my problems here is more information.

https://github.com/ghost1372/DevWinUI/blob/main/dev/DevWinUI.Controls/Controls/Others/LayoutTransformer.cs

https://github.com/ghost1372/DevWinUI/blob/49c082005284bbd03efa749d6938554edee23874/dev/DevWinUI.Controls/Controls/StepBar/StepBar.cs#L172C31-L172C37

https://github.com/ghost1372/DevWinUI/blob/49c082005284bbd03efa749d6938554edee23874/dev/DevWinUI.Controls/Themes/Styles/Controls/StepBar.xaml#L185

I'm also curious to know if there is a better solution without using the LayoutTransform?