Responsive Windows App Element

Question

Is there any XAML element that will automatically wrap to a new line for sub elements that don't have enough room on a line?

What I mean is that on a wide screen I'll get:

Box1 Box2 Box3

And on a narrow one:

Box1 Box2

Box3

Without having to listen to events and fix it by code.

The comments mention VariableSizedWrapGrid as a solution. But I can't figure out how to make it wrap.

Sounds like [VariableSizedWrapGrid](https://msdn.microsoft.com/library/windows/apps/xaml/windows.ui.xaml.controls.variablesizedwrapgrid.aspx)? — Chris W., Apr 19 '16 at 18:49
http://stackoverflow.com/questions/2599424/what-is-the-wpf-equivilant-for-the-flowlayoutpanel — Gusman, Apr 19 '16 at 18:50
Possible duplicate of [UWP WrapPanel Replacement?](http://stackoverflow.com/questions/33309439/uwp-wrappanel-replacement) -- which of course found right after commenting. — Chris W., Apr 19 '16 at 18:52
Good to know @ChrisW. I did not saw the tags and the question doesn't asks explicitly for UWP, just xaml. Good point. — Gusman, Apr 19 '16 at 18:52
@Gusman yea some of the little nuance differences are a pain in the @$$ — Chris W., Apr 19 '16 at 18:52
@ChrisW. Thanks. I'm checking that out now. (Trying to figure out how to get it to wrap.) — ispiro, Apr 19 '16 at 18:53
@ChrisW. OK. I can't seem to make it wrap. What's the secret? — ispiro, Apr 19 '16 at 19:00

score 0 · Answer 1 · answered Apr 20 '16 at 17:14

You can use a simple GridView to do it. If you don't set a Height, it should work like a charm.

<GridView Name="xConcerts" ItemsSource="{x:Bind Artist.UpcomingEvents, Mode=OneWay}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="songkick:EventExt">
            <Border CornerRadius="8" Background="{ThemeResource ThemeGrayHighColorBrush}" Opacity="0.8">
                <StackPanel Margin="18,2">
                    <TextBlock Text="{x:Bind FullDisplayDate, Converter={StaticResource FormatStringToDateDayConverter}}" Style="{ThemeResource ThemeDateBoldStyle}"/>
                    <TextBlock Text="{x:Bind FullDisplayDate, Converter={StaticResource FormatStringToDateMonthConverter}}" Style="{ThemeResource ThemeDateBoldStyle}" Margin="0,-4,0,0"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemContainerTransitions>
        <TransitionCollection>
            <RepositionThemeTransition/>
        </TransitionCollection>
    </GridView.ItemContainerTransitions>
</GridView>

score 0 · Answer 2 · edited Apr 22 '16 at 11:24

According to your requirement, using the WrapPanel control in WinRTXamlToolkit will meet your needs.
Sample code here:

<Page x:Class="TestDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:Tool="using:WinRTXamlToolkit.Controls"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:local="using:TestDemo"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">

<Tool:WrapPanel>
    <Button Width="200" Margin="10">1</Button>
    <Button Width="200" Margin="10">2</Button>
    <Button Width="200" Margin="10">3</Button>
</Tool:WrapPanel>
</Page>

And the output here: output

Responsive Windows App Element

2 Answers2