I recreated the app quickly. When running the app I noticed this error in the debug output:
Error: BindingExpression path error: 'Message' property not found on 'App4.TwitterMessageUserControl'. BindingExpression: Path='Message' DataItem='App4.TwitterMessageUserControl'; target element is 'App4.TwitterMessageUserControl' (Name='root'); target property is 'TwitterMessage' (type 'TweetMessage')
The problem is that when you do DataContext = this;
in the TwitterMessageUserControl_Loaded
it will look for a Message
property on itself instead of the DataContext set in your view. Comment out this line and it should work fine:
Additionally if you want to simplify the bindings further in the UserControl
XAML you can bind to the root
in the Border, and then just bind without specifying the ElementName
for every binding inside that, like this:
<Border DataContext="{Binding ElementName=root}" Height="85" Width="400" BorderBrush="{ThemeResource ApplicationSecondaryForegroundThemeBrush}" BorderThickness="1" >
<StackPanel Background="{ThemeResource AppBarItemForegroundThemeBrush}" Orientation="Horizontal">
<Image HorizontalAlignment="Left" Height="73" x:Name="Avatar" VerticalAlignment="Top" Width="73" Margin="10,5,0,0" Source="{Binding TwitterMessage.Tweet.AuthorAvatarUrl}"/>
<StackPanel Margin="15,0,0,0">
<TextBlock HorizontalAlignment="Left" x:Name="TweetText" TextWrapping="Wrap" Text="{Binding TwitterMessage.Tweet.Message}" VerticalAlignment="Top" Foreground="Black" Width="300" Margin="0,10,0,0" FontSize="12"/>
<TextBlock TextWrapping="Wrap" Text="— @someone via Twitter" x:Name="TweetFromText" Foreground="Black" Margin="0,5,0,0"/>
</StackPanel>
</StackPanel>
</Border>