UWP/C# ItemsControl 多个框？答案

【问题标题】：UWP/C# ItemsControl Multiple Boxes?UWP/C# ItemsControl 多个框？
【发布时间】：2018-08-31 17:52:05
【问题描述】：

到目前为止，在为 ItemsControl 面板创建正确格式方面，我得到了很多帮助，感谢这个社区迄今为止帮助我解决编码问题的帮助。我目前处于一个相当小的障碍，我试图弄清楚如何在同一个 ItemsControl 中创建多个框。目前整体的看法是这样的：

我有点难过，只是想得到一些关于在哪里放置其他 XAML 行的指导。我需要它看起来像这样：

这是我目前的代码（全部嵌套在一个框架中）：

<ItemsControl ItemsSource="{StaticResource userDataCollection}" Margin="40,40,40,725"  Width="Auto" Height="310">
                    <!-- Changing Orientation of VirtualizingStackPanel -->
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>                            
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <!-- Change header for ItemsControl -->
                    <ItemsControl.Template>
                        <ControlTemplate>
                            <Border Background="{StaticResource CustomAcrylicDarkBackground}">
                                <StackPanel>
                                    <TextBlock Text="Accounts At A Glance" FontSize="28" Foreground="#b880fc" Padding="12"/>
                                    <ItemsPresenter/>
                                </StackPanel>
                            </Border>
                        </ControlTemplate>
                    </ItemsControl.Template>


                    <!-- Template for each card-->
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="240" Height="240" Background="Gray" Margin="30,0,0,0" VerticalAlignment="Center" Padding="4">

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>

                                <TextBlock Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="24"/>
                                <TextBlock Grid.Row="1" Text="{Binding PayDate}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14" />
                                <TextBlock Grid.Row="2" Text="{Binding NumberOfItems}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14"/>

                            </Grid>


                        </DataTemplate>

                    </ItemsControl.ItemTemplate>
                </ItemsControl>

对此我深表歉意，我正在尽我所能地学习。我主要纠结于 XAML 格式并将学习材料整合到我的项目中：/ 任何帮助都会很棒

【问题讨论】：

值得注意的是，我确实遇到了 GridView.ItemsPanel 但由于它干扰了文本格式，因此在上一篇文章中将其删除。我相信这是我需要尝试介绍的，但可能不是 ItemsWrapGrid，可能只是 ItemGrid 或其他什么？
你应该使用GridView而不是ItemControl。
您好 Dishant，我被告知 ItemControl 最适合这种布局。我尝试使用 GridView，但遇到了类似的问题：/ 我最近的一篇文章被建议不要使用 GridView
请确保我理解：您对 ItemsControl 的问题是只显示其中一项？
是的，在一定程度上。理想情况下，它只显示一个正方形，我希望它显示几个正方形的数据。这很可能是我的“数据”存储的问题。我不知道 ItemsControl 如何读取日期。我可能需要整理 UserData 类。下面的 Macs 解决方案似乎创建了多个“用户”，我觉得我可能也应该为我这样做

标签： xaml uwp uwp-xaml

【解决方案1】：

对于您的问题，我有另一种方法。这使用“半” MVVM 方法（浏览网络并研究此模式）。

MainPageViewModel.cs

public class MainPageViewModel : INotifyPropertyChanged
{
    private ObservableCollection<User> _userCollection;
    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<User> UserCollection
    {
        get => _userCollection;
        set
        {
            _userCollection = value;
            NotifyProperyChanged();
        }
    }

    private void NotifyProperyChanged([CallerMemberName]string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public void LoadData()
    {
        UserCollection = new ObservableCollection<User>
        {
            new User
            {
                Name = "John Doe",
                PayDate = DateTime.Now,
                NumberOfItems = 1
            },
            new User
            {
                Name = "John Doe 2",
                PayDate = DateTime.Now,
                NumberOfItems = 1
            },
            new User
            {
                Name = "John Doe 3",
                PayDate = DateTime.Now,
                NumberOfItems = 1
            },
        };
    }
}

视图（暂时去掉了一些样式）：

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="using:App1.ViewModels"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    Loaded="MainPage_OnLoaded">

    <Page.DataContext>
        <vm:MainPageViewModel/>
    </Page.DataContext>

