WPF Design time support for list with custom objects

Question

I am making a user control that is a listview with button in it. the buttons have an text and an image.

the listview is bound to an observablecollection of MyType. Adding items to the list and so on works fine and is visible when i run the application. But i also want to have design time support for these properties.

What am i doing wrong? thanks for your help.

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

}

Usage of the user control

 <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

Works for me (images are not present but that shouldn't matter):

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>

Update:

If you make the MyItem a struct instead of a class, the design time preview is almost live.

Answer 2

When I want design time visibility of item templates, I create controls with hard-coded items like this:

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

And then simply refactor the hard-coded item content into a template:

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

Easy.