Data binding to ElementName in Page.BottomAppBar - windows-8

Question

I am trying to bind an element inside the BottomAppBar to an element outside of it.
Here's a sample XAML to elucidate:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBox x:Name="text" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Page.BottomAppBar>
<AppBar>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding Text, ElementName=text}" Click="Button_Click_1"></Button>
<Button Content="{Binding Text, ElementName=text2}" Click="Button_Click_1"></Button>
<TextBox x:Name="text2" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</AppBar>
</Page.BottomAppBar>
The first button never updates (the textbox it's bound to is outside of the BottomAppBar), however, the second button updates as you would expect. How do I make the page visible to BottomAppBar?

Answer 1

I don't have the audacity to say it's Bug, though that's what I believe it is, I played around this problem which coasts me like one week :
First : This is not just for the BottomAppBar, the TopAppBar suffers the same problem.
Second : The problem is that ElementName binding works only when your source Element is an Element that is inside one of the AppBars, that means :
From BottomAppBar(target) to TopAppBar(source) : Works
From BottomAppBar(target) to BottomAppBar(source) : Works
From TopAppBar(target) to BottomAppBar(source) : Works
From TopAppBar(target) to TopAppBar(source) : Works
From TopAppBar(target) to Something outside the two AppBars(source) : Doesn't Work
From BottomAppBar(target) to Something outside the two AppBars(source) : Doesn't Work
Example :
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBox x:Name="text" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Page.TopAppBar>
<AppBar>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding Text, ElementName=text}" Click="Button_Click_1"></Button>
<Button Content="{Binding Text, ElementName=text2}" Click="Button_Click_1"></Button>
<TextBox x:Name="text3" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBox x:Name="text3" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</AppBar>
</Page.TopAppBar>
<Page.BottomAppBar>
<AppBar>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding Text, ElementName=text}" Click="Button_Click_1"></Button>
<Button Content="{Binding Text, ElementName=text3}" Click="Button_Click_1"></Button>
<TextBox x:Name="text2" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBox x:Name="text3" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</AppBar>
</Page.BottomAppBar>
The Content of the first button in both AppBars won't show anything, however the second button of both of the AppBars will show correctly.
I found out that the only thing that the AppBar sees from outside, is the DataContext of the root Page Element, hence think about using a backing property in the DataContext to handle all that, this works fine for me.

Answer 2

It doesn't work, because "text" TextBox is in different visual tree than button, so button doesn't know about "text". Such binding is impossible directly, but there exists solution.

Answer 3

Can you try this
<Button Content="{Binding Path=text.Text}" Click="Button_Click_1"></Button>