XAML-Tipp: UWP: Das neue „PersonPicture“-Steuerelement

Kolumne: XAML Expertise

XAML-Tipp: UWP – Das neue „PersonPicture“-Steuerelement

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „UWP: Das neue PersonPicture-Steuerelement“.

Das Windows 10 Fall Creators Update hat ein neues Steuerelement mit sich gebracht: PersonPicture (Listing 1). Wie der Name es bereits andeutet: Dieses Control dient dem Anzeigen von Personenbildern oder deren Initialen und wird per Default rund dargestellt, so wie man es bereits vom Twitter- oder Facebook-UI-Design gewohnt ist. Die Idee dahinter ist, dieses moderne UIDesign ebenfalls für Windows-10-Apps einzuführen.

Die Personennamen werden in das DisplayName-Property geschrieben. Wenn kein ProfilePicture oder kein Initials-Wert hinterlegt wurde, werden aus den Display-Name-Personennamen automatisch die Initialen entnommen und angezeigt. Zusätzlich ist es möglich, Badges mit Text, Zahl, Glyph oder Bild anzeigen zu lassen (Abb. 1).

<StackPanel VerticalAlignment="Center">

  <PersonPicture DisplayName="Gregor Biswanger"
    ProfilePicture="Assets/Gregor_Biswanger.png" />
  <PersonPicture ProfilePicture="Assets/Christine_Biswanger.jpg" />
  <PersonPicture DisplayName="Raphael Biswanger" BadgeGlyph="" />
  <PersonPicture Initials="ABC" BadgeText="New" />
  <PersonPicture Initials="CD" BadgeNumber="100" />
  <PersonPicture Initials="EF" BadgeImageSource="Assets/Gregor_Biswanger.png" />

</StackPanel>