Archivi categoria: windows

My developer/it pro toolkit for Windows (2021)

Every IT professional / programmer / developer has a toolkit to do be more productive. It’s the based on years of experience, tips from colleagues, friends, and experts.
This is my list of tools that I use more often. I don’t use every tool every day.

This is my first list and it will be interesting to see how this will evolve year over year.

Misc

Windows Terminal / If you are a terminal user this is for you. It’s a modern implementation of a terminal for Windows. Its main features include multiple tabs, panes, Unicode and UTF-8 character support, a GPU accelerated text rendering engine, and the ability to create your own themes and customize text, colors, backgrounds, and shortcuts.
Chocolatey / The Package Manager for Windows. Forget browsing to the website of your favorite tool, click download, open the setup, next-next-next-finish. Just write choco install mytool -y and you’re done!
Windows Subsystem for Linux / A complete GNU/Linux environment inside Windows. I use this to learn or explore Linux commands. It’s fast and without the overhead of a traditional virtual machine.
Notepad2 / A replacement for the standard notepad.exe. Syntax highlight support, super light and fast!
Visual Studio Code / Free. Built on open source. Runs everywhere. Free. Built on open source. Runs everywhere. A swiss-army knife for any code related activity.
Nightingale / A native Windows application REST client. An alternative to Postman. A lovely UI and smooth user experience.
PowerToys / A collection of tools to improve your Windows experience.
ZoomIt / It’s perfect to zoom on the screen and draw arrows, lines, and rectangles while doing screen sharing sessions.
Fork / a great UI for git.
Total Commander / A replacement of Windows File Explorer. Good old, feature rich and you can use it with just keyboard shortcuts. Blazing fast to rename, move or copy batch of files.
Markdown Monster / An IDE for your markdown files!
Fiddler / THE web debugger.
BeyondCompare / Compare directories, files, exe… If you have to compare something this is the tool you’re looking for.
SnagIt / screen capture on steroids
Procmon / Do you want to know every single detail of what happens in your registry, file system, and processes/thread activities? This is the tool that you’ll open to diagnose issues or behaviors happening on Windows.

Visual Studio Code Extensions

GitLens / Git superpowers in your VS Code.
Docker for VS Code / You can get IntelliSense when editing your Dockerfile and docker-compose.yml files, with completions and syntax help for common commands.
PowerShell / Bye bye PowerShell ISE.
RESTClient / Send HTTP request directly and view the response directly from VS Code. It can also generate code snippets to make HTTP call in the most common languages.

How to fix Windows 10 Broken Search Bar

If your Windows 10 Search Bar is broken you’re encountering an issue that is spreading to many Windows 10 users at the time of this writing.

This is NOT an official statement (I’m not responsible for any side effects caused by this) about how to fix but running this script inside a PowerShell session with administrator privileges and restarting the machine can solve your issue (it worked on my machine).

Get-AppXPackage -Name Microsoft.Windows.Cortana | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register "$($_.InstallLocation)\AppXManifest.xml"}   

Clean your Windows 10 like a pro

The space on your hard drive is running low and you don’t know what to do. What to clean? Is there an app that can clean my PC?

The vast majority of Windows users rely on third party apps like CCleaner to do this job. Make yourself a favor: don’t do this. Windows has a built-in tool that can safely clean-up your PC and it’s called Disk Cleanup 4.png.

With the latest Windows 10 April 2018 Update (1803) the Disk Cleanup has been improved and you can now access it from the Settings.

1. Check you’re currently running Windows 10 1803

Open Run by right-clicking the Start Menu or with the keyboard shortcut Win+R. Then type winver and press Enter.

 

1

2. Remove Files

Open Settings by writing settings from the Start menu or press Win+X and then Settings. Choose the Storage section on the left and then click on Free up space now.

2

This feature will show you simple but well explained user interface where you can understand what you’re going to purge when you’ll press Remove files.

3

Happy cleaning!

How to setup a Private Agent in Visual Studio Team Services

In the last post about VSTS (Visual Studio Team Services) we setup the foundations for a project.

In this we install a private agent to build and deploy our project.

