C# WPF user Control Binding Problem

Question

I'm building a simple user control toggle switch, I'm using the margin to move the Ellipse once the user selects with the left mouse button. I want the usage to bind to a boolean to make it simple.

The control works when i put it in a datagrid but fails to bind to the data source i provide (obviously) i dont know how to tie everything together

i added the final usage at the bottom

i tested the usage with just regular checkboxes in the datagrid and the bind works fine

can some body help

Thanks

Madaxe

<UserControl x:Class=&#34;WpfApp5.ToggleButtonUserControl&#34;
xmlns=&#34;http://schemas.microsoft.com/winfx/2006/xaml/presentation&#34;
xmlns:x=&#34;http://schemas.microsoft.com/winfx/2006/xaml&#34;
xmlns:mc=&#34;http://schemas.openxmlformats.org/markup-compatibility/2006&#34; 
xmlns:d=&#34;http://schemas.microsoft.com/expression/blend/2008&#34; 
xmlns:local=&#34;clr-namespace:WpfApp5&#34;
mc:Ignorable=&#34;d&#34; 
d:DesignHeight=&#34;120&#34; d:DesignWidth=&#34;240&#34;>

<Grid>
<Viewbox>
<Grid Height=&#34;120&#34; Width=&#34;240&#34; Margin=&#34;0,0,0,0&#34; HorizontalAlignment=&#34;Left&#34; VerticalAlignment=&#34;Top&#34;>
<Rectangle Name=&#34;Rec_Back&#34; 
MouseLeftButtonDown=&#34;Rec_Back_MouseLeftButtonDown&#34; 
Fill=&#34;#FFF54E42&#34; 
Height=&#34;115&#34; Width=&#34;235&#34; 
RadiusY=&#34;60&#34; RadiusX=&#34;60&#34; 
Margin=&#34;2.5,2.5,2.5,2.5&#34; 
HorizontalAlignment=&#34;Left&#34; VerticalAlignment=&#34;Top&#34;/>
<Ellipse Name=&#34;Eli_Slider&#34; 
MouseLeftButtonDown=&#34;Eli_Slider_MouseLeftButtonDown&#34; 
Fill=&#34;White&#34; 
Height=&#34;110&#34; Width=&#34;110&#34; 
Margin=&#34;{Binding Path=ThicknessBinding, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}&#34; 
HorizontalAlignment=&#34;Left&#34; VerticalAlignment=&#34;Top&#34; />
</Grid>
</Viewbox>
</Grid>
</UserControl>



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 WpfApp5
{
/// <summary>
/// Interaction logic for ToggleButtonUserControl.xaml
/// </summary>
public partial class ToggleButtonUserControl : UserControl
{

public bool IsToggled {
get { return Convert.ToBoolean(this.GetValue(IsToggledProperty)); }
set { this.SetValue(IsToggledProperty, value); } }

public static readonly DependencyProperty IsToggledProperty =
DependencyProperty.Register(&#34;IsToggled&#34;, typeof(bool), typeof(ToggleButtonUserControl),
new PropertyMetadata(false, new PropertyChangedCallback(ChangeIsToggled)));

private static void ChangeIsToggled(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if ((bool)e.NewValue == true)
{
(d as ToggleButtonUserControl).Eli_Slider.Margin = (d as ToggleButtonUserControl).LeftThickness;
}
else
{
(d as ToggleButtonUserControl).Eli_Slider.Margin = (d as ToggleButtonUserControl).RightThickness;
}
}

public Thickness ThicknessBinding {
get { return (Thickness)(this.GetValue(ThicknessBindingProperty)); }
set { this.SetValue(ThicknessBindingProperty, value); }}

public static readonly DependencyProperty ThicknessBindingProperty =
DependencyProperty.Register(&#34;ThicknessBinding&#34;, typeof(Thickness), typeof(ToggleButtonUserControl),
new PropertyMetadata(new Thickness(5, 5, 5, 5), new PropertyChangedCallback(CallbackThicknessBinding)));

private static void CallbackThicknessBinding(DependencyObject d, DependencyPropertyChangedEventArgs e)
{

}

public Thickness LeftThickness = new Thickness(5, 5, 5, 5);
public Thickness RightThickness = new Thickness(125, 5, 5, 5);

public SolidColorBrush OffColor = new SolidColorBrush(Color.FromRgb(245, 78, 66));
public SolidColorBrush OnColor = new SolidColorBrush(Color.FromRgb(66, 245, 96));

public ToggleButtonUserControl()
{
InitializeComponent();
Eli_Slider.DataContext = this;

Rec_Back.Fill = this.OffColor;
this.IsToggled = false;
Eli_Slider.Margin = RightThickness;
}

private void Eli_Slider_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
ToggleAction();
}

private void Rec_Back_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
ToggleAction();
}

private void ToggleAction()
{
if (!this.IsToggled)
{
Eli_Slider.Margin = RightThickness;
this.IsToggled = true;
Rec_Back.Fill = this.OnColor;
}
else
{
Eli_Slider.Margin = LeftThickness;
this.IsToggled = false;
Rec_Back.Fill = this.OffColor;
}
}
}
}




