WPF Data Binding From UserControl

Question

I want to bind 'SomeText' from my UserControl, into the Content of my Label.

I currently have a UserControl which just displays my 'SomeText'. The XAML, and Code Behind file can be seen below.

<UserControl x:Class="TabHeader.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="183" d:DesignWidth="235"
             x:Name="uc">
    <Grid>
        <Label Height="43" HorizontalAlignment="Left" Margin="57,102,0,0" Name="textBlock1" Content="{Binding Path=SomeText, ElementName=uc}" VerticalAlignment="Top" Width="86" />
    </Grid>
</UserControl>


namespace TabHeader
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    public partial class UserControl1 : UserControl
    {
        private string someText;

        public UserControl1()
        {
            this.SomeText = "23";

            InitializeComponent();
        }

        public string SomeText
        {
            get 
            { 
                return someText; 
            }
            set
            {
                someText = value;
            }
        }
    }
}

I then have my main XAML page where I have, a Tab Control within a Grid. I'm using a Style to generate two Labels within the Columns Header. I am able to pull through the Header field, but I am unable to pull through the controls field.

<Window x:Class="TabHeader.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vw="clr-namespace:TabHeader"
        Title="MainWindow" Height="350" Width="525" Name="Tabs">
    <Grid>
        <TabControl Height="262" HorizontalAlignment="Left" Margin="47,26,0,0" Name="tabControl1" VerticalAlignment="Top" Width="366">
            <TabControl.Resources>
                <Style TargetType="TabItem" x:Key="tabItemHeaderStyle" >
                    <Setter Property="HeaderTemplate" >
                        <Setter.Value>
                            <DataTemplate DataType="{x:Type TabItem}">
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>
                                    <Label Content="{Binding Path=SomeText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=vw:UserControl1}}"/>
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

            </TabControl.Resources>

            <TabItem Style="{StaticResource tabItemHeaderStyle}" Header="TI 1" Name="tabItem1" Width="100">
                <vw:UserControl1 x:Name="UserControl11"></vw:UserControl1>
            </TabItem>
            <TabItem Style="{StaticResource tabItemHeaderStyle}" Header="TI 2" Name="tabItem2">
            </TabItem>

        </TabControl>
    </Grid>
</Window>

Any assistance with this would be greatly appreciated.

Cheers.

Edit 1 For anyone interested added my working code below, where I have used the DependencyProperty.

MainWindow.xaml

<Grid>
<TabControl Height="262" HorizontalAlignment="Left" Margin="47,26,0,0" Name="tabControl1" VerticalAlignment="Top" Width="366">
    <TabControl.Resources>

        <Style TargetType="TabItem" x:Key="tab1ItemHeaderStyle">
            <Setter Property="HeaderTemplate" >
                <Setter.Value>
                    <DataTemplate DataType="{x:Type TabItem}">
                        <StackPanel Orientation="Horizontal">
                            <Label Content="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>
                            <Label Content="{Binding Path=UC1Figure, ElementName=uc1}"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>

    <TabItem Style="{StaticResource tab1ItemHeaderStyle}" Header="[Tab 1]" Name="tabItem1" Width="100">
        <vw:UserControl1 x:Name="uc1"></vw:UserControl1>
    </TabItem>
<TabControl>
</Grid>

UserControl1.xaml

<Grid>
    <Label Height="43" HorizontalAlignment="Left" Margin="69,128,0,0" Name="textBlock1" Content="{Binding Path=UC1Figure, ElementName=uc}" VerticalAlignment="Top" Width="100" />
    <Button Name="updateSomeFigure" Content="Press Me" Click="updateSomeFigure_Click" Width="100" Height="100" Margin="69,12,66,71" />
</Grid>

UserControl1.xaml.cs

public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty SomeFigureProperty =
        DependencyProperty.Register("UC1Figure", typeof(int), typeof(UserControl1));

    public int UC1Figure
    {
        get { return (int)this.GetValue(SomeFigureProperty); }
        set { this.SetValue(SomeFigureProperty, value); }
    }

    private void updateSomeFigure_Click(object sender, RoutedEventArgs e)
    {
        UC1Figure = UC1Figure + 1;
    }
}

Answer 1

If you want to data bind a property to the UI of your UserControl, you have two options. The first is to implement the INotifyPropertyChanged Interface in your code behind. The second is to define DependencyPropertys instead of regular CLR properties. You can find out how to do that in the Dependency Properties Overview page on MSDN.

You might also want to read the Data Binding Overview‎ page on MSDN before you start data Binding.