WPF binding trouble

Question

I have a small rectangle that is resizable and I need to show the distance in pixels from the border to the closest side of the image.

Currently the red numbers are width and height of the blue rectangle. As the result red numbers should show the length of the blue bars instead.

I have the following binding :

<Grid x:Name="sizeInfo" SnapsToDevicePixels="True">
  <TextBlock Text="{Binding Width, StringFormat={}{0:0}}" Background="Transparent" Padding="0,0,0,0" Foreground="#FF0000" Margin="0,0,0,-21" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
  <TextBlock Text="{Binding Width, StringFormat={}{0:0}}" Background="Transparent" Padding="0,0,0,0" Foreground="#FF0000" Margin="0,-21,0,0" HorizontalAlignment="Center" VerticalAlignment="Top"/>

  <TextBlock Text="{Binding Height, StringFormat={}{0:0}}" Background="Transparent" Foreground="#FF0000" Padding="0,0,0,0" Margin="-21,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
  <TextBlock Text="{Binding Height, StringFormat={}{0:0}}" Background="Transparent" Foreground="#FF0000" Padding="0,0,0,0" Margin="0,0,-21,0" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>     

The problem is that I can't figure out what the binding should look like. Probably there is the common way of doing such things but I don't know.

Answer 1

Try this:

<Rectangle Name="MyRect"
           Fill="Gainsboro"
           Width="174"
           Height="80" />

<Grid Name="SizeInfo"
      Width="{Binding Path=Width, ElementName=MyRect}" 
      Height="{Binding Path=Height, ElementName=MyRect}"
      HorizontalAlignment="Center" 
      VerticalAlignment="Center">

    <!-- StringFormat in this case is not required -->
    <TextBlock Text="{Binding Path=Width, ElementName=MyRect}" ... />
    <TextBlock Text="{Binding Path=Width, ElementName=MyRect}" ... />

    <TextBlock Text="{Binding Path=Height, ElementName=MyRect}" ... />
    <TextBlock Text="{Binding Path=Height, ElementName=MyRect}" ... />
</Grid>

Output