在 UWP 和 XAML (C#) 中创建“表格样式”ListView答案

【问题标题】：Create "table style" ListView in UWP and XAML (C#)在 UWP 和 XAML (C#) 中创建“表格样式”ListView
【发布时间】：2017-03-25 20:29:11
【问题描述】：

我想知道是否有任何方法可以在 UWP Windows 10 应用程序中创建“类似表格”的 ListView？我需要某种表格，我可以允许用户浏览和选择文件，然后将所选文件放入列表中，有点像您在 Windows 资源管理器中看到的详细信息视图，其中包含我可以以编程方式插入的列标题和行：

string[] item = { "D:\\Music\\MyAudioFile.mp3", "MP3", "12MB" }
listview1.Items.Add(item);

有人知道我可以用什么来做这个吗？

谢谢

【问题讨论】：

标签： c# xaml listview uwp

【解决方案1】：

感谢 Lindexi，它为我指明了正确的方向……这是我开始工作的代码……

C# 后端代码：

        // Create a new StackPanel to insert as a ListViewItem
        StackPanel myStack = new StackPanel();
        myStack.HorizontalAlignment = HorizontalAlignment.Stretch;
        myStack.VerticalAlignment = VerticalAlignment.Stretch;
        myStack.Orientation = Orientation.Horizontal;

        // Create new StackPanel "Child" elements with alignment and width
        ListViewItem lv1 = new ListViewItem();
        lv1.Content = "Test Content";
        lv1.Width = 400;
        lv1.HorizontalAlignment = HorizontalAlignment.Stretch;
        lv1.VerticalAlignment = VerticalAlignment.Stretch;

        // Create new StackPanel "Child" elements with alignment and width
        ListViewItem lv2 = new ListViewItem();
        lv2.Content = "Test Content";
        lv2.Width = 100;
        lv2.HorizontalAlignment = HorizontalAlignment.Stretch;
        lv2.VerticalAlignment = VerticalAlignment.Stretch;

        // Create new StackPanel "Child" elements with alignment and width
        ListViewItem lv3 = new ListViewItem();
        lv3.Content = "Test Content";
        lv3.Width = 100;
        lv3.HorizontalAlignment = HorizontalAlignment.Stretch;
        lv3.VerticalAlignment = VerticalAlignment.Stretch;

        // Create new StackPanel "Child" elements with alignment and width
        ListViewItem lv4 = new ListViewItem();
        lv4.Content = "Test Content";
        lv4.Width = 100;
        lv4.HorizontalAlignment = HorizontalAlignment.Stretch;
        lv4.VerticalAlignment = VerticalAlignment.Stretch;

        // Create new StackPanel "Child" elements with alignment and width
        ListViewItem lv5 = new ListViewItem();
        lv5.Content = "Test Content";
        lv5.Width = 250;
        lv5.HorizontalAlignment = HorizontalAlignment.Stretch;
        lv5.VerticalAlignment = VerticalAlignment.Stretch;

        // Create new StackPanel "Child" elements with alignment and width
        ListViewItem lv6 = new ListViewItem();
        lv6.Content = "Test Content";
        lv6.Width = 250;
        lv6.HorizontalAlignment = HorizontalAlignment.Stretch;
        lv6.VerticalAlignment = VerticalAlignment.Stretch;

        // Add "Child" elements for the new StackPanel
        myStack.Children.Add(lv1);
        myStack.Children.Add(lv2);
        myStack.Children.Add(lv3);
        myStack.Children.Add(lv4);
        myStack.Children.Add(lv5);
        myStack.Children.Add(lv6);

        // Add the new StackPanel as a ListViewItem control
        MusicQueue.Items.Insert(1, myStack);

XAML 代码：

        <ListView Name="MusicQueue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ListViewItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Horizontal">
                    <ListViewHeaderItem Width="400">Filename</ListViewHeaderItem>
                    <ListViewHeaderItem Width="100">Format</ListViewHeaderItem>
                    <ListViewHeaderItem Width="100">Size</ListViewHeaderItem>
                    <ListViewHeaderItem Width="100">Duration</ListViewHeaderItem>
                    <ListViewHeaderItem Width="250">Artist</ListViewHeaderItem>
                    <ListViewHeaderItem Width="250">Title</ListViewHeaderItem>
                </StackPanel>
            </ListViewItem>
        </ListView>

当然，这可能不是手动将项目添加到水平堆叠的 ListView 的最有效方法，但它可以工作，这是最重要的 :)

如果有人知道用更少的代码更快地做到这一点，请告诉我:)

谢谢大家

【讨论】：

【解决方案2】：

您可以在 UWP 中使用 dataGrid。

但是你也可以在ListView中使用DataTemplate，可以使用blow code解决宽度太小。

            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment"
                            Value="Stretch"></Setter>
                </Style>
            </ListView.ItemContainerStyle>

你可以使用的库是：https://github.com/MyToolkit/MyToolkit/wiki/DataGrid

还有https://liftcodeplay.com/2015/10/24/datagrid-alternatives-in-uwp/

如果你能花钱，你可以使用https://www.syncfusion.com/products/uwp/sfdatagrid

【讨论】：