uwp data binding: how to listen to any change of Grid.WidthProperty

Question

Say I have a Grid and a Line inside that Grid . I want the Line's Width to be same as the Grid's Width all the time. So, I bound them

<Page
    x:Class="GeoDraw.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GeoDraw"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:x1="using:System"
    mc:Ignorable="d" Background="#FF262626" RequestedTheme="Dark" Loaded="Page_Loaded">

    <Grid x:Name="grid" BorderBrush="#FFE02121" Margin="20" Background="#FFD69696">
        <Line Stroke="White" Y1="20" Y2="20" X1="0" X2="{Binding ElementName=grid, Path=ActualWidth}" />
    </Grid>
</Page>

the line initially takes the width of the grid, but changing the grid's size doesn't change the Line's width. How can I bind those properties correctly?

Answer 1

Probably not the implementation which you are looking for but if you really want that behavior you could always define an event handler to respond to your Grid SizeChanged event, and update the Line X2 property in code-behind:

<Grid x:Name="grid" BorderBrush="#FFE02121" Margin="20" Background="#FFD69696" SizeChanged="grid_SizeChanged">
   <Line x:Name="myline" Stroke="White" Y1="20" Y2="20" X1="0" X2="{Binding ActualWidth, ElementName=grid, Mode=OneTime}" />
</Grid>

Update your Line in the EventHandler,

private void grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
   myline.X2 = grid.ActualWidth;
}

Not only wasn't I obtaining any kind of binding error expression, but binding to the ActualWidth dependency property was not working for other controls, such as TextBox, for instance.

It became more apparent that the reason was pointing to a particular behaviour of the ActualWidth dependency property, rather than anything else. While checking out the ActualWidth documentation (ActualWidth) on the FrameworkElement class, found evidence which supports this approach.

Although it has an ActualWidthProperty backing field, ActualWidth does not raise property change notifications and it should be thought of as a regular CLR property and not a dependency property.

...

For purposes of ElementName binding, ActualWidth does not post updates when it changes (due to its asynchronous and run-time calculated nature). Do not attempt to use ActualWidth as a binding source for an ElementName binding. If you have a scenario that requires updates based on ActualWidth, use a SizeChanged handler.

Looking back onto the Binding definition above, I changed the Binding Mode from its Default OneWay to OneTime, to only calculate the initial dimension for the X2 property when the UI is first shown, since there is no reason to "waste" resources trying to "observe" an ActualWidth value modification when at the source we will never be signaled of any modification. Or you could always, set the initial value in code-behind as well.