Line element Y value not Binding to Parent StackPanel ActualHeight property

Question

In my MainPage. I have a Grid with 1 row, and 2 columns. Both columns have a StackPanel each. The left column StackPanel has an "Add" button (so it has an initial height of 100 units); the right column StackPanel is empty. On clicking the "Add" button, I add two UserControls of the same height to the Grid, one in each column/StackPanel. Since there is an Add button in the left column, the height is always 100 units more than that of the left column. I can see that the values of the left and right Stackpanels' ActualHeight increasing each time I click "Add", and the UserControls are created and added.

Now, I am trying to add a Line element to the right column StackPanel, and I want the length of the line to increase along with the length of the columns. My code currently looks like this:

<ScrollViewer Grid.Column="1" Grid.Row="0" RequestedTheme="Dark" ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <StackPanel x:Name="RightContainer" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto">
        <!--UserControls added here dynamically-->
    </StackPanel>
</ScrollViewer>
<Line Grid.Column="1" Grid.Row="0" Stroke="White" StrokeThickness="2" Opacity="0.7" X1="100" X2="100" Y1="{Binding ElementName=RightContainer, Path=ActualHeight}" Y2="0" />

However, this doesn't show the line at all. If I set Y1="{Binding ElementName=LeftContainer, Path=ActualHeight}", I get a Line of height 100, but that height doesn't increase with the height of the columns. Any idea what I could be missing?

Answer 1

ActualWidth/Height aren't bindable (they don't raise change notifications). You'll need to handle SizeChange event instead