INTRODUCTION In part one of this series we built a simple MVC framework for our GoT character search engine. Now let’s look at how we can expand it actually provide a user interface via a Windows 10 Universal App. BTW, all of the code for this app is on GitHub.

We’ve already defined the first interface for our app, IPersonListView in the previous article.

Now we’ll implement that view with our MainPage of our search engine app.

EXAMPLE 1

using System;
using System.Collections.ObjectModel;
using System.Linq;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using SharpNinja.Models.BlogEntities;
using SharpNinja.UI.Windows10Sample.Controllers;
using SharpNinja.UI.Windows10Sample.Views;

namespace SharpNinja.UI.Windows10Sample
{
    public sealed partial class MainPage : Page, IPersonsListView
    {
        // Our controller
        private PersonsController _controller = new PersonsController();

        public MainPage()
        {
            this.InitializeComponent();

            // Initialize the controller
            _controller.Initialize(new []{this});
        }

        // From IView 
        public void SetStatus(string message, bool isError)
        {
            lblStatus.Text = message;
            statusBorder.Background = 
                new SolidColorBrush(isError ? Colors.Red : Colors.Blue);
        }

        // The Persons list
        public ObservableCollection<Person> PersonsList { get; set; }

        // Tells the controller to find the persons based on the 
        // provided partial string.
        public event EventHandler<string> FindPersons;

        // Bind the results;
        public void BindPersonsList()
        {
            // Views are responsible for sorting data
            // based on user preferences.
            lstResults.ItemsSource = 
                new ObservableCollection<Person>(
                    PersonsList.OrderBy(x => x.Name));
        }

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            // Use null propagation to invoke our search.
            FindPersons?.Invoke(sender, txtSearchTerm.Text);
        }
    }
}

Here’s the XAML…

EXAMPLE 2

<Page
    x:Class="SharpNinja.UI.Windows10Sample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SharpNinja.UI.Windows10Sample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border Grid.Row="0" BorderThickness="5" CornerRadius="7"
                Background="DarkBlue" BorderBrush="Yellow" 
                Margin="10 7 10 7" Padding="8">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0">Search Term</TextBlock>
                <TextBox Grid.Column="1" Name="txtSearchTerm"/>
                <Button Grid.Column="2" Click="ButtonBase_OnClick">GO!</Button>
            </Grid>
        </Border>
        <ListView Name="lstResults" Grid.Row="1" HorizontalAlignment="Stretch" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="20" />
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" 
                                   Text="{Binding Path='Age', Mode=OneWay}" />
                        <TextBlock Grid.Column="2" 
                                   Text="{Binding Path='Name', Mode=OneWay}" 
                                   HorizontalAlignment="Stretch"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Border Grid.Row="2" BorderThickness="5" CornerRadius="7" 
                Background="Blue" BorderBrush="Yellow" 
                Margin="10 7 10 7" Padding="8" Name="statusBorder">
            <TextBlock Name="lblStatus"/>
        </Border>
    </Grid>
</Page>

In future articles I’ll spend more time on this example and how all of the databinding works, but for now know that the basic flow is that the user types some text to search for, clicks “GO” and then the controller finds the matching Persons and tells the View to bind to it.

CONCLUSION: Really that’s about it for the search engine. In the next post in this series we’ll look at extending the application to include a second page for entering or editing people.