DataTriggers and default property when using ViewModels, Dependency Properties - wpf

Question

I have a UserControl and a ViewModel for it.
The UserControl is a simple Button Template, with an Ellipse in it. Basically a round button.
I use the ViewModel as a DataContext for the UserControl.
The ViewModel has a property called "State" whose value I use as a DataTrigger to change "Colors" of the Ellipse, these "Colors" are Dependency Properties in the UserControl.
Everything seems to work, but I cannot set the Default Colors for the Ellipse and because of that I don`t see anything in the Designer for the UserControl. See attached picture.
I do see the correct colors and the shapes when I place the UserControl on to the main window designer.
I definitely would like to see the shapes in the UserControl with some default values, so its easier to see what I`m working with.
This I believe is something to do with DataBinding "State" value from the ViewModel.
Here is the Code : 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 file
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));
}
}
}
}