When I click the Create Contact button, it will create a contact called Joe Bloggs, he is a good looking guy :) and pin Joe to the task bar.

When I click the "Shoulder Tap" Button it plays an animation above Joe's head.

When I click on the contact, you'll see the My People app show in the tab and display a different UI that is suited to it's space. When I drag content to the contact, it shares that content.

Now you know what's possible, let's get into the code!

When you launch the My People app from the task bar, it loads a seperate instace of your application. I could use the Visual State Manager to change the look on the MainPage. In this case, I decided to create a seperate XAML file. When lauching the app from the task bar, we need to override the OnActivated method in the App.xaml.cs

Setup Protocol Activation for MyPeople experiences

override protected void OnActivated(IActivatedEventArgs e) { if (e.Kind == ActivationKind.ContactPanel) { var args = e as ContactPanelActivatedEventArgs; // Change Contact Panel Header Color. args.ContactPanel.HeaderColor = Colors.LightSlateGray; // Create a Frame to act as the navigation context and navigate to the first page var rootFrame = new Frame(); // Place the frame in the current Window Window.Current.Content = rootFrame; // Navigate to the page that shows the Contact UI. rootFrame.Navigate(typeof(MyPeopleCanvas), args); // Ensure the current window is active Window.Current.Activate(); } }

In this code you can see that when the activation is from the contact panel. I setup the root frame to navigate to the MyPeopleCanvas XAML. If you have done protocol activation before, this code should look familiar. Optionally, you can change the header color to keep in line with your app branding, so I've set mine to Light Slate Gray.

Now that I have the page and routing setup, it's time to integrate our experience with My People.

Integrate with My People

In this demo, I am going to create a contact. This is optional if you already have a contact. I want to show you how to create a contact though as some application developers may have bots. This is a really nice way to show your bot some love and increase their user engagement.

First step is to add the extension for contact panel to the app. Open the Package.appxmanifest in the code editor and add these lines of XML. Note you'll need to also add a new namespace if you don't already have uap4 specified.