<Window x:Class=&#34;WpfApp5.MainWindow&#34;
xmlns=&#34;http://schemas.microsoft.com/winfx/2006/xaml/presentation&#34;
xmlns:x=&#34;http://schemas.microsoft.com/winfx/2006/xaml&#34;
xmlns:d=&#34;http://schemas.microsoft.com/expression/blend/2008&#34;
xmlns:mc=&#34;http://schemas.openxmlformats.org/markup-compatibility/2006&#34;
xmlns:local=&#34;clr-namespace:WpfApp5&#34;

mc:Ignorable=&#34;d&#34;
Title=&#34;MainWindow&#34; Height=&#34;450&#34; Width=&#34;800&#34;>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=&#34;auto&#34;/>
<RowDefinition Height=&#34;auto&#34;/>
<RowDefinition Height=&#34;auto&#34;/>
<RowDefinition Height=&#34;auto&#34;/>
<RowDefinition Height=&#34;*&#34;/>
</Grid.RowDefinitions>

<DataGrid 
Name=&#34;TestDataGrid&#34;
ItemsSource=&#34;{Binding SecurityModels, 
Mode=TwoWay, 
NotifyOnSourceUpdated=True, 
UpdateSourceTrigger=PropertyChanged}&#34;
AlternatingRowBackground=&#34;Gray&#34;
CanUserAddRows=&#34;False&#34;
AutoGenerateColumns=&#34;False&#34;
HorizontalAlignment=&#34;Left&#34; 
VerticalAlignment=&#34;Top&#34;
Height=&#34;400&#34; 
Width=&#34;619&#34; 
Margin=&#34;10,10,0,0&#34; Grid.RowSpan=&#34;5&#34;>
<DataGrid.Columns>
<DataGridTextColumn Binding=&#34;{Binding application_Name}&#34; Header=&#34;Application Name&#34;/>

<DataGridTemplateColumn Header=&#34;Can Create&#34;>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<local:ToggleButtonUserControl Width=&#34;44&#34; Height=&#34;20&#34; IsToggled=&#34;{Binding canCreate}&#34;/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

<DataGridTemplateColumn Header=&#34;Can Delete&#34;>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<local:ToggleButtonUserControl Width=&#34;44&#34; Height=&#34;20&#34; IsToggled=&#34;{Binding canDelete}&#34;/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

<DataGridTemplateColumn Header=&#34;Can Read&#34;>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<local:ToggleButtonUserControl Width=&#34;44&#34; Height=&#34;20&#34; IsToggled=&#34;{Binding canRead}&#34;/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

<DataGridTemplateColumn Header=&#34;Can Replace&#34;>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<local:ToggleButtonUserControl Width=&#34;44&#34; Height=&#34;20&#34; IsToggled=&#34;{Binding canReplace}&#34;/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

<DataGridTemplateColumn Header=&#34;Can Update&#34;>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<local:ToggleButtonUserControl Width=&#34;44&#34; Height=&#34;20&#34; IsToggled=&#34;{Binding canUpdate}&#34;/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>

Answer 1

I FIXED IT

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace WpfApp5
{
    public partial class ToggleButtonUserControl : UserControl
    {
        public bool IsToggled
        {
            get { return (bool)GetValue(IsToggledProperty);}
            set { SetValue(IsToggledProperty, value); Console.WriteLine(value); }
        }

        public static readonly DependencyProperty IsToggledProperty =
            DependencyProperty.Register("IsToggled", typeof(bool), typeof(ToggleButtonUserControl), 
                new PropertyMetadata(false, new PropertyChangedCallback(ChangeIsToggled)));

        private static void ChangeIsToggled(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            //Console.WriteLine((d as ToggleButtonUserControl).IsToggled.ToString());
            if ((bool)e.NewValue == false)
            {
                (d as ToggleButtonUserControl).Eli_Slider.Margin = (d as ToggleButtonUserControl).LeftThickness;
                (d as ToggleButtonUserControl).Rec_Back.Fill  = (d as ToggleButtonUserControl).OffColor;
            }
            else
            {
                (d as ToggleButtonUserControl).Eli_Slider.Margin = (d as ToggleButtonUserControl).RightThickness;
                (d as ToggleButtonUserControl).Rec_Back.Fill = (d as ToggleButtonUserControl).OnColor;
            }
        }

        public Thickness LeftThickness = new Thickness(5, 5, 5, 5);
        public Thickness RightThickness = new Thickness(125, 5, 5, 5);

        public SolidColorBrush OffColor = new SolidColorBrush(Color.FromRgb(245, 78, 66));
        public SolidColorBrush OnColor = new SolidColorBrush(Color.FromRgb(66, 245, 96));

        public ToggleButtonUserControl()
        {
            InitializeComponent();
        }

        private void Eli_Slider_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.IsToggled = (this.IsToggled) ? false : true;
        }

        private void Rec_Back_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.IsToggled = (this.IsToggled) ? false : true;
        }
    }
}