Assign the value of a dynamic element to another element - xaml

Question

I have a ellipse with "width='auto'", and I want a circle, so it's not possible set "height='auto'" because if the user resize the window, the circle will be a ellipse. I've tried "Height='{Binding ElementName=TheLeft, Path=Width}'".
<Page
x:Class="App2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<!--<Ellipse x:Name="TheLeft" Fill="Pink" Grid.Column="0" Height="{Binding ElementName=TheLeft, Path=Width}" Width="auto" VerticalAlignment="Bottom"/>-->
<!-- I've set Height="200" in the uncommented element -->
<Ellipse x:Name="TheLeft" Fill="Pink" Grid.Column="0" Height="200" Width="auto" VerticalAlignment="Bottom"/>
<Rectangle Fill="Red" Grid.Column="1" RadiusX="50" RadiusY="40"/>
<Ellipse Fill="Pink" Grid.Column="2" Height="200" Width="auto" VerticalAlignment="Bottom"/>
</Grid>
</Page>

Answer 1

First, I am going to definitely suggest you take out the inline styling, especially since you want the same values for many of the properties for the two Ellipses.
<Style x:Key="circularEllipse" TargetType="{x:Type Ellipse"}>
<Setter Property="Fill" Value="Pink"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Height" Value="200"/>
<Setter Property="Width" Value="{Binding Path=Height, RelativeSource={RelativeSource Self}}"/>
</Style>
And then when you code the ellipse - you just need to call this style and it can be used for both of them, saving you coding time and reducing the amount of code on your layout.
<Ellipse x:Name="TheLeft" Grid.Column="0" Style="{StaticResouce circularEllipse}"/>
So, if you need to change the size of the circle, you only have to change the property in one place. Also, if you need a variant, you can use the BasedOn option and not have to redo the entire code. Such as:
<Style x:Key="circularEllipse2" TargetType="{x:Type Ellipse}" BasedOn="{StaticResource circularEllipse}">
<Setter Property="Height" Value="100"/>
</Style>
This will pick up all of the other properties from the previous style, but change the height (or any other property you may need to change)