UWP 中 ListBox 内的 WrapPanel

Posted 2023-02-19

【中文标题】UWP 中 ListBox 内的 WrapPanel

【英文标题】：WrapPanel inside ListBox in UWP

【发布时间】：2016-04-07 02:34:04

【问题描述】：

我希望在我的ListBox 中添加WrapPanel，以便它的项目垂直和水平包装。我能够在 Windows Phone 8 Sliverlight 中使用 Microsoft 工具包和以下代码实现这一点；

Windows Phone 8

<ListBox x:Name="ListSection" ItemsSource="Binding Section" > 
    <ListBox.ItemsPanel>
       <ItemsPanelTemplate>
          <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel>
       </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
<ListBox.ItemTemplate>
 <DataTemplate>
  <StackPanel Margin="20">
   <Image Source="Binding ImagePath" Width="80" Height="80"></Image>
   <TextBlock Style="StaticResource PhoneTextBlockBase"
                HorizontalAlignment="Center"
                Foreground="Black"
                Text="Binding Header"
                FontWeight="Bold"
                VerticalAlignment="Center" />
 </StackPanel>
</DataTemplate>

我知道微软工具包在 UWP 中不可用，是否有可能在 UWP 中实现这种行为？

UWP 不工作

    <ListBox x:Name="ItemsListBox" ItemsSource="Binding Section">
      <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
         <StackPanel HorizontalAlignment="Stretch"></StackPanel>
      </ItemsPanelTemplate>
      </ListBox.ItemsPanel>
      <ListBox.ItemTemplate>
      <DataTemplate>
       <StackPanel>
          <Image Source="Binding ImagePath" Width="80" Height="80"></Image>
          <TextBlock  HorizontalAlignment="Center"
                      Foreground="Black"
                      Text="Binding Header"
                      FontWeight="Bold"
                      VerticalAlignment="Center" />
       </StackPanel>
       </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

谢谢！

【问题讨论】：

您能否更全面地解释一下“不工作”。究竟是什么不工作？

谢谢@chrisF 列表框的项目全部水平显示，它没有被包装 GraceF 抱歉它不是重复的（我知道VariableSizedWrapGrid 的用法）

在您的示例代码中有一个 StackPanel 作为 ItemsPanel。将 ItemsPanelTemplate 设置为 ItemsWrapGrid

【参考方案1】：

您必须使用 ListView 和 ItemsWrapGrid 作为 ItemsPanel

您可以在这里查看 MSDN 文档的示例

https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx

此示例适用于 GridView，但适用于 ListView

<GridView>
<GridView.ItemsPanel> 
    <ItemsPanelTemplate>
        <ItemsWrapGrid Orientation="Horizontal"/>  
    </ItemsPanelTemplate> 
</GridView.ItemsPanel> 

您可以使用属性 O​​rientation 垂直或水平设置项目。

【参考方案2】：

在项目WinRTXamlToolkit中有一个用于UWP的Toolkit WrapPanel的端口。

您可以从NuGet获取它。

然后在你的Page 中添加这个前缀：

xmlns:toolkit="using:WinRTXamlToolkit.Controls"

现在您可以像以前一样使用<toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel>。

【参考方案3】：

@ARH 您需要创建一个自定义 Panel 类，该类继承面板类并覆盖 MeasureOverride 和 ArrangeOverride 方法。查看以下链接以供参考。 https://msdn.microsoft.com/en-us/library/windows/apps/mt228347.aspx http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx

【参考方案4】：

WrapPanel 可从Microsoft UWP Toolkit 获得。

这是一些示例代码（使用v5.0.0）：

...

xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"

...

<ListView
    Name="WrapPanelContainer" 
    Width="310" Height="200"
    Margin="0,40,0,0"
    HorizontalAlignment="Left"
    Background="LightBlue"
    IsItemClickEnabled="True"
>
    <ListView.Resources>
        <Style TargetType="ListViewItem">
            <Setter Property="MinWidth" Value="0"/>
            <Setter Property="MinHeight" Value="0"/>
            <Setter Property="Padding" Value="0"/>
        </Style>
    </ListView.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel VerticalSpacing="10" HorizontalSpacing="10" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <Rectangle Fill="Red" Width="100" Height="50"/>
    <Rectangle Fill="Blue" Width="200"  Height="50"/>
    <Rectangle Fill="Green" Width="50"  Height="50"/>
    <Rectangle Fill="Yellow" Width="150"  Height="50"/>
</ListView>

注意：这里的ListItemView 样式删除了多余的填充，允许WrapPanel 间距属性成为布局的控制点。