如何在XAML中水平顯示Listview項目？

正在開發使用C＃和xaml的Windows Store 8.1應用程序。我有一個像下面如何在XAML中水平顯示Listview項目？

我有一個項目的列表中顯示的已被分組，所以爲了這個，我花了ListView和我已經做了一組UI需求，它的工作罰款。列表視圖項對齊垂直但我想像圖片中水平對齊它們。我已將下面的代碼添加到列表視圖中，但它不起作用。

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

有人可以幫我解決這個問題。在此先感謝。

來源

2016-12-15 Santhosh Kumar

我敢肯定，你只需要設置MaximumRowsOrColumns =「2」基本上你想開始包裝在2個元素。設置爲1時，它將只包裝一個元素，與垂直堆棧面板沒有區別。

然後你可能需要調整寬度。

Windows 8.1 how to automatically wrap grid items?

來源

2016-12-16 01:26:18 Jun

它沒有工作了，它工作得很好，當有沒有分組。但是，當我分組的數據，然後它不工作 –

試試這個：http://stackoverflow.com/questions/33782294/uwp-grouped-gridview-with-wrapgrid你可以使用網格視圖，而不是一個列表視圖 – Jun

我已經設置了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; 

    } 
}

結果：

來源

2016-12-19 07:25:17

如何在XAML中水平顯示Listview項目？

回答

相關問題