响应式 Windows 应用程序元素

Posted 2023-04-12

【中文标题】响应式 Windows 应用程序元素

【英文标题】：Responsive Windows App Element

【发布时间】：2016-08-12 03:10:45

【问题描述】：

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

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

Box1 Box2 Box3

还有一个狭窄的：

Box1 Box2

Box3

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

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

【问题讨论】：

听起来像VariableSizedWrapGrid?

***.com/questions/2599424/…

@Gusman ya WrapPanel 不在 UWP 中

UWP WrapPanel Replacement? 的可能副本——当然是在评论后发现的。

很高兴知道@ChrisW。我没有看到标签，问题也没有明确要求 UWP，只是 xaml。好点子。

【参考方案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>

还有这里的输出：