Erstellen von UWP-Apps mit Microsoft Graph

Artikel
Developer (Anfänger)
36 Minuten bis zum Abschluss

In diesem Lernprogramm erfahren Sie, wie Sie eine UWP-App (Universelle Windows-Plattform) erstellen, die die Microsoft Graph-API zum Abrufen von Kalenderinformationen für einen Benutzer verwendet.

Tipp

Wenn Sie es vorziehen, nur das abgeschlossene Lernprogramm herunterzuladen, können Sie das GitHub Repository herunterladen oder klonen.

Voraussetzungen

Bevor Sie mit diesem Lernprogramm beginnen, sollten Sie Visual Studio auf einem Computer installiert haben, auf dem Windows 10 mit aktiviertem Entwicklermodus ausgeführt wird. Wenn Sie nicht über Visual Studio verfügen, besuchen Sie den vorherigen Link, um Downloadoptionen zu erhalten.

Sie sollten auch über ein persönliches Microsoft-Konto mit einem Postfach auf Outlook.com oder ein Microsoft-Geschäfts-, Schul- oder Unikonto verfügen. Wenn Sie kein Microsoft-Konto haben, gibt es einige Optionen, um ein kostenloses Konto zu erhalten:

Sie können sich für ein neues persönliches Microsoft-Konto registrieren.
Sie können sich für das Microsoft 365 Entwicklerprogramm registrieren, um ein kostenloses Microsoft 365 Abonnement zu erhalten.

Hinweis

Dieses Lernprogramm wurde mit Visual Studio 2019, Version 16.8.3, geschrieben. Die Schritte in diesem Handbuch funktionieren möglicherweise mit anderen Versionen, die jedoch nicht getestet wurden.

Feedback

Bitte geben Sie Feedback zu diesem Lernprogramm im GitHub Repository.

Erstellen einer Apps für die universelle Windows-Plattform

35 Minuten verbleibend

In diesem Abschnitt erstellen Sie eine neue UWP-App.

Öffnen Sie Visual Studio, und wählen Sie Neues Projekt erstellen. Wählen Sie die Option "Leere App (Universelle Windows)" aus, die C# verwendet, und wählen Sie dann "Weiter" aus.
Geben Sie im Dialogfeld "Neues Projekt konfigurieren" GraphTutorial das Feld Project Namen ein, und wählen Sie "Erstellen" aus.

Wichtig

Stellen Sie sicher, dass Sie genau den gleichen Namen für die Visual Studio Project eingeben, die in diesen Übungsanweisungen angegeben ist. Der Visual Studio-Projektname wird Teil des Namespace im Code. Der Code in diesen Anweisungen hängt vom Namespace ab, der mit dem in diesen Anweisungen angegebenen Visual Studio-Projektnamen übereinstimmt. Wenn Sie einen anderen Projektnamen verwenden, wird der Code nicht kompiliert, es sei denn, Sie passen alle Namespaces so an, dass Sie dem von Ihnen beim Erstellen des Projekts eingegebenen Visual Studio-Projektnamen entsprechen.
Wählen Sie OK aus. Stellen Sie im Dialogfeld "Neue universelle Windows Plattform Project" sicher, dass die Mindestversion auf oder höher festgelegt Windows 10, Version 1809 (10.0; Build 17763) ist, und wählen Sie OK aus.

Installieren der NuGet-Pakete

Bevor Sie fortfahren, installieren Sie einige zusätzliche NuGet-Pakete, die Sie später verwenden werden.

Microsoft.Toolkit.Uwp.Ui.Controls.DataGrid zum Anzeigen der von Microsoft Graph zurückgegebenen Informationen.
Microsoft.Toolkit. Graph. Steuerelemente zum Verarbeiten des Abrufens von Anmelde- und Zugriffstoken.

Wählen Sie Extras > NuGet-Paket-Manager > Paket-Manager-Konsole aus. Geben Sie in der Paket-Manager-Konsole die folgenden Befehle ein:

Install-Package Microsoft.Toolkit.Uwp.Ui.Controls.DataGrid -IncludePrerelease
Install-Package Microsoft.Toolkit.Graph.Controls -IncludePrerelease

Entwerfen der App

In diesem Abschnitt erstellen Sie die Benutzeroberfläche für die App.

