Joel Joseph

Building good Team Process

Joel Joseph — Sat, 19 Jun 2021 16:06:00 GMT

The article will help you understand different phases that I went through for building a good Development / Engineering team process for solving company's Engineering needs.

Please do note that the information here is purely within the scope of my experience and people I interacted in my professional life.

Every term and terminology in the article are defined by me, which helps me to document my life experience in a simple way. You may take this as a case study and define your own process.

The term 'Process' in this article refers to steps you follow, tools you use, the ways you take in planning things the end goal being to solve a problem by combining individual efforts into collective results

In my case the main focus was on defining process for:

Task Management
Communication and Collaboration
DevOps
Hiring new developers
Tools used

Phases and Stages

Stage One : The idea of this stage is, by the end of all the phases in this stage you will have a perfectly working process for your team. This stage is somewhat time consuming but most of the time it's a onetime investment for reaching your goal and hence it one of the important stage that may define your success

Input gathering
Experimenting
Process Definition
Implementation

Stage Two : This stage is repeated over a period of cycles, for me it was every 6 month or yearly. This make sure that your process is improved by eliminating the bottlenecks

Feedback and Review

Input Gathering

This is the first phase where you start to observe and take note of the organisation and its requirements. Each and every organisation or company may have different working style and goals. You may have past experience in some other organisation and companies but you keep them aside and keep on observing how everything is currently working.

Experimenting

Here you will start defining the initial process by studying the data collected in input gathering phase and try to implement it with the help of your team. The process is experimented for short term and may start review of the process as soon as you reach a bottleneck. You may also try to learn from process that are followed in other companies or organisation

Process Definition

This phase comes after the experimenting phase and by this time you will have a working Process defined for your team. The idea is to document this process and make sure to educate your team on the process. Each member of your team should have clear understanding of the process and you will have to make sure that everyone follows this process

Implementation

This phase is infinite and here you will repeatedly follow the defined process and make sure that each and every one of your team follows it. you may also define an onboarding process so that if there is a new addition to your team it will help them to get onboard in following the process quickly

Feedback and Review

This is implemented over a period of time in cycles and in my case it was every 6 month or yearly. Here you will take feedback on your current process and also review the do's and don'ts and after studying the data you will try to eliminate the bottlenecks that slows down your team. You will also be studying the result from your previous year looking into your success and failures and tweak your process to improve the results

Angular 6+ deploy to Apache server by solving 404 Not found error on page refresh

Joel Joseph — Fri, 30 Nov 2018 14:08:02 GMT

This article will hep you to deploy angular 6+ application on apache server also to solve 404 not found error on page refresh.

Getting Started

For now let's hope you have already setup a new Angular6+ project or has an existing Angular6+ project.Here we are considering working with an existing Angular6+ App. I have named my project as angular-deployemnt-sample.

The project was scaffolded using Angular cli which can be used to generate basic app structure for your projects.

After generating the basic app using Cli and setting up basic routing module and a home component the project structure looks something like this

if you want to run the same in local just use the command

ng serve --open

The above command will start serving the project at the url

http://localhost:4200/

Build app for production

Before deploying to the apache server we need to build the project and optimise it for production.

ng build --prod

Setting our Base

To link around your application using relative links, you will need to set a in the of your document. while setting base you will have to consider where the projects resides in the server

In angular 6+ cli allows you to set the base automatically while building the project.if your project files is placed in the /var/www/html folder (that is project files copied from dist folder after ng build --prod to root folder of your server) or you are running on ng serve (while under development in local) then your base should be

if your project files resides in some folder somefolder then base should be

To set the base during build to root folder /var/www/html you can use the regular command

ng build --prod

To set the base during build when your project files resides in some folder somefolder then use

ng build --prod  --base-href somefolder

Now after you copying the files from your dist folder to apache servers root folder /var/www/html the project will work until you refresh the page

404 Not found error on page refresh

Now that you have deployed the project to server, and everything seems ok until you try to refresh the page . You will find that your app throws a 404 Not found error

Solution

To solve this there are two approaches or strategy

We will use PathLocationStrategy

The default strategy used in Angular is the PathLocationStrategy so we need to do nothing to enable it. And this will be the statergy that we are going to use here

It takes advantage of a relatively new HTML5 API called pushstate (from the HTML5 history API).

By using pushstate we can change the URL and not have the browser request the page from the server and without needing to use a hash fragment.

Unfortunately it has one big downside, if we then reloaded the page or bookmarked and opened it later the browser would make a request to the server

By using a hash fragment the server never needs to know about any application URL, it will only ever get asked for the root page and it will only ever return the root page.

But by using a PathLocationStrategy the server needs to be able to return the main application code for every URL, not just the root URL.

So with PathLocationStrategy we need to co-operate with a server side that supports this functionality, it’s possible and quite easy to implement a server side like this but it does require some effort and cooperation.

When you have html5Mode enabled, the # character will no longer be used in your URLs. The # symbol is useful because it requires no server side configuration. Without #, the URL looks much nicer, but it also requires server side rewrites.

Configuring Apache Server

we need to configure the server for rewrites, and this involve following steps

Activate mod_rewrite
Edit Apache configuration file
Restart Apache
Setting Up .htaccess

First we need to activate mod_rewrite. It's available but not enabled with a clean Apache 2 installation

You can use the following command

sudo a2enmod rewrite

This will activate the module or alert you that the module is already enabled.

By default, Apache prohibits using an .htaccess file to apply rewrite rules, so first you need to allow changes to the file. Open the default Apache configuration file using nano or your favourite text editor.

sudo nano /etc/apache2/sites-available/000-default.conf

Inside that file, you will find a block starting on the first line. Inside of that block, add the following new block so your configuration file looks like the following. Make sure that all blocks are properly indented.

  
    
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted

Now Save and close the file .To put these changes into effect, restart Apache

sudo systemctl restart apache2

mod_rewrite is now fully enabled. In the next step we will set up an .htaccess file in the root folder /var/www/html where our angular files are placed and we we'll use it to define rewrite rules for redirects

 RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]  
RewriteCond %{REQUEST_FILENAME} -d  
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

Also since we need to increase SEO points, i like to add some more code to .htaccess to enable compression and leverage browser Caching

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]  
RewriteCond %{REQUEST_FILENAME} -d  
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]


# Enable Compression
  
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  
  
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


# Leverage Browser Caching
  
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 1 month"
  
  
  
  Header set Cache-Control "max-age=2678400, public"
  
  
  Header set Cache-Control "max-age=7200, private, must-revalidate"
  
  
  Header set Cache-Control "max-age=86400, public"
  
  
  Header set Cache-Control "max-age=2678400, private"

Now if you refresh your app in browser the app will work fine

AngularJs remove # (hash) from url or setup Pretty URL

Joel Joseph — Thu, 09 Aug 2018 16:06:00 GMT

This article will help you to setup Pretty URL in AngularJs, that is to remove # from url.

AngularJS applications by default route with # in the url, the reason for the same is that # is an old browser shortcut which doesn't fire the request.This allows many JavaScript frameworks to build their own client side rerouting.

We need the # (hashtag) for non HTML5 browsers, otherwise they will just do an HTTP call to the server at the mentioned href.

Url with #

http://example-domain.com/#/home

