Stackpanels weird sizing issue

General
1

Stackpanel wrap behavior not as expected

The stackpanel’s wrapping does not seem to behave as expected. As shown in the screenshot, the text 4800 of the last textbox should ideally have stayed within the content region of the parent grid, but it doesn’t.

<Text ux:Class="ntf.Text" Font="{Resource LatoLight}" FontSize="12" Color="{Resource TextColor}" TextWrapping="Wrap"/><Text ux:Class="ntf.TextValue" Font="{Resource LatoLight}" FontSize="12" Color="{Resource TextValueColor}" TextWrapping="Wrap"/><Text ux:Class="ntf.TextBold" Font="{Resource RobotoBold}" FontSize="18" Color="{Resource TextValueColor}" TextWrapping="Wrap"/>
<Text ux:Class="ntf.TextHighlight" Font="{Resource LatoLight}" FontSize="15" Color="{Resource TextColor}" TextWrapping="Wrap"/>
<Text ux:Class="ntf.TextHighlightValue" Font="{Resource LatoLight}" FontSize="15" Color="{Resource TextValueColor}" TextWrapping="Wrap"/>
<Text ux:Class="ntf.TextItalic" Font="{Resource LoraItalic}" FontSize="15" Color="{Resource TextColor}" TextWrapping="Wrap"/>

<!--  ntf styles -->

<DockPanel ux:Class="HotelCard" Margin="4,12">

<!--  ntf styles -->
<Text ux:Class="ntf.Text" Font="{Resource LatoLight}" FontSize="12" Color="{Resource TextColor}" TextWrapping="Wrap"/><Text ux:Class="ntf.TextValue" Font="{Resource LatoLight}" FontSize="12" Color="{Resource TextValueColor}" TextWrapping="Wrap"/><Text ux:Class="ntf.TextBold" Font="{Resource RobotoBold}" FontSize="18" Color="{Resource TextValueColor}" TextWrapping="Wrap"/>
<Text ux:Class="ntf.TextHighlight" Font="{Resource LatoLight}" FontSize="15" Color="{Resource TextColor}" TextWrapping="Wrap"/>
<Text ux:Class="ntf.TextHighlightValue" Font="{Resource LatoLight}" FontSize="15" Color="{Resource TextValueColor}" TextWrapping="Wrap"/>
<Text ux:Class="ntf.TextItalic" Font="{Resource LoraItalic}" FontSize="15" Color="{Resource TextColor}" TextWrapping="Wrap"/>
<Rectangle Layer="Background" ux:Name="dpHotelCard" Color="#ecf0f1" Opacity="0.1" CornerRadius="9"/>
<Grid Columns="auto,1*" Dock="Top">
    <Panel Width="110">
        <Rectangle Color="Blue" Margin="6" CornerRadius="5" Layer="Background" Clicked="{clicked}">            <ImageFill Url="{img}" StretchMode="UniformToFill" />
        </Rectangle>
    </Panel>
    <StackPanel Alignment="Left" ContentAlignment="Left">
        <ntf.TextBold Value="{name}" />
        <WrapPanel Orientation="Horizontal" Alignment="Left" >
            <ntf.TextHighlight Value="Likeability Score:" Margin="3"/>
            <ntf.TextHighlightValue Value="{rating}" Margin="3"/>
        </WrapPanel>

        <WrapPanel Orientation="Horizontal" Alignment="Left" >
            <ntf.TextHighlight Value="Reviews" Margin="3"/>
            <ntf.TextHighlightValue Value="{reviews}" Margin="3"/>        </WrapPanel>
        <WrapPanel Orientation="Horizontal" Alignment="Left" >
            <ntf.TextHighlight Value="Price Range(NRs): " Margin="3"/>
            <ntf.TextHighlightValue Value="{price.min}" Margin="3,3,0,3"/>
            <ntf.TextHighlightValue Value=" - " TextAlignment="Center"/>
            <ntf.TextHighlightValue Value="{price.max}" Margin="0,3,3,3"/>
        </WrapPanel>    </StackPanel>
</Grid>



![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/qNOzKX8x9T2i-legacy-files-9574QM9g3KeCJ2wW-o9TyZspGy0K0VsfFfPTnPjmZ.png)
2

On initial glance it does appear something is indeed wrong with the layout. I’ll have to test it and try to find the problem.

3

@edA-qa mort-ora-y : yes please give it a look, as I’m facing similar wrapping and overflow issues here and there.

4

I can reproduce the problem. There is a likely workaround, remove the various Alignment="Left" on the WrapPanel, and possible StackPanel. Using variations of that I can get the desired layout.

These alignments are communicating that they don’t care about the size of the parent. I’m trying to determine now whether this is the correct behaviour here or something has indeed gone wrong. It’s often hard to tell in complex examples (many layers of layout).

5

It does appear to be a defect in how WrapLayout is calculating it’s size. I’ve created an issue to fix this.