Xaml UWP/C项目控制多个框？

到目前为止，我在为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格式和在我的项目中加入操作学习材料方面遇到了困难：/任何帮助都将是惊人的

我有一种解决您问题的替代方法。这使用半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
            },
        };
    }
}

输出： 下一步：

应用你的风格。研究如何限制轴网柱

改进代码 此外，在MVVM中，您不应该在 代码隐藏，所以请学习ICommand，Microsoft.Xaml.Interactivity

希望这有帮助。

现在就完美了

我是个白痴

我基本上需要分离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"
            });
        }
    }
}

---

该解决方案目前没有提供太多的灵活性，但它适用于格式设置。标记为已决定关闭记录单

值得注意的是，我确实遇到了GridView.ItemsPanel，但由于它干扰了文本格式，在上一篇文章中已将其删除。我相信这就是我需要尝试介绍的内容，但可能不是ItemsWrapGrid，可能只是ItemGrid或其他什么？您应该使用GridView而不是ItemControl。您好，Dishant，有人建议ItemControl最适合此布局。我曾尝试使用GridView，但也有类似的问题：/我最近的一篇文章被建议不要使用GridView，以确保我理解：items控件的问题是，只有一个项目显示？是的，在某种程度上。它只显示一个正方形，理想情况下，我希望它能显示几个正方形的数据。这很可能是我的数据存储的问题。我不知道ItemsControl如何读取日期。我可能需要整理UserData类。下面的Mac解决方案似乎创建了多个用户，我觉得我也应该为我的用户这样做。谢谢你们这么多Mac，这是一个巨大的帮助！我会实现这一点，看看我会怎样！嗨，Mac，我知道您使用双向作为itemscontrol的变量。这是否允许编辑数据？我不会编辑这些框中的任何内容，它们将纯粹用于显示目的：只是想知道我是否应该删除此框并替换为仅显示数据的单向方式Hey@Batteredburrito，是的，您可以将其更改为单向，或者只是不指定默认为单向的模式，我忘了把它移除，也没有费心清理我的垃圾，我想scrollviewer也可以移除，我只是习惯了做这些事情>。太棒了，谢谢你。当我打字的时候，我正在整理一些杂乱的练习：Youre Guidence正在创造奇迹，非常感谢。另外，感谢您的注册和贡献！你救了我的命。毫无疑问，在某个时候，你会在另一条线上碰到你。谢谢：很高兴我能帮忙！谢谢

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"
            });
        }
    }
}