Binding to UserControl DependencyProperty does not work as expected

Question

I have a header in each page of my Windows Phone 8 Silverlight app. To stop repeating myself I decided to create a simple UserControl witch holds a Grid and a TextBlock. The text of the TextBlock is binded to a DependencyProperty of the UserControl (TitleProperty). See the code at the end.

For the binding to the TitleProperty to work properly I needed to bind the DataContext of the UserControl to itself with the code: DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}".

This works properly when using the control in a page and setting a fixed value or a StaticBinding for the Title property. Ex.:

This works:

<uiuc:SubSectionHeader Title="My fixed title" />

This works to

<uiuc:SubSectionHeader Title="{Binding Source={StaticResource Literals}, Path=Literals.applicationSettings, FallbackValue='[Application Settings]'}" />

But when doing a normal bind it does not work. Ex

<uiuc:SubSectionHeader Title="{Binding Path=UserName'}" />

And that is because the UserControl is looking for the UserName property in its own DataContext (witch is itself), and not in the DataContext of the page.

Question 1 is: Should´t it resolve the binding before passing the value to the Title property?

Question 2: Is it just overwriting the binding in inside the UserControl?

Question 3: How to resolve it? Please don't say create a custom control instead because it sucks

<UserControl x:Class="UI.UserControls.SubSectionHeader"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:converters="clr-namespace:UI.Converters"
             mc:Ignorable="d"
             FontFamily="{StaticResource PhoneFontFamilyNormal}"
             FontSize="{StaticResource PhoneFontSizeNormal}"
             Foreground="{StaticResource PhoneForegroundBrush}"
             d:DesignHeight="50"
             d:DesignWidth="480"
             DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">

    <UserControl.Resources>
        <converters:StringCaseConverter x:Name="ToUppercase" />
        <converters:BooleanToVisibilityConverter x:Key="BoolToVisibility" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          Height="50"
          Background="{Binding Source={StaticResource ThemeSetter}, Path=BackgroundColor}">

        <TextBlock VerticalAlignment="Center"
                   Margin="25 0 0 0"
                   Style="{StaticResource PhoneTextNormalStyle}"
                   Foreground="White"
                   Text="{Binding Path=Title, Mode=TwoWay, Converter={StaticResource ToUppercase}, ConverterParameter='upper', FallbackValue='[SUB SECTION TITLE]'}" />

    </Grid>
</UserControl>

Code behind:

using System.Windows;
using System.Windows.Controls;

namespace UI.UserControls {

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

        public string Title {
            get { return (string)GetValue( TitleProperty ); }
            set { SetValue( TitleProperty, value ); }
        }

        public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(
            "Title",
            typeof( string ),
            typeof( SubSectionHeader ),
            new PropertyMetadata( "[SubSection Title]" )
        );

    }
}

Matthew Matthew · Accepted Answer · 2014-09-24T19:16:06

Have you tried setting the DataContext of your UserControl in the code behind? (You would remove the setter in the xaml)

  public partial class SubSectionHeader : UserControl {
        public SubSectionHeader() {
            InitializeComponent();
            DataContext = this;
        }

Edit: Try setting the design instance of your control inside the xaml. (Leave the code behind statement as well)

<UserControl
    x:Class="MyControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    d:DataContext="{d:DesignInstance}">

Binding to UserControl DependencyProperty does not work as expected

1 Answers