Page 26 - MSDN Magazine, May 2018

public string JoinName { get; set; } public string SessionName { get; set; } public object SelectedSession { get; set; } public ObservableCollection<
RemoteSystemSessionInfo> Sessions { get; } = new —ObservableCollection< RemoteSystemSessionInfo>();
The view model has two events that will be used to let the view know if a connection to a session was successful or not:
public event EventHandler SessionConnected = delegate { };
public event EventHandler<SessionCreationResult> ErrorConnecting = delegate { };
Finally, the Start button is bound to a Start method. This method can be left empty for the moment.
Once the view model has been complet-
ed, the codebehind for MainPage needs to
create a public property that’s an instance
of the MainViewModel. This is what allows
x:Bind to build the compile-time bindings.
In addition, it needs to subscribe to the two events created in the view model. If a connection is successfully made, I’ll navigate to a new page, MessagePage. If the connection fails, a MessageDialog will be displayed, informing the user of the failed connection. Figure 5 contains the code for the MainPage.xaml.cs.
Defining the Data Models
Before digging in the heart of the app, you need to define a couple of data models that will be used in the app. Create a Models folder in the app and then create two classes in it: User and UserMessage. As the name suggests, the User model will track information about the users connected to the app:
Figure 4 The MainPage XAML
public class User {
public string Id { get; set; }
public string DisplayName { get; set; } }
The UserMessage class will contain the message content, the user creating the con- tent and when the message was created:
public class UserMessage {
Figure 3 The MainPage UI
public User User { get; set; }
public string Message { get; set; }
public DateTime DateTimeStamp { get; set; }
}
Creating a Session
With the code for the main page fairly complete, I can start building out Remote- SessionManager, which will be used to wrap the Remote Systems API. Add a new public class called RemoteSessionManager to the root directory of the app. The app will use a
single shared instance of the RemoteSessionManager, so you can add a static property to the App class in App.xaml.cs:
public static RemoteSessionManager SessionManager { get; } = new RemoteSessionManager();
Before the app can access any of the Remote Systems APIs, it must first obtain permission from the user. This permission is obtained by calling the static method RemoteSystem.RequestAccessAsync:
RemoteSystemAccessStatus accessStatus = await RemoteSystem.RequestAccessAsync(); if (accessStatus != RemoteSystemAccessStatus.Allowed)
{
// Access is denied, shortcut workflow
}
The method will return a RemoteSystemAccessStatus enum that can be used to determine if access was granted. This method must
<Page
x:Class="TeamMessenger.MainPage" 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:remotesystems="using:Windows.System.RemoteSystems" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Width="400"
HorizontalAlignment="Center" BorderBrush="Gray" BorderThickness="1" MaxHeight="600" VerticalAlignment="Center" Padding="10">
<RadioButton x:Name="rbCreate" GroupName="options"
IsChecked="True"
Checked="{x:Bind ViewModel.CreateSession}" Content="Create a New Session"/>
<StackPanel Orientation="Horizontal" Margin="30,10,20,30"> <TextBlock VerticalAlignment="Center">Session Name :</TextBlock> <TextBox Text="{x:Bind ViewModel.SessionName, Mode=TwoWay}"
Width="200"
Margin="20,0,0,0"/> </StackPanel>
<RadioButton x:Name="rbJoin"
GroupName="options"
Checked="{x:Bind ViewModel.JoinSession}" Content="Join Session"/>
<ListView ItemsSource="{x:Bind ViewModel.Sessions}" SelectedItem="{x:Bind ViewModel.SelectedSession, Mode=TwoWay}" IsItemClickEnabled="True"
Height="200"
BorderBrush="LightGray"
BorderThickness="1"
Margin="30,10,20,30">
<ListView.ItemTemplate>
<DataTemplate x:DataType="remotesystems:RemoteSystemSessionInfo">
<TextBlock Text="{x:Bind DisplayName}"/> </DataTemplate>
</ListView.ItemTemplate> </ListView>
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center">Name : </TextBlock> <TextBox Text="{x:Bind ViewModel.JoinName, Mode=TwoWay}"
Width="200"
Margin="20,0,0,0"/> </StackPanel>
<Button Content="Start" Margin="0,30,0,0"
Click="{x:Bind ViewModel.Start}"/> </StackPanel>
</Grid> </Page>
22 msdn magazine
Universal Windows Platform