WPF 设计时支持自定义对象列表

Question

我正在制作一个用户控件，它是一个带有按钮的列表视图。按钮有文本和图像。

列表视图绑定到 MyType 的可观察集合。将项目添加到列表等工作正常，并且在我运行应用程序时可见。但我也想为这些属性提供设计时支持。

我做错了什么？感谢您的帮助。

usercontrol.xaml

<ListView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Items}" BorderBrush="{x:Null}" >
                <ListView.ItemTemplate>
                    <DataTemplate DataType="client:MyItem">
                        <StackPanel>
                            <Button  HorizontalContentAlignment="Left" >
                                <StackPanel>
                                    <TextBlock Text="{Binding Path=ButtonText}" />
                                    <Image Source="{Binding Path=ImagePath}"></Image>
                                </StackPanel>
                                </Button>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

usercontrol.cs

 public UserControl1()
    {
        InitializeComponent();
        this.DataContext = this;

    }

public partial class UserControl1 : UserControl
{
    private ObservableCollection<MyItem> _items = new ObservableCollection<MyItem>();


    [Description("Items in sidebar")]
    [Category("Data")]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    public ObservableCollection<MyItem> Items
    {
        get { return _items; }
    }
}

MyItem.cs

[Serializable()]
public  class MyItem 
{

   public string ButtonText { get; set; }
   public ImageSource Imagepath { get; set; }

}

用户控件的使用

 <my:UserControl1>
                <my:UserControl1.Items>
                    <my:MyItem ButtonText="test" Imagepath="../img.png" />
                    <my:MyItem ButtonText="test2" Imagepath="../img2.png" />
                </my:UserControl1.Items>
            </my:UserControl1>

Answer 1

当我想要项模板的设计时可见性时，我使用这样的硬编码项创建控件：

<ListBox>
    <ListBoxItem>
        <Grid>
            <Button/>
        </Grid>
    </ListBoxItem>
</ListBox>

然后简单地将硬编码的项目内容重构到模板中：

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Button/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

简单。

Answer 2

对我有用（图像不存在，但应该无关紧要）：

UserControl1.xaml.cs:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace UnrelatedTests
{
    [Serializable()]
    public  class MyItem 
    {

       public string ButtonText { get; set; }
       public ImageSource Imagepath { get; set; }

    }

    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
            this.DataContext = this;
        }
        private ObservableCollection<MyItem> _items = new ObservableCollection<MyItem>();


        [Description("Items in sidebar")]
        [Category("Data")]
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        public ObservableCollection<MyItem> Items
        {
            get { return _items; }
        }
    }
}

UserControl1.xaml:

<UserControl x:Class="UnrelatedTests.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:unrelatedTests="clr-namespace:UnrelatedTests"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <ListView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Items}" BorderBrush="{x:Null}" >
        <ListView.ItemTemplate>
            <DataTemplate DataType="unrelatedTests:MyItem">
                <StackPanel>
                    <Button  HorizontalContentAlignment="Left" >
                        <StackPanel>
                            <TextBlock Text="{Binding Path=ButtonText}" />
                            <Image Source="{Binding Path=Imagepath}"></Image>
                        </StackPanel>
                    </Button>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</UserControl>

MainWindow.xaml:

<Window x:Class="UnrelatedTests.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:UnrelatedTests"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <my:UserControl1>
            <my:UserControl1.Items>
                <my:MyItem ButtonText="test" Imagepath="../img.png" />
                <my:MyItem ButtonText="test2" Imagepath="../img2.png" />
            </my:UserControl1.Items>
        </my:UserControl1>
    </Grid>
</Window>

更新：

如果您将 MyItem 设为 struct 而不是 class，设计时预览几乎是实时的。

WPF 设计时支持自定义对象列表

WPF Design time support for list with custom objects

c#

wpf

xaml

wpf-controls

design-time