PersonPicture Control In UWP

The person picture control displays the avatar image for a person, if image is available; if not, it displays the person's initials. You can use the control to display a person's contact info, or you can manually provide contact information, such as a display name and profile picture.

Reading this article, you can learn how to use PersonPicture Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

1. Windows 10 (Recommended)
2. Microsoft Visual Studio 2017

 

Step 1

Open Visual studio 2017 -> Start -> New Project-> Select Windows Universal (under Visual C#)-> Blank App(Universal Windows) -> Give the suitable name for your app (UWPPersonPic)->OK.

 

After choosing the target and minimum platform version for your Windows Universal Application will support and the project creates App.xaml and MainPage.xaml.

 

Step 2

Add two images in Assets Folder for person picture control,

 

Step 3

Add the following controls in design window for Person Picture control view,

Add the TextBlock Controls and change the Name and Text Property, Add the Person Picture Controls and change the Name, ProfilePicture, DisplayName Properties

 

 

Note

The following code will automatically be generated in XAML code view, while we are done in the design view.

<Page x:Class="UWPPersonPic.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPPersonPic" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="94,93,0,0" Text="Person Picture control in UWP" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" FontSize="22" />
        <PersonPicture x:Name="perpictest" HorizontalAlignment="Left" ProfilePicture="Assets\Bill.jpg" DisplayName="Bill Gates" Margin="131,177,0,0" VerticalAlignment="Top" />
        <TextBlock x:Name="tblcontitle" HorizontalAlignment="Left" Margin="269,218,0,0" Text="Bill Gates" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" FontSize="16" />
        <PersonPicture x:Name="perpictest1" HorizontalAlignment="Left" ProfilePicture="Assets\Kalam.jpg" DisplayName="Abdhul Kalam" Margin="100,350,0,0" VerticalAlignment="Top" Height="112" Width="131" RenderTransformOrigin="0.5,0.5" />
        <TextBlock x:Name="tblcontitle1" HorizontalAlignment="Left" Margin="269,350,0,0" Text="Abdhul Kalam" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" FontSize="16" /> </Grid>
</Page>

Step 4

Deploy of your App in Local Machine, and the output of the UWPPersonPic is,

 

Summary

Now you have successfully tested PersonPicture control in XAML and UWP environment using Visual Studio 2017.