Binding to UserControl DependencyProperty does not work as expected - xaml

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]" )
);
}
}

Answer 1

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}">