PersonPicture Control In UWP

Hi my name is Noh this tutor I'm going to explain how to implement that

person picture control there is a new control in Windows fall creator update

so this control will support the SDK version 162-9 I'm using the

Vistow Studio 2020 to develop this sample application as you see this image

this is a person picture control previously we are using that image to crop to

make circle of that image like that so here after no need to do like this

we can directly use a person picture control to make our image to like this

let's see how to implement this feature now I'm going to visual studio so here

I'm just highlighting some of the features only not to going in depth this control now just start that application

here you can see application started here you can see application started on that

and one more I make so my idea so my idea is make

so that it's side by side so that it's easy for understandable

for understandable so here we go

here we go hide just close it this also I close it I make a little bit here

just make like this So we made this Just a simple example

So no need to run application again again. So now I am going to implement this control

Person Pitcher control. So that first feature, first being here is an initial

So suppose if I mention INJ. So it will display here. The next one, if I want to display that instant of initial

If I want to display that profile pictures, so I make personal picture, then profile picture is there

Just you make that image. Here you can see that image it will display

One second I make the margin. So it's visible clearly

1020.0. Okay, fine

Okay, fine. Here you can see that profile picture always take the high priority

So it will display that profile picture. If the profile picture is not available, then the initial picture

take the next priority on that so suppose if I'm not mentioning the in seal and

profile picture what will happen so if you not mention anything is just

display only the default image on the screen so default image suppose if I want to make the I don want to give that in shame profile picture instead of the dynamic I give a display name here

So it utterly take that first letter of the name So if we give it any space in between then it will take that first and second

First word first letter second word first letter okay so here you can see this is one of the features

So the next feature this is the image I want to display on top of that here I

need to for example if I need to display the rank rank like one or two something

like that so how to display here the badge is available that image control if I

could person to say feature profile picture So here I give that batch number for example and one

Here you get that rank of that number if you want to display the rank you can give

like this so it will on top of it will display. So the next feature is suppose instead of that rank I want to

to make some smile symbol or any other picture on top of here so for that also

it's possible now I'm just going here and one more image profile picture

the margin 1020 zero yes

So image is displayed. Now I need to display on top of some smile symbol

That is come under Padglev. Now here you can see this one supports as MDL font behavior

Here you can choose which image you want to display For example if I selected the smile image so E170 so here can make a smile image E170

Here you can see the smile image is coming. So this is another feature

Hey I want to display on top of one more image on this, like this style, like this size

So how to do that? So yeah, we'll see. That also. Now profile feature and smooth

Next margin. it's not visible

we'll make so it's not coming so I'll make like this

so now it's easy for you now here if you go go no badge image source here you can select for example select an image here you

can see some small circles coming but image is not displaying that it's a

problem with the live editor issue then you have to stop then read the application

It's building deployed started

Here you can see that image. So on top of one more image you had display

I hope you can understand how to use the person picture control

See later. See you later. Thanks