VSTS provides hosted agents to build and deploy. When we use a hosted agent, Microsoft takes care of the maintenance and upgrades. So for many teams this is the simplest way. Every agent has a set of capabilities that indicate what it can do. Capabilities are name-value pairs that are either automatically discovered by the agent software, in which case they are called system capabilities, or those that you define, in which case they are called user capabilities.
If the hosted agents do not suit our needs we can setup our dedicated agent and that’s the topic of this post.

Continua a leggere How to setup a Private Agent in Visual Studio Team Services

Prism UWP for beginners: events

In this post we explore another major component of Prism: the EventAggregator.

The Prism library provides an event mechanism to communicate between loosely coupled components in the application. Using .NET Framework events is the most straightforward approach for communication between components if loose coupling is not a requirement. Events in the .NET Framework implement the Publish-Subscribe pattern, but to subscribe to an object, you need a direct reference to that object, which, in composite applications, typically resides in another module. This is a tightly coupled design.

The EventAggregator provides a mechanism to matain the application loosely-coupled. It provides a multicast publish/subscribe funcionality (there can me multiple publishers of the same event with multiple subscribers).

image

We can obtain a reference to the EventAggregator using the container, for example we can write this code in the OnInitializeAsyunc method of the App class that is our bootstrapper.

protected override Task OnInitializeAsync(IActivatedEventArgs args)
         {
Container.RegisterInstance<IEventAggregator>(new EventAggregator());
return base.OnInitializeAsync(args);
         }

Events

Before we start publishing and subscribing to events we need to declare them. Events are simple classes that inherit from PubSubEvent<T> in the Prism.Event namespace. T is the type of the payload of our message. We declare our simple event like this:


class SimpleEvent : PubSubEvent&lt;string&gt;
&nbsp;&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp; }

In this case we defined an event which payload is a string.

Publisher

Now let’s make an example of a viewmodel that publishes an event of that type.


class PublisherViewModel {

	public DelegateCommand SendMessage { get; private set; }

        private readonly IEventAggregator _eventAggregator;

	public PublisherViewModel(IEventAggregator eventAggregator)
        {
            if (eventAggregator == null)
            {
                throw new ArgumentNullException(nameof(eventAggregator));
            }

            _eventAggregator = eventAggregator;

            SendMessage = new DelegateCommand(() =&gt;
            {
                _eventAggregator.GetEvent&lt;SimpleEvent&gt;().Publish(DateTime.Now.ToString());
            });
        }
}

In the constrctor we specified a parameter to hold a reference to an instance of IEventAggregator. The container will do the heavylifting and inject the parameter every time we need an instance of PublisherViewModel. We defined a DelegateCommand that publishes a message using the EventAggregator: that message will have the currente date and time in string format.

Subscriber

Now we can define a subscriver view-model that listens to this type of events.

 

class SubscriberViewModel
{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; private readonly IEventAggregator _eventAggregator;	

	public SubscriberViewModel(IEventAggregator eventAggregator)
	{
		if (eventAggregator == null)
		{
			throw new ArgumentNullException(nameof(eventAggregator));
		}
		_eventAggregator = eventAggregator;

		_eventAggregator.GetEvent&lt;SimpleEvent&gt;().Subscribe((dateDesc) =&gt;
{
//Do something with datedesc.
});
	}
} 

With the

_eventAggregator.GetEvent<SimpleEvent>().Subscribe(...)

line of code we set our SubscriberViewModel class to listen to events of type SimpleEvent and we can specify what we would like to do when the class is notified.

And that’s it! Managing messages between components is very easy thanks to Prism.

TL;DR

In this post we learned how components can communicate in a Prism app in a decoupled fashion. The EventAggregator is the main actor of this funcionality and it acts as a post office to deliver messages from publishers to subscribers.

 

Prism UWP posts

Prism UWP for beginners: lifecycle

 

In this post we’ll explore the management of the lifecycle of a UWP app inside the OS.

Classic programs (Win32, for example) have two states: not running and running. When the typical desktop app is running it use all the RAM and CPU it needs, even when it is in the background. This is a problem in the world of universal apps because many types of device have very limited battery, CPU, and memory. So in this ecosystem we need to be green and free resources as soon as possible.

Windows comes to our help about power management but we need to know a few more things that we have to manage in our code. The OS can suspend our app when it wants in some cases and we need to give our useres the best user experience.

By default, apps that are not in the foreground are suspended which results in power savings and more resources available for the app currently in the foreground.

updated-lifecycle

In MSDN documentation we can find a detailed explanation of every status and the suggested action to take:

image

When a user leaves our application by switching to another one without terminating, he or she expects to find all the things in place when he/she’ll come back. The termination by the OS has to be transparent. So we need to save the state of the app and restore when the OS will restore the app.

Let’s do it!

Plain data

When we need to save simple data like boolean, strings, or numeric values we decorate with the RestorableState attribute in our viewmodel the properties that we need to save and restore. For example we have a TextBox binded to a string property:

  
        
        
  

And this is our code behind:


class RestoreStatePageViewModel : ViewModelBase
{
[RestorableState]
public string SimpleProperty
{
get { return _simpleProperty; }

set
{
_simpleProperty = value;

SetProperty(ref _simpleProperty, value);
}
}

public override void OnNavigatedTo(NavigatedToEventArgs e, Dictionary viewModelState)
{
base.OnNavigatedTo(e, viewModelState);
}

private ISessionStateService _sessionStateService;

private string _simpleProperty;
}

That’s it! Now: how to try? How can we force the OS to suspend our App? Visual Studio helps providing the Debug Location toolbar with the Lifecycle Events dropdown.

image

If this toolbar is not visible we find it by right-clicking in the white space of the main toolbar and select Debug Location.

image

Now we can launch our app and write something in the TextBox. Then we select Suspend and shutdown in the Lifecycle events dropdown. Visual studio will stop debugging and the app terminated. Now we hit F5 again to restart our app and we’ll find that the TextBox has the same value we writed before.

Complex data

Sometimes we have to save and restore complex or custom data. In this scenario we rely on the SessionStateService provided by Prism.

We register this service during the bootstrap in the App.xaml.cs code in the OnInitializeAsync method:

 protected override Task OnInitializeAsync(IActivatedEventArgs args)
        {

            Container.RegisterInstance(SessionStateService);

            return base.OnInitializeAsync(args);
        }

Let’s say we have a class that represents our Twitter Timeline. We need to decorate the class and the properties we want to save and restore with the DataContract and the DataMember attributes respectively.

This is because the Prism framework needs to serialize and deserialize our class and with UWP we don’t have the [Serializable] attribute we have in the standard .net environment.

using System.Collections.Generic;
using System.Runtime.Serialization;

namespace IC6.Buongiorno.Services.Twitter
{
    [DataContract]
    public class TwitterTimeline
    {
        [DataMember]
        public string Timeline { get; private set; }

        public TwitterTimeline(IEnumerable tweets)
        {
            Timeline = string.Join("\r\n\r\n\r\n", tweets);
        }
    }
}

We also need to configure Prism to serialize our custom class. We do this the App.xaml.cs code in the override of the OnRegisterKnownTypesForSerialization() method in which we have to register, in the SessionStateService, every custom class we’re going to use in the application, like in the following sample:

 protected override void OnRegisterKnownTypesForSerialization()
        {
            base.OnRegisterKnownTypesForSerialization();

            SessionStateService.RegisterKnownType(typeof(TwitterTimeline));
        }

Our class is now ready to be saved and restored.

In our viewmodel we need to save our timeline and we write:

public void SaveState()
{
if (_sessionStateService.SessionState.ContainsKey(SettingNames.Timeline.ToString()))
                {
                    _sessionStateService.SessionState.Remove(SettingNames.Timeline.ToString());
                }
                _sessionStateService.SessionState.Add(SettingNames.Timeline.ToString(), twitter);
}

To restore the state the best place is the OnNavigatedTo event.

 public override void OnNavigatedTo(NavigatedToEventArgs e, Dictionary viewModelState)
        {
            base.OnNavigatedTo(e, viewModelState);

                        if (_sessionStateService.SessionState.ContainsKey(SettingNames.Timeline.ToString()))
            {
                var twitter = _sessionStateService.SessionState[SettingNames.Timeline.ToString()] as TwitterTimeline;

                Timeline =  twitter.Timeline;
            }

                    }

We can test all this with the same procedure as before.

TL;DR

In this post we explored the concepts of lifecycle management and how to use Prism event to save and restore the state of our app to provide the best experience to our users.

If you want to learn more:

Prism UWP posts

Prism UWP for beginners: binding and commands

We setup the foundation of a Prism UWP app in the last post. Now we explore binding and commands.

Binding

Binding is the mechanism that connects the UI to the view-model properties to display data in the page and to receive input from the user (with two way binding). We can do binding by implementing the INotifyPropertyChanged interface in our view-model so the view is notified when a property in the view-model changes.

Prism helps us by providing classes that we can use to avoid reinventing the wheel and to start quickly with binding: VisualStateAwarePage and ViewModel.

We use VisualStateAwarePage instead of Page when we create a new view, for example:

<mvvm:SessionStateAwarePage
x:Class="IC6.Buongiorno.Views.MainPage"
mvvm:ViewModelLocator.AutoWireViewModel="True"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:IC6.Buongiorno.Views"
xmlns:mvvm="using:Prism.Windows.Mvvm" >
    <mvvm:SessionStateAwarePage.Background>
        <ImageBrush Stretch="Fill"
            ImageSource="ms-appx:///Assets/wallpaper.jpg" />
    </mvvm:SessionStateAwarePage.Background>

    <Grid Margin="50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="10*" />
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Column="0"  Margin="10">
            <Button Command="{Binding Update}" Foreground="White">Update
            </Button>
            <TextBlock Text="{Binding Timeline}" Foreground="White" TextWrapping="Wrap" />
        </StackPanel>
        <StackPanel Grid.Column="1"                     HorizontalAlignment="Right">
            <TextBlock Text="{Binding WeatherDescription}" FontSize="32" Foreground="White" />
            <TextBlock Text="{Binding WeatherTemperature}" FontSize="50" Foreground="White" />
        </StackPanel>
    </Grid>
</mvvm:SessionStateAwarePage>

We must replace the Page type in the code-behind, too.

using Prism.Windows.Mvvm;

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

namespace IC6.Buongiorno.Views
{
    ///
<summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>

    public sealed partial class MainPage : SessionStateAwarePage
    {
        public MainPage()
        {
            InitializeComponent();

        }

    }
}

We create a MainPageViewModel class in the ViewModels directory and inherit from ViewModel. ViewModel is class of Prism that provides several helpers. In this example we create 3 properties in the ViewModel: Timeline, WeatherDescription, WeatherTemperature. Timeline will expose our Twitter timeline to the UI, WeatherDescrption will expose a brief textual description of the current weather (like “sunny”, “heavy rain”) and WeatherTemperature will expose the current temperature. This is the full MainPageViewModel.

using IC6.Buongiorno.Services.Twitter;
using IC6.Buongiorno.Services.Weather;
using Prism.Commands;
using Prism.Windows.Mvvm;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace IC6.Buongiorno.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        ///<summary>
        /// Gets the command to Update Timeline and weather data.
        /// </summary>

        public DelegateCommand Update { get; private set; }

        ///<summary>
        /// Gets or sets the Twitter timeline.
        /// </summary>

        public string Timeline
        {
            get { return _timeline; }
            set { SetProperty(ref _timeline, value); }
        }

        ///<summary>
        /// Gets or sets the current weather description.
        /// </summary>

        public string WeatherDescription
        {
            get { return _weatherDescription; }
            set { SetProperty(ref _weatherDescription, value); }
        }

        ///<summary>
        /// Gets or sets the current weather temperature.s
        /// </summary>

        public string WeatherTemperature
        {
            get { return _weatherTemperature; }
            set { SetProperty(ref _weatherTemperature, value); }
        }

        ///<summary>
        /// Constructor with services.
        /// </summary>

        /// <param name="twitterService">The <see cref="ITwitterService"/> to access Twitter data.</param>
        /// <param name="weatherService">The <see cref="IWeatherService"/> to get current weather information.</param>
        public MainPageViewModel(ITwitterService twitterService, IWeatherService weatherService)
        {
            if (twitterService is null)
            {
                throw new ArgumentNullException(nameof(twitterService));
            }

            if (weatherService is null)
            {
                throw new ArgumentNullException(nameof(weatherService));
            }

            _twitterService = twitterService;

            _weatherService = weatherService;

            Update = new DelegateCommand(async () =>
            {
                Timeline = (await _twitterService.GetTimelineAsync()).Timeline;

                var weatherInfo = (await _weatherService.GetWeather());

                WeatherDescription = weatherInfo.Description;

                WeatherTemperature = $"{weatherInfo.Temperature} °C";
            });
        }

        private string _weatherTemperature;

        private string _weatherDescription;

        private readonly ITwitterService _twitterService;

        private readonly IWeatherService _weatherService;

        private string _timeline;
    }
}

In the code above the SetProperty method is provided by the ViewModel base class and with this we leverage the INotifyPropertyChanged interface to inform the UI that a property has updated its value.

In the constructor we have two dependencies: ITwitterService and IWeatherService. They are handled by the Unity container that we configured in the previuos post. When we’ll ask Unity to resolve an instance of MainPage it will automatically resolve ITwitterService and IWeatherService avoing to us all the heavylifting. This way our code remain clean and easier to read and mantain.

The view-model is automatically linked to the view by Prism beacuse in the page we declared mvvm:ViewModelLocator.AutoWireViewModel="True".

Commands

Commands are the mechanism to support the user interaction without using event handlers. In the Prism framework we find the DelegateCommand that implements the ICommand interface required by XAML.

The ICommand interface exposes a method called CanExecute that is very powerful. With a boolean condition we check if the command is enabled or not. In the MainPageViewModel class we declare an ICommand property and in the constructor we assign a DelegateCommand. In this example we’re getting the timeline from the Twitter service and the weather data from the weather service and assingn to the properties.

In the XAML code above we bind the button Update to this command with the standard binding syntax in the Command property of the Button.

TL;DR

In this post we explored the concepts of bindings and the commands to handle user input and display data retrieved with our services.

Cattura.PNG

Stay tuned for other Prims UWP posts.

Prism UWP posts

Prism UWP for beginners: setup

I want to learn Prism because it may be helpful in some future projects. To better understand how it works I need a target. I’d like to create a simple UWP app that displays my Twitter timeline and the local weather based on the GPS. Prism will help me to adopt the MVVM architeture and IoC/DI concepts. The MVVM and IoC/DI topics are out of the scope of this post.

Setup

I started a new UWP project with Visual Studio 2017 and then imported the Prism.Windows and Prims.Unity NuGet packages. Prism.Windows is the “core” library for the UWP techology and Prism.Unity is the IoC/DI container.

Screenshot_1.png

Conversion to Prism

I converted the Universal app to a Prism Universal app by configuring the bootstrapper. The bootstrapper is a required procedure by the Prism framework to properly initialize all the infrastructure. In vanilla UWP, the bootstrapper is the App class. I edited the App class so that it doesn’t inherit from the native Application class but from a Prism class called PrismUnityApplication.

This is the full App.xaml file.

<prismUnity:PrismUnityApplication x:Class="IC6.Buongiorno.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prismUnity="using:Prism.Unity.Windows"
RequestedTheme="Light">

</prismUnity:PrismUnityApplication>

 

This is the full App.xaml.cs file.

using System.Threading.Tasks;
using Microsoft.Practices.Unity;
using Prism.Unity.Windows;
using Prism.Windows.AppModel;
using Windows.ApplicationModel.Activation;
using Windows.ApplicationModel.Resources;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using IC6.Buongiorno.Services.Twitter;
using IC6.Buongiorno.Services.Weather;

