Responsives Windows App-Element

Question

Gibt es ein XAML-Element, das automatisch für Unterelemente, die nicht genügend Platz in einer Zeile haben, in eine neue Zeile umgebrochen wird?

Was ich meine ist, dass auf einem breiten Bildschirm werde ich bekommen:

Box1 Box2 Box3 

Und auf einem schmalen eins:

Box1 Box2 

Box3 

Ohne auf Ereignisse hören mit und fixieren Sie es durch Code.

Die Kommentare erwähnen VariableSizedWrapGrid als eine Lösung. Aber ich kann nicht herausfinden, wie man es wickelt.

Answer 1

Sie können eine einfache GridView verwenden, um es zu tun. Wenn Sie keine Höhe setzen, sollte es wie ein Charme funktionieren.

<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> 

Answer 2

Je nach Anforderung, mit der WrapPanel Kontrolle in WinRTXamlToolkit Ihren Wünschen entspricht.
Beispielcode hier:

<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> 

Und die Ausgabe hier: