WrapPanel внутри ListBox в UWP

Я хочу добавить WrapPanel внутри моего ListBox, чтобы его элементы переносились как по вертикали, так и по горизонтали. Мне удалось добиться этого в 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>

Я понимаю, что инструментарий Microsoft недоступен в 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>

Спасибо!


xaml windows-10 windows-10-universal windows-10-mobile
person ARH    schedule 03.01.2016    source источник
comment
Не могли бы вы объяснить, что не работает немного более полно. Что именно не работает?   -  person ChrisF    schedule 03.01.2016
comment
Спасибо, @chrisF, элементы списка отображаются горизонтально, они не упакованы GraceF, извините, они не дублируются (я знаю использование VariableSizedWrapGrid)   -  person ARH    schedule 04.01.2016
comment
в вашем примере кода есть StackPanel как ItemsPanel. Установите для ItemsPanelTemplate значение ItemsWrapGrid.   -  person Tomasz Pikć    schedule 07.01.2016

Ответы (4)


arrow_upward
1
arrow_downward

Вы должны использовать 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>

вы можете использовать свойство Ориентация, чтобы установить ваши элементы вертикально или горизонтально.

person RicardoPons    schedule 22.02.2016

arrow_upward
0
arrow_downward

В проекте WinRTXamlToolkit есть порт WrapPanel из Toolkit для UWP.

Его можно получить на сайте NuGet.

Затем в вашем Page добавьте этот префикс:

xmlns:toolkit="using:WinRTXamlToolkit.Controls"

Теперь вы можете использовать <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel>, как это было раньше.

person Grace Feng    schedule 05.01.2016

arrow_upward
0
arrow_downward

@ARH вам нужно создать собственный класс панели, который наследует класс панели и переопределяет методы 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

person arun    schedule 12.01.2016

arrow_upward
0
arrow_downward

WrapPanel доступен в наборе инструментов Microsoft UWP.

Вот пример кода (с использованием 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 быть контрольными точками для компоновки.

person Zodman    schedule 08.05.2020