Page 34 - MSDN Magazine, May 2018

Sending Messages The Remote Systems API provides two meth- ods for delivering messages to other users. The first is to broadcast a message to all of the users in the session. This approach will be used for two of our message types, the UserMessage and the list
Figure 15 The MessagePage XAML
of Users. Let’s create a new method, BroadcastMessage, in the RemoteSystemManager. This method takes a key and the message as parameters. Using a DataContractJsonSerializer, I serialize the data and use the BroadcastValueSetAsync method to send the message to all of the users, as shown in Figure 13.
The Remote Systems API provides two methods for delivering messages to other users.
The second approach is to send a message to a single participant. This approach is similar to broadcasting a message, except it uses the SendValueSetAsync method to message a participant directly. This final method to the RemoteSystemManager, SendMessage, can be found in Figure 14.
Building the Messaging Page
With the messaging now in place, it’s time to put it to use and finish the app. Add a new Blank Page to the app, MessagePage.xaml. This page will consist of a list of users, a message window and input fields for adding a message. The full XAML can be found in Figure 15.
Like MainPage, MessagePage will need a view model. Add a new class, MessageViewModel, to the ViewModels folder. This view model will need to support INotifyPropertyChanged to allow the two-way binding to function properly. This view model will contain three properties: Users, Messages and NewMessage. The Users will simply expose the RemoteSessionManager’s User collection to the view. Messages will be an ObservableCollection of UserMessage objects received and a NewMessage string containing the text to
Figure 16 MessageViewModel Constructor
<Page
x:Class="TeamMessenger.MessagePage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TeamMessenger" xmlns:models="using:TeamMessenger.Models" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:remotesystems="using:Windows.System.RemoteSystems" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" Width="Auto"/>
<ColumnDefinition Width="*"/> </Grid.ColumnDefinitions>
<Grid VerticalAlignment="Stretch" BorderBrush="Gray" BorderThickness="0,0,1,0">
<ListView ItemsSource="{x:Bind ViewModel.Users}"> <ListView.ItemTemplate>
<DataTemplate x:DataType="models:User"> <TextBlock Height="25"
FontSize="16"
Text="{x:Bind DisplayName}"/> </DataTemplate>
</ListView.ItemTemplate> </ListView>
</Grid>
<Grid Grid.Column="1" Margin="10,0,10,0">
<Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView x:Name="lvMessages" ItemsSource="{x:Bind ViewModel.Messages}"> <ListView.ItemTemplate>
<DataTemplate x:DataType="models:UserMessage"> <StackPanel Orientation="Vertical"
Margin="10,20,10,5"> <TextBlock TextWrapping="WrapWholeWords"
Height="Auto"
Text="{x:Bind Message}"/> <StackPanel Orientation="Horizontal"
Margin="20,5,0,0">
<TextBlock Text="{x:Bind User.DisplayName}"
FontSize="12"
Foreground="Gray"/> <TextBlock Text="{x:Bind DateTimeStamp}" Margin="20,0,0,0"
FontSize="12"
Foreground="Gray"/> </StackPanel>
</StackPanel> </DataTemplate>
</ListView.ItemTemplate> </ListView>
<Grid Grid.Row="1" Height="60"
Background="LightGray"> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions>
<TextBox Text="{x:Bind ViewModel.NewMessage, Mode=TwoWay}"
Margin="10"/>
<Button Grid.Column="1" Content="Send"
Click="{x:Bind ViewModel.SubmitMessage}"
Margin="10"/> </Grid>
</Grid> </Grid>
</Page>
public event PropertyChangedEventHandler PropertyChanged = delegate { }; public event EventHandler MessageAdded = delegate { };
public ObservableCollection<UserMessage> Messages { get; private set; }
public ObservableCollection<User> Users { get; private set; }
private string _newMessage; public string NewMessage {
get { return _newMessage; } set
{
_newMessage = value;
PropertyChanged(this, new PropertyChangedEventArgs(nameof(NewMessage)));
} }
public MessageViewModel() {
Users = App.SessionManager.Users;
Messages = new ObservableCollection<UserMessage>(); App.SessionManager.StartReceivingMessages(); App.SessionManager.MessageReceived += OnMessageRecieved; RegisterUser();
}
30 msdn magazine
Universal Windows Platform