Question

I thought this would be pretty simple to do but seems I must be missing something blinding obvious.

The problem is that I am passing values to my UserControl (BoxPanel) but the values are not displayed. The blue box is displayed without text.

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:l="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <l:BoxPanel Number="1" Text="Hi" />
    </Grid>
</Window>

BoxPanel.xaml

<UserControl x:Class="WpfApplication1.BoxPanel"
         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" 
         Height="50" Width="90">
<Border Background="Blue">
    <StackPanel>
        <TextBlock FontSize="20" HorizontalAlignment="Center" 
            Text="{Binding Number}" />
        <Label FontSize="10" HorizontalAlignment="Center" Foreground="White" 
            Content="{Binding Text}" />
    </StackPanel>
</Border>

BoxPanel.xaml.xs

public partial class BoxPanel : UserControl
{
    public static readonly DependencyProperty NumberProperty = 
        DependencyProperty.Register("Number", typeof(decimal), typeof(BoxPanel));
    public static readonly DependencyProperty TextProperty = 
        DependencyProperty.Register("Text", typeof(string), typeof(BoxPanel));

    public BoxPanel()
    {
        InitializeComponent();
    }

    public decimal Number
    {
        get { return (decimal)GetValue(NumberProperty); }
        set { SetValue(NumberProperty, value); }
    }

    public string Text
    {
        get { return (string)base.GetValue(TextProperty); }
        set { base.SetValue(TextProperty, value); }
    }
}

Answer 1

Binding paths, by default, are rooted at the DataContext. But you wish to bind to properties defined on the UserControl. So you have to redirect them somehow. I usually just do it by ElementName.

<UserControl x:Class="WpfApplication1.BoxPanel"
         x:Name="BoxPanelRoot"
         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" 
         Height="50" Width="90">
<Border Background="Blue">
    <StackPanel>
        <TextBlock Text="{Binding Number, ElementName=BoxPanelRoot}" />
        <Label Content="{Binding Text, ElementName=BoxPanelRoot}" />
    </StackPanel>
</Border>

It seems a little odd at first, and somewhat annoying to redirect bindings like this, but it is preferrable than other methods which utilize the DataContext within the UserControl. If you block the DataContext by, say, setting it to the root of the UserControl, you have effectively blocked the best method of passing data into the UserControl.

Rule of thumb, when binding in a UserControl, leave the DataContext alone unless you are explicitly binding against data passed to the UserControl.