Fügen Sie zunächst eine Variable auf Anwendungsebene hinzu, um den Authentifizierungsstatus nachzuverfolgen. Erweitern Sie im Projektmappen-Explorer "App.xaml", und öffnen Sie "App.xaml.cs". Fügen Sie der App-Klasse die folgende Eigenschaft hinzu.
```
public bool IsAuthenticated { get; set; }
```

Definieren Sie das Layout für die Hauptseite. Öffnen MainPage.xaml Und ersetzen Sie den gesamten Inhalt durch Folgendes.

<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>

Dies definiert eine grundlegende NavigationView mit Navigationslinks für Start, Kalender und neue Ereignisse, die als Hauptansicht der App fungieren. Außerdem wird ein LoginButton-Steuerelement in der Kopfzeile der Ansicht hinzugefügt. Mit diesem Steuerelement kann sich der Benutzer anmelden und abmelden. Das Steuerelement ist noch nicht vollständig aktiviert, Sie konfigurieren es in einer späteren Übung.

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Graph-Lernprogrammprojekt, und wählen Sie > Neues Element hinzufügen... aus. Wählen Sie "Leere Seite", geben Sie HomePage.xaml das Feld "Name" ein, und wählen Sie "Hinzufügen" aus. Ersetzen Sie das vorhandene <Grid> Element in der Datei durch Folgendes.
```
<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>
```

Erweitern Sie "MainPage.xaml" im Projektmappen-Explorer, und öffnen Sie MainPage.xaml.cs . Fügen Sie der Klasse die folgende Funktion hinzu, um den MainPage Authentifizierungsstatus zu verwalten.

private void SetAuthState(bool isAuthenticated)
{
    (Application.Current as App).IsAuthenticated = isAuthenticated;

    // Toggle controls that require auth
    Calendar.IsEnabled = isAuthenticated;
    NewEvent.IsEnabled = isAuthenticated;
}

Fügen Sie dem MainPage() Konstruktor nach der Zeile den folgenden Code this.InitializeComponent(); hinzu.

// 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));

Wenn die App zum ersten Mal gestartet wird, initialisiert sie den Authentifizierungsstatus false und navigiert zur Startseite.

Fügen Sie den folgenden Ereignishandler hinzu, um die angeforderte Seite zu laden, wenn der Benutzer ein Element aus der Navigationsansicht auswählt.

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;
    }
}

Speichern Sie alle Änderungen, drücken Sie F5, oder wählen Sie Debuggen aus, > Debuggen in Visual Studio starten.

Hinweis

Stellen Sie sicher, dass Sie die entsprechende Konfiguration für Ihren Computer (ARM, x64, x86) auswählen.

Hinzufügen der Azure AD-Authentifizierung

25 Minuten verbleibend

In dieser Übung erweitern Sie die Anwendung aus der vorherigen Übung, um die Authentifizierung mit Azure AD zu unterstützen. Dies ist erforderlich, um das erforderliche OAuth-Zugriffstoken abzurufen, um die Microsoft Graph aufzurufen. In diesem Schritt integrieren Sie das LoginButton-Steuerelement aus den Windows Graph-Steuerelementen in die Anwendung.

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das GraphTutorial-Projekt, und wählen Sie > Neues Element hinzufügen... aus. Wählen Sie Ressourcendatei (.resw) aus, benennen Sie die OAuth.resw Datei, und wählen Sie Hinzufügen aus. Wenn die neue Datei in Visual Studio geöffnet wird, erstellen Sie zwei Ressourcen wie folgt.
- Name: AppId , Wert: die App-ID, die Sie im Anwendungsregistrierungsportal generiert haben
- Name: Scopes , Value:User.Read User.ReadBasic.All People.Read MailboxSettings.Read Calendars.ReadWrite
Wichtig

Wenn Sie die Quellcodeverwaltung wie Git verwenden, wäre jetzt ein guter Zeitpunkt, um die OAuth.resw Datei aus der Quellcodeverwaltung auszuschließen, um zu vermeiden, dass versehentlich Ihre App-ID offengelegt wird.

Konfigurieren des LoginButton-Steuerelements

Öffnen MainPage.xaml.cs Sie die folgende Anweisung, und fügen Sie sie am Anfang der Datei using hinzu.
```
using Microsoft.Toolkit.Graph.Providers;
```

Ersetzen Sie den vorhandenen Konstruktor durch Folgendes.

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));
    }
}

Dieser Code lädt die Einstellungen von OAuth.resw und initialisiert den MSAL-Anbieter mit diesen Werten.

