WrapPanel does not contain its children

Bug Reports
1

I am trying to make this grid layout for a list of patients having the FirstName And LastName centered regardless the viewport width (for instance on an Iphone 6 view FirstName and LastName should be inline but on an Iphone5 view the Firstname should be placed on one line and LastName on the line below, both names centered of course). I am using to Text elements since the Values are bound from the JS. I posted the code for just one item in the grid since they all come from an Each iterator.

https://dl.dropboxusercontent.com/s/gqogp7pb8k6oz2r/shot_160408_153811.png

<StackPanel Margin="0,0,0,10" Padding="10" ux:Class="PatientListItem">
    <Viewbox StretchDirection="DownOnly" Margin="0,0,0,10">
        <Circle Width="250" Height="250" ClipToBounds="true">
            <Stroke Width="1" Brush="#aaa"/>
            <ImageFill StretchMode="UniformToFill">
                <HttpImageSource Url="{image}"/>
            </ImageFill>
        </Circle>
    </Viewbox>
    <StackPanel Background="#f90" >
        <WrapPanel Alignment="HorizontalCenter" Background="#f00" >
            <Rectangle  Fill="#0f0"> <Stroke Width="2" Brush="#f00"/>
                <Text Value="{givenName}" TextAlignment="Center" TextColor="{textColor}" FontSize="13"></Text>
            </Rectangle>
            <Text Value=" "/>
            <Rectangle  Fill="#0f0"> <Stroke Width="2" Brush="#f00"/><Text Value="{familyName}" TextAlignment="Center" TextColor="{textColor}" FontSize="13"/></Rectangle>
        </WrapPanel>
        <Panel Alignment="HorizontalCenter">
            <Text Value="{@type}" TextColor="{memoriaColor}" Alignment="Center" FontSize="12"/>
        </Panel>


    </StackPanel>

</StackPanel>

So far, so good, but when the viewport is smaller the preview looks like this: (The WrapPanel contents overflow.)

https://dl.dropboxusercontent.com/s/w3btyitynrjm4fi/shot_160408_155013.png

Ok. Then I remove the HorizontalCenter Alignment from the WrapPanel and the contents (Firstname and LastName) are normally contained in the WrapPanel.

https://dl.dropboxusercontent.com/s/exgt1fmubr2mnz3/shot_160408_155607.png

The overflow happens with Center Alignment, too. So how am I supposed to center the WrapPanel inside its parent StackPanel? Is this a bug? Waiting for workarounds, Thanks.

2

I think this is basically the same question as https://www.fusetools.com/community/forums/bug_reports/text_wrap_problem_using_wrappanel_with_center_alig

Without doing the string concatenation in JS now there is no real way to achieve what you want. WrapPanel doesn’t support ContentAlignment yet.