ItemsControl 使用 WrapPanel，不显示任何内容答案

【问题标题】：ItemsControl using WrapPanel, not displaying anythingItemsControl 使用 WrapPanel，不显示任何内容
【发布时间】：2017-04-30 01:20:47
【问题描述】：

目标：我正在尝试创建一个包装面板，其中包含绑定到可观察集合的子项。

当前预期行为：我希望看到 3 个嵌套的环绕面板，其中包含一个椭圆、一个文本块、一个标签和一个复选框。

问题：我的包装面板和内容在运行时不显示。（注意：itemscontrol 之外的“Test”和“Test 2”标签会按预期显示。）

我已阅读this，但它似乎无法解决我的问题。

代码背后

using MVVM_SandBox.Models;
using MVVM_SandBox.ViewModels;

namespace MVVM_SandBox
{
    public partial class MainWindow
    {     
        public MainViewModel VMMain = new MainViewModel();


        public MainWindow()
        {
            VMMain.SomeItemModelBlahs = new System.Collections.ObjectModel.ObservableCollection<ItemModelBlah>() { new ItemModelBlah() { Label = "blah0" }, new ItemModelBlah() { Label = "blah1", CoolStuff = true }, new ItemModelBlah() { Label = "blah2" } };
            InitializeComponent();


        }
    }
}

XAML

<Window x:Name="winMain" x:Class="MVVM_SandBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                     xmlns:viewmodels="clr-namespace:MVVM_SandBox.ViewModels"
                     Title="MVVM SandBox" Height="600" Width="800" AllowDrop="True">
    <Window.DataContext>
        <viewmodels:MainViewModel></viewmodels:MainViewModel>
    </Window.DataContext>
    <StackPanel>
        <Label Width="Auto" Height="Auto">Test</Label>
        <ItemsControl ItemsSource="{Binding SomeItemModelBlahs}" Margin="10,10,10,10">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel x:Name="WrapPanelOfModelItems" Margin="10,10,10,10" Width="400" Height="200" IsItemsHost="True" MinWidth="200" MinHeight="200">
                        </WrapPanel>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Width="100" Height="100" Margin="10">
                        <Ellipse Width="10" Height="10" Fill="Aqua"></Ellipse>
                        <TextBlock Margin="10" Text="{Binding Label}"></TextBlock>
                        <Label>kjasdkjalsdjklsad</Label>
                        <CheckBox IsChecked="{Binding CoolStuff}">
                            <Label>Hello</Label> 
                        </CheckBox>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            </ItemsControl>
        <Label Height="Auto" Width="Auto">Test 2</Label>
    </StackPanel>

</Window>

查看模型

using MVVM_SandBox.Models;
using System.Collections.ObjectModel;


namespace MVVM_SandBox.ViewModels
{
    //[ImplementPropertyChanged]
    public class MainViewModel
    {
        public ObservableCollection<ItemModelBlah> SomeItemModelBlahs { get; set; }

        public MainViewModel()
        {

        }
    }
}

型号

namespace MVVM_SandBox.Models
{
    public class ItemModelBlah
    {
        public string Label { get; set; }
        public bool CoolStuff { get; set; }
    }
}

【问题讨论】：

标签： c# wpf itemscontrol

【解决方案1】：

代码正在创建MainViewModel 的两个实例：一次在后面的代码中，另一次在 XAML 中。实例背后的代码有一个非空的ObservableCollection，而XAML中的实例设置为DataContext。

我建议从 XAML 中删除 viewmodels:MainViewModel，并仅在代码中创建它：

public partial class MainWindow
{     
    public MainViewModel VMMain = new MainViewModel();

    public MainWindow()
    {
        DataContext = VWMain;
        InitializeComponent();
    }
}

另外，从视图模型本身设置ObservableCollection 是一个更好的设计：

class MainViewModel
{
    public ObservableCollection<ItemModelBlah> SomeItemModelBlahs { get; private set; }

    public MainViewModel()
    {
        SomeItemModelBlahs = new ObservableCollection<ItemModelBlah>()
        {
            new ItemModelBlah() { Label = "blah0" },
            new ItemModelBlah() { Label = "blah1", CoolStuff = true },
            new ItemModelBlah() { Label = "blah2" }
        };
    }
}

【讨论】：