Fügen Sie nun einen Ereignishandler für das ProviderUpdated Ereignis auf der ProviderManager hinzu. Fügen Sie die folgende Funktion zur MainPage-Klasse hinzu:

private void ProviderUpdated(object sender, ProviderUpdatedEventArgs e)
{
    var globalProvider = ProviderManager.Instance.GlobalProvider;
    SetAuthState(globalProvider != null && globalProvider.State == ProviderState.SignedIn);
    RootFrame.Navigate(typeof(HomePage));
}

Dieses Ereignis wird ausgelöst, wenn sich der Anbieter ändert oder wenn sich der Anbieterstatus ändert.

Erweitern Sie im Projektmappen-Explorer "HomePage.xaml", und öffnen Sie HomePage.xaml.cs . Ersetzen Sie den vorhandenen Konstruktor durch Folgendes.

public HomePage()
{
    this.InitializeComponent();

    if ((App.Current as App).IsAuthenticated)
    {
        HomePageMessage.Text = "Welcome! Please use the menu to the left to select a view.";
    }
}

Starten Sie die App neu, und klicken Sie oben in der App auf das Anmeldesteuerelement. Nachdem Sie sich angemeldet haben, sollte die Benutzeroberfläche geändert werden, um anzugeben, dass Sie sich erfolgreich angemeldet haben.

Hinweis

Das ButtonLogin Steuerelement implementiert die Logik zum Speichern und Aktualisieren des Zugriffstokens für Sie. Die Token werden im sicheren Speicher gespeichert und bei Bedarf aktualisiert.

Abrufen einer Kalenderansicht

10 Minuten verbleibend

In dieser Übung integrieren Sie die Microsoft Graph in die Anwendung. Für diese Anwendung verwenden Sie die Microsoft Graph-Clientbibliothek für .NET, um Aufrufe an Microsoft Graph zu tätigen.

Abrufen von Kalenderereignissen von Outlook

Fügen Sie eine neue Seite für die Kalenderansicht hinzu. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das GraphTutorial-Projekt, und wählen Sie > Neues Element hinzufügen... aus. Wählen Sie "Leere Seite", geben Sie CalendarPage.xaml das Feld "Name" ein, und wählen Sie "Hinzufügen" aus.
Öffnen CalendarPage.xaml Sie die folgende Zeile, und fügen Sie sie innerhalb des vorhandenen Elements <Grid> hinzu.
```
<TextBlock x:Name="Events" TextWrapping="Wrap"/>
```

Öffnen CalendarPage.xaml.cs Sie die folgenden Anweisungen, und fügen Sie sie am Anfang der Datei using hinzu.

using Microsoft.Graph;
using Microsoft.Toolkit.Graph.Providers;
using Microsoft.Toolkit.Uwp.UI.Controls;
using Newtonsoft.Json;

Fügen Sie der Klasse die folgenden Funktionen CalendarPage hinzu.

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);
}

Berücksichtigen Sie dabei den Code, der OnNavigatedTo gerade ausgeführt wird.

Die URL, die aufgerufen wird, lautet /me/calendarview.
- Die startDateTime Parameter definieren den Anfang und das Ende der endDateTime Kalenderansicht.
- Der Prefer: outlook.timezone Header start bewirkt, dass die Ereignisse und die Ereignisse in der Zeitzone des Benutzers zurückgegeben end werden.
- Die Select Funktion beschränkt die für jedes Ereignis zurückgegebenen Felder auf die Felder, die die App tatsächlich verwendet.
- Die OrderBy Funktion sortiert die Ergebnisse nach Startdatum und -uhrzeit.
- Die Top Funktion fordert höchstens 50 Ereignisse an.

Ändern Sie die NavView_ItemInvoked Methode in der MainPage.xaml.cs Datei, um die vorhandene Anweisung durch Folgendes zu switch ersetzen.

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;
}

Sie können jetzt die App ausführen, sich anmelden und im linken Menü auf das Navigationselement "Kalender" klicken. Es sollte ein JSON-Dump der Ereignisse im Kalender des Benutzers angezeigt werden.

Anzeigen der Ergebnisse

Ersetzen Sie den gesamten Inhalt durch CalendarPage.xaml Folgendes.

<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>

