Creating a Xamarin Forms App Part 12 : Extending the User Interface.

• Part 1 : Introduction
• Part 2 : Getting Started
• Part 3 : How to use Xamarin Forms with Visual Studio without the Business Edition
• Part 4 : Application Resources
• Part 5 : Dependency Injection
• Part 6 : View Model First Navigation
• Part 7 : Unit Testing
• Part 8 : Consuming a RESTful Web Service
• Part 9 : Working with Alerts and Dialogs
• Part 10 : Designing and Developing the User Interface
• Part 11 : Updating to Xamarin Forms 1.3
• Part 12 : Extending the User Interface

This is the final post in this series, which wraps up some of the UI not yet implemented for my Mountain Weather Application so far. This is not to say that this is the end of this App, far from it. Future posts will feature this app and it’s progress but I’d like to conclude this series with this post.

So far my app is displaying the mountain weather forecast information from the Met Office Data Point service for all the mountain regions in the UK, with one exception. The forecast data includes Hazard information for each area, which includes a textural description of each Hazard together with a Risk of High, Medium, Low and No Risk. This really warrants a separate page, as the information is quite extensive. I therefore need to be able to navigate from the forecast page to the Hazards page for each area forecast.

Firstly lets create a new Hazards Page. Given that the Hazard Model looks like this,

    public class Hazard
    {
        public short No { get; set; }

        public string Element { get; set; }

        public Risk Risk { get; set; }

        public string Comments { get; set; }
    }

I need a new HazrdsViewModel, which looks like this:

    public class HazardsViewModel : ViewModelBase
    {
        public HazardsViewModel(ForecastReport forecastReport)
        {
            var hazards = forecastReport.Hazards.Where(hazard => hazard.Risk != Risk.None).ToList();
            if (hazards.Any())
            {
                Hazards = hazards;
                Risk = hazards.Max(x => x.Risk);
            }

            Title = "Hazards";

            var date = forecastReport.ForecastDay0.Date;

            Date = string.Format(date.ToString("dddd d{0} MMMM"), date.DaySuffix());

            IssuedBy = string.Format("Issued by The Met Office on {0} at {1}",
                string.Format(date.ToString("d{0} MMM"), date.DaySuffix()),
                string.Format(date.ToString("hh:ss")));

            Area = forecastReport.Location;
        }

        public string Date { get; set; }

        public string IssuedBy { get; set; }

        public string Area { get; set; }

        public IEnumerable<Hazard> Hazards { get; private set; }

        public Risk Risk { get; set; }

    }

Here I am exposing the Hazards via the Hazards property and adding some additional date, IssuedBy and Title information.

For the view I want to display the Hazards in a list, where each item will have a header for the Hazard Element that will have a background colour of Red for High Risk, Orange for Medium Risk and Yellow for Low Risk. I initially thought that this would be an excellent candidate for the new Style.Triggers in Xamarin Forms 1.3. However I discovered that there is a bug with this in that you can’t add more than one trigger without it blowing up, more on this here.

So I created a RiskToColorConverter that allows me to specify the colours for each Risk Type for both Background and TextColor properties. Here’s the converter:

    public class RiskToColorConverter : IValueConverter
    {
        public Color HighColor { get; set; }

        public Color MediumColor { get; set; }

        public Color LowColor { get; set; }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (!(value is Risk))
                return Color.Default;

            var risk = (Risk)value;

            switch (risk)
            {
                case Risk.High:
                    return HighColor;
                case Risk.Medium:
                    return MediumColor;
                case Risk.Low:
                    return LowColor;
                default:
                    return Color.Default;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }
    }  

Here I provide 3 properties to set the Color for each Risk and then simply do the conversion in the Convert Method. I can then use this in my HazardView like so.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="Silkweb.Mobile.MountainWeather.Views.HazardsView"
    xmlns:ex="clr-namespace:Silkweb.Mobile.Core.Extensions;assembly=Silkweb.Mobile.Core" 
    xmlns:cv="clr-namespace:Silkweb.Mobile.Core.Views;assembly=Silkweb.Mobile.Core"
    xmlns:converters="clr-namespace:Silkweb.Mobile.MountainWeather.Converters;assembly=Silkweb.Mobile.MountainWeather"
    xmlns:model="clr-namespace:Silkweb.Mobile.MountainWeather.Models;assembly=Silkweb.Mobile.MountainWeather"
    xmlns:behaviors="clr-namespace:Silkweb.Mobile.Core.Behaviors;assembly=Silkweb.Mobile.Core"
    Title="{Binding Title}" BackgroundColor="{ex:ApplicationResource backgroundColor}" Padding="5">

    <ContentPage.Resources>
        <ResourceDictionary>

            <converters:RiskToColorConverter x:Key="riskToBackgroundColorConverter" HighColor="Red" MediumColor="#FF6600" LowColor="Yellow" />
            <converters:RiskToColorConverter x:Key="riskToTextColorConverter" HighColor="White" MediumColor="White" LowColor="Black" />

            <DataTemplate x:Key="hazardTemplate">
                <StackLayout Spacing="0" Padding="0,0,0,10">
                    <ContentView BackgroundColor="{Binding Risk, Converter={StaticResource riskToBackgroundColorConverter}}">
                        <ContentView Padding="5">
                            <Label Text="{Binding Element}" Style="{StaticResource mediumHeaderStyle}"
                                   TextColor="{Binding Risk, Converter={StaticResource riskToTextColorConverter}}" />
                        </ContentView>
                    </ContentView>

                    <ContentView BackgroundColor="White">
                        <ContentView Padding="5">
                            <Label Text="{Binding Comments}" Font="Small" />
                        </ContentView>
                    </ContentView>

                </StackLayout>
            </DataTemplate>

        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>
        <StackLayout Spacing="0">
            <Label Text="{Binding Date}" Style="{StaticResource largeHeaderStyle}" />
            <Label Text="{Binding IssuedBy}" Style="{StaticResource microTextStyle}"  />
        </StackLayout>

        <ScrollView Orientation="Vertical">
            <StackLayout Orientation="Vertical">
                <StackLayout.Behaviors>
                    <behaviors:ItemsSourceBehavior ItemsSource="{Binding Hazards}" ItemTemplate="{StaticResource hazardTemplate}" />
                </StackLayout.Behaviors>
            </StackLayout>
        </ScrollView>
                                                
    </StackLayout>

</ContentPage>

There’s a few things here worth noting. Firstly I’m using the Converter to define both the Background and TextColor for my Headers by defining the two converters. Then Notice the DataTemplate for each item uses a Label wrapped in ContentView that is wrapped in another ContentView. The reason for this is that for some reason Xamarin Forms does not include a Margin property which means we have to rely on the Padding of an outer control, which means placing the Label in the lowest common denominator control for this which is ContentView . I have also made use of the ItemsSourceBehavior for the Hazards which I mentioned in an earlier post. I also discovered a bug with the new Behavior<T> class mentioned here. Notice that I am simply using a StackLayout in a ScrollView with this Behavior attached.

All this is well a good, but how do I actually display this view from my forecast page? I decided the best solution was to make use of the Toolbar and add an item to allow me to navigate to the Hazards for the Area I have selected. This is achieved by simply adding a ToolbarItem to the ForcastReportView as follows:

    <ContentPage.ToolbarItems>
        <ToolbarItem Name="Hazards" Command="{Binding ShowHazardsCommand}" />
    </ContentPage.ToolbarItems>

And then adding a ShowHazrdsCommand to the ForecastReportViewModel like this.

        public ICommand ShowHazardsCommand { get; set; }

        ShowHazardsCommand = new Command(ShowHazards);

        private void ShowHazards()
        {
            if (_hazardsViewModel == null)
                _hazardsViewModel = new HazardsViewModel(_forecastReport);

            _navigator.PushAsync<HazardsViewModel>(_hazardsViewModel);
        }

This simply uses the INavigator to navigate to the HazardsViewModel. I also need to add the following to my Bootstrapper class to map the View to the ViewModel.

        protected override void RegisterViews(IViewFactory viewFactory)
        {
            ...
            viewFactory.Register<HazardsViewModel, HazardsView>();
        }

Now when I display the Forecast page for an area I see the Hazards Toolbar Item like this.

and when I tap on the ‘Hazards’ toolbar item it navigates to the Hazards view like this.

Just as well cos it looks like a pretty stormy and snowy day out there just now !!

This concludes this series on ‘Creating a Xamarin Forms App’, I hope you enjoyed it as much as I have. There is much more I still want to do with this app before it sees the Apps Stores, which I will feature in future posts on this blog. But for now I think this demonstrates a great first step in my Adventures with Xamarin Forms.