See UI changes in design view with WPF & XAML and data binding?

Question

I was just watching this video on XAML where he created a clock and noticed he could actually see all the changes he is doing from C Sharp in the Xaml design view.

At 33:30 he creates his class: https://youtu.be/Wb-l0e6WYE0?t=2008

At 37:10 he binds to that class: https://youtu.be/Wb-l0e6WYE0?t=2227

Later on at 40:17 you can actually see the clock is ticking in the design view!

I tried to do this by creating a class called Ball with some properties like size and bind those properties to a Canvas with a rectangle that has a EllipseGeometry clip which makes it round. It works fine when running the application but the design view is just white.

Does anyone know how he does this?

My Code:

MainWindow.xaml

<Window x:Class="XamlTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:XamlTest"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Canvas Background="White">
        <Rectangle Height="{Binding Size}" Width="{Binding Size}" Fill="Green" Canvas.Top="40">
            <Rectangle.Clip>
                <EllipseGeometry Center="{Binding EllipseCenter}" RadiusX="{Binding EllipseRadius}" RadiusY="{Binding EllipseRadius}"/>
            </Rectangle.Clip>
        </Rectangle>
    <Button x:Name="button" Content="Button" Width="75" Click="button_Click"/>
</Canvas>

Code Behind:

using System.Windows;
namespace XamlTest
{
public partial class MainWindow : Window
{
    Ball TheBall = new Ball();
    public MainWindow()
    {
        InitializeComponent();
        TheBall.Size = 300;
        this.DataContext = TheBall;
    }


    private void button_Click(object sender, RoutedEventArgs e)
    {

        TheBall.Size = TheBall.Size + 40;
    }
}
}

Ball Class:

using System.Windows;
namespace XamlTest
{
class Ball : INotifyPropertyChangedBase
{
    public Ball()
    {
        Size = 50;
    }
    private double _size;
    public double Size
    {
        get
        {
            return _size;
        }
        set
        {
            _size = value;
            EllipseCenter = new Point(_size / 2, _size / 2);
            EllipseRadius = _size / 2;
            OnPropertyChanged("Size");
        }
    }

    private Point _ellipseCenter;
    public Point EllipseCenter
    {
        get
        {
            return _ellipseCenter;
        }
        set
        {

            _ellipseCenter = value;
            OnPropertyChanged("EllipseCenter");
        }
    }

    private double _ellipseRadius;
    public double EllipseRadius
    {
        get {
            return _ellipseRadius;
        }
        set {
            _ellipseRadius = value;
            OnPropertyChanged("EllipseRadius");
        }
    }


}
}

INotifyPropertyChangedBase Class:

using System.ComponentModel;
namespace XamlTest
{

public class INotifyPropertyChangedBase : INotifyPropertyChanged
{


    public event PropertyChangedEventHandler PropertyChanged;

    internal void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;

        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
}

I also have a button that increase the size of the ball!

Thanks for the help.

Answer 1

The DataContext allows the XAML to find an instance the class that it is meant to be binding to.

Then, the bindings in XAML allow you to bind to specific properties of said class.

There are two separate DataContexts: design time and run time.

To set the design time DataContext, see:

http://adamprescott.net/2012/09/12/design-time-data-binding-in-wpf/

Essentially, when you set the design time DataContext, behind the scenes the WPF runtime will automatically instantiate a new instance of the class you point it at (or simply point at the class if its static), and then the Visual Studio design time designer will display live values from your class, as you are editing the XAML. This makes designing really fast, as you can work with live data, and you dont have to run the program all the time to see how it looks.

To set the run time DataContext, see ReSharper WPF error: "Cannot resolve symbol "MyVariable" due to unknown DataContext". The answer describes how to use the free Snoop utility to detect runtime binding errors.

Answer 2

Added this code:

d:DataContext="{d:DesignInstance  local:Ball,IsDesignTimeCreatable=True}"

And now I can see my green ball at design time!

Thanks!