Url without #

http://example-domain.com/home

Getting Started

For now let's hope you have already setup a new AngularJs project or has an existing AngularJs project.Here we are considering working with an existing AngularJs App. I have named my project as angular-one-sample.

The project was scaffolded using Yeoman gulp-angular generator , Yeoman is scaffolding tool for modern web apps and can be used to generate basic app structure for your projects.

After generating the basic app using Yeoman the project structure looks something like this

if you want to run the same in local just use the command

gulp serve --open

The above command will start serving the project at the url

http://localhost:3000/#/home

To remove #

To remove the # from URL we need to make sure 4 things mainly.

Configure the $locationProvider
Setting our base for relativelinks
Edit your .htaccess file if you are using apache server
Remove # from the routing links through out the app (optional)

Configure $locationProvider

Angularjs $location service parses the URL in the address bar and makes changes to your application and vice versa.

We will use the $locationProvider module and set html5Mode to true.

Now import the $locationProvider module to the router file index.route.js and add the following code to enable the html5Mode

 // use the HTML5 History API
 $locationProvider.html5Mode(true);

html5Mode is a standardized way to manipulate the browser history using a script. This lets Angularjs change the routing and URLs of our pages without refreshing the page.

After editing the router file it will look something like this

index.route.js

(function() {
  'use strict';

  angular
    .module('angularOneSample')
    .config(routerConfig);

  /** @ngInject */
  function routerConfig($stateProvider, $urlRouterProvider,$locationProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'app/main/main.html',
        controller: 'MainController',
        controllerAs: 'main'
      });


    // use the HTML5 History API
    $locationProvider.html5Mode(true)
    $urlRouterProvider.otherwise('/');
  }

})();

Setting our Base

To link around your application using relative links, you will need to set a in the of your document. while setting base you will have to consider where the projects resides in the server

if your project files is placed in the /var/www/html folder (that is project files copied from dist folder after gulp build to root folder of your server) or you are running on gulp serve (while under development in local) then your base will be

if your project files resides in some folder somefolder then set base to

In my case while developing (on gulp serve) in local i had to set base to

index.html

Now you can see that the app reloads and # is removed from url

Edit your .htaccess file

Sometimes while While running on the Apache server Angulajs Apps seems to hit 404 Page Not found error on page refresh. To solve this issue we need to add the .htaccess file with the following code to the project folder/root folder where project files are placed

 RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]  
RewriteCond %{REQUEST_FILENAME} -d  
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

Also since we are enabling pretty url to increase SEO points, i like to add some more code to .htaccess to enable compression and leverage browser Caching

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]  
RewriteCond %{REQUEST_FILENAME} -d  
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]


# Enable Compression
  
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  
  
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


# Leverage Browser Caching
  
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 1 month"
  
  
  
  Header set Cache-Control "max-age=2678400, public"
  
  
  Header set Cache-Control "max-age=7200, private, must-revalidate"
  
  
  Header set Cache-Control "max-age=86400, public"
  
  
  Header set Cache-Control "max-age=2678400, private"

Remove # from links used in the app

This step is optional, even if the # in navigation links were not removed, the links will work without any problem . These links automatically will be redirected to links without # (hash)

Angular 6 make Header Sticky on Scroll

Joel Joseph — Sat, 04 Aug 2018 15:45:00 GMT

This article will help you to make header component sticky on scrolling on another component.

Let's consider situation where you have an Angular 6 application with 2 components other than root component

Header component
Home component

In order to make the Header component sticky while scrolling on Home Component what we need to do is add a new class (some class name) , here in my case it is sticky

Css class

.sticky {
    background: #fff;
    box-shadow: 0 3px 12px 0 rgba(0,0,0,.08);
    position: fixed;
    top: 0;
    height: 120px;
    width: 100%;
}

First we need to give an id attribute to the header component so we can identify which element we to add the class sticky . Here i am giving it an id navbar

header.component.html

Now go to the Home Component and write a function to handle the scroll event

home.component.ts

import { Component, OnInit, HostListener, Inject } from '@angular/core';  
import { trigger, state, transition, style, animate } from '@angular/animations';  
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations:[ 
    trigger('fade',
    [ 
      state('void', style({ opacity : 0})),
      transition(':enter',[ animate(300)]),
      transition(':leave',[ animate(500)]),
    ]
)]
})
export class HomeComponent implements OnInit {


  constructor(@Inject(DOCUMENT) document) { }

  ngOnInit() {  }

  @HostListener('window:scroll', ['$event'])
  onWindowScroll(e) {
     if (window.pageYOffset > 550) {
       let element = document.getElementById('navbar');
       element.classList.add('sticky');
     } else {
      let element = document.getElementById('navbar');
        element.classList.remove('sticky'); 
     }
  }


}

Next we need to add the scroll event in the Home Component to trigger the onWindowScroll function on scroll event

home.component.html

Now you can see that a new class is added / removed to the element with id navbar on scrolling on the Home component

AngularJs solve broken image on failing to load image from dynamic URL

Joel Joseph — Sat, 04 Aug 2018 15:44:00 GMT

This article will help you to deal with broken images in AngularJs apps when you load images from dynamic URL.

If you have developed web application before , there must be situations where you had to deal with broken images , you must have searched for a solution in the Stack-overflow for the same.

The most common solution you find will be some thing like the JavaScript code below which can be found in the following thread in StackOverflow

But this solution can only be used when you are loading images from the project static URL. But in AngularJs sometimes you may have to bind URL to some property or interpolate the same.

Best Solution

The best solution to handle the same is to create a onError directive so that you can reuse the same in multiple places

Javascript Code

app.directive('onError', function() {  
  return {
    restrict:'A',
    link: function(scope, element, attr) {
      element.on('error', function() {
        element.attr('src', attr.onError);
      })
    }
  }
})

Html code

In the html code you can use the angular directive to specify the default image.

You can see that the broken image is replaced with default image.

Is it Ok to use AngularJs (1.x) instead of Angular (2+)

Joel Joseph — Fri, 03 Aug 2018 18:10:00 GMT

This article will help you to choose between AngularJs (1.x version) or Angular (2+ version).

If you have developed single page applications before, you must had situations where you had to choose between AngularJs and Angular . You must have googled to find the solution , or performed a search in Stack-overflow.

Yes this is 2018 you may find it difficult to choose between the two.

I have been a AngularJs developer since 2014 and later upgraded to Angular (2+) and is currently working on Angular version 6 projects. I can give you few points regarding the same.

My Answer

It depends on the type of project and time frame and the availability of resources you have.

Let's talk

The complete explanation including the technical aspects is out of scope of this article , but i can give you few basic points.

Why and when should you consider using AngularJs ?

If you already have AngularJs Development Team at hand
If the project is a short term project and requires fast development process no time to invest on new resources
If your development team is small and you need to use existing javascript team for the project
Angular 2+ is some what diffrent framework and will require time for upgrading existing AngularJS developers to the same.
Angular (currently version 6, version seven coming next month ) updates every 6 months. Some developers find it painful to update the version of the app every 6 months if you are working on a project with huge development timeframe [ I disagree with this point though ]
AngularJs has huge Community Support .It opens a large scale of options both to developers and clients. Developers may easily find various info and solutions

