Создание приложений UWP с помощью Microsoft Graph

Статья
Developer (Начальный уровень)
36 мин до завершения

В этом руководстве рассказывается о создании приложения универсальной Windows платформы (UWP), которое использует API microsoft Graph для получения сведений о календаре для пользователя.

Совет

Если вы предпочитаете просто скачать завершенный учебник, вы можете скачать или клонировать GitHub репозиторий.

Предварительные требования

Перед началом этого руководства необходимо установить Visual Studio на компьютере с Windows 10 с включенным режимом разработчика. Если у вас нет Visual Studio, посетите предыдущую ссылку для параметров загрузки.

Вы также должны иметь личную учетную запись Майкрософт с почтовым ящиком на Outlook.com или учетную запись Microsoft work или school. Если у вас нет учетной записи Майкрософт, существует несколько вариантов получения бесплатной учетной записи:

Вы можете зарегистрироваться на новую личную учетную запись Майкрософт.
Вы можете зарегистрироваться в программе Microsoft 365 разработчика, чтобы получить бесплатную Microsoft 365 подписку.

Примечание

Этот учебник был написан с Visual Studio 2019 версии 16.8.3. Действия в этом руководстве могут работать с другими версиями, но они не были проверены.

Отзывы

Обратите внимание на этот учебник в репозитории GitHub.

Создание приложения с помощью универсальной платформы Windows

Осталось 35 мин

В этом разделе вы создадим новое приложение UWP.

Откройте Visual Studio и нажмите Создать новый проект. Выберите параметр Blank App (Универсальный Windows), использующий C#, а затем выберите Далее.
В диалоговом окте "Настройка нового проекта" введите Project имя и GraphTutorial выберите Create.

Важно!

Убедитесь, что вы вводите точно такое же имя для Visual Studio Project, указанного в этих лабораторных инструкциях. Имя проекта Visual Studio становится частью пространства имен в коде. Для кода в этих инструкциях важно, чтобы пространство имен совпадало с именем проекта Visual Studio, указанным в этих инструкциях. Если ввести другое имя проекта, код не будет компилироваться, пока вы не настроите все пространства имен в соответствии с именем, которое вы указали для проекта Visual Studio при его создании.
Нажмите кнопку ОК. В диалоговом ок Windows платформе Project, убедитесь, что минимальная версия установлена или позже, и выберите Windows 10, Version 1809 (10.0; Build 17763) ОК.

Установка пакетов Nuget

Прежде чем двигаться дальше, установите дополнительные NuGet пакеты, которые вы будете использовать позже.

Microsoft. набор средств. Uwp.Ui.Controls.DataGrid для отображения информации, возвращаемой корпорацией Майкрософт Graph.
Microsoft. набор средств. Graph. Элементы управления для обработки и получения маркеров входа и доступа.

Выберите Сервис > Диспетчер пакетов NuGet > Консоль диспетчера пакетов. В консоли диспетчера пакетов введите следующие команды.
```
Install-Package Microsoft.Toolkit.Uwp.Ui.Controls.DataGrid -IncludePrerelease
Install-Package Microsoft.Toolkit.Graph.Controls -IncludePrerelease
```

Проектирование приложения

В этом разделе вы создадим пользовательский интерфейс для приложения.

Начните с добавления переменной уровня приложений для отслеживания состояния проверки подлинности. В Обозревателе решений раз откройте App.xaml и откройте App.xaml.cs. Добавьте в класс App указанное ниже свойство.
```
public bool IsAuthenticated { get; set; }
```

Определите макет главной страницы. Откройте MainPage.xaml и замените все содержимое следующим.

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

Это определяет основные навигационные ссылки с домашней, календарной и навигационной ссылками на новые события, чтобы выступать в качестве основного представления приложения. Кроме того, в загон представления добавляется управление LoginButton. Этот контроль позволит пользователю войти и выйти. Управление еще не полностью включено, его можно настроить в более позднем упражнении.

Щелкните правой кнопкой мыши проект graph-tutorial в обозревателе решений и выберите добавить > элемент.... Выберите пустую страницу, HomePage.xaml введите в поле Имя и выберите Добавить. Замените <Grid> существующий элемент в файле следующим.
```
<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>
```
Расширь MainPage.xaml в обозревателе решений и откройте MainPage.xaml.cs . Добавьте в класс следующую MainPage функцию для управления состоянием проверки подлинности.
```
private void SetAuthState(bool isAuthenticated)
{
    (Application.Current as App).IsAuthenticated = isAuthenticated;

    // Toggle controls that require auth
    Calendar.IsEnabled = isAuthenticated;
    NewEvent.IsEnabled = isAuthenticated;
}
```
Добавьте следующий код в MainPage() конструктор после this.InitializeComponent(); строки.
```
// 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));
```
Когда приложение впервые запускается, оно инициализирует состояние проверки подлинности и переходит false на домашную страницу.

