Création d’applications UWP avec Microsoft Graph
Ce didacticiel vous apprend à créer une application de plateforme Windows universelle (UWP) qui utilise l’API Microsoft Graph pour récupérer les informations de calendrier d’un utilisateur.
Conseil
Si vous préférez simplement télécharger le didacticiel terminé, vous pouvez télécharger ou cloner le GitHub complet.
Conditions préalables
Avant de commencer ce didacticiel, vous devez avoir installé Visual Studio sur un ordinateur exécutant Windows 10 le mode développeur est allumé. Si vous n’avez pas Visual Studio, consultez le lien précédent pour obtenir les options de téléchargement.
Vous devez également avoir un compte Microsoft personnel avec une boîte aux lettres sur Outlook.com, ou un compte scolaire ou scolaire Microsoft. Si vous n’avez pas de compte Microsoft, deux options s’offrent à vous pour obtenir un compte gratuit :
- Vous pouvez vous inscrire à un nouveau compte Microsoft personnel.
- Vous pouvez vous inscrire au programme Microsoft 365 développeur pour obtenir un abonnement Microsoft 365 gratuit.
Notes
Ce didacticiel a été écrit Visual Studio version 2019 16.8.3. Les étapes de ce guide peuvent fonctionner avec d’autres versions, mais elles n’ont pas été testées.
Commentaires
N’hésitez pas à nous faire part de vos commentaires sur ce didacticiel dans GitHub référentiel.
Créer une application pour la plateforme Windows universelle
Dans cette section, vous allez créer une application UWP.
Ouvrez Visual Studio et sélectionnez Créer un projet. Choisissez l’option Application vide (Windows universelle) qui utilise C#, puis sélectionnez Suivant.
Dans la boîte de dialogue Configurer votre nouveau projet, entrez le Project de
GraphTutorial
nom, puis sélectionnez Créer.Important
Veillez à entrer exactement le même nom pour le Visual Studio Project spécifié dans ces instructions d’atelier. Le nom du projet Visual Studio fait alors partie de l’espace de noms dans le code. Le code figurant dans ces instructions dépend de l’espace de noms qui correspond au nom de projet Visual Studio spécifié dans celles-ci. Si vous utilisez un autre nom de projet, celui-ci n’est pas compilé sauf si vous ajustez tous les espaces de noms pour qu’ils correspondent au nom de projet Visual Studio saisi à la création du projet.
Sélectionnez OK. Dans la boîte de dialogue Nouvelle plateforme Windows universelle Project, assurez-vous que la version minimale est définie sur ou version ultérieure
Windows 10, Version 1809 (10.0; Build 17763)
et sélectionnez OK.
Installation de packages NuGet
Avant de passer à la suite, installez des packages NuGet supplémentaires que vous utiliserez ultérieurement.
- Microsoft. Shared Computer Toolkit. Uwp.Ui.Controls.DataGrid pour afficher les informations renvoyées par Microsoft Graph.
- Microsoft. Shared Computer Toolkit. Graph. Contrôles pour gérer la récupération des jetons de connexion et d’accès.
Sélectionnez Outils > Gestionnaire de package NuGet > Console Gestionnaire de package. Dans le menu Console du Gestionnaire de package, saisissez les commandes suivantes.
Install-Package Microsoft.Toolkit.Uwp.Ui.Controls.DataGrid -IncludePrerelease Install-Package Microsoft.Toolkit.Graph.Controls -IncludePrerelease
Concevoir l’application
Dans cette section, vous allez créer l’interface utilisateur de l’application.
Commencez par ajouter une variable au niveau de l’application pour suivre l’état d’authentification. Dans l’Explorateur de solutions, développez App.xaml et ouvrez App.xaml.cs. Ajoutez la propriété ci-dessous à la classe
App
.public bool IsAuthenticated { get; set; }
Définissez la mise en page de la page principale. Ouvrez
MainPage.xaml
et remplacez tout son contenu par ce qui suit.<Page x:Class="GraphTutorial.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:GraphTutorial" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:providers="using:Microsoft.Toolkit.Graph.Providers" xmlns:wgt="using:Microsoft.Toolkit.Graph.Controls" mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Interactivity:Interaction.Behaviors> <providers:InteractiveProviderBehavior x:Name="MsalProvider" /> </Interactivity:Interaction.Behaviors> <Grid> <NavigationView x:Name="NavView" IsSettingsVisible="False" ItemInvoked="NavView_ItemInvoked"> <NavigationView.Header> <wgt:LoginButton x:Name="Login" VerticalAlignment="Top" HorizontalAlignment="Right" /> </NavigationView.Header> <NavigationView.MenuItems> <NavigationViewItem Content="Home" x:Name="Home" Tag="home"> <NavigationViewItem.Icon> <FontIcon Glyph=""/> </NavigationViewItem.Icon> </NavigationViewItem> <NavigationViewItem Content="Calendar" x:Name="Calendar" Tag="calendar"> <NavigationViewItem.Icon> <FontIcon Glyph=""/> </NavigationViewItem.Icon> </NavigationViewItem> <NavigationViewItem Content="New event" x:Name="NewEvent" Tag="newevent"> <NavigationViewItem.Icon> <FontIcon Glyph=""/> </NavigationViewItem.Icon> </NavigationViewItem> </NavigationView.MenuItems> <StackPanel> <controls:InAppNotification x:Name="Notification" ShowDismissButton="true" /> <Frame x:Name="RootFrame" Margin="24, 0" /> </StackPanel> </NavigationView> </Grid> </Page>
Cela définit un affichage navigationview de base avec les liens de navigation d’accueil, de calendrier et de nouvel événement pour agir en tant que vue principale de l’application. Il ajoute également un contrôle LoginButton dans l’en-tête de l’affichage. Ce contrôle permet à l’utilisateur de se connecter et de se sortir. Le contrôle n’est pas encore entièrement activé, vous le configurerez dans un exercice ultérieur.
Cliquez avec le bouton droit sur le projet de didacticiel graphique dans l’Explorateur de solutions et sélectionnez Ajouter > nouvel élément.... Choose Blank Page, enter in the
HomePage.xaml
Name field, and select Add. Remplacez<Grid>
l’élément existant dans le fichier par ce qui suit.<Grid> <StackPanel> <TextBlock FontSize="44" FontWeight="Bold" Margin="0, 12">Microsoft Graph UWP Tutorial</TextBlock> <TextBlock x:Name="HomePageMessage">Please sign in to continue.</TextBlock> </StackPanel> </Grid>
Développez MainPage.xaml dans l’Explorateur de solutions et ouvrez.
MainPage.xaml.cs
Ajoutez la fonction suivante à laMainPage
classe pour gérer l’état d’authentification.private void SetAuthState(bool isAuthenticated) { (Application.Current as App).IsAuthenticated = isAuthenticated; // Toggle controls that require auth Calendar.IsEnabled = isAuthenticated; NewEvent.IsEnabled = isAuthenticated; }
Ajoutez le code suivant au
MainPage()
constructeur après lathis.InitializeComponent();
ligne.// Initialize auth state to false SetAuthState(false); // Configure MSAL provider // TEMPORARY MsalProvider.ClientId = "11111111-1111-1111-1111-111111111111"; // Navigate to HomePage.xaml RootFrame.Navigate(typeof(HomePage));
Lorsque l’application démarre pour la première fois, elle initialise l’état d’authentification et
false
navigue vers la page d’accueil.Ajoutez le handler d’événements suivant pour charger la page demandée lorsque l’utilisateur sélectionne un élément dans l’affichage de navigation.
private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args) { var invokedItem = args.InvokedItem as string; switch (invokedItem.ToLower()) { case "new event": throw new NotImplementedException(); break; case "calendar": throw new NotImplementedException(); break; case "home": default: RootFrame.Navigate(typeof(HomePage)); break; } }
Enregistrez toutes vos modifications, puis appuyez sur F5 ou sélectionnez Déboguer > démarrer le débogage dans Visual Studio.
Notes
Veillez à sélectionner la configuration appropriée pour votre ordinateur (ARM, x64, x86).
Inscrire l’application sur le portail
Dans cet exercice, vous allez créer une application native Azure AD à l’aide du centre d Azure Active Directory’administration.
Ouvrez un navigateur, accédez au Centre d’administration Azure Active Directory et connectez-vous à l’aide d’un compte personnel (ou compte Microsoft) ou d’un compte professionnel ou scolaire.
Sélectionnez Azure Active Directory dans le volet de navigation gauche, puis sélectionnez Inscriptions d’applications sous Gérer.
Sélectionnez Nouvelle inscription. Sur la page Inscrire une application, définissez les valeurs comme suit.
- Définissez le Nom sur
UWP Graph Tutorial
. - Définissez les Types de comptes pris en charge sur Comptes dans un annuaire organisationnel et comptes personnels Microsoft.
- Sous URI de redirection, modifiez la liste de listes en client public (mobile & bureau) et définissez la valeur sur
https://login.microsoftonline.com/common/oauth2/nativeclient
.
- Définissez le Nom sur
Sélectionner Inscription. Dans la page didacticiel Graph UWP, copiez la valeur de l’ID d’application (client) et enregistrez-la. Vous en aurez besoin à l’étape suivante.
Ajouter une authentification Azure AD
Dans cet exercice, vous allez étendre l’application de l’exercice précédent pour prendre en charge l’authentification avec Azure AD. Cette étape est nécessaire pour obtenir le jeton d’accès OAuth nécessaire pour appeler l’Graph Microsoft. Dans cette étape, vous allez intégrer le contrôle LoginButton des contrôles Windows Graph à l’application.
Cliquez avec le bouton droit sur le projet GraphTutorial dans l’Explorateur de solutions et sélectionnez Ajouter > nouvel élément.... Choose Resources File (.resw), name the file
OAuth.resw
and select Add. Lorsque le nouveau fichier s’ouvre Visual Studio, créez deux ressources comme suit.- Name:
AppId
, Value: the app ID you generated in Application Registration Portal - Name:
Scopes
, Value:User.Read User.ReadBasic.All People.Read MailboxSettings.Read Calendars.ReadWrite
Important
Si vous utilisez un contrôle source tel que Git, il est temps d’exclure le fichier du contrôle source afin d’éviter toute fuite accidentelle de votre
OAuth.resw
ID d’application.- Name:
Configurer le contrôle LoginButton
Ouvrez
MainPage.xaml.cs
et ajoutez l’instructionusing
suivante en haut du fichier.using Microsoft.Toolkit.Graph.Providers;
Remplacez le constructeur existant par ce qui suit.
public MainPage() { this.InitializeComponent(); // Load OAuth settings var oauthSettings = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView("OAuth"); var appId = oauthSettings.GetString("AppId"); var scopes = oauthSettings.GetString("Scopes"); if (string.IsNullOrEmpty(appId) || string.IsNullOrEmpty(scopes)) { Notification.Show("Could not load OAuth Settings from resource file."); } else { // Configure MSAL provider MsalProvider.ClientId = appId; MsalProvider.Scopes = new ScopeSet(scopes.Split(' ')); // Handle auth state change ProviderManager.Instance.ProviderUpdated += ProviderUpdated; // Navigate to HomePage.xaml RootFrame.Navigate(typeof(HomePage)); } }
Ce code charge les paramètres à partir de et initialise le fournisseur
OAuth.resw
MSAL avec ces valeurs.Maintenant, ajoutez un handler d’événement pour
ProviderUpdated
l’événement sur leProviderManager
. Ajoutez la fonction suivante à la classeMainPage
.private void ProviderUpdated(object sender, ProviderUpdatedEventArgs e) { var globalProvider = ProviderManager.Instance.GlobalProvider; SetAuthState(globalProvider != null && globalProvider.State == ProviderState.SignedIn); RootFrame.Navigate(typeof(HomePage)); }
Cet événement se déclenche lorsque le fournisseur change ou lorsque l’état du fournisseur change.
Dans l’Explorateur de solutions, développez HomePage.xaml et
HomePage.xaml.cs
ouvrez. Remplacez le constructeur existant par ce qui suit.public HomePage() { this.InitializeComponent(); if ((App.Current as App).IsAuthenticated) { HomePageMessage.Text = "Welcome! Please use the menu to the left to select a view."; } }
Redémarrez l’application et cliquez sur le contrôle de signature en haut de l’application. Une fois que vous vous êtes inscrit, l’interface utilisateur doit changer pour indiquer que vous vous êtes correctement inscrit.
Notes
Le
ButtonLogin
contrôle implémente la logique de stockage et d’actualisation du jeton d’accès pour vous. Les jetons sont stockés dans un stockage sécurisé et actualisez-les si nécessaire.
Obtenir un affichage Calendrier
Dans cet exercice, vous allez incorporer le Graph Microsoft dans l’application. Pour cette application, vous allez utiliser la bibliothèque cliente Microsoft Graph pour .NET pour effectuer des appels à Microsoft Graph.
Récupérer les événements de calendrier à partir d’Outlook
Ajoutez une nouvelle page pour l’affichage Calendrier. Cliquez avec le bouton droit sur le projet GraphTutorial dans l’Explorateur de solutions et sélectionnez Ajouter > nouvel élément.... Choose Blank Page, enter in the
CalendarPage.xaml
Name field, and select Add.Ouvrez
CalendarPage.xaml
et ajoutez la ligne suivante à l’intérieur de l’élément<Grid>
existant.<TextBlock x:Name="Events" TextWrapping="Wrap"/>
Ouvrez
CalendarPage.xaml.cs
et ajoutez lesusing
instructions suivantes en haut du fichier.using Microsoft.Graph; using Microsoft.Toolkit.Graph.Providers; using Microsoft.Toolkit.Uwp.UI.Controls; using Newtonsoft.Json;
Ajoutez les fonctions suivantes à la
CalendarPage
classe.private void ShowNotification(string message) { // Get the main page that contains the InAppNotification var mainPage = (Window.Current.Content as Frame).Content as MainPage; // Get the notification control var notification = mainPage.FindName("Notification") as InAppNotification; notification.Show(message); } protected override async void OnNavigatedTo(NavigationEventArgs e) { // Get the Graph client from the provider var graphClient = ProviderManager.Instance.GlobalProvider.Graph; try { // Get the user's mailbox settings to determine // their time zone var user = await graphClient.Me.Request() .Select(u => new { u.MailboxSettings }) .GetAsync(); var startOfWeek = GetUtcStartOfWeekInTimeZone(DateTime.Today, user.MailboxSettings.TimeZone); var endOfWeek = startOfWeek.AddDays(7); var queryOptions = new List<QueryOption> { new QueryOption("startDateTime", startOfWeek.ToString("o")), new QueryOption("endDateTime", endOfWeek.ToString("o")) }; // Get the events var events = await graphClient.Me.CalendarView.Request(queryOptions) .Header("Prefer", $"outlook.timezone=\"{user.MailboxSettings.TimeZone}\"") .Select(ev => new { ev.Subject, ev.Organizer, ev.Start, ev.End }) .OrderBy("start/dateTime") .Top(50) .GetAsync(); // TEMPORARY: Show the results as JSON Events.Text = JsonConvert.SerializeObject(events.CurrentPage); } catch (ServiceException ex) { ShowNotification($"Exception getting events: {ex.Message}"); } base.OnNavigatedTo(e); } private static DateTime GetUtcStartOfWeekInTimeZone(DateTime today, string timeZoneId) { TimeZoneInfo userTimeZone = TimeZoneInfo.FindSystemTimeZoneById(timeZoneId); // Assumes Sunday as first day of week int diff = System.DayOfWeek.Sunday - today.DayOfWeek; // create date as unspecified kind var unspecifiedStart = DateTime.SpecifyKind(today.AddDays(diff), DateTimeKind.Unspecified); // convert to UTC return TimeZoneInfo.ConvertTimeToUtc(unspecifiedStart, userTimeZone); }
Prenez en compte le code
OnNavigatedTo
en cours.- L’URL qui sera appelée est
/me/calendarview
.- Les
startDateTime
endDateTime
paramètres et les paramètres définissent le début et la fin de l’affichage Calendrier. Prefer: outlook.timezone
L’en-tête entraîne le retour des événements dansstart
le fuseau horaire deend
l’utilisateur.- La fonction limite les champs renvoyés pour chaque événement à ceux que
Select
l’application utilisera réellement. - La
OrderBy
fonction trie les résultats par date et heure de début. - La
Top
fonction demande au maximum 50 événements.
- Les
- L’URL qui sera appelée est
Modifiez
NavView_ItemInvoked
la méthode dans le fichier pour remplacerMainPage.xaml.cs
l’instructionswitch
existante par ce qui suit.switch (invokedItem.ToLower()) { case "new event": throw new NotImplementedException(); break; case "calendar": RootFrame.Navigate(typeof(CalendarPage)); break; case "home": default: RootFrame.Navigate(typeof(HomePage)); break; }
Vous pouvez maintenant exécuter l’application, vous connectez et cliquez sur l’élément de navigation Calendrier dans le menu de gauche. Vous devriez voir un vidage JSON des événements sur le calendrier de l’utilisateur.
Afficher les résultats
Remplacez l’intégralité du
CalendarPage.xaml
contenu par ce qui suit.<Page x:Class="GraphTutorial.CalendarPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:GraphTutorial" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid> <controls:DataGrid x:Name="EventList" Grid.Row="1" AutoGenerateColumns="False"> <controls:DataGrid.Columns> <controls:DataGridTextColumn Header="Organizer" Width="SizeToCells" Binding="{Binding Organizer.EmailAddress.Name}" FontSize="20" /> <controls:DataGridTextColumn Header="Subject" Width="SizeToCells" Binding="{Binding Subject}" FontSize="20" /> <controls:DataGridTextColumn Header="Start" Width="SizeToCells" Binding="{Binding Start.DateTime}" FontSize="20" /> <controls:DataGridTextColumn Header="End" Width="SizeToCells" Binding="{Binding End.DateTime}" FontSize="20" /> </controls:DataGrid.Columns> </controls:DataGrid> </Grid> </Page>
Ouvrez
CalendarPage.xaml.cs
et remplacezEvents.Text = JsonConvert.SerializeObject(events.CurrentPage);
la ligne par ce qui suit.EventList.ItemsSource = events.CurrentPage.ToList();
Si vous exécutez l’application maintenant et sélectionnez le calendrier, vous devez obtenir la liste des événements dans une grille de données. Toutefois, les valeurs Début et Fin sont affichées de manière non conviviale. Vous pouvez contrôler la façon dont ces valeurs sont affichées à l’aide d’un convertisseur de valeurs.
Cliquez avec le bouton droit sur le projet GraphTutorial dans l’Explorateur de solutions et sélectionnez Ajouter > classe.... Nommez la classe
GraphDateTimeTimeZoneConverter.cs
et sélectionnez Ajouter. Remplacez tout le contenu du fichier par ce qui suit.using Microsoft.Graph; using Microsoft.Graph.Extensions; using System; namespace GraphTutorial { class GraphDateTimeTimeZoneConverter : Windows.UI.Xaml.Data.IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { DateTimeTimeZone date = value as DateTimeTimeZone; if (date != null) { return date.ToDateTime().ToString(); } return string.Empty; } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } } }
Ce code prend la structure dateTimeTimeZone renvoyée par Microsoft Graph et l’Graph dans un
DateTimeOffset
objet. Il convertit ensuite la valeur en fuseau horaire de l’utilisateur et renvoie la valeur mise en forme.Ouvrez
CalendarPage.xaml
et ajoutez ce qui suit avant<Grid>
l’élément.<Page.Resources> <local:GraphDateTimeTimeZoneConverter x:Key="DateTimeTimeZoneValueConverter" /> </Page.Resources>
Remplacez les deux
DataGridTextColumn
derniers éléments par ce qui suit.<controls:DataGridTextColumn Header="Start" Width="SizeToCells" Binding="{Binding Start, Converter={StaticResource DateTimeTimeZoneValueConverter}}" FontSize="20" /> <controls:DataGridTextColumn Header="End" Width="SizeToCells" Binding="{Binding End, Converter={StaticResource DateTimeTimeZoneValueConverter}}" FontSize="20" />
Exécutez l’application, connectez-vous et cliquez sur l’élément de navigation Calendrier. Vous devez voir la liste des événements avec les valeurs Début et Fin formatées.
Créer un événement
Dans cette section, vous allez ajouter la possibilité de créer des événements sur le calendrier de l’utilisateur.
Ajoutez une nouvelle page pour le nouvel affichage d’événement. Cliquez avec le bouton droit sur le projet GraphTutorial dans l’Explorateur de solutions et sélectionnez Ajouter > nouvel élément.... Choose Blank Page, enter in the
NewEventPage.xaml
Name field, and select Add.Ouvrez NewEventPage.xaml et remplacez son contenu par ce qui suit.
<Page xmlns:wgt="using:Microsoft.Toolkit.Graph.Controls" x:Class="GraphTutorial.NewEventPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:GraphTutorial" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Margin="10" Spacing="10"> <TextBox Header="Subject" Text="{Binding Subject, Mode=TwoWay}" /> <TextBlock Text="Attendees"/> <wgt:PeoplePicker Name="AttendeePicker" /> <Grid ColumnSpacing="10" RowSpacing="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="auto" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <DatePicker Header="Start Date" Date="{Binding StartDate, Mode=TwoWay}" /> <TimePicker Header="Start Time" Time="{Binding StartTime, Mode=TwoWay}" Grid.Column="2" /> <DatePicker Header="End Date" Date="{Binding EndDate, Mode=TwoWay}" Grid.Row="2" /> <TimePicker Header="End Time" Time="{Binding EndTime, Mode=TwoWay}" Grid.Row="2" Grid.Column="2" /> </Grid> <TextBox Header="Body" Text="{Binding Body, Mode=TwoWay}" AcceptsReturn="True" TextWrapping="Wrap" Height="200" ScrollViewer.VerticalScrollBarVisibility="Auto" /> <Button Content="Create" Click="CreateEvent" IsEnabled="{Binding IsValid}"/> <ProgressRing Name="CreateProgress" Visibility="Collapsed" IsActive="False" /> </StackPanel> </Page>
Ouvrez NewEventPage.xaml.cs et ajoutez les
using
instructions suivantes en haut du fichier.using System.ComponentModel; using Microsoft.Graph; using Microsoft.Graph.Extensions; using Microsoft.Toolkit.Graph.Providers; using Microsoft.Toolkit.Uwp.UI.Controls; using System.Runtime.CompilerServices;
Ajoutez l’interface INotifyPropertyChange à la classe NewEventPage. Remplacez la déclaration de classe existante par ce qui suit.
public sealed partial class NewEventPage : Page, INotifyPropertyChanged { public NewEventPage() { this.InitializeComponent(); DataContext = this; } }
Ajoutez les propriétés suivantes à la classe NewEventPage.
private TimeZoneInfo _userTimeZone = null; // Value of the Subject text box private string _subject = ""; public string Subject { get { return _subject; } set { _subject = value; OnPropertyChanged(); } } // Value of the Start date picker private DateTimeOffset _startDate = DateTimeOffset.Now; public DateTimeOffset StartDate { get { return _startDate; } set { _startDate = value; OnPropertyChanged(); } } // Value of the Start time picker private TimeSpan _startTime = TimeSpan.Zero; public TimeSpan StartTime { get { return _startTime; } set { _startTime = value; OnPropertyChanged(); } } // Value of the End date picker private DateTimeOffset _endDate = DateTimeOffset.Now; public DateTimeOffset EndDate { get { return _endDate; } set { _endDate = value; OnPropertyChanged(); } } // Value of the End time picker private TimeSpan _endTime = TimeSpan.Zero; public TimeSpan EndTime { get { return _endTime; } set { _endTime = value; OnPropertyChanged(); } } // Value of the Body text box private string _body = ""; public string Body { get { return _body; } set { _body = value; OnPropertyChanged(); } } // Combine the date from date picker with time from time picker private DateTimeOffset CombineDateAndTime(DateTimeOffset date, TimeSpan time) { // Use the year, month, and day from the supplied DateTimeOffset // to create a new DateTime at midnight var dt = new DateTime(date.Year, date.Month, date.Day); // Add the TimeSpan, and use the user's timezone offset return new DateTimeOffset(dt + time, _userTimeZone.BaseUtcOffset); } // Combined value of Start date and time pickers public DateTimeOffset Start { get { return CombineDateAndTime(StartDate, StartTime); } } // Combined value of End date and time pickers public DateTimeOffset End { get { return CombineDateAndTime(EndDate, EndTime); } } public bool IsValid { get { // Subject is required, Start must be before // End return !string.IsNullOrWhiteSpace(Subject) && DateTimeOffset.Compare(Start, End) < 0; } }
Ajoutez le code suivant pour obtenir le fuseau horaire de l’utilisateur auprès de Microsoft Graph le chargement de la page.
protected override async void OnNavigatedTo(NavigationEventArgs e) { // Get the Graph client from the provider var graphClient = ProviderManager.Instance.GlobalProvider.Graph; try { // Get the user's mailbox settings to determine // their time zone var user = await graphClient.Me.Request() .Select(u => new { u.MailboxSettings }) .GetAsync(); _userTimeZone = TimeZoneInfo.FindSystemTimeZoneById(user.MailboxSettings.TimeZone); } catch (ServiceException graphException) { ShowNotification($"Exception getting user's mailbox settings from Graph, defaulting to local time zone: {graphException.Message}"); _userTimeZone = TimeZoneInfo.Local; } catch (Exception ex) { ShowNotification($"Exception loading time zone from system: {ex.Message}"); } } private void ShowNotification(string message) { // Get the main page that contains the InAppNotification var mainPage = (Window.Current.Content as Frame).Content as MainPage; // Get the notification control var notification = mainPage.FindName("Notification") as InAppNotification; notification.Show(message); }
Ajoutez le code suivant pour créer l’événement.
private async void CreateEvent(object sender, RoutedEventArgs e) { CreateProgress.IsActive = true; CreateProgress.Visibility = Visibility.Visible; // Get the Graph client from the provider var graphClient = ProviderManager.Instance.GlobalProvider.Graph; // Initialize a new Event object with the required fields var newEvent = new Event { Subject = Subject, Start = Start.ToDateTimeTimeZone(_userTimeZone), End = End.ToDateTimeTimeZone(_userTimeZone) }; // If there's a body, add it if (!string.IsNullOrEmpty(Body)) { newEvent.Body = new ItemBody { Content = Body, ContentType = BodyType.Text }; } // Add any attendees var peopleList = AttendeePicker.Items.ToList(); var attendeeList = new List<Attendee>(); foreach (object entry in peopleList) { // People Picker can contain Microsoft.Graph.Person objects // or text entries (for email addresses not found in the user's people list) if (entry is Person) { var person = entry as Person; attendeeList.Add(new Attendee { Type = AttendeeType.Required, EmailAddress = new EmailAddress { Address = person.EmailAddresses.First().Address } }); } else if (entry is ITokenStringContainer) { var container = entry as ITokenStringContainer; // Treat any unrecognized text as a list of email addresses var emails = container.Text .Split(new[] { ';', ',', ' ' }, StringSplitOptions.RemoveEmptyEntries); foreach (var email in emails) { try { // Validate the email address var addr = new System.Net.Mail.MailAddress(email); if (addr.Address == email) { attendeeList.Add(new Attendee { Type = AttendeeType.Required, EmailAddress = new EmailAddress { Address = email } }); } } catch { /* Invalid, skip */ } } } } if (attendeeList.Count > 0) { newEvent.Attendees = attendeeList; } try { await graphClient.Me.Events.Request().AddAsync(newEvent); } catch (ServiceException graphException) { ShowNotification($"Exception creating new event: ${graphException.Message}"); } CreateProgress.IsActive = false; CreateProgress.Visibility = Visibility.Collapsed; ShowNotification("Event created"); }
Modifiez
NavView_ItemInvoked
la méthode dans le fichier MainPage.xaml.cs pour remplacer l’instructionswitch
existante par ce qui suit.switch (invokedItem.ToLower()) { case "new event": RootFrame.Navigate(typeof(NewEventPage)); break; case "calendar": RootFrame.Navigate(typeof(CalendarPage)); break; case "home": default: RootFrame.Navigate(typeof(HomePage)); break; }
Enregistrez vos modifications et exécutez l’application. Connectez-vous, sélectionnez l’élément de menu Nouvel événement, remplissez le formulaire et sélectionnez Créer pour ajouter un événement au calendrier de l’utilisateur.
Félicitations !
Vous avez terminé le didacticiel sur les Graph Microsoft UWP. Maintenant que vous disposez d’une application de travail qui appelle Microsoft Graph, vous pouvez expérimenter et ajouter de nouvelles fonctionnalités. Consultez la vue d’ensemble de Microsoft Graph pour voir toutes les données accessibles avec Microsoft Graph.
Commentaires
N’hésitez pas à nous faire part de vos commentaires sur ce didacticiel dans GitHub référentiel.
Vous avez un problème avec cette section ? Si c'est le cas, faites-nous part de vos commentaires pour que nous puissions l'améliorer.