Why AngularJs (1.x) still exist ?

This is 2018 and even after the release of Angular 6 the AngularJs currently at version 1.7 is still live and kicking. Looking into the details we could see the reason behind the same as following.

AngularJs was a widely used frontend framework to make Single Page applications and many of the big and small projects rely on this framework. Even if Google were to stop their support, somebody would fork Angular 1 and continue to maintain it as an independent framework
AngularJS developers will be more widely available than those who updated to the latest version of Angular
Cost of the resources is another factor as companies can still rely on resources who work in older framework
AngularJs is a stable frontend framework and and has huge plugins base and other support packages
From July 1st 2018, AngularJs has entered into Long Term Support period
The web's scaffolding tool like Yeoman provide generators for scaffolding AngularJs projects , giving it developer tools support similar to Angular cli
In the case of performance AngularJs lags behind the latest version of Angular ( version 6 ) but still it gives a decent performance
Finally the last reason, even though upgrading your existing project from AngularJs to Angular is possible it takes lot of work. it will have to undergo many changes and is not worth the time , money, effort and number of resources spend on the same

When Should you consider using Angular(2+) ?

using the latest development stack is one of the greatest advantage over the competion
If you are working on longterm project with a huge team of developers
If the project is huge and consist of different modules and need continuous support
Angular has great list of development toolset to make the development much more easy
Performance wise Angular outruns AngularJs
If you are in process of developing your on Angular Team
Angular is being improved and may get much better in the future updates in all aspects
Software Industry is currently moving to Angular 2+ and in the future google may stop support for the AngularJS

There are many more reasons including technical aspects, tools, performance and SEO but i would like to keep this article to be minimal.

Google Authentication in Existing Universal Windows Platform(UWP) App Using Azure Mobile App SDK

Joel Joseph — Sun, 29 May 2016 00:33:00 GMT

This article will help you to setup the Google Authentication in a Windows 10 Universal Platform App using Azure Mobile App SDK.

Getting Started

For now let's hope you have already setup a blank project for Universal Windows Platform as we are considering connecting an existing App with Azure. I have named my solution as Win10GoogleAuthenticationDemo.

The App has a single page LoginPage.xaml

LoginPage.xaml

The Xaml code for the page is:

LoginPage.xaml.cs

The code for the LoginPage.xaml.cs :

using System;  
using System.Collections.Generic;  
using System.IO;  
using System.Linq;  
using System.Runtime.InteropServices.WindowsRuntime;  
using Windows.Foundation;  
using Windows.Foundation.Collections;  
using Windows.UI.Xaml;  
using Windows.UI.Xaml.Controls;  
using Windows.UI.Xaml.Controls.Primitives;  
using Windows.UI.Xaml.Data;  
using Windows.UI.Xaml.Input;  
using Windows.UI.Xaml.Media;  
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace Win10GoogleAuthenticationDemo  
{
    /// 
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// 
    public sealed partial class LoginPage : Page
    {
        public LoginPage()
        {
            this.InitializeComponent();
        }

        private void logIn(object sender, RoutedEventArgs e)
        {

        }
    }
}

Now that the App is ready you will need a Azure Mobile App to be created for your App

Create a New Azure Mobile App

You will need to create a Azure Mobile App in your Azure portal. For this login to your Azure Portal and create a new Azure mobile App. Let's name it GoogleLoginDemo.

First in the Azure Portal Click on New on the blade that pop's up choose Web + Mobile which will then opens another blade with a list of Featured Apps. From the list select Mobile App . This is the starting point to configure your Azure Mobile App Backend.

Now name the Mobile App Service and choose a Subscription and Resource Group and click Create

After this you new Mobile App Will be added to your portal all up and running with a new blade will be opened with App details.The Url of the service is also provided in the blade

Visit the Url of your Mobile App and make sure the service is running . Here is the url of my app : http://googlelogindemo.azurewebsites.net

Register your application with Google

To complete the procedure in this topic, you must have a Google account that has a verified email address. To create a new Google account, go to accounts.google.com.

Log on to the Azure portal, and navigate to your application. Copy your URL. You will use this to configure your Google app

Navigate to the Google apis website, sign-in with your Google account credentials, click Create Project, provide a Project name lets name it LoginDemoAzure, then click Create

Under Social APIs click Google+ API and then Enable.

In the left navigation, Credentials > OAuth consent screen, then select your Email address, enter a Product Name, and click Save.

In the Credentials tab, click Create credentials > OAuth client ID, then select Web application

Paste the App Service URL you copied earlier into Authorized JavaScript Origins, then paste your redirect URI into Authorized Redirect URI. The redirect URI is the URL of your application appended with the path, /.auth/login/google/callback. For example my Url is , https://googlelogindemo.azurewebsites.net/.auth/login/google/callback.

Make sure that you are using the HTTPS scheme. Then click Create.

Now On the next screen, make a note of the values of the client ID and client secret.

Add Google information to your Azure App

Back in the Azure portal, navigate to your application. Click Settings, and then Authentication / Authorization.

If the Authentication / Authorization feature is not enabled, turn the switch to On.

Click Google. Paste in the App ID and App Secret values which you obtained previously, and optionally enable any scopes your application requires. Then click OK.

By this much you are almost ready all that left for you is to is to work with the UWP blank App that we created.

Add Authentication to UWP App

You will now have to modify the Win10GoogleAuthenticationDemo app that we created in the first step.

Install

Install the Azure Mobile App SDk with Nuget

Make sure that you install correct library Microsoft.Azure.Mobile.Client

Now you can connect the UWP App with the Azure Mobile App Service by adding the following code to App.xaml.cs

First add the dependency for MobileServices

using Microsoft.WindowsAzure.MobileServices;

Now add the following code inside sealed partial class App.

// Connect to azure Mobile App Service   
        public static MobileServiceClient MobileService = new MobileServiceClient("https://googlelogindemo.azurewebsites.net/");

Now Modify the LoginPage.xaml.cs to call the Authentication for google ., you will have to add following code to LoginPage.xaml.cs

 // Define a member variable for storing the signed-in user. 
private MobileServiceUser user;  
private async System.Threading.Tasks.Task AuthenticateAsync()  
{
    string message;
    bool success = false;

    // This sample uses the Google provider.
    var provider = MobileServiceAuthenticationProvider.Google;

    // Use the PasswordVault to securely store and access credentials.
    PasswordVault vault = new PasswordVault();
    PasswordCredential credential = null;

    try
    {
        // Try to get an existing credential from the vault.
        credential = vault.FindAllByResource(provider.ToString()).FirstOrDefault();
    }
    catch (Exception)
    {
        // When there is no matching resource an error occurs, which we ignore.
    }

    if (credential != null)
    {
        // Create a user from the stored credentials.
        user = new MobileServiceUser(credential.UserName);
        credential.RetrievePassword();
        user.MobileServiceAuthenticationToken = credential.Password;

        // Set the user from the stored credentials.
        App.MobileService.CurrentUser = user;

        // Consider adding a check to determine if the token is 
        // expired, as shown in this post: http://aka.ms/jww5vp.

        success = true;
        message = string.Format("Cached credentials for user - {0}", user.UserId);
    }
    else
    {
        try
        {
            // Login with the identity provider.
            user = await App.MobileService
                .LoginAsync(provider);

            // Create and store the user credentials.
            credential = new PasswordCredential(provider.ToString(),
                user.UserId, user.MobileServiceAuthenticationToken);
            vault.Add(credential);

            success = true;
            message = string.Format("You are now logged in - {0}", user.UserId);
        }
        catch (MobileServiceInvalidOperationException)
        {
            message = "You must log in. Login Required";
        }
    }

    var dialog = new MessageDialog(message);
    dialog.Commands.Add(new UICommand("OK"));
    await dialog.ShowAsync();

    return success;
}

