Binding custom ItemsControl

Question

I’m trying to create custom Itemscontrol class to display a group of different shapes. To speed up process, I have reused source code from CodeProject (WPF Diagram Designer - Part 4) where all implementation is done but shapes are added from XAML code. For my purposes, I need to add them from code behind (dynamically) so I bound custom Itemscontrol to list of ObservableCollection. Now, instead of shapes be presented like this:

enter image description here

I get something like this:

enter image description here

Can somebody tell me what I’m doing wrong? Any help will be appreciated. Thanks in advance.

XAML:

Code behind:

// Implements ItemsControl for ToolboxItems    
public class Toolbox : ItemsControl
{
    // Defines the ItemHeight and ItemWidth properties of
    // the WrapPanel used for this Toolbox
    public Size ItemSize
    {
        get { return itemSize; }
        set { itemSize = value; }
    }
    private Size itemSize = new Size(50, 50);

    // Creates or identifies the element that is used to display the given item.        
     protected override DependencyObject GetContainerForItemOverride()
    {
         return new ToolboxItem();
    }

    // Determines if the specified item is (or is eligible to be) its own container.        
    protected override bool IsItemItsOwnContainerOverride(object item)
    {
       return (item is ToolboxItem);
    }
}
// Represents a selectable item in the Toolbox/>.
public class ToolboxItem : ContentControl
{
    …
}

public class ToolboxDataItem : DependencyObject
{
    public string Title
    {
        get { return (string)GetValue(TitleProperty); }
        set { SetValue(TitleProperty, value); }
    }

    public static readonly DependencyProperty TitleProperty =
        DependencyProperty.Register( "Title", typeof( string ),
        typeof(ToolboxDataItem), new UIPropertyMetadata(""));

    public ToolboxDataItem(string title)
    {
        Title = title;
    }
}

public partial class DesignerCanvas : Canvas
{
    private ObservableCollection toolboxDataItems = new ObservableCollection();
    public ObservableCollection ToolboxDataItems
    {
        get { return toolboxDataItems; }
    }

    public DesignerCanvas()
    {
        ToolboxDataItem toolboxDataItem = new ToolboxDataItem("123");
        ToolboxDataItems.Add(toolboxDataItem );
        toolboxDataItem = new ToolboxDataItem("456");
        ToolboxDataItems.Add(toolboxDataItem );
    }              
}

MyDesigner:

Binding custom ItemsControl

Answers (1)

Related Questions