From 5d1e8264cbab585974e909cdd4abaf9ebfe73d10 Mon Sep 17 00:00:00 2001
From: michael-hawker <24302614+michael-hawker@users.noreply.github.com>
Date: Tue, 14 Sep 2021 15:16:33 -0700
Subject: [PATCH] Fixes #149 - Update Sample to use External
 ObservableCollection

We re-write the sample to use an external collection as a developer would in their app. This then properly lets the ItemsControl display just the tokenized items. (Though there's still an issue with how TokenizingTextBox behaves we should resolve.)
---
 SampleTest/Samples/PeoplePickerSample.xaml    | 35 ++++++++++---------
 SampleTest/Samples/PeoplePickerSample.xaml.cs |  4 +++
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/SampleTest/Samples/PeoplePickerSample.xaml b/SampleTest/Samples/PeoplePickerSample.xaml
index 863c9f8..fb86f1b 100644
--- a/SampleTest/Samples/PeoplePickerSample.xaml
+++ b/SampleTest/Samples/PeoplePickerSample.xaml
@@ -1,29 +1,32 @@
-<Page
-    x:Class="SampleTest.Samples.PeoplePickerSample"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:SampleTest.Samples"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
-    xmlns:controls="using:CommunityToolkit.Graph.Uwp.Controls"
-    xmlns:graph="using:Microsoft.Graph"
-    mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+<Page x:Class="SampleTest.Samples.PeoplePickerSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.Graph.Uwp.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:graph="using:Microsoft.Graph"
+      xmlns:local="using:SampleTest.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+      mc:Ignorable="d">
 
     <Page.Resources>
         <graph:Person x:Key="GraphPerson" />
     </Page.Resources>
-    
+
     <Grid>
         <StackPanel>
-            <TextBlock Margin="0,0,0,16" TextWrapping="WrapWholeWords">
+            <TextBlock Margin="0,0,0,16"
+                       TextWrapping="WrapWholeWords">
                 The `PeoplePicker` lets a logged in user easily search for familiar people they interact with or contacts. Great for emails or messages.
             </TextBlock>
-            <controls:PeoplePicker x:Name="PeopleChooser" />
-            <TextBlock Margin="0,8,0,0" FontWeight="Bold">
+            <controls:PeoplePicker x:Name="PeopleChooser"
+                                   ItemsSource="{x:Bind MyPeople}" />
+            <TextBlock Margin="0,8,0,0"
+                       FontWeight="Bold">
                 Picked People:
             </TextBlock>
-            <ItemsControl Margin="8,0,0,0" ItemsSource="{x:Bind PeopleChooser.ItemsSource}">
+            <ItemsControl Margin="8,0,0,0"
+                          ItemsSource="{x:Bind MyPeople}">
                 <ItemsControl.ItemTemplate>
                     <DataTemplate x:DataType="graph:Person">
                         <TextBlock Text="{x:Bind DisplayName}" />
diff --git a/SampleTest/Samples/PeoplePickerSample.xaml.cs b/SampleTest/Samples/PeoplePickerSample.xaml.cs
index bab7250..dade64d 100644
--- a/SampleTest/Samples/PeoplePickerSample.xaml.cs
+++ b/SampleTest/Samples/PeoplePickerSample.xaml.cs
@@ -2,12 +2,16 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using System.Collections.ObjectModel;
+using Microsoft.Graph;
 using Windows.UI.Xaml.Controls;
 
 namespace SampleTest.Samples
 {
     public sealed partial class PeoplePickerSample : Page
     {
+        ObservableCollection<Person> MyPeople { get; set; } = new();
+
         public PeoplePickerSample()
         {
             InitializeComponent();