In the AuthenticateAsync method, the app tries to use credentials stored in the PasswordVault to access the service. A regular sign-in is also performed when there is no stored credential.

Now if you call the AuthenticateAsync method in the login button Click function

After all the changes the LoginPage.xaml.cs will have the following code.

using Microsoft.WindowsAzure.MobileServices;  
using System;  
using System.Collections.Generic;  
using System.IO;  
using System.Linq;  
using System.Runtime.InteropServices.WindowsRuntime;  
using Windows.Foundation;  
using Windows.Foundation.Collections;  
using Windows.Security.Credentials;  
using Windows.UI.Popups;  
using Windows.UI.Xaml;  
using Windows.UI.Xaml.Controls;  
using Windows.UI.Xaml.Controls.Primitives;  
using Windows.UI.Xaml.Data;  
using Windows.UI.Xaml.Input;  
using Windows.UI.Xaml.Media;  
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace Win10GoogleAuthenticationDemo  
{
    /// 
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// 
    public sealed partial class LoginPage : Page
    {
        // Define a member variable for storing the signed-in user. 
        private MobileServiceUser user;

        public LoginPage()
        {
            this.InitializeComponent();
        }

        private async System.Threading.Tasks.Task AuthenticateAsync()
        {
            string message;
            bool success = false;

            // This sample uses the Facebook provider.
            var provider = MobileServiceAuthenticationProvider.Google;

            // Use the PasswordVault to securely store and access credentials.
            PasswordVault vault = new PasswordVault();
            PasswordCredential credential = null;

            try
            {
                // Try to get an existing credential from the vault.
                credential = vault.FindAllByResource(provider.ToString()).FirstOrDefault();
            }
            catch (Exception)
            {
                // When there is no matching resource an error occurs, which we ignore.
            }

            if (credential != null)
            {
                // Create a user from the stored credentials.
                user = new MobileServiceUser(credential.UserName);
                credential.RetrievePassword();
                user.MobileServiceAuthenticationToken = credential.Password;

                // Set the user from the stored credentials.
                App.MobileService.CurrentUser = user;

                // Consider adding a check to determine if the token is 
                // expired, as shown in this post: http://aka.ms/jww5vp.

                success = true;
                message = string.Format("Cached credentials for user - {0}", user.UserId);
            }
            else
            {
                try
                {
                    // Login with the identity provider.
                    user = await App.MobileService
                        .LoginAsync(provider);

                    // Create and store the user credentials.
                    credential = new PasswordCredential(provider.ToString(),
                        user.UserId, user.MobileServiceAuthenticationToken);
                    vault.Add(credential);

                    success = true;
                    message = string.Format("You are now logged in - {0}", user.UserId);
                }
                catch (MobileServiceInvalidOperationException)
                {
                    message = "You must log in. Login Required";
                }
            }

            var dialog = new MessageDialog(message);
            dialog.Commands.Add(new UICommand("OK"));
            await dialog.ShowAsync();

            return success;
        }

        private  async void logIn(object sender, RoutedEventArgs e)
        {
            // Login the user 
            if (await AuthenticateAsync())
            {
              // do something 
            }


        }





    }
}

Now if you run the Project the Google Authentication will work , look at the screen shot below to see the result.

Customizing Title Bar and Status Bar in Universal Windows Platform (UWP)

Joel Joseph — Sun, 17 Apr 2016 10:31:36 GMT

This article will help you to customize the Status Bar and Title Bar in a Windows 10 Universal Platform App.

If you have been developing Apps for Windows 10, there are instances where you will need to customize the Title Bar or Status Bar like changing the color or adding back button.let's see how this can be done.

Gettig Started

For now let's hope you have already setup a blank project for Universal Windows Platform . I have named my solution as Win10CustomizingTitleBarDemo.

After the setup i have removed the Frame Counter in the App, not that important i just don't need it in this scenario. Also there is MainPage.xaml page which is generated with the project Solution.

MainPage.xaml

The XAML code for the page is :

The MainPage.xamal.cs has the following code:

using System;  
using System.Collections.Generic;  
using System.IO;  
using System.Linq;  
using System.Runtime.InteropServices.WindowsRuntime;  
using Windows.Foundation;  
using Windows.Foundation.Collections;  
using Windows.UI.Xaml;  
using Windows.UI.Xaml.Controls;  
using Windows.UI.Xaml.Controls.Primitives;  
using Windows.UI.Xaml.Data;  
using Windows.UI.Xaml.Input;  
using Windows.UI.Xaml.Media;  
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace Win10CustomizingTitleBarDemo  
{
    /// 
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// 
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    }
}

The App.xaml.cs of the app look something like this:

using System;  
using System.Collections.Generic;  
using System.IO;  
using System.Linq;  
using System.Runtime.InteropServices.WindowsRuntime;  
using Windows.ApplicationModel;  
using Windows.ApplicationModel.Activation;  
using Windows.Foundation;  
using Windows.Foundation.Collections;  
using Windows.UI.Xaml;  
using Windows.UI.Xaml.Controls;  
using Windows.UI.Xaml.Controls.Primitives;  
using Windows.UI.Xaml.Data;  
using Windows.UI.Xaml.Input;  
using Windows.UI.Xaml.Media;  
using Windows.UI.Xaml.Navigation;