namespace IC6.Buongiorno
{
/// <summary>
/// Provides application-specific behavior to supplement the default Application class.
/// </summary>
public sealed partial class App : PrismUnityApplication
{

public App()
{
InitializeComponent();
}

protected override UIElement CreateShell(Frame rootFrame)
{
var shell = Container.Resolve<Shell>();
shell.SetContentFrame(rootFrame);
return shell;
}

/// <summary>
/// Logic of app initialization.
/// This is the best place to register the services in Unity container.
/// </summary>
/// <param name="args"></param>
/// <returns></returns>
protected override Task OnInitializeAsync(IActivatedEventArgs args)
{
System.Diagnostics.Debug.WriteLine(">>>>>>>>>>>>> OnInitializeAsync called.");

Container.RegisterInstance<ITwitterService>(new TwitterService());

Container.RegisterInstance<IWeatherService>(new WeatherService());

Container.RegisterInstance<IResourceLoader>(new ResourceLoaderAdapter(new ResourceLoader()));

Container.RegisterInstance(SessionStateService);

Container.RegisterInstance(NavigationService);

return base.OnInitializeAsync(args);
}

protected override Task OnLaunchApplicationAsync(LaunchActivatedEventArgs args)
{
NavigationService.Navigate(PageNames.Main.ToString(), null);

return Task.FromResult(true); //This is a little trick because this method returns a Task.
}
}
}

 

I created a Paged called Shell. The Prism definition of shell is:

The main window of an application where the primary UI content is contained.

Shell is called in the CreateShell method triggered by the Unity framework to create the main window of the application.

The OnInitializeAsync method is the place to initialize the Unity container. Here I registered my services. With registering I mean telling Unity that, for example, every time I need an ITwitterService it has to give me an instance of TwitterService. I also register the NavigationService and SessionStateService that I’ll explain in other posts.

I created the standard MVVM folders because Prism is convention based for some of its features.

image

I deleted the default MainPage.xaml file and created a new one in the Views directory as shown in the image above.

Inside OnLaunchApplicationAsync I called the NavigationService.Navigate method to navigate to the MainPage which accepts as first parameter the name of the page (the name of the View without the Page suffix): by passing as parameter the value “Main” Prism searches, in the Views folder, a page called MainPage.xaml. The second parameter is null because I didn’t have additional parameters to pass. The last statement is a little trick because this method returns a Task and I created a fake one with a constant true value.

TL;DR

I made my first steps with Prism in a UWP application: I created the shell and setup the bootstrapper.

Prism UWP posts

 

 

How to get started with Prism in 3 easy steps

In this post we explore the basics of Prism to create a mantainable and scalable WPF application.

IC368873.png

How to get started

  1. Download the nuget Prims.Xyz package for your Platform: in this example for WPF (Prims.WPF and Prism.Unity) with Visual Studio;
  2. Create a bootstrapper;
  3. Edit App.xaml and App.xaml.cs files;
  4. (Bonus point) Reorganize our project.

With this procedure we are setting the foundation for our Prism-enabled app.

1. Download

With the Manage Nuget tool in Visual Studio download the following packages: Prims.WPF and Prims.Unity. Visual Studio will take care of the process and at the end we’ll have these packages installed:

s1.png

2. Create a Bootstrapper

In our project we add a new Class. The name is not important but it has to derive from UnityBootstrapper.

using Microsoft.Practices.Unity;
using Prism.Unity;
using System.Windows;

namespace IC6.Prism
{
 class Bootstrapper : UnityBootstrapper
 {
   protected override DependencyObject CreateShell()
   {
    return Container.Resolve<MainWindow>();
   }

 protected override void InitializeShell()
   {
    Application.Current.MainWindow.Show();
   }
 }
}

3. Edit App.xaml and App.xaml.cs files.

In our project we edit the App.xaml to remove the StartupUri attribute since now that part of the initialization is handled by Prism with Unity.

<Application x:Class="IC6.Prism.App"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:IC6.Prism">
 </Application.Resources>

 </Application.Resources>
</Application>

In the code behind file (App.xaml.cs) we override the OnStartup method to implement our custom startup logic that leverages the Bootstrapper.

using System.Windows;

namespace IC6.Prism
{
 public partial class App : Application
 {
   protected override void OnStartup(StartupEventArgs e)
   {
    base.OnStartup(e);

    var bootstrapper = new Bootstrapper();
    bootstrapper.Run();
   }
 }
}

4. Bonus point

Since we’re using Prism to get the most from MVVM pattern (and other features) we are going also to better organize our project. We delete the MainWindow.xaml and its code behind files from the solution, then we create a new folder called Views and finally create a new Window called MainWindow inside. This is the result.

