All geek questions in one place

Binding Data with ElementName in PageBottomAppBar

I am trying to associate an element inside a BottomAppBar with an element outside it.

Here's a sample XAML to find out:

<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 is never updated (the text field that it is connected to is outside the BottomAppBar), however, the second button is updated, as you would expect. How to make a page visible to BottomAppBar?

+4
source share
3 answers

I don’t have the courage to say this is a mistake, although I still think that I played around this problem, which takes me like one week:

First: This is not only for the BottomAppBar , TopAppBar experiencing the same problem.

Second: The problem is that the ElementName binding ElementName works when your source element is an element that is inside one of the AppBars, which 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 two AppBars (source): doesn't work
  • From BottomAppBar (target) to something outside two AppBars (source): not working

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 contents of the first button in both AppBars will not show anything, but the second button of both of the AppBars will display correctly.

I found out that the only thing AppBar sees from the outside is the DataContext root element of the Page , so think about using the backing property in the DataContext to handle all this, this works great for me

+1
source

This does not work because the “text” of the TextBox is in a different visual tree than the button, so the button does not know about the “text”. Such binding is not possible directly, but there is a solution.

0
source

Can you try this

 <Button Content="{Binding Path=text.Text}" Click="Button_Click_1"></Button>
-1
source

Source: https://habr.com/ru/post/1438301/

More articles:


All Articles