Добавьте следующий обработчик событий, чтобы загрузить запрашиваемую страницу, когда пользователь выбирает элемент из представления навигации.

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

Сохраните все изменения, нажмите кнопку F5 или выберите отладку > начать отладку в Visual Studio.

Примечание

Убедитесь, что вы выбираете соответствующую конфигурацию для компьютера (ARM, x64, x86).

Регистрация приложения на портале

Осталось 28 мин

В этом упражнении будет создаваться новое родной приложение Azure AD с Azure Active Directory центра администрирования.

Откройте браузер и перейдите в Центр администрирования Azure Active Directory и войдите с помощью личной учетной записи (т.е. учетной записи Майкрософт) или рабочей или учебной учетной записи.
Выберите Azure Active Directory на панели навигации слева, затем выберите Регистрация приложений в разделе Управление.
Выберите Новая регистрация. На странице Зарегистрировать приложение задайте необходимые значения следующим образом.
- Введите имя UWP Graph Tutorial.
- Введите поддерживаемые типы учетных записей для учетных записей в любом каталоге организаций и личных учетных записей Microsoft.
- В статье Перенаправление URI измените отсев на общедоступный клиент (мобильный & рабочий стол) и установите значение https://login.microsoftonline.com/common/oauth2/nativeclient .
Нажмите Зарегистрировать. На странице UWP Graph учебника скопируйте значение ID приложения (клиента) и сохраните его, оно потребуется на следующем шаге.

Добавление проверки подлинности с помощью Azure AD

Осталось 25 мин

В этом упражнении вы расширит приложение от предыдущего упражнения для поддержки проверки подлинности с помощью Azure AD. Это необходимо для получения необходимого маркера доступа OAuth для вызова microsoft Graph. На этом этапе вы интегрируете элемент управления LoginButton из Windows Graph элементов управления в приложение.

Щелкните правой кнопкой мыши проект GraphTutorial в обозревателе решений и выберите добавить > элемент .... Выберите файл ресурсов (.resw), назови файл и OAuth.resw выберите Добавить. Когда новый файл откроется в Visual Studio, создайте два ресурса следующим образом.
- Имя: AppId , Значение: ID приложения, созданный на портале регистрации приложений
- Имя: Scopes , Значение:User.Read User.ReadBasic.All People.Read MailboxSettings.Read Calendars.ReadWrite
Важно!

Если вы используете источник управления, например git, сейчас самое время исключить файл из источника управления, чтобы избежать случайной утечки вашего OAuth.resw ID приложения.

Настройка управления LoginButton

Откройте MainPage.xaml.cs и добавьте следующее утверждение в using верхней части файла.
```
using Microsoft.Toolkit.Graph.Providers;
```

Замените существующий конструктор следующим.

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

Этот код загружает параметры и OAuth.resw инициализирует поставщика MSAL с этими значениями.

Теперь добавьте обработник событий ProviderUpdated для события в ProviderManager . Добавьте к классу MainPage следующую функцию:
```
private void ProviderUpdated(object sender, ProviderUpdatedEventArgs e)
{
    var globalProvider = ProviderManager.Instance.GlobalProvider;
    SetAuthState(globalProvider != null && globalProvider.State == ProviderState.SignedIn);
    RootFrame.Navigate(typeof(HomePage));
}
```
Это событие запускается при изменениях поставщика или при изменениях состояния поставщика.

В Обозревателе решений раз откройте HomePage.xaml. HomePage.xaml.cs Замените существующий конструктор следующим.

