Binding properties of User Control in Windows Phone Application

Question

In a LongListSelector , I have multiple items shown, according to the following DataTemplate :

<TextBlock Text="{Binding Subject}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" />
<StackPanel Orientation="Horizontal">
    <TextBlock Text="Last modified :" Margin="15, 0, 5, 0" Foreground="LightGray" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock Text="{Binding LastModified}" Foreground="#989696" Style="{StaticResource PhoneTextNormalStyle}"/>
 </StackPanel>

At this point, everything works fine, the MVVM and bindings are OK.

I wanted to move this XAML into an UserControl and bind those properties from it. And, I have thought to proceed in this way :

<UserControl x:Class="..."
    xmlns=" ... "
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="100" d:DesignWidth="480">

    <StackPanel x:Name="LayoutRoot" Background="Transparent">
        <TextBlock x:Name="TitleTextBlock"  Style="{StaticResource PhoneTextExtraLargeStyle}" />
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Last modified :" Margin="15, 0, 5, 0" Foreground="LightGray" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="LastModifiedDateTextBlock" Foreground="#989696" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>
    </StackPanel>
</UserControl>

And this is the C# class :

public partial class LongListSelectorItemControl
{
    private DateTime _lastModifiedDate;

    public string Title
    {
        get
        {
            return TitleTextBlock.Text;
        }
        set
        {
            TitleTextBlock.Text = value;
        }
    }

    public DateTime LastModifiedDate
    {
        get
        {
            return _lastModifiedDate;
        }
        set
        {
            LastModifiedDateTextBlock.Text = value.ToString(CultureInfo.InvariantCulture);
            _lastModifiedDate = value;
        }
    }

    public LongListSelectorItemControl()
    {
        InitializeComponent();

        _lastModifiedDate = new DateTime();
    }
}

I have thought to use the user control in XAML in this way :

<userControls:LongListSelectorItemControl Title="{Binding Subject}" LastModifiedDate="{Binding LastModified}"/>

But something went wrong and I can't figure out what. I guess it has to do something with an incorrect binding... because in my application, a page is loaded with this XAML I presented in this issue and the app doesn't crash. Then the user has to navigate to another page, where some data is added and the ViewModel will have some data to show, so when it returns to the main page, this time, it simply crashes... (gets me to Application_UnhandledException method in App.xaml.cs to break the debugger.

I've managed to track down the exception and it seems...

MS.Internal.WrappedException: Object of type 'System.Windows.Data.Binding' cannot be converted to type 'System.String'. ---> System.ArgumentException: Object of type 'System.Windows.Data.Binding' cannot be converted to type 'System.String'

I am still confused on how to fix this...

Any suggestions are welcome to aid me into figuring out what's wrong. Thanks!

Answer 1

To be able to bind to a property, it need to be a dependency property . Here is how the title property need to be modified:

public partial class LongListSelectorItemControl
{


   public static readonly DependencyProperty TitleProperty =
            DependencyProperty.Register("Title", typeof(string), typeof(LongListSelectorItemControl), new PropertyMetadata(default(string), TitlePropertyChanged));

        private static void TitlePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            LongListSelectorItemControl myControl=d as LongListSelectorItemControl;
            myControl.TitleTextBlock.Text = e.NewValue as string;
        }

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

You will need to do the same thing with the LastModifiedDate property.