s2.png

Back to school time

We’ve started this post with just code and not so much theory about what we are doing.

Why do we need a bootstrapper? A Prism application requires registration and configuration during the application startup process. This is known as bootstrapping the application. The Prism bootstrapping process includes creating and configuring a module catalog, creating a dependency injection container such as Unity, configuring default region adapter for UI composition, creating and initializing the shell view, and initializing modules.

In a traditional Windows Presentation Foundation (WPF) application, a startup Uniform Resource Identifier (URI) is specified in the App.xaml file that launches the main window.
In an application created with the Prism Library, it is the bootstrapper’s responsibility to create the shell or the main window. This is because the shell relies on services, such as the Region Manager, that need to be registered before the shell can be displayed.

Dependency Injection

Applications built with the Prism Library rely on dependency injection provided by a container. The library provides assemblies that work with Unity and it allows us to use other dependency injection containers. Part of the bootstrapping process is to configure. this container and register types with the container.

TL;DR

In this post we introduced Prims and made baby steps. With this approach we’re setting the architecure of our app to be scalable and mantainable. In the next posts we’ll go forward and learn other Prism foundamentals.

Readings

Dependency Injection: https://en.wikipedia.org/wiki/Dependency_injection

Prism GitHub homepage: https://github.com/PrismLibrary/Prism

Integrate Azure Cognitive Services in UWP app

Azure Cognitive Services are an amazing tool than enables developers to augment users’ experience using the power of machine-based intelligence. The API set is powerful and provides lots of features that are organized in categories: vision, speech, language, knowledge, search, and labs.image

In this post we learn how to leverage the Emotion API to get our user mood and set a background of our app accordingly.

Get API key

To get starded we need to get an API key to be able to access the Cognitive Services. So, let’s go to this address (https://azure.microsoft.com/en-us/try/cognitive-services/?api=emotion-api) and click on the Create button next to Emotion API.

image

After that the website will ask to accept the trial term of services and we accept:

image

After the login we get access to our keys:

image

Now we’re done with Azure web site and we can start coding.

Coding

We fire up Visual Studio and create a new UWP project.

image

To achieve our goal (get our user mood and change the background) where’re going to develop a simple UI where the user press a button, we take a picture of him/her, send that picture to Azure, and based on the result load a background image.

Before we write code we need to setup our application capabilities in the manifest and download some NuGet packages. We double click on the Package.appxmanifest file in Solution Explorer and Visual Studio, go to the Capabilities tab and check the webcam and microphone boxes.

image

Then we download the Microsoft.ProjectOxford.Emotion NuGet package that contains some helper classes to deal with the Azure Cognitive Services. In the Solution Explorer we right click and select Manage NuGet Packages. In the search box we type “Microsoft.ProjectOxford.Emotion”. We download the package.

image

With the following XAML we draw a simple UI with a Button to trigger the camera.

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

    <Grid Name="myGrid">
        <StackPanel>
            <Button Click="Button_Click">Take a camera picture</Button>

        </StackPanel>
    </Grid>
</Page>

At the handler of the click event we write


  private async void Button_Click(object sender, RoutedEventArgs e)
        {
            try
            {

                using (var stream = new InMemoryRandomAccessStream())
                {
                    await _mediaCapture.CapturePhotoToStreamAsync(ImageEncodingProperties.CreateJpeg(), stream);

                    stream.Seek(0);

                    var emotion = await MakeRequest(stream.AsStream());

                    if (emotion == null)
                    {
                        await new MessageDialog("Emotions non detected.").ShowAsync();

                        return;
                    }

                    var imgBrush = new ImageBrush();

                    if (emotion.Scores.Sadness &amp;amp;amp;gt; emotion.Scores.a)
                    {
                        imgBrush.ImageSource = new BitmapImage(new Uri(@"ms-appx://IC6.EmotionAPI/Assets/sad.jpg"));
                    }
                    else
                    {
                        imgBrush.ImageSource = new BitmapImage(new Uri(@"ms-appx://IC6.EmotionAPI/Assets/happy.jpg"));
                    }

                    myGrid.Background = imgBrush;

                }

            }
            catch (Exception ex)
            {
                await new MessageDialog(ex.Message).ShowAsync();
            }
        }

In this method we’re leverging the power of the MediaCapture class that provides functionality for capturing photos, audio, and videos from a capture device, such as a webcam. The InitializeAsync method, which initializes the MediaCapture object, must be called before we can start previewing or capturing from the device.

In our exercise we’re going to put the MediaCapture initialization in the OnNavigatedTo method:

        protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            if (_mediaCapture == null)
            {
                await InitializeCameraAsync();
            }

        }