public HomePage()
{
    this.InitializeComponent();

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

Перезапустите приложение и нажмите кнопку Вход в верхней части приложения. После того, как вы вписались, пользовательский интерфейс должен измениться, чтобы указать, что вы успешно вписались.

Примечание

Управление реализует логику хранения и обновления ButtonLogin маркера доступа для вас. Маркеры хранятся в безопасном хранилище и обновляются по мере необходимости.

Просмотр календаря

Осталось 10 мин

В этом упражнении вы будете включать Graph Microsoft в приложение. Для этого приложения вы будете использовать клиентскую библиотеку Microsoft Graph для .NET для звонков в Microsoft Graph.

Получение событий календаря из Outlook

Добавьте новую страницу для представления календаря. Щелкните правой кнопкой мыши проект GraphTutorial в обозревателе решений и выберите добавить > элемент .... Выберите пустую страницу, CalendarPage.xaml введите в поле Имя и выберите Добавить.
Откройте CalendarPage.xaml и добавьте следующую строку внутри существующего <Grid> элемента.
```
<TextBlock x:Name="Events" TextWrapping="Wrap"/>
```
Откройте CalendarPage.xaml.cs и добавьте следующие утверждения в using верхней части файла.
```
using Microsoft.Graph;
using Microsoft.Toolkit.Graph.Providers;
using Microsoft.Toolkit.Uwp.UI.Controls;
using Newtonsoft.Json;
```

Добавьте в класс следующие CalendarPage функции.

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

Рассмотрим с кодом OnNavigatedTo в делает.

Вызывается URL-адрес /me/calendarview.
- Параметры startDateTime endDateTime и параметров определяют начало и конец представления календаря.
- Заготвка приводит к возвращению событий в часовом поясе Prefer: outlook.timezone start end пользователя.
- Функция Select ограничивает поля, возвращаемые для каждого события, только теми, которые приложение будет фактически использовать.
- Функция OrderBy сортировать результаты к дате начала и времени.
- Функция Top запрашивает не более 50 событий.

Измените NavView_ItemInvoked метод в MainPage.xaml.cs файле, чтобы заменить существующее switch утверждение следующим.

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

Теперь вы можете запустить приложение, войти и щелкнуть элемент навигации Calendar в левом меню. Вы должны увидеть сброс JSON событий в календаре пользователя.

Отображение результатов

Замените все содержимое CalendarPage.xaml следующего.

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

Откройте CalendarPage.xaml.cs и Events.Text = JsonConvert.SerializeObject(events.CurrentPage); замените строку на следующую.
```
EventList.ItemsSource = events.CurrentPage.ToList();
```
Если вы запустите приложение сейчас и выберите календарь, вы должны получить список событий в сетке данных. Однако значения "Начните" и "Конец" отображаются не удобным образом. Вы можете управлять отображением этих значений с помощью конвертера значений.
Щелкните правой кнопкой мыши проект GraphTutorial в Обозревателе решений и выберите Добавить > класс.... Назови класс GraphDateTimeTimeZoneConverter.cs и выберите Добавить. Замените все содержимое файла следующим.
```
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();
        }
    }
}
```
Этот код принимает структуру dateTimeTimeZone, возвращаемую корпорацией Майкрософт Graph и разрезает ее в DateTimeOffset объект. Затем оно преобразует значение в часовой пояс пользователя и возвращает отформатируемого значения.

Откройте CalendarPage.xaml и добавьте следующее перед <Grid> элементом.

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

Замените два DataGridTextColumn последних элемента следующими.

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

Запустите приложение, войдите и нажмите элемент навигации Календарь. Список событий с форматными значениями "Начните" и "Конец".

Создание нового события

Осталось 5 мин

В этом разделе вы добавим возможность создания событий в календаре пользователя.

Добавьте новую страницу для нового представления события. Щелкните правой кнопкой мыши проект GraphTutorial в обозревателе решений и выберите добавить > элемент .... Выберите пустую страницу, NewEventPage.xaml введите в поле Имя и выберите Добавить.

Откройте NewEventPage.xaml и замените его содержимое следующим.

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

Откройте NewEventPage.xaml.cs и добавьте следующие утверждения в using верхнюю часть файла.

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;

Добавьте интерфейс INotifyPropertyChange в класс NewEventPage. Замените существующее объявление класса следующим.

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

Добавьте следующие свойства в класс 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;
    }
}

Добавьте следующий код, чтобы получить часовой пояс пользователя из Microsoft Graph при загрузке страницы.

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

Добавьте следующий код для создания события.

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

Измените NavView_ItemInvoked метод в файле MainPage.xaml.cs, чтобы заменить существующее switch утверждение следующим.

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

Сохраните изменения и запустите приложение. Во входе выберите элемент меню "Новое событие", заполните форму и выберите Создать, чтобы добавить событие в календарь пользователя.

Создание приложений UWP с помощью Microsoft Graph

Предварительные требования

Отзывы

Создание приложения с помощью универсальной платформы Windows

Установка пакетов Nuget

Проектирование приложения

Регистрация приложения на портале

Добавление проверки подлинности с помощью Azure AD

Настройка управления LoginButton

Просмотр календаря

Получение событий календаря из Outlook

Отображение результатов

Создание нового события

Поздравляем!

Отзывы