Layout not correct when StackPanel FlowDirection is RightToLeft

Neo 421 Reputation points
2023-05-14T15:02:17.06+00:00

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?

Universal Windows Platform (UWP)
{count} votes

Accepted answer
  1. Junjie Zhu - MSFT 16,151 Reputation points Microsoft Vendor
    2023-05-16T09:03:34.0166667+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful