XAMLにリストビュー項目を水平に表示する方法は？

Question

C＃とxamlを使用してWindows Store 8.1アプリを開発しています。 は、私はその作業fine.Theのリストビュー項目が並んでいる、私はリストビューを取って、私はグループ化を行っている。このためので、私は、グループ化されなければならない表示する項目のリストを持っている以下

のようなUI要件を持っています垂直にしかし私は写真のようにそれらを水平に整列させたいと思う。 以下のコードをlistviewに追加しましたが、機能しません。

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

誰かがこの問題を解決するのに手伝ってください。 ありがとうございます。

Answer 1

基本的にMaximumRowsOrColumns = "2"に設定するだけで、基本的に2つの要素で折り返しを開始する必要があります。 1に設定すると、1つの要素の後に折り返され、垂直のスタックパネルと同じです。

次に、幅を調整する必要があります。

Windows 8.1 how to automatically wrap grid items?

Answer 2

私はそれが正常に動作し、MaximumRowsOrColumns ItemsWrapGrid中= "2" を設定しています。あなたが何かを見逃しているかどうか私のコードをチェックしてください。 MainPage.xaml.csで

<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> 

：

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; 

    } 
} 

結果：