[SOLVED] Creating A Multiline StackPanel

Creating A Multiline StackPanel

I'm trying to create a stackpanel in WinRT that will wrap to the next line when needed. I've tried WrapGrid and VariableSizeWrapGrid but seem to be having issues with the item size and layout.

My aim is to have a list of names separated by a "," that when I click on the name I can navigate to a new page with the Item passed as the navigation argument.

I Don't Want The Items
To Line Up Like This

Which happens if I use a grid. Instead I want something like

Name 1, Name Two, Name Three
Name Four, Name Five, Name Six

And clicking on a name fires an event. Each "Name" is a separate item in a collection.

Solution

My first thought is that that doesn't sound very metro-esk. That being said, this library has what you want.

WrapPanel - WrapPanel ported from Silverlight. Allows variable sized controls and wraps to a new line when needed.

There is a post about where it came from plus a sample app located here.

If this isn't quite what you need you should be able to modify it to what you want fairly easily.

Windows Community Toolkit indeed has a WrapPanel layout. I found it useful in WinUI notably since L10N support does not work with TextBlock's Runs so you can use it to wrap multiple TextBlocks instead. As in:

<c:SettingsCard x:Uid="SettingsCardPointToPeekDelay" IsEnabled="{x:Bind Settings.PeekWhenOverItem, Mode=OneWay}">
    <c:SettingsCard.Description>
        <c:WrapPanel Orientation="Horizontal">
            <TextBlock x:Uid="TextBlockPointToPeekDelayBegin" />
            <TextBlock><Run>&#160;</Run></TextBlock>
            <TextBlock Text="{x:Bind iSliderDelay.Value, Mode=OneWay}" />
            <TextBlock><Run>&#160;</Run></TextBlock>
            <TextBlock  x:Uid="TextBlockPointToPeekDelayEnd" />
        </c:WrapPanel>
    </c:SettingsCard.Description>
    <Slider x:Name="iSliderDelay" Value="{x:Bind Settings.PeekWhenOverItemDelay, Mode=TwoWay}" Minimum="0" Maximum="3000" StepFrequency="100" SmallChange="50" />
</c:SettingsCard>