Binding margin of a grid (or a control) in WPF

Question

I want to bind some controls' margin, let's say, a button for example:

<Window.Resources>
    <local:MarginConverter x:Key="marginConverter1"/>
</Window.Resources>

<Grid HorizontalAlignment="Left" VerticalAlignment="Top" 
      Margin="{Binding MyThickness, 
      Converter={StaticResource marginConverter1}}">
    <Button>Button1</Button>
</Grid>

According to the ref. here: SO: Binding a part of the margin, I created a MarginConverter class and a MyDataContext class to implement INotifyPropertyChanged interface (see below), but the Button1 persists in the top-left position (as if its margin is 0).

Public Class MyDataContext
   Implements INotifyPropertyChanged

   Private _myThickness As Thickness = New Thickness(20, 10, 20, 0)

   Public Event PropertyChanged As PropertyChangedEventHandler _
       Implements INotifyPropertyChanged.PropertyChanged

   Private Sub OnPropertyChanged(propertyName As String)
       RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
   End Sub

   Public Property MyThickness As Thickness
       Get
           Return _myThickness 
       End Get
       Set(value As Thickness)
           _myThickness = value
           OnPropertyChanged("MyThickness")
       End Set
   End Property
End Class

And the code behind:

Dim myDataContext1 As New MyDataContext()
Private Sub Window1_Initialized(sender As Object, e As EventArgs) Handles Me.Initialized
   myDataContext1.MyThickness = New Thickness(20, 150, 20, 0)
End Sub

Please help me to clarify my misunderstanding, even a basic knowledge or a clear explanation from you will be appreciated!

P/S: My intention for binding the top margin is when user does some specific task, a 25-height border will be appear at the top of the window, so all the existing controls must go down. So that if you have another approach, please share here. Thank you.

Answer 1

If you only want to provide a height of 25 on top of your grid dynamically, You can do it by adding a border on top row of the grid and change its visibility to "Collapsed" to "visible".

<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
    <StackPanel>
    <Border Height="25"   Visibility="Collapsed">

    </Border>
    <Button >Button1</Button>
    </StackPanel>
</Grid>

Answer 2

Ok so here working example for you, sorry but only at C# app.xaml

  <Application.Resources>
    <ResourceDictionary>
            <viewModel:TestVM x:Key="TestVm"/>
    </ResourceDictionary>
  </Application.Resources>

ViewModel

public class TestVM : INotifyPropertyChanged
    {
        Thickness myThickness = new Thickness(20,10,20,0);

        public Thickness MyThickness
        {
            get { return myThickness; }
            set { myThickness = value; OnPropertyChanged(); }
        }




        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

Window1.xaml

<Window x:Class="WPF_Test_Canvas_Chart.Windows.Window1"
        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:WPF_Test_Canvas_Chart.Windows"
        mc:Ignorable="d"
        DataContext="{StaticResource TestVm}"
        Title="Window1" Height="300" Width="300">
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" 
      Margin="{Binding MyThickness}">
            <Button>Button1</Button>
        </Grid>

</Window>

Window1.cs

public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            var data = this.DataContext as TestVM;
            data.MyThickness = new Thickness(100,10,20,0);
        }
    }