Having problem in adding a derived class of Canvas to a Window in WPF

I am new to WPF and I am following the book Pro WPF C# 2010. I want to create a custom derived class of canvas, and then add it on the main window, but I am not being able to add it to the main window.

What i have done is I have created a new class named DrawingCanvas (added DrawingCanvas.c# file), and declared it like this:

Definition of the class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Media;
using System.Windows.Controls;

namespace CustomDrawingCanvas 
{
    public class DrawingCanvas : Canvas
    {
        private List<Visual> visuals = new List<Visual>();

        protected override int VisualChildrenCount
        {
            get
            {
                return visuals.Count;
            }
        }

        protected override Visual GetVisualChild(int index)
       {
            return visuals[index];
        }

        public void AddVisual(Visual visual)
        {
            visuals.Add(visual);
            base.AddVisualChild(visual);
            base.AddLogicalChild(visual);
        }

        public void DeleteVisual(Visual visual)
        {
            visuals.Remove(visual);
            base.RemoveVisualChild(visual);
            base.RemoveLogicalChild(visual);

        }
    }
}

but when i try to add it (following the XAML given in the book, it doesn't give any information about where to place the XAML in the main window's xaml file) using this XAML:

<local:DrawingCanvas x:Name="drawingSurface" Background="White" ClipToBounds="True"
MouseLeftButtonDown="drawingSurface_MouseLeftButtonDown"
MouseLeftButtonUp="drawingSurface_MouseLeftButtonUp"
MouseMove="drawingSurface_MouseMove" />

it gives an error "local is an undeclared prefix". And when i hover the mouse over

I have added the in a stack panel like this:

<Window x:Class="CustomDrawingCanvas.开发者_开发技巧MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Name="spanel">
            <local:DrawingCanvas x:Name="drawingSurface" Background="White" ClipToBounds="True"
                MouseLeftButtonDown="drawingSurface_MouseLeftButtonDown"
                MouseLeftButtonUp="drawingSurface_MouseLeftButtonUp"
                MouseMove="drawingSurface_MouseMove" />

        </StackPanel>
    </Grid>
</Window>

What am i doing wrong.

And also i have tried to add an instance of DrawingCanvas using code like this:

public void AddDrawingSurface()
    {
        drawingSurface = new DrawingCanvas();
        drawingSurface.Background = new SolidColorBrush(Colors.AliceBlue);
        drawingSurface.ClipToBounds = true;

        Button button = new Button();
        button.Content = "A button";

        //spanel.Children.Add(button);
        spanel.Children.Add(drawingSurface);

    }

and i call this function after InitializeComponent().

The button gets added but not the stack panel. Please explain what is the thing i am missing, i have tried to google, and have found numerous ways of adding custom elements through code, and the method is generally the same, which works for other elements, but not for DrawingCanvas : Canvas class.

You need to declare your local alias in your Windows class Header i.e

<Window x:Class="CustomDrawingCanvas.MainWindow"  
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
xmlns:local="The namespace of your custom control here"
Title="MainWindow" Height="350" Width="525">