Visual Studio fires an error when I drag my user control onto the design view

I have two user controls, one that is a simple picture holder with a checkbox in it. And another which acts a container than has a collection of the previous control.

So a HorizontalPictureScroller can have many SelectablePicture controls. I'll paste the small code for each of the controls:

First, HorizontalPictureScroller:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Collections.ObjectModel;

namespace WinformsPlayground
{
    [Serializable()]
    public partial class HorizontalPictureScroller : UserControl
    {
        public HorizontalPictureScroller()
        {
            InitializeCom开发者_如何学Goponent();
            Pictures = new ObservableCollection<SelectablePicture>();
            Pictures.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(Pictures_CollectionChanged);
        }       

        #region "Properties"
        public ObservableCollection<SelectablePicture> Pictures { get; set; }
        private int PositionControlX = 0;
        #endregion

        #region "Methods"
        private void RedrawPictures()
        {
            PositionControlX = 0;

            foreach (var picture in Pictures)
            {
                picture.Location = new Point(PositionControlX + panelPicturesWrapper.AutoScrollPosition.X, 0);
                PositionControlX += 130;
                panelPicturesWrapper.Controls.Add(picture);
            }
        }

        public void AddPicture(SelectablePicture picture)
        {
            Pictures.Add(picture);
        }

        public void RemovePicture(SelectablePicture picture)
        {
            Pictures.Remove(picture);
        }

        public void MovePictureLeft(int index)
        {
            SelectablePicture tmpPicture = Pictures[index];
            Pictures[index] = Pictures[index - 1];
            Pictures[index - 1] = tmpPicture;
        }

        public void MovePictureRight(int index)
        {
            SelectablePicture tmpPicture = Pictures[index];
            Pictures[index] = Pictures[index + 1];
            Pictures[index + 1] = tmpPicture;
        }
        #endregion

        #region "Events"
        void Pictures_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
        {
            RedrawPictures();
        }        
        #endregion
    }
}

Now, the SelectablePicture control:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WinformsPlayground
{
    [Serializable()]
    public partial class SelectablePicture : UserControl
    {
        public SelectablePicture()
        {
            InitializeComponent();
            panel1.BackgroundImageLayout = ImageLayout.Zoom;
        }

        public SelectablePicture(Image image)
        {
            panel1.BackgroundImage = image;
            panel1.BackgroundImageLayout = ImageLayout.Zoom;
        }

        #region "Properties"
        public Image Image()
        {
            return panel1.BackgroundImage;
        }

        public bool IsSelected()
        {
            return chkSelected.Checked;
        }
        #endregion

        #region "Methods"
        public void ToggleCheckBox()
        {
            chkSelected.Checked = chkSelected.Checked ? false : true;
        }

        public void VisuallySelect()
        {
            this.BackColor = Color.FromArgb(51, 153, 255);
        }

        public void VisuallyDeselect()
        {
            //If none of the controls inside the usercontrol have focus, set this control to white.
            if (!this.Focused && !this.panel1.Focused && !this.chkSelected.Focused)
            {
                this.BackColor = Color.White;
            }
        }        
        #endregion

        #region "Events"
        private void panel1_Click(object sender, EventArgs e)
        {
            VisuallySelect();
            ToggleCheckBox();
            panel1.Focus();
        }

        private void chkSelected_Click(object sender, EventArgs e)
        {
            VisuallySelect();
            ToggleCheckBox();
            chkSelected.Focus();
        }

        private void SelectablePicture_Click(object sender, EventArgs e)
        {
            VisuallySelect();
            ToggleCheckBox();
            this.Focus();
        }

        private void panel1_Leave(object sender, EventArgs e)
        {
            VisuallyDeselect();
        }

        private void chkSelected_Leave(object sender, EventArgs e)
        {
            VisuallyDeselect();
        }

        private void SelectablePicture_Leave(object sender, EventArgs e)
        {
            VisuallyDeselect();
        }
        #endregion        
    }
}

Here's a screenshot of the error I get when trying to drag the HorizontalPictureScroller onto my Winform design view (Sorry I can't paste the text here):

My user controls are very simple and I can't see what's going wrong in the code.

Maybe it's a blatant mistake on my part. :P Thanks a lot for your time.

The exception is being thrown because you are using the SerializableAttribute, but UserControl does not.

From the documentation for SerializableAttribute:

The common language runtime throws SerializationException if any type in the graph of objects being serialized does not have the SerializableAttribute attribute applied.

It seems that the UserControl SelectablePicture needs to be serialized, because it is used in a Collection. So you were near from the solution with the attribut [Serializable()]. But you'd better implement the ISerializable interface in your UserControl SelectablePicture

public partial class SelectablePicture : UserControl, ISerializable
{
    #region ISerializable Membres

    public void GetObjectData(SerializationInfo info, StreamingContext context)
    {
        ...
    }

    #endregion
}

This is the first step to solve your problem. With that you souldn't have the error message when you drag-drop your UserControl. But now you have to manage the serialization.

If anyone knows why serialization is needed, I'm interested.