namespace Win10CustomizingTitleBarDemo  
{
    /// 
    /// Provides application-specific behavior to supplement the default Application class.
    /// 
    sealed partial class App : Application
    {
        /// 
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// 
        public App()
        {
            Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync(
                Microsoft.ApplicationInsights.WindowsCollectors.Metadata |
                Microsoft.ApplicationInsights.WindowsCollectors.Session);
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        /// 
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used such as when the application is launched to open a specific file.
        /// 
        /// Details about the launch request and process.
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {



            Frame 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();

                rootFrame.NavigationFailed += OnNavigationFailed;

                if (e.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
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        /// 
        /// Invoked when Navigation to a certain page fails
        /// 
        /// The Frame which failed navigation
        /// Details about the navigation failure
        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
        }

        /// 
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// 
        /// The source of the suspend request.
        /// Details about the suspend request.
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

Change Title Bar Color

Want to play around with the Title Bar of your app, you can easily do that. There are set of APIs that can help you to deal with playing around Title Bar. Instead of having default color of title bar, you can apply your own colors. Not only with colors, you can even customize the overall appearance of the Title bar.This is often useful when you want to match a color theme with your overall app along with the title bar.

If you Wish to maintain the color of Title bar through out the app then you can write the following code inside the OnLaunched in the App.xaml.cs or if you wish to change the color for each page then you can write the code inside the Code Behind for example MapinPage.xaml.cs inside the construct after the call to InitializeComponent method.

I chose to maintain the color through out the app so code is placed inside OnLaunced method in the App.xaml.cs:

 if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
            {
                var titleBar = ApplicationView.GetForCurrentView().TitleBar;
                if (titleBar != null)
                {
                    titleBar.ButtonBackgroundColor = GetSolidColorBrush("#FFCD3927").Color;
                    titleBar.ButtonForegroundColor = Colors.White;
                    titleBar.BackgroundColor = GetSolidColorBrush("#FFCD3927").Color;
                    titleBar.ForegroundColor = Colors.White;
                }
            }

You also have to add the dependency to App.xaml.cs:

using Windows.Foundation.Metadata;  
using Windows.UI;  
using Windows.UI.ViewManagement;

The code for function GetSolidColorBrush

 //Function to convert Hex to Color
        public SolidColorBrush GetSolidColorBrush(string hex)
        {
            hex = hex.Replace("#", string.Empty);
            byte a = (byte)(Convert.ToUInt32(hex.Substring(0, 2), 16));
            byte r = (byte)(Convert.ToUInt32(hex.Substring(2, 2), 16));
            byte g = (byte)(Convert.ToUInt32(hex.Substring(4, 2), 16));
            byte b = (byte)(Convert.ToUInt32(hex.Substring(6, 2), 16));
            SolidColorBrush myBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(a, r, g, b));
            return myBrush;
        }

Also you can see that i have used a custom function called GetSolidColorBrush to convert hex to colors. For more details on converting Hex to Color in C# read my other article Converting Hex to Color in C# for Universal Windows Platform

After all the above steps the App.xaml.cs code will have the following code :

using System;  
using System.Collections.Generic;  
using System.IO;  
using System.Linq;  
using System.Runtime.InteropServices.WindowsRuntime;  
using Windows.ApplicationModel;  
using Windows.ApplicationModel.Activation;  
using Windows.Foundation;  
using Windows.Foundation.Collections;  
using Windows.Foundation.Metadata;  
using Windows.UI;  
using Windows.UI.ViewManagement;  
using Windows.UI.Xaml;  
using Windows.UI.Xaml.Controls;  
using Windows.UI.Xaml.Controls.Primitives;  
using Windows.UI.Xaml.Data;  
using Windows.UI.Xaml.Input;  
using Windows.UI.Xaml.Media;  
using Windows.UI.Xaml.Navigation;

namespace Win10CustomizingTitleBarDemo  
{
    /// 
    /// Provides application-specific behavior to supplement the default Application class.
    /// 
    sealed partial class App : Application
    {
        /// 
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// 
        public App()
        {
            Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync(
                Microsoft.ApplicationInsights.WindowsCollectors.Metadata |
                Microsoft.ApplicationInsights.WindowsCollectors.Session);
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        //Function to convert Hex to Color
        public SolidColorBrush GetSolidColorBrush(string hex)
        {
            hex = hex.Replace("#", string.Empty);
            byte a = (byte)(Convert.ToUInt32(hex.Substring(0, 2), 16));
            byte r = (byte)(Convert.ToUInt32(hex.Substring(2, 2), 16));
            byte g = (byte)(Convert.ToUInt32(hex.Substring(4, 2), 16));
            byte b = (byte)(Convert.ToUInt32(hex.Substring(6, 2), 16));
            SolidColorBrush myBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(a, r, g, b));
            return myBrush;
        }

        /// 
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used such as when the application is launched to open a specific file.
        /// 
        /// Details about the launch request and process.
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
            if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
            {
                var titleBar = ApplicationView.GetForCurrentView().TitleBar;
                if (titleBar != null)
                {
                    titleBar.ButtonBackgroundColor = GetSolidColorBrush("#FFCD3927").Color;
                    titleBar.ButtonForegroundColor = Colors.White;
                    titleBar.BackgroundColor = GetSolidColorBrush("#FFCD3927").Color;
                    titleBar.ForegroundColor = Colors.White;
                }
            }


            Frame 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();

                rootFrame.NavigationFailed += OnNavigationFailed;

                if (e.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
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        /// 
        /// Invoked when Navigation to a certain page fails
        /// 
        /// The Frame which failed navigation
        /// Details about the navigation failure
        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
        }

        /// 
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// 
        /// The source of the suspend request.
        /// Details about the suspend request.
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

Now if you run the App you can find the color on your Title bar :

In the Windows Mobile the scenario is different you have Status bar instead of the Title bar you will have to use the following code if you want to play with it. Also remember that before to use any specific platform API you need to add a reference to the correspondent Extension. So you will have to add reference to Windows Mobile Extensions for the UWP.

After this just use the following code to customize the status bar:

//Mobile customization
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))  
{

    var statusBar = StatusBar.GetForCurrentView();
    if (statusBar != null)
    {
        statusBar.BackgroundOpacity = 1;
        statusBar.BackgroundColor = GetSolidColorBrush("#FFCD3927").Color;
        statusBar.ForegroundColor = Colors.White;
    }
}

Enable back button in the app title bar Windows 10 UWP

In Windows 10 UWP the back button is disabled by default. If you need back button in the application title bar you need to enable it.

To enable the back button, first you need to get the current view and enable the back button for this you can use following code:

var view = SystemNavigationManager.GetForCurrentView();  
view.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;

You will also have to create an event handler to handle the back button click

view.BackRequested += BackRequested;

Add the following method to handle the back button click.

private void View_BackRequested(object sender, BackRequestedEventArgs e)  
        {
            // Do some thing
        }

After all the above steps the App.xaml.cs will have the following code :

using System;  
using System.Collections.Generic;  
using System.IO;  
using System.Linq;  
using System.Runtime.InteropServices.WindowsRuntime;  
using Windows.ApplicationModel;  
using Windows.ApplicationModel.Activation;  
using Windows.Foundation;  
using Windows.Foundation.Collections;  
using Windows.Foundation.Metadata;  
using Windows.UI;  
using Windows.UI.Core;  
using Windows.UI.ViewManagement;  
using Windows.UI.Xaml;  
using Windows.UI.Xaml.Controls;  
using Windows.UI.Xaml.Controls.Primitives;  
using Windows.UI.Xaml.Data;  
using Windows.UI.Xaml.Input;  
using Windows.UI.Xaml.Media;  
using Windows.UI.Xaml.Navigation;

namespace Win10CustomizingTitleBarDemo  
{
    /// 
    /// Provides application-specific behavior to supplement the default Application class.
    /// 
    sealed partial class App : Application
    {
        /// 
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// 
        public App()
        {
            Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync(
                Microsoft.ApplicationInsights.WindowsCollectors.Metadata |
                Microsoft.ApplicationInsights.WindowsCollectors.Session);
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        //Function to convert Hex to Color
        public SolidColorBrush GetSolidColorBrush(string hex)
        {
            hex = hex.Replace("#", string.Empty);
            byte a = (byte)(Convert.ToUInt32(hex.Substring(0, 2), 16));
            byte r = (byte)(Convert.ToUInt32(hex.Substring(2, 2), 16));
            byte g = (byte)(Convert.ToUInt32(hex.Substring(4, 2), 16));
            byte b = (byte)(Convert.ToUInt32(hex.Substring(6, 2), 16));
            SolidColorBrush myBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(a, r, g, b));
            return myBrush;
        }

        /// 
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used such as when the application is launched to open a specific file.
        /// 
        /// Details about the launch request and process.
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
            var view = SystemNavigationManager.GetForCurrentView();
            view.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
            view.BackRequested += View_BackRequested;
            if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
            {
                var titleBar = ApplicationView.GetForCurrentView().TitleBar;
                if (titleBar != null)
                {
                    titleBar.ButtonBackgroundColor = GetSolidColorBrush("#FFCD3927").Color;
                    titleBar.ButtonForegroundColor = Colors.White;
                    titleBar.BackgroundColor = GetSolidColorBrush("#FFCD3927").Color;
                    titleBar.ForegroundColor = Colors.White;
                }
            }


            Frame 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();

                rootFrame.NavigationFailed += OnNavigationFailed;

                if (e.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
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        private void View_BackRequested(object sender, BackRequestedEventArgs e)
        {
            // do some thing
        }

        /// 
        /// Invoked when Navigation to a certain page fails
        /// 
        /// The Frame which failed navigation
        /// Details about the navigation failure
        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
        }

        /// 
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// 
        /// The source of the suspend request.
        /// Details about the suspend request.
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

Now if you run the app you can you can see that the back button appeared in the Title Bar of the App :

Navigation Between Pages Using MVVM Light in Universal Windows Platform(UWP)

Joel Joseph — Sun, 20 Mar 2016 10:59:00 GMT

This article will help you to setup the basic Navigation with MVVM pattern in a Windows 10 Universal Platform App using MVVM Light Toolkit from Galasoft.

A complete explanation on how to setup your first Windows 10 Universal Windows Platform using MVVM Light can be found in this article: Using MVVM Light with Universal Windows App For Windows 10.

Getting Started

For now let's hope you have already setup a blank project for Universal Windows Platform with MVVM Light Library installed and completed the basic steps to implement MVVM Light. I have named my solution as Win10MVVMLightNavigationDemo.

The App has two Pages FirstPage.xaml and SecondPage.xaml:

FirstPage.xaml

The Xaml code for the page is:

And Now the SecondPage.xaml

The Xaml code for the page is:

Also there are ViewModel in the ViewModels folder for each Page in the App .

FirstPageViewModel.cs

using GalaSoft.MvvmLight;  
using GalaSoft.MvvmLight.Command;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;

namespace Win10MVVMLightNavigationDemo.ViewModels  
{
    public  class FirstPageViewModel : ViewModelBase
    {
        public RelayCommand NavigateCommand { get; private set; }
        private bool _isLoading = false;
        public bool IsLoading
        {
            get
            {
                return _isLoading;
            }
            set
            {
                _isLoading = value;
                RaisePropertyChanged("IsLoading");

            }
        }
        private string _title;
        public string Title
        {

            get
            {
                return _title;
            }
            set
            {
                if (value != _title)
                {
                    _title = value;
                    RaisePropertyChanged("Title");
                }
            }
        }

        public FirstPageViewModel()
        {
            Title = "First Page";
            NavigateCommand = new RelayCommand(NavigateCommandAction);
        }

        private void NavigateCommandAction()
        {
            // Do Something
        }
    }
}

And the SecondPageViewModel.cs

using GalaSoft.MvvmLight;  
using GalaSoft.MvvmLight.Command;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;

namespace Win10MVVMLightNavigationDemo.ViewModels  
{
    public  class SecondPageViewModel : ViewModelBase
    {
        public RelayCommand NavigateCommand { get; private set; }
        private bool _isLoading = false;
        public bool IsLoading
        {
            get
            {
                return _isLoading;
            }
            set
            {
                _isLoading = value;
                RaisePropertyChanged("IsLoading");

            }
        }
        private string _title;
        public string Title
        {

            get
            {
                return _title;
            }
            set
            {
                if (value != _title)
                {
                    _title = value;
                    RaisePropertyChanged("Title");
                }
            }
        }

        public SecondPageViewModel()
        {
            Title = "Second Page";
            NavigateCommand = new RelayCommand(NavigateCommandAction);
        }

        private void NavigateCommandAction()
        {
            //Do Something
        }
    }
}

The ViewModelLocator.cs for the App which registers each instance of ViewModel Looks like this:

using GalaSoft.MvvmLight;  
using GalaSoft.MvvmLight.Ioc;  
using GalaSoft.MvvmLight.Views;  
using Microsoft.Practices.ServiceLocation;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;

namespace Win10MVVMLightNavigationDemo.ViewModels  
{
    /// 
    /// This class contains static references to all the view models in the
    /// application and provides an entry point for the bindings.
    ///  
    public class ViewModelLocator
    {
        /// 
        /// Initializes a new instance of the ViewModelLocator class.
        /// 
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
            if (ViewModelBase.IsInDesignModeStatic)
            {
                // Create design time view services and models
            }
            else
            {
                // Create run time view services and models
            }

            //Register your services used here
            SimpleIoc.Default.Register();
            SimpleIoc.Default.Register();


        }


        // 
        // Gets the FirstPage view model.
        // 
        // 
        // The FirstPage view model.
        // 
        public FirstPageViewModel FirstPageInstance
        {
            get
            {
                return ServiceLocator.Current.GetInstance();
            }
        }

        // 
        // Gets the SecondPage view model.
        // 
        // 
        // The SecondPage view model.
        // 
        public SecondPageViewModel SecondPageInstance
        {
            get
            {
                return ServiceLocator.Current.GetInstance();
            }
        }

        // 
        // The cleanup.
        // 
        public static void Cleanup()
        {
            // TODO Clear the ViewModels
        }
    }
}

Also the App.xaml was modified to register locator as a global static resource to make it available for all pages to use.

App.xaml

Using NavigationService

In order to use the Navigation in MVVM Light you will have to register and Configure INavigationService in ViewModelLocator.cs , for this you will have to register each Page with a PageKey.

First declare page key variable for each page in the App as a Public constant string before initializing instance of ViewModelLocator Class

public const string FirstPageKey = "FirstPage";  
public const string SecondPageKey = "SecondPage";

Now define a new instance of NavigationService and configure it with providing each Page Key for each Page before registering the INavigationService to the SimpleIoc

 var nav = new NavigationService();
            nav.Configure(FirstPageKey, typeof(FirstPage));
            nav.Configure(SecondPageKey, typeof(SecondPage));

After this register the INavigationService to the ViewModelLocator SimpleIoc

SimpleIoc.Default.Register(() => nav);

After all the above steps the ViewModelLoacator.cs will look like this:

using GalaSoft.MvvmLight;  
using GalaSoft.MvvmLight.Ioc;  
using GalaSoft.MvvmLight.Views;  
using Microsoft.Practices.ServiceLocation;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;  
using Win10MVVMLightNavigationDemo.Views;

namespace Win10MVVMLightNavigationDemo.ViewModels  
{
    /// 
    /// This class contains static references to all the view models in the
    /// application and provides an entry point for the bindings.
    ///  
    public class ViewModelLocator
    {
        public const string FirstPageKey = "FirstPage";
        public const string SecondPageKey = "SecondPage";
        /// 
        /// Initializes a new instance of the ViewModelLocator class.
        /// 
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
            var nav = new NavigationService();
            nav.Configure(FirstPageKey, typeof(FirstPage));
            nav.Configure(SecondPageKey, typeof(SecondPage));
            if (ViewModelBase.IsInDesignModeStatic)
            {
                // Create design time view services and models
            }
            else
            {
                // Create run time view services and models
            }

            //Register your services used here
            SimpleIoc.Default.Register(() => nav);
            SimpleIoc.Default.Register();
            SimpleIoc.Default.Register();


        }


        // 
        // Gets the FirstPage view model.
        // 
        // 
        // The FirstPage view model.
        // 
        public FirstPageViewModel FirstPageInstance
        {
            get
            {
                return ServiceLocator.Current.GetInstance();
            }
        }

        // 
        // Gets the SecondPage view model.
        // 
        // 
        // The SecondPage view model.
        // 
        public SecondPageViewModel SecondPageInstance
        {
            get
            {
                return ServiceLocator.Current.GetInstance();
            }
        }

        // 
        // The cleanup.
        // 
        public static void Cleanup()
        {
            //  Clear the ViewModels
        }
    }
}

Now you will have to use INavigationService instance in your each ViewModel.

Fist take the case of FirstPageViewModel now you will have to declare INaviagtionSevice as Private readonly before initializes a new instance of the FirstPageViewModel

private readonly INavigationService _navigationService;

Also pass the Navigation service as arguments to the constructor.

 public FirstPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;
            Title = "First Page";
            NavigateCommand = new RelayCommand(NavigateCommandAction);
        }

Now all that left is to call the NavigateTo method and pass the Page Key to Navigate to the SecondPage in the NavigateCommandAction

_navigationService.NavigateTo("SecondPage");

After all the above steps your FirstPageViewModel.cs Will have the following code:

using GalaSoft.MvvmLight;  
using GalaSoft.MvvmLight.Command;  
using GalaSoft.MvvmLight.Views;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;

namespace Win10MVVMLightNavigationDemo.ViewModels  
{
    public  class FirstPageViewModel : ViewModelBase
    {
        private readonly INavigationService _navigationService;
        public RelayCommand NavigateCommand { get; private set; }
        private bool _isLoading = false;
        public bool IsLoading
        {
            get
            {
                return _isLoading;
            }
            set
            {
                _isLoading = value;
                RaisePropertyChanged("IsLoading");

            }
        }
        private string _title;
        public string Title
        {

            get
            {
                return _title;
            }
            set
            {
                if (value != _title)
                {
                    _title = value;
                    RaisePropertyChanged("Title");
                }
            }
        }