    <Grid>
        <ScrollViewer>
            <ItemsControl ItemsSource="{Binding UserCollection, Mode=TwoWay}" Margin="15"  Width="Auto" Height="310">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <!-- Template for each card-->
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="200" Height="100" Background="Gray" Margin="15,0,0,0" VerticalAlignment="Center" Padding="4">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="24"/>
                            <TextBlock Grid.Row="1" Text="{Binding PayDate}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14" />
                            <TextBlock Grid.Row="2" Text="{Binding NumberOfItems}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Page>

View 的代码隐藏：

namespace App1
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        public MainPageViewModel VM => (MainPageViewModel) DataContext;

        private void MainPage_OnLoaded(object sender, RoutedEventArgs e)
        {
            VM.LoadData();
        }
    }

}

输出：下一步：

应用您的样式。研究如何限制网格列。
改进代码此外，在 MVVM 中，您不应该在代码隐藏，所以学习 ICommand、Microsoft.Xaml.Interactivity

希望这会有所帮助。

【讨论】：

非常感谢 Mac，这是一个巨大的帮助！我会实施这个，看看我会怎么做！
嗨，Mac，我了解您使用两种方式作为 itemscontrol 的变量。这是否允许编辑数据？我不会在这些框中编辑任何内容，它们仅用于显示目的:) 只是想知道我是否应该考虑删除它并用 oneway 替换以仅显示数据
嘿@Batteredburrito，是的，您可以将其更改为单向，或者只是不指定模式，因为默认情况下它是单向的，我忘记删除它并且没有费心清理我的烂摊子，我觉得scrollviewer也可以去掉，我才习惯做那些事>.
太棒了，谢谢。我在打字时经历并清理了一些凌乱的做法：）您的指导正在创造奇迹，非常感谢您。另外，感谢您的注册和贡献！你救了我的培根。毫无疑问，在某个时候会在另一个线程上碰到你。谢谢你:)
很高兴我能帮上忙！谢谢！

【解决方案2】：

现在完美了。

我是个白痴。

我基本上需要分离 UserData.cs 类中呈现的信息。我不明白这些信息是如何被阅读的，但现在明白了。 XAML 保持不变，因为它目前可以满足我的需要。它将更新为遵循 Mac 提到的 MVVM 格式。这是位于数据文件夹中的 UserData.CS 类：

using System.Collections.ObjectModel;

namespace BudgetSheet.Data
{
    public class UserData
    {
        public string Name { get; set; }
        public string PayDate { get; set; }
        public string NumberOfItems { get; set; }
    }

    class UserDataCollection : ObservableCollection<UserData>
    {
        public UserDataCollection()
        {

            // Placeholder, needs to be replaced with CSV or Database information
            this.Add(new UserData()
            {
                Name = "Selected Username",
                PayDate = "Friday",
                NumberOfItems = "ItemAmount Placeholder"
            });
            // Placeholder for user 2
            this.Add(new UserData()
            {
                Name = "Selected Username 2",
                PayDate = "Friday 2",
                NumberOfItems = "ItemAmount Placeholder 2"
            });
            // Placeholder for user 3
            this.Add(new UserData()
            {
                Name = "Selected Username 3",
                PayDate = "Friday 3",
                NumberOfItems = "ItemAmount Placeholder 3"
            });
        }
    }
}

这是之前的情况以及信息显示出现问题的原因：

using System.Collections.ObjectModel;

namespace BudgetSheet.Data
{
    public class UserData
    {
        public string Name { get; set; }
        public string PayDate { get; set; }
        public string NumberOfItems { get; set; }
    }

    class UserDataCollection : ObservableCollection<UserData>
    {
        public UserDataCollection()
        {

            // Placeholder, needs to be replaced with CSV or Database information
            this.Add(new UserData()
            {
                Name = "Selected Username",

            });
            // Placeholder for user selected PayDate
            this.Add(new UserData()
            {

                PayDate = "Friday",

            });
            // Placeholder for user selected PayDate
            this.Add(new UserData()
            {

                NumberOfItems = "ItemAmount Placeholder"
            });
        }
    }
}

这个解决方案目前没有提供太多的灵活性，但它适用于格式化。标记为已解决关闭工单

【讨论】：