목록 뷰 항목을 XAML에 가로로 표시하는 방법?

Question

C# 및 xaml을 사용하여 Windows Store 8.1 앱을 개발 중입니다. 나는 내가리스트 뷰를했다 이것 때문에, 그룹화 할 수 있고 내가 그룹화를 수행 한 어떤 표시하는 항목의 목록을

아래 같은 UI의 요구 사항이 그 작업 네저 목록보기 항목이 정렬되어 있습니다 수직으로 그러나 나는 그림에서 같이 수평하게 정렬하고 싶다. 아래 코드를 listview에 추가했지만 작동하지 않습니다.

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

이 문제를 해결할 수있는 사람이 있습니까? 미리 감사드립니다.

Answer 1

기본적으로 MaximumRowsOrColumns = "2"로 설정해야 기본적으로 2 개의 요소를 래핑하기 시작하려고합니다. 1로 설정하면 하나의 요소 다음에 줄 바꿈을하고 수직 스택 패널과 다를 바가 없습니다.

그러면 너는 아마도 너비를 조정할 필요가있을 것이다.

Windows 8.1 how to automatically wrap grid items?

Answer 2

은 내가 ItemsWrapGrid에서 MaximumRowsOrColumns = "2"를 설정, 그것을 잘 작동합니다. 제 코드를보고 뭔가를 놓친 지 확인하십시오. 에서 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; 

    } 
} 

결과

: 그것은 작동하지 않았다