        public FirstPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;
            Title = "First Page";
            NavigateCommand = new RelayCommand(NavigateCommandAction);
        }

        private void NavigateCommandAction()
        {
            // Do Something
            _navigationService.NavigateTo("SecondPage");
        }
    }
}

For navigating to the FirstPage follow the above steps all that you need to change the Page Key to FirstPage in NavigateTo method

_navigationService.NavigateTo("FirstPage");

or if you wish to use the back button feature just replace it with:

_navigationService.GoBack();

And yourSecondPageViewModel.cs will have the following code :

using GalaSoft.MvvmLight;  
using GalaSoft.MvvmLight.Command;  
using GalaSoft.MvvmLight.Views;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;

namespace Win10MVVMLightNavigationDemo.ViewModels  
{
    public  class SecondPageViewModel : ViewModelBase
    {
        private readonly INavigationService _navigationService;
        public RelayCommand NavigateCommand { get; private set; }
        private bool _isLoading = false;
        public bool IsLoading
        {
            get
            {
                return _isLoading;
            }
            set
            {
                _isLoading = value;
                RaisePropertyChanged("IsLoading");

            }
        }
        private string _title;
        public string Title
        {

            get
            {
                return _title;
            }
            set
            {
                if (value != _title)
                {
                    _title = value;
                    RaisePropertyChanged("Title");
                }
            }
        }