Öffnen CalendarPage.xaml.cs Sie die Zeile, und ersetzen Sie sie Events.Text = JsonConvert.SerializeObject(events.CurrentPage); durch Folgendes.
```
EventList.ItemsSource = events.CurrentPage.ToList();
```
Wenn Sie die App jetzt ausführen und den Kalender auswählen, sollten Sie eine Liste der Ereignisse in einem Datenraster abrufen. Die Start- und Endwerte werden jedoch auf nicht benutzerfreundliche Weise angezeigt. Mithilfe eines Wertkonverterskönnen Sie steuern, wie diese Werte angezeigt werden.

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das GraphTutorial-Projekt, und wählen Sie > Klasse hinzufügen... aus. Benennen Sie die GraphDateTimeTimeZoneConverter.cs Klasse, und wählen Sie "Hinzufügen" aus. Ersetzen Sie den gesamten Inhalt der Datei durch Folgendes.

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();
        }
    }
}

Dieser Code verwendet die von Microsoft Graph zurückgegebene dateTimeTimeZone-Struktur und analysiert sie in einem DateTimeOffset Objekt. Anschließend wird der Wert in die Zeitzone des Benutzers konvertiert und der formatierte Wert zurückgegeben.

Öffnen CalendarPage.xaml Sie vor dem Element Folgendes, und fügen Sie es <Grid> hinzu.

<Page.Resources>
    <local:GraphDateTimeTimeZoneConverter x:Key="DateTimeTimeZoneValueConverter" />
</Page.Resources>

Ersetzen Sie die letzten beiden DataGridTextColumn Elemente durch Folgendes.

<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" />

Führen Sie die App aus, melden Sie sich an, und klicken Sie auf das Navigationselement Kalender. Die Liste der Ereignisse mit formatierten Start- und Endwerten sollte angezeigt werden.

Erstellen eines neuen Ereignisses

5 Minuten verbleibend

In diesem Abschnitt fügen Sie die Möglichkeit hinzu, Ereignisse im Kalender des Benutzers zu erstellen.

Fügen Sie eine neue Seite für die neue Ereignisansicht hinzu. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das GraphTutorial-Projekt, und wählen Sie > Neues Element hinzufügen... aus. Wählen Sie "Leere Seite", geben Sie NewEventPage.xaml das Feld "Name" ein, und wählen Sie "Hinzufügen" aus.

Öffnen Sie "NewEventPage.xaml", und ersetzen Sie den Inhalt durch Folgendes.

<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>

Öffnen Sie "NewEventPage.xaml.cs", und fügen Sie die folgenden using Anweisungen am Anfang der Datei hinzu.

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;

Fügen Sie die INotifyPropertyChange-Schnittstelle der NewEventPage-Klasse hinzu. Ersetzen Sie die vorhandene Klassendeklaration durch Folgendes.

public sealed partial class NewEventPage : Page, INotifyPropertyChanged
{
    public NewEventPage()
    {
        this.InitializeComponent();
        DataContext = this;
    }
}

Fügen Sie der NewEventPage-Klasse die folgenden Eigenschaften hinzu.

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;
    }
}

Fügen Sie den folgenden Code hinzu, um die Zeitzone des Benutzers von Microsoft Graph abzurufen, wenn die Seite geladen wird.

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);
}

Fügen Sie den folgenden Code hinzu, um das Ereignis zu erstellen.

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");
}

Ändern Sie die NavView_ItemInvoked Methode in der Datei "MainPage.xaml.cs", um die vorhandene Anweisung durch Folgendes zu switch ersetzen.

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;
}

Speichern Sie die Änderungen, und führen Sie die App aus. Melden Sie sich an, wählen Sie das Menüelement "Neues Ereignis" aus, füllen Sie das Formular aus, und wählen Sie "Erstellen" aus, um dem Kalender des Benutzers ein Ereignis hinzuzufügen.

Freigeben über

Erstellen von UWP-Apps mit Microsoft Graph

Voraussetzungen

Feedback

Erstellen einer Apps für die universelle Windows-Plattform

Installieren der NuGet-Pakete

Entwerfen der App

Registrieren der App im Portal

Hinzufügen der Azure AD-Authentifizierung

Konfigurieren des LoginButton-Steuerelements

Abrufen einer Kalenderansicht

Abrufen von Kalenderereignissen von Outlook

Anzeigen der Ergebnisse

Erstellen eines neuen Ereignisses

Herzlichen Glückwunsch!

Feedback