Question

正在使用C＃和xaml开发Windows应用商店8.1应用。我有一个类似于

的用户界面要求

我有一个要显示的项目列表，必须进行分组，所以为此我采用了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;

    }
}

结果：

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

2 个答案: