Comment afficher les éléments Listview horizontalement dans XAML?

Question

Je développe une application Windows Store 8.1 en utilisant C# et xaml. J'ai une exigence de l'interface utilisateur comme ci-dessous

J'ai une liste d'éléments à afficher qui doit être groupé, donc pour cela, je pris un listview et je l'ai fait le regroupement, ses éléments ListView fine.The de travail sont alignés verticalement mais je veux les aligner horizontalement comme sur l'image. J'ai ajouté le code ci-dessous à la liste, mais cela ne fonctionne pas.

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

Quelqu'un peut-il s'il vous plaît me aider à résoudre ce problème. Merci d'avance.

Answer 1

Je suis sûr que vous avez juste besoin de définir MaximumRowsOrColumns = "2" fondamentalement que vous voulez commencer à l'emballage à 2 éléments. Mis à un, il va juste envelopper après un élément et n'est pas différent d'un panneau de pile verticale.

Ensuite, vous devrez probablement modifier la largeur.

Windows 8.1 how to automatically wrap grid items?

Answer 2

J'ai mis le MaximumRowsOrColumns = "2" dans le ItemsWrapGrid, il fonctionne très bien. S'il vous plaît vérifier mon code pour voir si vous avez manqué quelque chose. Dans le 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> 

Dans les 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; 

    } 
} 

Le résultat: