WPF data binging variables to element properties - General binding information

Question

I have a question with regards to WPF bindings.

I cannot find clear explanations of how it works. Sure, the Microsoft docs webpage provides a lot of information, but this documentation does not clarify a lot for me. After reading the documentation I go back to my code with the conclusion that WPF bindings are too complicated and that I try to make due using event handlers instead.

I believe that I don't have to go through the hassle of using event handlers and all, and I believe that WPF databingings would improve my code a lot, making it more elegant and simple. Yet, up until now, I haven't been able to find a simple explanation and I haven't been able to get it working without just copy-pasting big pieces of code from the internet. Code I do not understand.

I've tried lots of StackOverflow posts and youtube videos but not much seems to work.

Let me show you what I'm trying to do. I have a wheel (cog) that I want to rotate. I want to manipulate that rotation programmatically. For the sake of the example, I will increase a rotation angle by one degree every second.

When I stop the debugger in the incrementation loop, I can see that the variable that holds the rotation angle has a value, that increases over time. I can also see that, when I hover over that property (variable) in the XAML part of the code, this property does have the correct value. The issue is that my UI element, that wheel I made, does not rotate.

Can anyone tell me what I'm doing wrong here? And does anyone have suggestions or sources when I can find a good explanation of how to use bindings in WPF?

Thanks in advance.

My code:

MainWindow.xaml

<Window x:Class="PropertyBindingWPF.MainWindow"
        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:PropertyBindingWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="400">
    
    <Grid>
        <StackPanel>
            <Canvas>                
                <Canvas Name="Wheel" 
                        Canvas.Top="80" 
                        Canvas.Left="150" 
                        RenderTransformOrigin=".5 .5" 
                        Width="100" 
                        Height="100">
                    <Canvas.RenderTransform>
                        <RotateTransform Angle="{Binding Path=CogRotationAngle}"/>
                    </Canvas.RenderTransform>
                    
                    <Ellipse Width="90" 
                             Height="90" 
                             StrokeThickness="2" 
                             Stroke="Black" 
                             Fill="White" 
                             Canvas.Top="5" 
                             Canvas.Left="5"/>
                    
                    <Ellipse Width="3" 
                             Height="3" 
                             StrokeThickness="2" 
                             Stroke="Blue" 
                             Canvas.Left="48.5" 
                             Canvas.Top="10"/>
                </Canvas>
            </Canvas>
        </StackPanel>
    </Grid>
    
</Window>

MainWindow.xaml.cs

using System.Windows;
using System.Threading;

namespace PropertyBindingWPF
{
    public partial class MainWindow : Window
    {
        public int CogRotationAngle { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            DataContext = this;

            Thread loop = new Thread(LoopThread);
            loop.Start();
        }

        private void LoopThread()
        {
            while (true)
            {
                CogRotationAngle++;
                if (CogRotationAngle >= 360) CogRotationAngle = 0;

                Thread.Sleep(1000);
            }
        }
    }
}