        public SecondPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;
            Title = "Second Page";
            NavigateCommand = new RelayCommand(NavigateCommandAction);
        }

        private void NavigateCommandAction()
        {
            //Do Something
            _navigationService.NavigateTo("FirstPage");

            // or use the GoBack if you like to implement a back button functionality

            //_navigationService.GoBack(); 
        }
    }
}

The following shows the working of the App:

Converting Hex to Color in C# for Universal Windows Platform (UWP)

Joel Joseph — Mon, 07 Mar 2016 19:49:45 GMT

If you have developed apps for Universal Windows Platform there must be situations where you had to convert Hex-code to Color. You must have googled to find the solution , or performed a search in Stack-overflow

The most common solution you find will be some thing like the code below which can be found in the following thread in StackOverflow

using System.Windows.Media;

Color color = (Color)ColorConverter.ConvertFromString("#FFDFD991");

Or

Something from the following thread from StackOverflow

string hex = "#FFFFFF";  
Color color = System.Drawing.ColorTranslator.FromHtml(hex);

Above Code Doesn't work for UWP

Well in most .net Applications the code above will work , but not in UWP Apps or previous Windows Apps. You may hit dependency error like 'System.drawing namespace not found' or 'ColorConverter does not exist'.

The issue here isn't the framework version but rather the reduced framework API that is available to Universal Apps. Windows Universal apps don't have the same coverage of namespaces, classes, and APIs as the full .NET framework, and as a result, you can't reuse everything from full .net (such as System.Drawing) in a Universal Project.

However, you don't necessarily have to rewrite the WHOLE THING. instead, what you want to do is abstract the platform-specific behavior to an interface, and only that part has to be rewritten.

In otherwords, the global behaviors, UI and interaction can be reused using the classes available in all frameworks, usually represented by a Portable Class Library (PCL), and each version of your app (Winforms, Universal, Xamarin, etc) would reuse that shared library for the "core" of the application and the UI (and platform-specific behavior) would be the only part you would implement separately, in each version of the app you want to support.

Is there any other way ?

If the above explanation got you confused and you just want to convert the hex to Color and don't want to be bothered or to get deep into it just use following method :

Create a method to Convert Hex string to SolidColorBrush:

public SolidColorBrush GetSolidColorBrush(string hex)  
{
  hex = hex.Replace("#", string.Empty);
  byte a = (byte)(Convert.ToUInt32(hex.Substring(0, 2), 16));
  byte r = (byte)(Convert.ToUInt32(hex.Substring(2, 2), 16));
  byte g = (byte)(Convert.ToUInt32(hex.Substring(4, 2), 16));
  byte b = (byte)(Convert.ToUInt32(hex.Substring(6, 2), 16));
  SolidColorBrush myBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(a, r, g, b));
            return myBrush;
}

Now all that left is to get the color by Calling the method and pass the hex string to it as parameter:

var color = GetSolidColorBrush("#FFCD3927").Color;

Now you have got the color for the hex you have provided.

Using MVVM Light with Universal Windows App For Windows 10

Joel Joseph — Sun, 28 Feb 2016 19:03:51 GMT

This article will help you to setup the basic MVVM pattern in a Windows 10 Universal Platform App using MVVM Light Toolkit from Galasoft.

What is MVVM ?

MVVM (Model-View-ViewModel) is and software architectural pattern which provide a clean separation of concerns between the user interface controls and their logic. There are three core components in the MVVM pattern: the model, the view and the View Model.Each serves a distinct and separate role.

