How to create a XAML binding to a member variable?

Question

I am new to XAML and data binding. I want to define a GUI control in MainWindow.xaml that gets its data from a member variable in MainWindow.xaml.cs . For simplicity, I just created a program that displays a counter, as well as a button to increase the counter.

Based on earlier threads , I looked up, I came up with the following code:

MainWindow.xaml.cs

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace XAMLBindingTest { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { private int Counter { get { return (int)GetValue(CounterProperty); } set { SetValue(CounterProperty, value); } } public static readonly DependencyProperty CounterProperty = DependencyProperty.Register("Counter", typeof(int), typeof(MainWindow), new PropertyMetadata(null)); public MainWindow() { Counter = 0; InitializeComponent(); } private void incrementCounter(object sender, RoutedEventArgs e) { ++Counter; } } } 

MainWindow.xaml

 <Window x:Class="XAMLBindingTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="140" Width="180"> <Grid> <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top"> <TextBlock x:Name="txbCounter" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Counter}" VerticalAlignment="Top"/> <Button x:Name="btnIncrement" Content="Increment" Width="75" Click="incrementCounter"/> </StackPanel> </Grid> </Window> 

This example compiles, but TextBlock does not show the value of the counter. How to connect a TextBlock element to a Counter element?

Answer 1

Try adding a "Name" to the window and bind with the "ElementName"

 <Window x:Class="XAMLBindingTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Name="UI"> <Grid> <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top"> <TextBlock x:Name="txbCounter" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding ElementName=UI, Path=Counter}" VerticalAlignment="Top"/> <Button x:Name="btnIncrement" Content="Increment" Width="75" Click="incrementCounter"/> </StackPanel> </Grid> </Window> 

Answer 2

If you understand correctly:

 ItemSource="{Binding Path=TestData, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type common:LayoutAwarePage}}}" 

TestData is a property of type ObservableCollection declared in the .xaml.cs file. ItemSource is the property of the object you want to bind to.

UPD2:

 <ItemsControl ItemSource="{Binding Path=TestData, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type common:LayoutAwarePage}}}"> <ItemsControl.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding}" /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>