WPF Customize control

//xaml
<UserControl x:Class="WpfApp246.EllipseTbk"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp246"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Ellipse Fill="{Binding ElpColor,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
        <TextBlock Text="{Binding TbStr,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                   VerticalAlignment="Center" HorizontalAlignment="Center"
                   FontSize="30"/>
    </Grid>
</UserControl>


//xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp246
{
    /// <summary>
    /// Interaction logic for EllipseTbk.xaml
    /// </summary>
    public partial class EllipseTbk : UserControl
    {
        public EllipseTbk()
        {
            InitializeComponent();
            this.DataContext = this;
        }
         
        public Brush ElpColor
        {
            get { return (Brush)GetValue(ElpColorProperty); }
            set { SetValue(ElpColorProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ElpColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ElpColorProperty =
            DependencyProperty.Register("ElpColor", typeof(Brush), 
                typeof(EllipseTbk), new PropertyMetadata(Brushes.Red));




        public int TbStr
        {
            get { return (int)GetValue(TbStrProperty); }
            set { SetValue(TbStrProperty, value); }
        }

        // Using a DependencyProperty as the backing store for TbStr.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TbStrProperty =
            DependencyProperty.Register("TbStr", typeof(int),
                typeof(EllipseTbk), new PropertyMetadata(0));

    }
}

 

 

//whole
//xaml
<UserControl x:Class="WpfApp246.EllipseTbk"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp246"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Ellipse Fill="{Binding ElpColor,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
        <TextBlock Text="{Binding TbStr,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                   VerticalAlignment="Center" HorizontalAlignment="Center"
                   FontSize="30"/>
    </Grid>
</UserControl>


//xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp246
{
    /// <summary>
    /// Interaction logic for EllipseTbk.xaml
    /// </summary>
    public partial class EllipseTbk : UserControl
    {
        public EllipseTbk()
        {
            InitializeComponent();
            this.DataContext = this;
        }
         
        public Brush ElpColor
        {
            get { return (Brush)GetValue(ElpColorProperty); }
            set { SetValue(ElpColorProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ElpColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ElpColorProperty =
            DependencyProperty.Register("ElpColor", typeof(Brush), 
                typeof(EllipseTbk), new PropertyMetadata(Brushes.Red));




        public int TbStr
        {
            get { return (int)GetValue(TbStrProperty); }
            set { SetValue(TbStrProperty, value); }
        }

        // Using a DependencyProperty as the backing store for TbStr.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TbStrProperty =
            DependencyProperty.Register("TbStr", typeof(int),
                typeof(EllipseTbk), new PropertyMetadata(0));

    }
}



//cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp246
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private Random rnd { get; set; }
        private double width { get; set; }
        private double height { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            this.WindowState = WindowState.Maximized;
            this.Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            rnd = new Random();
            width = this.ActualWidth;
            height = this.ActualHeight; 
            DrawEllipseTextBlock();
        }

        private void DrawEllipseTextBlock()
        {
            Canvas cvs = new Canvas();
            for (int i = 0; i < 10; i++)
            {
                EllipseTbk elp = new EllipseTbk();
                elp.Width = 100;
                elp.Height = 100;
                switch (i%3)
                {
                    case 0:
                        elp.ElpColor = Brushes.Red;
                        break;
                    case 1:
                        elp.ElpColor = Brushes.Green;
                        break;
                    case 2:
                        elp.ElpColor = Brushes.Blue;
                        break;
                }
                elp.TbStr = i + 1;
                Canvas.SetLeft(elp, rnd.Next(0, (int)width)-100);
                Canvas.SetTop(elp, rnd.Next(0, (int)height)-100);
                if (!cvs.Children.Contains(elp))
                {
                    cvs.Children.Add(elp);
                }
                this.Content = cvs;
            }
        }

       }
}