如何在 XAML 中水平显示 Listview 项目？答案

【问题标题】：How to Display the Listview items horizontally in XAML?如何在 XAML 中水平显示 Listview 项目？
【发布时间】：2016-12-15 09:48:17
【问题描述】：

我正在使用 C# 和 xaml 开发 Windows Store 8.1 应用程序。我有如下 UI 要求

我有一个要显示的项目列表，必须对其进行分组，所以为此我采用了一个列表视图，并且我已经完成了分组，它工作正常。列表视图项目垂直对齐，但我想像在图片。我已将以下代码添加到列表视图中，但它不起作用。

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

谁能帮我解决这个问题。提前致谢。

【问题讨论】：

标签： xaml windows-store-apps winrt-xaml

【解决方案1】：

我在 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;

    }
}

结果：

【讨论】：

【解决方案2】：

我很确定你只需要设置 MaximumRowsOrColumns="2" 基本上你想在 2 个元素处开始包装。设置为 1，它只会在一个元素之后换行，与垂直堆栈面板没有什么不同。

那么您可能需要调整宽度。

Windows 8.1 how to automatically wrap grid items?

【讨论】：

没有成功，没有分组的时候效果很好。但是当我对数据进行分组时，它就不起作用了
试试这个：stackoverflow.com/questions/33782294/… 你也许可以使用网格视图而不是列表视图