A complete discussion of MVVM pattern is outside the scope of this article so if you are new to the concept and want to learn more I suggest taking a look at articles like this one on MSDN: The MVVM Pattern

MVVM Light Toolkit

The MVVM Light Toolkit is an open-source framework for building applications using the MVVM Pattern.The main purpose of the toolkit is to accelerate the creation and development of MVVM applications in WPF, Silverlight, Windows Store, Windows Phone and Xamarin

MVVM Light is a library that i use since its early versions. Many other implementations of the MVVM pattern are available, such as Prism, and some developers even choose to roll their own framework.

Getting Started

For starters let me be clear that you need Windows 10 Pro (to make use Hyper-v to run emulators) and Visual Studio 2015 as IDE. I suggest you install Visual Studio 2015 Community which is Free Which is Packed with almost all the Features you need for development.

Startup Visual Studio 2015 and create a New Project Template under Visual C# choose Windows then select Blank App (universal Windows ).

Just name your project something like Win10MVVMLightDemo. Visual Studio will create a new Solution with your project which will look something like this:

You can see the new project created and the default folder structure by looking the Solution Explorer

Installing MVVM Light Toolkit

There are different ways to install MVVM Light Toolkit , but in this demo use Nuget.

Before installing MVVM Light Toolkit through nuget i like to inform those who have used MVVM Light Toolkit for Windows 8 and Windows 8.1 (Phone or desktop) Development that Nuget team changed the implementation for UWP and decided not to support content files and the powershell script anymore. So the current version of MVVM Light Toolkit (5.2.0) Does not create ViewModelLocator for you, nothing will be added to resources and no code is added to App.xaml like it used to. You will have to add these manually.

Right Click the project References in Solution Explorer and on the menu that appears click on Manage Nuget Packages. On the Windows that appears search with keyword 'mvvm light' :

Now make sure you select the MVVM Light Toolkit From Galasoft and click install. This install the MVVM Light Library and its references to the project.While installing it may prompt you asking permission to install components just click 'I Accept' . After installation is complete you can see the reference added to the project under References in Solution Explorer:

Now Lets Set up the Project Structure since Folders for Views and ViewModels are not added to project resources automatically as used to early in windows 8.1

Right Click on the project in Solution Explorer and Add three folders Models , Views , ViewModels.

You may delete or move the existing page MainPage.xaml to Views folder. For now lets delete it and add a new item StartPage.xaml in Views folder. Right Click on Views folder and add New Item and select Blank Page name it StartPage.xaml.

Now the new Blank Page will be created in Views folder, since we deleted the default Startup page MainPage.xaml you will now have to scope the App 's Startup Page to StartPage.xaml in Views folder. To do this look for App.xaml.cs and search for the word MainPage.

You will find following code under OnLaunched method:

rootFrame.Navigate(typeof(MainPage), e.Arguments);

Change it to:

rootFrame.Navigate(typeof(StartPage), e.Arguments);

Also you need to add the following dependency in App.xaml.cs
using Win10MVVMLightDemo.Views;

just press Ctrl + . on the word to bring out the intellisense.

Next we have to Add a new Class ViewModelLocator.cs to the ViewModels folder.

A ViewModelLocator is a class that centralizes the definitions of all the ViewModels in an app so that they can be cached and retrieved on demand, usually via Dependency Injection. ViewModelLocator is an idiom that lets you keep the benefits of DI(Dependency Injection) in your MVVM application while also allowing your code to play well with visual designers. ViewModelLocator needs to setup the IOC provider, register each individual ViewModel, and finally expose those registered ViewModels for use by the rest of the application. A full discussion of these topics also outside the scope of this document, but it's discussed on StackOverflow .

Now replace the code in the ViewModelLocator.cs with the following code :

using GalaSoft.MvvmLight;  
using GalaSoft.MvvmLight.Ioc;  
using GalaSoft.MvvmLight.Views;  
using Microsoft.Practices.ServiceLocation;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;

namespace Win10MVVMLightDemo.ViewModels  
{
    /// 
    /// This class contains static references to all the view models in the
    /// application and provides an entry point for the bindings.
    ///  
    public class ViewModelLocator
    {
        /// 
        /// Initializes a new instance of the ViewModelLocator class.
        /// 
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
            if (ViewModelBase.IsInDesignModeStatic)
            {
                // Create design time view services and models
            }
            else
            {
                // Create run time view services and models
            }         

            //Register your services used here
            SimpleIoc.Default.Register();
            SimpleIoc.Default.Register();

        }


        // 
        // Gets the StartPage view model.
        // 
        // 
        // The StartPage view model.
        // 
        public StartPageViewModel StartPageInstance
        {
            get
            {
                return ServiceLocator.Current.GetInstance();
            }
        }

        // 
        // The cleanup.
        // 
        public static void Cleanup()
        {
            // TODO Clear the ViewModels
        }
    }

}

Now we will add another Class in ViewModles folder StartPageViewModel.cs and replace the code inside with the following:

using GalaSoft.MvvmLight;

namespace Win10MVVMLightDemo.ViewModels  
{
    public class StartPageViewModel : ViewModelBase
    {
        private bool _isLoading = false;
        public bool IsLoading
        {
            get
            {
                return _isLoading;
            }
            set
            {
                _isLoading = value;
                RaisePropertyChanged("IsLoading");

            }
        }
        private string _title;
        public string Title
        {

            get
            {
                return _title;
            }
            set
            {
                if (value != _title)
                {
                    _title = value;
                    RaisePropertyChanged("Title");
                }
            }
        }

        public StartPageViewModel()
        {
            Title = "Hello Joel";
        }
    }
}

The ServiceLocator is responsible for retrieving the ViewModel instances, using the SimpleIoc.Default implementation provided by MVVM Light. By registering them via the SimpleIoc.Default instance in the constructor, we can retrieve those instances from the Views via the public properties defined in the locator class.

We can then register this locator as a global static resource in App.xaml so it is available for all pages to use. These resources are automatically instantiated, both at runtime and designtime, ensuring that both our sample and live data are ready.

Now change the code inside App.xaml to following:

Now we will Edit the StartPage.xaml to add the ViewModel to its appropriate page via the DataContext for this add following code to StartPage.xaml and set the DataContext to SartPageInstance that we defined in the ViewModelLocator.cs :

DataContext="{Binding SartPageInstance, Source={StaticResource Locator}}"

Also add the Xaml code inside the Grid View to display the title of the page that we defined as a property Title in the StartPageViewModel.cs

After adding these codes the StartPage.xaml will look something like this:

Now the App is ready to Build and Run, You may now build the app and check for errors. if error is found make sure you have not left out any of the previous steps

If there are no Errors found on building the solution you may now hit the Play button. You may choose to run you app in Local Machine, Simulator,or any of the Emulators. For now lets choose the local Machine and Run the App.

Upon running the app in debug Mode in Local Machine the App will look Something like this:

That's it the App runs, if you find the frame counter in the app annoying you can remove it by commenting out the following code inside OnLaunched method in App.xaml.cs

#if DEBUG
  if (System.Diagnostics.Debugger.IsAttached)
  {
    this.DebugSettings.EnableFrameRateCounter = true;
  }
#endif