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

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.