InitializeAsync is a helper method we write to search for a camera and try to initialize it if we find one.

  private async Task InitializeCameraAsync()
        {

            // Attempt to get the front camera if one is available, but use any camera device if not
            var cameraDevice = await FindCameraDeviceByPanelAsync(Windows.Devices.Enumeration.Panel.Front);

            if (cameraDevice == null)
            {
                Debug.WriteLine("No camera device found!");
                return;
            }

            // Create MediaCapture and its settings
            _mediaCapture = new MediaCapture();

            var settings = new MediaCaptureInitializationSettings { VideoDeviceId = cameraDevice.Id };

            // Initialize MediaCapture
            try
            {
                await _mediaCapture.InitializeAsync(settings);
            }
            catch (UnauthorizedAccessException)
            {
                Debug.WriteLine("The app was denied access to the camera");
            }
        }

        ///
<summary>
        /// Attempts to find and return a device mounted on the panel specified, and on failure to find one it will return the first device listed
        /// </summary>

        /// <param name="desiredPanel">The desired panel on which the returned device should be mounted, if available</param>
        /// <returns></returns>
        private static async Task<DeviceInformation> FindCameraDeviceByPanelAsync(Windows.Devices.Enumeration.Panel desiredPanel)
        {
            // Get available devices for capturing pictures
            var allVideoDevices = await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture);

            // Get the desired camera by panel
            DeviceInformation desiredDevice = allVideoDevices.FirstOrDefault(x => x.EnclosureLocation != null && x.EnclosureLocation.Panel == desiredPanel);

            // If there is no device mounted on the desired panel, return the first device found
            return desiredDevice ?? allVideoDevices.FirstOrDefault();
        }

Let’s focus on the MakeRequest method we called in the click event handler because here we make use of the Project Oxford library to detect emotions.

private async Task<Emotion> MakeRequest(Stream stream)
        {
            var apiClient = new Microsoft.ProjectOxford.Emotion.EmotionServiceClient("f1b67ad2720944018881b6f8761dff9a");
            var results = await apiClient.RecognizeAsync(stream);

            if (results == null) return null;

            return results.FirstOrDefault();
        }

We need to create an instance of the Microsoft.ProjectOxford.Emotion.EmotionServiceClient class. In the constructor we pass the key obtained from the Azure portal at the beginning of this post. Then, we call the RecognizeAsync method. Here we’re using the overload with the Stream parameter because we have our picture saved in memory. There is also an overload that accepts a URL string. With this call the Azure platform is now doing its magic and soon it’ll deliver the result. The RecognizeAsync returns an array of Emotion. An Emotion is made by a Rectagle reference and a Score reference. The Rectagle instance tells us the coorindates of the face detected while the Score instance tells us the confidence of every mood that Azure can detect: sadness, neutral, happiness, surprise, fear, and anger. Based on this data we can make “ifs” to do some funny things like changing the background of our main window.

TL; DR

In this post we learned how to detect the current mood of our user. We achieved that by using our front camera to take a picture and then make a call to Azure Emotion API to guess if our user is happy or not. We had to set the app manifest to inform the OS that we need to use the Webcam to ask the user for the privacy settings.

If you want to learn more about the MediaCapture class, visit MSDN (https://docs.microsoft.com/en-us/uwp/api/windows.media.capture.mediacapture) and the Azure Cognitive Services (https://azure.microsoft.com/en-us/services/cognitive-services/) website. The source code of the app developed in this post is available on my GitHub (https://github.com/phenixita/IC6.EmotionAPI).

Social

If you have questions you can use the comment section below or you can find me on Twitter! If you liked this post, share!