How to position relative to a child element within another control in XAML - xaml

Question

In a UWP app, I have a custom UserControl with some child controls (text boxes, labels, etc.). I have a Page that includes that UserControl as a child element. Now, I want to place a button below that UserControl and align it with one of the control's child text boxes using a RelativePanel. I can't figure out a way to access the child element.
For example, I have a custom control:
<UserControl
x:Class="Sandbox.FooControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sandbox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<TextBox
x:Name="TheTextBoxIWantToAlignWith"
x:FieldModifier="public"/>
</Grid>
And now I want to align with "TheTextBoxIWantToAlignWith":
<UserControl
x:Class="Sandbox.FooParentControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sandbox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<RelativePanel>
<local:FooControl
x:Name="Foo"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignHorizontalCenterWithPanel="True"/>
<Button
RelativePanel.Below="Foo"
RelativePanel.AlignLeftWith="Foo.TheTextBoxIWantToAlignWith"/> <!-- This doesn't work -->
</RelativePanel>
Obviously this doesn't work ("RelativePanel error: The name 'Foo.TheTextBoxIWantToAlignWith' does not exist in the current context."). I tried:
Setting the FieldModifier to public on the child TextBox
Exposing the TextBox as a public property in code-behind
Exposing the TextBox as a DependencyProperty in code-behind
I really want to avoid flattening out the UserControl into the parent page because it can be reused elsewhere. Is there any way to do this?

Answer 1

I ended up working around the issue with code-behind, similar to Lindsay's suggestion. I hooked into the LayoutUpdated event, which calculated and set the margin. Something like this:
private void AlignButton()
{
var transform = Foo.TheTextBoxIWantToAlignWith.TransformToVisual(RootPanel);
var textBoxRightEdge = transform .TransformPoint(new Point()).X + Foo.TheTextBoxIWantToAlignWith.ActualWidth;
var rightMargin = RootPanel.ActualWidth - textBoxRightEdge;
if (Math.Abs(TheButtonIWantToAlign.Margin.Right - rightMargin) >= 1)
TheButtonIWantToAlign.Margin = new Thickness(0, 0, rightMargin, 0);
}