Как отображать элементы Listview по горизонтали в XAML?

Question

Я разрабатываю приложение Windows Store 8.1 с использованием C# и xaml. У меня есть требование UI, как показано ниже

У меня есть список элементов для отображения, который должен быть сгруппированы, поэтому для этого я взял ListView и я сделал группировку, его рабочие элементы fine.The ListView выровнены вертикально, но я хочу выровнять их по горизонтали, как на картинке. Я добавил приведенный ниже код в список, но он не работает.

<ListView.ItemsPanel> 
    <ItemsPanelTemplate> 
     <WrapGrid MaximumRowsOrColumns="1" HorizontalChildrenAlignment="Stretch" 
        Orientation="Horizontal"/> 
    </ItemsPanelTemplate> 
</ListView.ItemsPanel> 

Может кто-то, пожалуйста, помогите мне решить эту проблему. Спасибо заранее.

Answer 1

Я уверен, вам просто нужно установить MaximumRowsOrColumns = "2", в основном вы хотите начать обертывание на 2 элемента. Устанавливается в один, он просто обертывается после одного элемента и ничем не отличается от вертикальной панели стека.

Тогда вам, вероятно, потребуется настроить ширину.

Windows 8.1 how to automatically wrap grid items?

Answer 2

Я поставил MaximumRowsOrColumns = "2" в ItemsWrapGrid, он отлично работает. Пожалуйста, проверьте мой код, чтобы убедиться, что вы что-то пропустили. В MainPage.xaml:

<Page.Resources> 
    <CollectionViewSource x:Key="cvs" ItemsPath="showitem" x:Name="cvs" IsSourceGrouped="True"></CollectionViewSource> 
</Page.Resources> 
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <ListView Width="500" ItemsSource="{Binding Source={StaticResource cvs}}"> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <ItemsWrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal"></ItemsWrapGrid> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
       <TextBlock Text="{Binding Path=Name}" /> 
       <TextBox Width="50" BorderBrush="Blue" BorderThickness="3"></TextBox> 
       </StackPanel> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
     <ListView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <StackPanel Width="400" Height="60" Background="Blue"> 
         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding id}" Foreground="Red"></TextBlock> 
         </StackPanel> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
      </GroupStyle> 
     </ListView.GroupStyle> 
    </ListView> 
</Grid> 

В MainPage.xaml.cs:

public class test 
{ 
    public string Name { get; set; } 
} 
public class testlist 

{ 
    public string id { get; set; } 
    public List<test> showitem { get; set; } 
} 
public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
     this.InitializeComponent(); 
     List<testlist> mylist = new List<testlist>(); 
     testlist testlist = new testlist(); 
     testlist.id = "group1"; 
     testlist.showitem = new List<test>(); 
     testlist.showitem.Add(new test() { Name = "Test1" }); 
     testlist.showitem.Add(new test() { Name = "Test2" }); 
     mylist.Add(testlist); 

     testlist testlist1 = new testlist(); 
     testlist1.id = "group1"; 
     testlist1.showitem = new List<test>(); 
     testlist1.showitem.Add(new test() { Name = "Test3" }); 
     testlist1.showitem.Add(new test() { Name = "Test4" }); 
     mylist.Add(testlist1); 

     this.cvs.Source = mylist; 

    } 
} 

Результат: