Building your first end-to-end Cross Platform app – Part 2 – Windows Universal App

Hello and Welcome again to the second part of the series. In the Part 1, Building your first end-to-end Cross Platform app , we have learned the building the Core Till now we have created Weather.Common, from a blank Visual Studio 2015 solution. Now ,we will be creating windows 10 universal app which can run on phone, tablets and desktop, so let’s begin.

Step 1: Add a new universal app project to the solution.

Step 2: Add reference to Weather.Common project and the following dll’s.

Step 3: Delete MainPage.xaml and add a class DebugTrace for tracing warning and errors.

public class DebugTrace : IMvxTrace
    {
        public void Trace(MvxTraceLevel level, string tag, Func<string> message)
        {
            Debug.WriteLine(tag + ":" + level + ":" + message());
        }

        public void Trace(MvxTraceLevel level, string tag, string message)
        {
            Debug.WriteLine(tag + ":" + level + ":" + message);
        }

        public void Trace(MvxTraceLevel level, string tag, string message, params object[] args)
        {
            try
            {
                Debug.WriteLine(string.Format(tag + ":" + level + ":" + message, args));
            }
            catch (FormatException)
            {
                Trace(MvxTraceLevel.Error, tag, "Exception during trace of {0} {1} {2}", level, message);
            }
        }
    }

Step 4: Now add a class called Setup.

public class Setup : MvxWindowsSetup
    {
        public Setup(Frame rootFrame) : base(rootFrame)
        {
        }

        protected override IMvxApplication CreateApp()
        {
            return new App();
        }
		
        protected override IMvxTrace CreateDebugTrace()
        {
            return new DebugTrace();
        }
    }

Step 5: Replace the OnLaunched method in App.xaml.cs

protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            var rootFrame = Window.Current.Content as Frame;

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();

                if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }

                // Place the frame in the current Window
                Window.Current.Content = rootFrame;
            }

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter

                var setup = new Setup(rootFrame);
                setup.Initialize();

                var start = Cirrious.CrossCore.Mvx.Resolve<Cirrious.MvvmCross.ViewModels.IMvxAppStart>();
                start.Start();
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

Step 6: Add a folder called Views to the solution and then add a blank xaml page (FirstView.xaml) to this folder.

Step 7: Replace the content of the FirstView.xaml with the content below.

<views:MvxWindowsPage     x:Class="WeatherWindows.Views.FirstView"     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:views="using:Cirrious.MvvmCross.WindowsCommon.Views"     mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="100">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <TextBlock Text="City : " VerticalAlignment="Center" FontSize="18" Grid.Column="0" Grid.Row="0" />
            <TextBlock Text="Date : " VerticalAlignment="Center" FontSize="18" Grid.Column="0" Grid.Row="1" />
            <TextBlock Text="Temp : " VerticalAlignment="Center" FontSize="18" Grid.Column="0" Grid.Row="2" />

            <TextBlock Text="{Binding DailyTemperature.City}" VerticalAlignment="Center" FontSize="18" Grid.Column="1" Grid.Row="0" />
            <TextBlock Text="{Binding DailyTemperature.ShortDate}" VerticalAlignment="Center" FontSize="18" Grid.Column="1" Grid.Row="1" />
            <TextBlock Text="{Binding DailyTemperature.Temprature}" VerticalAlignment="Center" FontSize="18" Grid.Column="1" Grid.Row="2" />
        </Grid>

        <Grid VerticalAlignment="Bottom" Margin="100">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="100" />
            </Grid.ColumnDefinitions>

            <Button Command="{Binding PreviousCommand}" HorizontalAlignment="Left" Grid.Column="0" IsEnabled="{Binding IsPrevious}">Previous</Button>
            <Button Command="{Binding NextCommand}" HorizontalAlignment="Right" Grid.Column="2" IsEnabled="{Binding IsNext}">Next</Button>

        </Grid>
    </Grid>
</views:MvxWindowsPage>

In this we have created a page which shows the city name, date and temperature on that date, along with two buttons to navigate between previous and next day’s temperature.

Hurray you’re done with creating your first cross platform app for windows 10 app, please go ahead and run the project.