DataTriggers и свойство по умолчанию при использовании ViewModels, Dependency Properties

Question

У меня есть UserControl и ViewModel для него.

UserControl - это простой шаблон кнопки с эллипсом. В основном круглая кнопка.

Я использую ViewModel в качестве DataContext для UserControl. ViewModel имеет свойство "State", значение которого я использую в качестве DataTrigger для изменения "Цвета" эллипса, эти "Цвета" являются свойствами зависимости в UserControl.

Кажется, все работает, но я не могу установить цвета по умолчанию для эллипса, и поэтому я не вижу ничего в Designer для UserControl. Смотрите прикрепленную картинку.

Я вижу правильные цвета и формы, когда помещаю UserControl в дизайнер главного окна.

Я определенно хотел бы видеть фигуры в UserControl с некоторыми значениями по умолчанию, чтобы было легче увидеть, с чем я работаю.

Я считаю, что это как-то связано со значением "State" DataBinding из ViewModel.

Вот код: UserControl xaml

<UserControl x:Name="thisBtn" x:Class="WpfAppDelMe.Views.CustomButton"
         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:WpfAppDelMe.Views"
         xmlns:viewmodel="clr-namespace:WpfAppDelMe.ViewModels"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">

<UserControl.DataContext>
    <viewmodel:CustButtonViewModel  x:Name="xvm"/>
</UserControl.DataContext>
<Grid Background="#FF9EE3EA">
    <Button Content="{Binding State}" Command="{Binding ClickCommand}" Foreground="#FFD13B3B" Margin="0" >
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*"/>
                        <RowDefinition Height="1*"/>
                        <RowDefinition Height="1*"/>
                    </Grid.RowDefinitions>


                    <Viewbox Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3">
                        <Ellipse Height="300" Width="300" Margin="5">
                            <Ellipse.Style>
                                <Style TargetType="{x:Type Ellipse}" >
                                    <!-- Below Line does not work! -->
                                    <Setter Property ="Fill" Value="Pink" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding State}" Value="{x:Null}">
                                            <Setter Property="Fill" Value="OldLace"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding State}" Value="0">
                                            <Setter Property="Fill" Value="{Binding ElementName=thisBtn, Path=Color1}"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding State}" Value="1">
                                            <Setter   Property="Fill" Value="{Binding ElementName=thisBtn, Path=Color2}"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Ellipse.Style>
                        </Ellipse>
                    </Viewbox>

                    <!--The content presenter for the button string.
                    Placing this in a view box makes sure of the correct size.-->
                    <Viewbox Grid.Row="1" Grid.ColumnSpan="3" Margin="10">
                        <ContentPresenter/>
                    </Viewbox>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>

</Grid>

UserControl.cs файл

using System;
using System.Collections.Generic;
using System.ComponentModel;
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 WpfAppDelMe.Views
{
/// <summary>
/// Interaction logic for CustXam.xaml
/// </summary>
public partial class CustomButton : UserControl, INotifyPropertyChanged
{
    /// <summary>
    /// Interaction logic for the CustomButton UserControl
    /// View and Model
    /// ViewModel : CustomButtonViewModel
    /// </summary>
    public CustomButton()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty Color1Property = 
DependencyProperty.Register("Color1", typeof(Brush), typeof(CustButton), new 
PropertyMetadata(new SolidColorBrush(Colors.Black)));
    public static readonly DependencyProperty Color2Property = 
DependencyProperty.Register("Color2", typeof(Brush), typeof(CustButton), new 
PropertyMetadata(new SolidColorBrush(Colors.White)));

    public event PropertyChangedEventHandler PropertyChanged = delegate { }; 
 //Null initialization is required because there are no listeners or 
bindings 
 for this.
    private int btnState=0;

    //Button Color 1
    public Brush Color1
    {
        get { return (Brush)GetValue(Color1Property); }
        set { SetValue(Color1Property, value); }
    }

    public Brush Color2
    {
        get { return (Brush)GetValue(Color2Property); }
        set { SetValue(Color2Property, value); }
    }

    public int BtnState
    {
        get
        { return btnState;}

        set
        {
            btnState = value;
            this.OnPropertyChanged("BtnState");
        }
    }

    public void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
            xvm.State = btnState;
        }

      }
  }
}

[![enter image description here][1]][1]ViewModel for the UseControl

using System;
using System.ComponentModel;
using System.Windows.Input;

namespace WpfAppDelMe.ViewModels
{
/// <summary>
/// View Model class for the CustButton. All logic and calculations happen 
  here.
/// This is also the DataContext for the CustButton
/// 
/// View and Model : CustButton
/// ViewModel : CustButtonViewModel
/// </summary>
internal class CustButtonViewModel : INotifyPropertyChanged
{
    public CustButtonViewModel()
    {
    }

    private int state;
    public event PropertyChangedEventHandler PropertyChanged;

    private ICommand clickCommand;
    public ICommand ClickCommand
    {
        get
        {
            if (clickCommand == null)
            {
                clickCommand = new RelayCommand(param => ChangeState(), param => CanChange());
            }
            return clickCommand;
        }
    }

    /// <summary>
    /// 
    /// </summary>
    private void ChangeState()
    {
        if (State == 0)
        {
            State = 1;
        }
        else
        {
            State = 0;
        }
    }

    private bool CanChange()
    {
        return true;
    }

    //Button state
    public int State
    {
        get{ return state; }
        set
        {
            state = value;
            OnPropertyChange("State");
        }
    }

    /// <summary>
    /// On Property Changed
    /// </summary>
    /// <param name="name"></param>
    public void OnPropertyChange(string prop)
    {
       PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(prop));
        }
    }
  }
}