响应式 Windows 应用程序元素答案

【问题标题】：Responsive Windows App Element响应式 Windows 应用程序元素
【发布时间】：2016-08-12 03:10:45
【问题描述】：

对于一行没有足够空间的子元素，是否有任何 XAML 元素会自动换行？

我的意思是在宽屏幕上我会得到：

Box1 Box2 Box3

还有一个狭窄的：

Box1 Box2

Box3

无需监听事件并通过代码修复它。

cmets 提到 VariableSizedWrapGrid 作为解决方案。但我不知道如何让它换行。

【问题讨论】：

听起来像VariableSizedWrapGrid?
stackoverflow.com/questions/2599424/…
@Gusman ya WrapPanel 不在 UWP 中
UWP WrapPanel Replacement? 的可能副本——当然是在评论后发现的。
很高兴知道@ChrisW。我没有看到标签，问题也没有明确要求 UWP，只是 xaml。好点子。

标签： c# xaml windows-runtime windows-store-apps win-universal-app

【解决方案1】：

您可以使用简单的 GridView 来执行此操作。如果您不设置高度，它应该会像魅力一样发挥作用。

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

【讨论】：

【解决方案2】：

根据您的要求，使用WinRTXamlToolkit 中的WrapPanel 控件将满足您的需求。
示例代码在此处：

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

还有这里的输出：

【讨论】：