How to translate objects with different parent together wpf Canvas and Grid

Question

I'm trying to do a Rotate/Translate/Scale of objects using a canvas for the actual figure and I use a Grid for "thumbs" container (Thumbs are some small ellipses)

I have some trouble understanding the logic behind this example.

<Window x:Class="RotateMe.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:RotateMe"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button x:Name="AddRectangle" Width="50" Grid.Row="0" HorizontalAlignment="Left" Click="AddRectangle_Click"/>
        <Canvas x:Name="DrawingCanvas" Grid.Row="1" Background="Gray">
            <Ellipse x:Name="Thumb3" Fill="Azure"  Height="10" Width="10" >
                <Ellipse.RenderTransform>
                    <TranslateTransform X="-50" Y="-50"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse x:Name="Thumb4" Fill="Beige"  Height="10" Width="10"  >
                <Ellipse.RenderTransform>
                    <TranslateTransform X="50" Y="50"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Canvas>
        <Grid x:Name="ThumbsParent" Grid.Row="1" RenderTransformOrigin="1,1">
            <Ellipse x:Name="Thumb" Fill="Red"  Height="10" Width="10"  RenderTransformOrigin="1,1">
                <Ellipse.RenderTransform>
                    <TranslateTransform X="-50" Y="-50"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse x:Name="Thumb2"  Height="10" Width="10"  Fill="Green">
                <Ellipse.RenderTransform>
                    <TranslateTransform X="50" Y="50"/>
                </Ellipse.RenderTransform>
            </Ellipse>             
        </Grid>
    </Grid>
</Window>

So here I have

A Grid over an Canvas (same size)

Each of them contain a 10/10 ellipse that one is render transform -50/-50 and one is 50/50.

I would have expected the same behavior (overlap of the ellipses on both -50/-50 and 50/50)

Instead it looks like this.

So from what I understand from this.

Grid renders from CenterX/CenterY Canvas renders from 0/0.

Is there a particular reason this is happening?

Why I am asking this, because I wanted to use a TranslateTransform for all my object and if one moves, all should move, but because one translate from 0/0 and one from CenterX/CenterY the same translate won't work on these elements.