How to bind the ViewModel for a windows phone 8 messaging app

Question

 My model:

 public class MyMessageModel
  {
    public string DisplaySender { get; set; }
   //how does the below observable collection needs to be changed ,
   //if I want to add another field to itemssource template.
   //e.g. public DateTime Timestamp { get; set; }
    public ObservableCollection<string> MessagesExchanged { get; set; }
    public string NewMessage { get; set; }
  }

Chat.xaml:

<TextBlock  Name="lblFromUserName" Text="{Binding DisplaySender ,Mode=TwoWay}" Height="65" Style="{StaticResource PhoneTextNormalStyle}" FontSize="35"/>

<ItemsControl ItemsSource="{Binding Path=MessagesExchanged}">
   <ItemsControl.ItemTemplate>
    <DataTemplate>

           <TextBlock Text="{Binding ????,Mode=TwoWay}" />
           <TextBlock Text="{Binding Path=Timestamp}" HorizontalAlignment="Right" VerticalAlignment="Bottom"   Grid.Row="1"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
<ItemsControl
<StackPanel Orientation="Horizontal" Grid.Row="1">
            <TextBox Grid.Column="0" Name="txtNewMessage" Text="{Binding NewMessage,Mode=TwoWay}" Margin="0,0,0,0" Width="350"/>
            <Button  Grid.Column="1" Command="{Binding SendClickCommand,Mode=TwoWay}"        Name="btnSend" Content="Send"  Width="100" />

</StackPanel>

Chat.xaml.cs looks like below:

 public class Chat: PhoneApplicationPage
{


    private MyMessageViewModel _MyMessageViewModel;

    public Conversation()
    {
        InitializeComponent();
        _MyMessageViewModel = new MyMessageViewModel();
        this.DataContext = _MyMessageViewModel;
    }

}

My ViewModel MyMessageViewModel looks like below:

public System.Windows.Input.ICommand SendClickCommand
    {
        get
        {
            return new DelegateCommand((o) =>
            {

                Task.Factory.StartNew(() =>
                {
                    //loop through the selected items and clear everything
                    Deployment.Current.Dispatcher.BeginInvoke(() =>
                       {
                           try
                           {
                              //DO YOUR WORK HERE: TAKE THE NEW MESSAGE AND APPEND IT TO THE MESSAGES EXCHANGED
                           }
                           catch (Exception)
                           {

                               throw;
                           }



                       });
                });
            });
        }
    }

Now when user is in the above view called Chat.xaml (user will come to this page from Home page) i want to load it with the DisplaySender value on the top which will be fixed during the entire conversation.Value for this field be passed as navigation parameter from the home page.

And everytime user clicks on the Send button , in the SendClickCommand only update the MessagesExchanged collection by adding the new message from the txtNewMessage field and later clear this field.

I have two questions here:

When user first comes to the Chat.xaml how do i bind the data for the three fields eg DisplaySender(non empty value will be passed as navigation parameter ),MessagesExchanged(initially this would be empty when initiating the new conversation, otherwise it will have a non empty value from the navigation parameter) and NewMessage (initially this would be empty always).

Secondly in SendClickCommand notified property how do i take the text from txtNewMessage and update the ObservableCollection MessagesExchanged and at the end clear the value of txtNewMessage .And how to bind the values of MessagesExchanged to the datatemplate textblock field ?

Answer 1

I guess you are trying to pass Object of Class MyMessageModel while navigating from HomePage to ChatPage.

So define a property

private MyMessageModel currentMessageModel;

public MyMessageModel CurrentMessageModel
{
    get { return currentMessageModel; }
    set { currentMessageModel = value; }
}

and in OnNavigatedTo method of ChatPage set

  CurrentMessageModel=PassedObjectOfMessageModel

xaml:

<TextBlock  Name="lblFromUserName" Text="{Binding CurrentMessageModel.DisplaySender ,Mode=TwoWay}" Height="65" Style="{StaticResource PhoneTextNormalStyle}" FontSize="35"/>
<ItemsControl ItemsSource="{Binding Path=CurrentMessageModel.MessagesExchanged}">
   //No need for data template as collection only contains string
<ItemsControl
<StackPanel Orientation="Horizontal" Grid.Row="1">
        <TextBox Grid.Column="0" Name="txtNewMessage" Text="{Binding NewMessage,Mode=TwoWay}" Margin="0,0,0,0" Width="350"/>
        <Button  Grid.Column="1" Command="{Binding SendClickCommand,Mode=TwoWay}"        Name="btnSend" Content="Send"  Width="100" />
</StackPanel>

//C#

CurrentMessageModel.MessagesExchanged.Add(txtNewMessage.Text);

and you donot need any text block to show the ObservableCollection as your collection only contains string so just by setting the ItemsSource to the collection the data would be displayed.