Building the View

The view allows the user to send and receive messages via the viewmodel. The view consists of the following elements:

A TextBox to allow the user to enter a message to send.

An AppBar, which includes an AppBarIconButton to execute the viewmodel’s SendCommand. For more information on the AppBar, see Chapter 8, “Taming the Application Bar.”

A ListBox to display all incoming messages.

The following excerpt shows the main content from the ChatClientView.xaml page:

Click here to view code image

<StackPanel Grid.Row="1"
        Style="{StaticResource PageContentPanelStyle}">
    <u:AppBar>
        <u:AppBarIconButton
        Command="{Binding SendCommand}"
        Text="Send"
        IconUri="/ChatClient/Images/AppBarMessageSend.png"
        x:Name="button_Send"
        AutomationProperties.AutomationId="button_Send" />
    </u:AppBar>

    <TextBox x:Name="textBlock_Message"
        Text="{Binding Message, Mode=TwoWay,
        UpdateSourceTrigger=Explicit}"
        TextWrapping="Wrap" AcceptsReturn="True"
        u2:UpdateSourceTriggerExtender.UpdateSourceOnTextChanged="True"/>
    <TextBlock Text="Messages" Style="{StaticResource LabelTextStyle}"/>
    <ListBox x:Name="listBox" ItemsSource="{Binding Messages}" Height="400">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"
                    Style="{StaticResource NormalTextStyle}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</StackPanel>

The various input controls have been named. You see later in this chapter how the naming of elements allows you to directly manipulate them from a coded UI unit test.

The view’s code-beside (ChatClientView.xaml.cs) instantiates the viewmodel and supplies the viewmodel with an instance of the MockChatService, as shown in the following excerpt:

Click here to view code image

public ChatClientView()
{
    InitializeComponent();
    DataContext = new ChatClientViewModel(new MockChatService());
}

Later in the chapter you see how to replace the MockChatService for a real chat service implementation using Inversion of Control.

The final result of the chat page is shown in Figure 24.6.

FIGURE 24.6 ChatClientView page