Layout not correct when StackPanel FlowDirection is RightToLeft

Question

I have the following code:

<StackPanel Grid.Row="1" 
                    x:Name="bottomPanel"
                    Height="30"
                    Background="Lavender"
                    Orientation="Horizontal"
                    FlowDirection="RightToLeft">
        </StackPanel>

private void Page_Loaded(object sender, RoutedEventArgs e)
{
var imageUri = new Uri("ms-appx:///Images/RedFrontMacaw.jpg");
var imageSource = new BitmapImage { UriSource = imageUri };
for (int i = 0; i < 30; i++)
{
    this.bottomPanel.Children.Add(new Image
    {
        Source = imageSource
    });
}
// InvalidateMeasure, InvalidateArrange, UpdateLayout - none works
//this.bottomPanel.?();
}

After adding the images, the position of the images are weird. This is quite out of my expectation. I assumed that StackPanel should always handle layout automatically.

Note - FlowDirection with default LeftToRight works in this scenario.

I know UWP is dead now, m$ won't fix it. Is there any workaround for this bug?

Answer 1

Hi @Neo ,

Welcome to Microsoft Q&A!

Here is a workaround, Also defined FlowDirection="RightToLeft" in the parent Panel of the StackPanel.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="5*"/>
        <RowDefinition Height="5*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="2" FlowDirection="RightToLeft">
        <StackPanel Grid.Row="1" Background="HotPink"
                x:Name="bottomPanel"
                Height="30"
                Orientation="Horizontal"
                VerticalAlignment="Bottom"
                FlowDirection="RightToLeft">

        </StackPanel>
    </Grid>

</Grid>
    

Thank you.

Junjie

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.