Создание классических приложений для компьютеров с Windows Build desktop apps for Windows PCs

Эта статья содержит сведения, необходимые, чтобы приступить к созданию классических приложений для Windows или обновления существующих классических приложений для использования новейших возможностей Windows 10 This article provides the info you need to get started building desktop apps for Windows or updating existing desktop apps to adopt the latest experiences in Windows 10.

Платформы для классических приложений Platforms for desktop apps

Существуют четыре основные платформы для создания классических приложений для компьютеров с Windows. There are four main platforms for building desktop apps for Windows PCs. Каждая платформа предоставляет модель приложения, определяющую жизненный цикл приложения, полную инфраструктуру пользовательского интерфейса и набор элементов управления пользовательского интерфейса, которые позволяют создавать классические приложения, такие как Word, Excel и Photoshop, и получать доступ к исчерпывающему набору управляемых или собственных API-интерфейсов для использования функций Windows. Each platform provides an app model that defines the lifecycle of the app, a complete UI framework and set of UI controls that let you create desktop apps like Word, Excel, and Photoshop, and access to a comprehensive set of managed or native APIs for using Windows features.

Подробное сравнение этих платформ и дополнительные материалы по каждой платформе доступны в разделе Выбор платформы для приложения. For an in-depth comparison of these platforms along with additional resources for each platform, see Choose your app platform.

Передовая платформа для приложений и игр для, предназначенных для Windows 10. The leading-edge platform for Windows 10 apps and games. Вы можете создавать приложения UWP, которые используют только элементы управления и интерфейсы API универсальной платформы Windows (UWP), или использовать эти элементы управления и API в классических приложениях, созданных с помощью одной из других платформ. You can build UWP apps that exclusively use UWP controls and APIs, or you can use UWP controls and APIs in desktop apps that are built using one of the other platforms.

Предпочтительная платформа для собственных приложений для Windows, которым требуется прямой доступ к Windows и оборудованию. The platform of choice for native Windows apps that require direct access to Windows and hardware.

Общепризнанная платформа на основе .NET для преимущественно графических приложений для Windows, использующих модель пользовательского интерфейса XAML. The established .NET-based platform for graphically-rich managed Windows apps with a XAML UI model. Эти приложения могут быть нацелены на .NET Core 3 или полную платформу .NET Framework. These apps can target .NET Core 3 or the full .NET Framework.

Платформа на основе .NET, предназначенная для управляемых бизнес-приложений, использующих упрощенную модель пользовательского интерфейса. A .NET-based platform that is designed for managed line-of-business apps with a lightweight UI model. Эти приложения могут быть нацелены на .NET Core 3 или полную платформу .NET Framework. These apps can target .NET Core 3 or the full .NET Framework.

Стратегия развития Future roadmap

В будущем мы планируем улучшать платформы разработки приложений для Windows с помощью библиотеки пользовательского интерфейса Windows (WinUI) и Project Reunion. Looking forward, we are evolving the Windows app development platforms with the Windows UI Library (WinUI) and Project Reunion.

WinUI — это собственная среда взаимодействия с пользователем для приложений Windows 10. WinUI is a native user experience (UX) framework for Windows 10 apps. Библиотека WinUI разрабатывалась как набор средств. Она предоставляла новые и обновленные версии элементов управления WinRT для приложений UWP, предназначенных для более ранних версий Windows 10. WinUI started as a toolkit that provides new and updated versions of WinRT controls for UWP apps that target down-level versions of Windows 10. Область действия WinUI расширилась, и WinUI 3 представляет собой современную нативную платформу пользовательского интерфейса для приложений Windows 10 в UWP, .NET и Win32. As of WinUI 3, WinUI is growing in scope to become the premier native user interface (UI) framework for Windows 10 apps across UWP, .NET, and Win32 app platforms.

Project Reunion — это кодовое название для широкого спектра новых компонентов и инструментов для разработчиков. Это новый этап развития платформы для разработки приложений Windows. Project Reunion is the code name for a broad set of new developer components and tools that represents the next evolution in the Windows app development platform. Project Reunion включает единый набор API и инструментов, которые могут согласованно использоваться любыми приложениями в различных целевых версиях ОС Windows 10. Project Reunion provides a unified set of APIs and tools that can be used in a consistent way by any app on a broad set of target Windows 10 OS versions. Project Reunion дополняет имеющиеся платформы и среды приложений Windows, такие как UWP, нативная среда Win32 и .NET, общим набором API и инструментов, которые упрощают работу разработчиков. Project Reunion complements existing Windows app platforms and frameworks such as UWP and native Win32, and .NET with a common set of APIs and tools that developers can rely on across these platforms.

Дополнительные сведения см. в статье Project Reunion. For more information, see Project Reunion.

Обновление существующих классических приложений для Windows 10 Update existing desktop apps for Windows 10

Если у вас есть классические приложения WPF, Windows Forms или собственные классические приложения Win32, в Windows 10 и универсальной платформе Windows (UWP) предлагается много возможностей для реализации современных функций в имеющихся приложениях. If you have an existing WPF, Windows Forms, or native Win32 desktop app, Windows 10 and the Universal Windows Platform (UWP) offer many features you can use to deliver a modern experience in your app. Большинство этих функций доступны в виде модульных компонентов, которые можно внедрить в приложение в своем собственном темпе, не переписывая код приложения для другой платформы. Most of these features are available as modular components that you can adopt in your app at your own pace without having to rewrite your app for a different platform.

Ниже приведено лишь несколько функций, позволяющих улучшить существующие классические приложения. Here are just a few of the features available to enhance your existing desktop apps:

• Используйте MSIX для упаковки и развертывания классических приложений. Use MSIX to package and deploy your desktop apps. MSIX — это современный формат пакета приложения для Windows, позволяющий упаковывать любые приложения для Windows. MSIX is a modern Windows app package format that provides a universal packaging experience for all Windows apps. Этот безопасный и надежный формат упаковки сочетает в себе преимущества технологий установки с использованием MSI-файлов, APPX-файлов, App-V и ClickOnce. MSIX brings together the best aspects of MSI, .appx, App-V and ClickOnce installation technologies and is built to be safe, secure, and reliable.
• Интегрируйте возможности Windows 10 в свое классическое приложение с помощью расширений пакетов. Integrate your desktop app with Windows 10 experiences by using package extensions. Например, закрепите свое приложение в меню «Пуск», предоставьте к нему общий доступ или отправляйте всплывающие уведомления из приложения. For example, point Start tiles to your app, make your app a share target, or send toast notifications from your app.
• Используйте острова XAML для размещения элементов управления XAML UWP в своем классическом приложении. Use XAML Islands to host UWP XAML controls in your desktop app. Многие последние функции пользовательского интерфейса Windows 10 доступны только для элементов управления XAML UWP. Many of the latest Windows 10 UI features are only available to UWP XAML controls.

Дополнительные сведения доступны в приведенных ниже статьях. For more information, see these articles.

Платформа Platform	Описание Description	Документация и ресурсы Docs and resources
Универсальная платформа Windows (UWP) Universal Windows Platform (UWP)

Статья Article	Описание Description
Модернизация классических приложений Modernize desktop apps	Описываются последние возможности разработки для Windows 10 и UWP, которые можно использовать в любом классическом приложении, включая приложения WPF, Windows Forms и приложения Win32 на C++. Describes the latest Windows 10 and UWP development features you can use in any desktop app, including WPF, Windows Forms, and C++ Win32 apps.
Руководство. Модернизация приложения WPF Tutorial: Modernize a WPF app	Следуйте пошаговым инструкциям, чтобы модернизировать существующий пример бизнес-приложения WPF, добавив элементы управления рукописным вводом и календарем UWP в приложение и упаковав его в пакет MSIX. Follow step-by-step instructions to modernize an existing WPF line-of-business sample app by adding UWP Ink and calendar controls to the app and packaging it in an MSIX package.

Создание классических приложений Create new desktop apps

Ниже приведены некоторые ресурсы, которые помогут вам приступить к созданию классического приложения для Windows. If you are creating a new desktop app for Windows, here are some resources to help get you started.

Руководство: Создание пользовательского интерфейса Tutorial: Create a user interface

В этом руководстве вы узнаете, как создать базовый пользовательский интерфейс для программы редактирования изображений, используя следующие инструменты: In this tutorial, you’ll learn how to create a basic UI for an image editing program by:

• средства XAML в Visual Studio, такие как конструктор XAML, панель инструментов, редактор XAML, панель Свойства и «Структура документа» для добавления элементов правления и содержимого в пользовательский интерфейс; Using the XAML tools in Visual Studio, such as XAML Designer, Toolbox, the XAML editor, the Properties panel, and Document Outline, to add controls and content to your UI.
• наиболее распространенные панели макетов XAML, такие как RelativePanel , Grid и StackPanel . Using some of the most common XAML layout panels, such as RelativePanel , Grid , and StackPanel .

Программа редактирования изображений содержит две страницы. The image editing program has two pages. Главная страница, на которой отображается представление фотоальбома, а также сведения о каждом файле изображения. The main page displays a photo gallery view, along with some information about each image file.

Страница сведений, на которой отображается одна выбранная фотография. The details page displays a single photo after it has been selected. Всплывающее меню редактирования позволяет изменить, переименовать и сохранить фотографию. A flyout editing menu allows the photo to be altered, renamed, and saved.

Предварительные условия Prerequisites

• Visual Studio 2019: Скачайте Visual Studio 2019 (выпуск Community Edition бесплатен). Visual Studio 2019: Download Visual Studio 2019 (The Community edition is free.)
• Пакет SDK для Windows 10 (версии 10.0.17763.0 или выше): скачать последнюю версию Windows SDK (бесплатно) Windows 10 SDK (10.0.17763.0 or later): Download the latest Windows SDK (free)
• Windows 10, версия 1809 или выше. Windows 10, Version 1809 or later

Часть 0. Получение начального кода на GitHub Part 0: Get the starter code from GitHub

В этом учебнике мы начнем с упрощенной версии примера PhotoLab. For this tutorial, you’ll start with a simplified version of the PhotoLab sample.

Далее необходимо клонировать или скачать пример. Next, you’ll need to clone or download the sample. Нажмите кнопку Clone or download (Клонировать или скачать). Select the Clone or download button. Откроется подменю. A sub-menu appears.

Если вы не знакомы с GitHub: If you’re not familiar with GitHub:

a. a. Нажмите кнопку Download ZIP (Скачать ZIP-файл) и сохраните файл в локальном расположении. Select Download ZIP and save the file locally. Будет выполнено скачивание ZIP-файла с необходимыми файлами проекта. This downloads a .zip file that contains all the project files you need.

b. b. Извлеките файл. Extract the file. Используйте проводник, чтобы перейти к скачанному ZIP-файлу, щелкните его правой кнопкой мыши и выберите Извлечь все. Use File Explorer to browse to the .zip file that you just downloaded, right-click it, and select Extract All. .

c. c. Перейдите к локальной копии примера кода, а затем в каталог Windows-appsample-photo-lab-master\xaml-basics-starting-points\user-interface . Browse to your local copy of the sample, and go to the Windows-appsample-photo-lab-master\xaml-basics-starting-points\user-interface directory.

Если вы знакомы с GitHub: If you are familiar with GitHub:

a. a. Клонируйте главную ветвь репозитория локально. Clone the main branch of the repo locally.

b. b. Перейдите в каталог Windows-appsample-photo-lab\xaml-basics-starting-points\user-interface . Browse to the Windows-appsample-photo-lab\xaml-basics-starting-points\user-interface directory.

Дважды щелкните Photolab.sln , чтобы открыть решение в Visual Studio. Double-click Photolab.sln to open the solution in Visual Studio.

Часть 1. Добавление элемента управления TextBlock с помощью конструктора XAML Part 1: Add a TextBlock control by using XAML Designer

Visual Studio предоставляет несколько средств для удобства создания пользовательского интерфейса XAML. Visual Studio provides several tools to make creating your XAML UI easier.

• Перетащите элементы управления с панели инструментов в область конструктора XAML и посмотрите, как они будут выглядеть перед запуском приложения. Drag controls from the Toolbox onto the XAML Designer design surface and see what they’ll look like before you run the app.
• Панель Свойства позволяет просмотреть и настроить все свойства элемента управления, которые являются активными в конструкторе. The Properties panel lets you view and set all the properties of the control that is active in the designer.
• На панели Структура документа отображается структура родительских и дочерних элементов визуального дерева XAML для пользовательского интерфейса. Document Outline shows the parent/child structure of the XAML visual tree for your UI.
• Редактор XAML позволяет напрямую изменять разметку XAML. The XAML editor lets you directly enter and modify the XAML markup.

Ниже представлен пользовательский интерфейс Visual Studio с пометками около каждого инструмента. Here’s the Visual Studio UI with the tools labeled.

Каждый из этих инструментов помогает в создании пользовательского интерфейса, и при работе с этим руководством мы воспользуемся каждым из них. Each of these tools makes creating your UI easier, so we’ll use all of them in this tutorial. Прежде всего, добавим элемент управления с помощью конструктора XAML. You’ll start by using XAML Designer to add a control.

Чтобы добавить элемент управления с помощью конструктора XAML, сделайте следующее: To add a control by using XAML Designer:

Дважды щелкните файл MainPage.xaml в обозревателе решений, чтобы открыть его. Double-click MainPage.xaml in Solution Explorer to open it. На этом шаге главная страница приложения отобразится без каких-либо добавленных элементов пользовательского интерфейса. This step shows the main page of the app without any UI elements added.

Прежде чем продолжить, необходимо внести некоторые изменения в Visual Studio: Before going further, you need to make some adjustments to Visual Studio:

• Убедитесь, что в качестве платформы решения выбрана архитектура x86 или x64, а не ARM. Make sure the solution platform is set to x86 or x64, not ARM.
• Настройте главную страницу конструктора XAML на предварительный просмотр рабочего стола с диагональю 13,3 дюйма. Set the main page of XAML Designer to show the 13.3″ desktop preview.

Оба параметра находятся в верхней части окна, как показано здесь. You should see both settings near the top of the window, as shown here.

Теперь можно запустить приложение, но оно будет практически пустым. You can run the app now, but you won’t see much. Добавим элементы пользовательского интерфейса, чтобы сделать его интереснее. Let’s add some UI elements to make things more interesting.

На панели инструментов разверните пункт Общие элементы управления XAML и найдите элемент управления TextBlock. In Toolbox, expand Common XAML controls and find the TextBlock control. Перетащите элемент управления TextBlock в область конструктора ближе к верхнему левому углу страницы. Drag a TextBlock control onto the design surface and place it near the upper-left corner of the page.

На страницу добавится элемент управления TextBlock , и конструктор установит определенные свойства, основываясь на своем предположении о требуемом макете. The TextBlock control is added to the page, and the designer sets some properties based on its best guess at the layout you want. Вокруг элемента управления TextBlock появится синее выделение, указывающее на то, что этот объект теперь стал активным. A blue highlight appears around the TextBlock control to indicate that it is now the active object. Обратите внимание на поля и другие параметры, добавленные конструктором. Notice the margins and other settings that the designer added.

Код XAML будет выглядеть примерно так, как показано ниже. Your XAML will look something like the following. Не стоит беспокоиться, если он отформатирован несколько иначе. Don’t worry if it’s not formatted exactly like this. В нашем примере он сокращен для удобства чтения. We abbreviated here to make it easier to read.

В дальнейших шагах мы обновим эти значения. In the next steps, you’ll update these values.

На панели Свойства измените значение поля Имя элемента управления TextBlock на TitleTextBlock. In the Properties panel, change the Name value of the TextBlock control to TitleTextBlock. (Убедитесь, что элемент управления TextBlock по-прежнему является активным объектом.) (Make sure the TextBlock control is still the active object.)

В разделе Общие замените значение поля Текст на Коллекция. Under Common, change the Text value to Collection.

Теперь код XAML в редакторе XAML будет выглядеть следующим образом. In the XAML editor, your XAML will now look like this.

Для размещения элемента управления TextBlock необходимо сначала удалить значения свойств, добавленные Visual Studio. To position the TextBlock control, you should first remove the property values that Visual Studio added. На панели «Структура документа» щелкните правой кнопкой мыши TitleTextBlock и выберите Макет > Сбросить все. In Document Outline, right-click TitleTextBlock, and then select Layout > Reset All.

На панели Свойства введите Margin в поле поиска, чтобы быстро найти свойство Margin (Поле). In the Properties panel, enter Margin into the search box to easily find the Margin property. Задайте значения левого и нижнего полей равными 24. Set the left and bottom margins to 24.

Поля обеспечивают базовое расположение элемента на странице. Margins provide the most basic positioning of an element on the page. С их помощью удобно выполнять точную настройку макета, но не следует использовать большие значения полей, подобные добавленным Visual Studio. They’re useful for fine-tuning your layout, but you should avoid using large margin values like those added by Visual Studio. Они затрудняют адаптацию пользовательского интерфейса к различным размерам экрана. They make it difficult for your UI to adapt to various screen sizes.

На панели «Структура документа» правой кнопкой мыши щелкните TitleTextBlock, а затем Изменить стиль > Применить ресурс > TitleTextBlockStyle. In Document Outline, right-click TitleTextBlock, and then select Edit Style > Apply Resource > TitleTextBlockStyle. На этом шаге к тексту названия будет применен определенный системой стиль. This step applies a system-defined style to your title text.

На панели Свойства введите textwrapping в поле поиска, чтобы быстро найти свойство TextWrapping . In the Properties panel, enter textwrapping into the search box to find the TextWrapping property. Щелкните метку свойства для свойства TextWrapping , чтобы открыть его меню. Select the property marker for the TextWrapping property to open its menu. (Маркер свойства — это маленький квадратный символ справа от каждого значения свойства. (The property marker is the small box symbol to the right of each property value. Метка свойства окрашена в черный цвет, чтобы указать, что для свойства задано значение не по умолчанию.) В меню Свойство выберите TextWrapping , чтобы сбросить свойство TextWrapping. The property marker is black to indicate that the property is set to a non-default value.) On the Property menu, select Reset to reset the TextWrapping property.

Visual Studio добавляет это свойство, но оно уже задано в примененном стиле, поэтому здесь оно не потребуется. Visual Studio adds this property, but it’s already set in the style you applied, so you don’t need it here.

Мы добавили первую часть пользовательского интерфейса в приложение. You’ve added the first part of the UI to your app. Теперь запустите приложение и посмотрите, как оно выглядит. Run the app now to see what it looks like.

В этой части руководства вы добавили элемент управления, перетащив его. In this part of the tutorial, you added a control by dragging it. Также можно добавить элемент управления путем двойного щелчка по нему на панели инструментов. You can also add a control by double-clicking it in Toolbox. Попробуйте сделать это и обратите внимание, чем отличается код XAML, созданный Visual Studio. Give it a try, and see the differences in the XAML that Visual Studio generates.

Часть 2. Добавление элемента управления GridView с помощью редактора XAML Part 2: Add a GridView control by using the XAML editor

В части 1 мы попробовали использовать конструктор XAML и некоторые другие средства, предоставляемые в Visual Studio. In Part 1, you had a taste of using XAML Designer and some of the other tools that Visual Studio provides. В этой части мы будем использовать редактор XAML для непосредственной работы с разметкой XAML. Here, you’ll use the XAML editor to work directly with the XAML markup. По мере изучения XAML этот способ может показаться вам более эффективным. As you become more familiar with XAML, you might find that this is a more efficient way for you to work.

Прежде всего необходимо заменить элемент Grid корневого макета на RelativePanel. First, you’ll replace the root layout Grid with RelativePanel. Элемент RelativePanel упрощает изменение расположения блоков пользовательского интерфейса относительно панели и других элементов пользовательского интерфейса. RelativePanel makes it easier to rearrange chunks of UI relative to the panel or other pieces of UI. Его преимущества продемонстрированы в руководстве Адаптивный макет XAML. You’ll see its usefulness in the XAML adaptive layout tutorial.

Затем мы добавим элемент управления GridView для отображения данных. Then, you’ll add a GridView control to display your data.

Чтобы добавить элемент управления с помощью редактора XAML, сделайте следующее: To add a control by using the XAML editor:

В редакторе XAML замените корневой элемент Grid на RelativePanel . In the XAML editor, change the root Grid to RelativePanel .

До Before

После After

Дополнительные сведения об использовании RelativePanel в макете см. в статье Панели макета. For more info about layout using RelativePanel , see Layout panels.

Под элементом TextBlock добавьте элемент управления GridView с именем ImageGridView. Below the TextBlock element, add a GridView control named ImageGridView. Настройте для RelativePanel присоединенные свойства, чтобы разместить элемент управления под текстом названия и растянуть его во всю ширину экрана. Set the RelativePanel attached properties to place the control below the title text and make it stretch across the entire width of the screen.

Добавьте этот код XAML Add this XAML

После элемента TextBlock After TextBlock

Дополнительные сведения о присоединенных свойствах панелей см. в статье Панели макета. For more info about panel attached properties, see Layout panels.

Чтобы элемент управления GridView отображал какие-либо данные, необходимо предоставить ему коллекцию данных. For the GridView control to show anything, you need to give it a collection of data to show. Откройте файл MainPage.xaml.cs и найдите метод GetItemsAsync . Open MainPage.xaml.cs and find the GetItemsAsync method. Этот метод заполняет коллекцию с именем Images, которая является свойством, добавленным на страницу MainPage. This method populates a collection called Images, which is a property that we’ve added to MainPage.

В конце метода GetItemsAsync добавьте следующую строку кода. At the end of the GetItemsAsync method, add this line of code.

На этом шаге для свойства ItemsSource элемента управления GridView задается значение коллекции Images приложения. This sets the GridView control’s ItemsSource property to the app’s Images collection. Также элементу управления GridView предоставляются данные для отображения. It also gives the GridView control something to show.

На этом этапе можно запустить приложение и убедиться, что все работает должным образом. This is a good place to run the app and make sure everything’s working. Приложение должно выглядеть следующим образом. It should look something like this.

Вы заметите, что приложение пока что не показывает изображения. You’ll notice that the app isn’t showing images yet. По умолчанию оно отображает значение ToString типа данных в коллекции. By default, it shows the ToString value of the data type that’s in the collection. Далее мы создадим шаблон данных, чтобы определить способ отображения данных. Next, you’ll create a data template to define how the data is shown.

Дополнительные сведения об использовании RelativePanel в макете см. в статье Панели макета. You can learn more about layout using RelativePanel in the Layout panels article. Ознакомьтесь со статьей и поэкспериментируйте с разными макетами, изменив значения присоединенных свойств RelativePanel в элементах TextBlock и GridView . Take a look, and then experiment with some different layouts by setting RelativePanel attached properties on TextBlock and GridView .

Часть 3. Добавление объекта DataTemplate для отображения данных Part 3: Add a DataTemplate object to display your data

Теперь мы создадим объект DataTemplate, который сообщает элементу управления GridView , как следует отображать данные. Now, you’ll create a DataTemplate object that tells the GridView control how to display your data. Полную информацию о шаблонах данных см. в разделе Контейнеры и шаблоны элементов. For a full explanation of data templates, see Item containers and templates.

В этой части вы добавите только заполнители, чтобы создать необходимый макет. For now, you’ll add only placeholders to help you create the layout you want. При работе с руководством Создание привязок данных вы замените эти заполнители реальными данными из класса ImageFileInfo . In the XAML data binding tutorial, you’ll replace these placeholders with real data from the ImageFileInfo class. Вы можете открыть файл ImageFileInfo.cs сейчас, если хотите увидеть, как выглядит объект данных. You can open the ImageFileInfo.cs file now if you want to see what the data object looks like.

Чтобы добавить шаблон данных в представление сетки, сделайте следующее: To add a data template to a grid view:

Откройте файл MainPage.xaml. Open MainPage.xaml.

Чтобы отобразить оценку, используйте RatingControl из пакета NuGet библиотеки пользовательского интерфейса Windows (WinUI). To show the rating, use the RatingControl from the Windows UI Library (WinUI) NuGet package. Добавьте ссылку на пространство имен XAML, которая определяет это пространство имен для элементов управления WinUI. Add a XAML namespace reference that specifies the namespace for the WinUI controls. Разместите ее в открывающем теге Page сразу после других записей xmlns: . Put this in the opening Page tag, right after the other xmlns: entries.

Добавьте этот код XAML Add this XAML

После последней записи xmlns: After the last xmlns: entry

Подробнее о пространствах имен XAML см. в разделе Пространства имен XAML и их сопоставление. For more info about XAML namespaces, see XAML namespaces and namespace mapping.

На панели «Структура документа» щелкните правой кнопкой мыши ImageGridView. In Document Outline, right-click ImageGridView. В контекстном меню выберите Правка дополнительных шаблонов > Изменить созданные элементы (ItemTemplate) > Создать пустой. On the shortcut menu, select Edit Additional Templates > Edit Generated Items (ItemTemplate) > Create Empty. Откроется диалоговое окно Создание ресурса. The Create Resource dialog box opens.

В этом диалоговом окне замените значение Name (ключ) на ImageGridView_DefaultItemTemplate, а затем нажмите кнопку ОК. In the dialog box, change the Name (key) value to ImageGridView_DefaultItemTemplate, and then select OK.

После нажатия кнопки ОК происходит ряд действий. Several things happen when you select OK:

В раздел Page.Resources файла MainPage.xaml добавляется объект DataTemplate . A DataTemplate object is added to the Page.Resources section of MainPage.xaml.

Для свойства ItemTemplate элемента управления GridView задается значение ресурса DataTemplate . The GridView control’s ItemTemplate property is set to the DataTemplate resource.

В ресурсе ImageGridView_DefaultItemTemplate задайте для свойств Height и Width элемента Grid значение 300, а для свойства Margin — 8. In the ImageGridView_DefaultItemTemplate resource, give the root Grid a height and width of 300, and margin of 8. Затем добавьте две строки и задайте для свойства Height второй строки значение Auto. Then add two rows and set the height of the second row to Auto.

До Before

После After

Дополнительные сведения о макетах Grid см. в статье Панели макета. For more info about Grid layouts, see Layout panels.

Добавьте элементы управления в макет Grid . Add controls to the Grid layout.

а. a. Добавьте в сетку элемент управления Image. По умолчанию он помещается в первую строку сетки (строка 0). Add an Image control to the grid; by default, it’s placed in the first grid row (row 0). Здесь будет отображаться изображение. This is where the image will be shown. Но сейчас в качестве заполнителя будет использоваться логотип приложения в магазине. But for now, you’ll use the app’s store logo as a placeholder.

b. b. Добавьте элементы управления TextBlock для отображения названия, типа файла и размеров изображения. Add TextBlock controls to show the image’s name, file type, and dimensions. Чтобы сделать это, используйте элементы управления StackPanel для расположения текстовых блоков. For this, you use StackPanel controls to arrange the text blocks. Используйте присоединенное свойство Grid.Row , чтобы поместить внешний элемент управления StackPanel во вторую строку (строка 1). Use the Grid.Row attached property to place the outermost StackPanel in the second row (row 1).

Дополнительные сведения о макете StackPanel см. в статье Панели макета. For more info about StackPanel layout, see Layout panels.

c. c. Добавьте RatingControl во внешний (вертикальный) элемент управления StackPanel . Add the RatingControl to the outer (vertical) StackPanel control. Разместите его после внутреннего (горизонтального) элемента управления StackPanel . Place it after the inner (horizontal) StackPanel control.

Окончательный шаблон The final template

Запустите приложение, чтобы просмотреть элемент управления GridView с только что созданным шаблоном элемента. Run the app now to see the GridView control with the item template that you just created. Затем вы измените цвет фона и добавите пробел между элементами сетки. Next, you’ll change the background color and add some space between the grid items.

Часть 4. Изменение стиля контейнера элементов Part 4: Modify the item container style

Шаблон элемента управления содержит визуальные элементы, отображающие состояние, например при выделении, наведении указателя и фокусировке. An item’s control template contains the visuals that display state, like selection, pointer over, and focus. Эти визуальные элементы отрисовываются над шаблоном данных или под ним. These visuals are rendered either on top of or below the data template. В этой части мы изменим свойства Background и Margin шаблона элемента управления, чтобы у элементов GridView был серый фон. Here, you’ll modify the Background and Margin properties of the control template to give the GridView items a gray background.

Чтобы изменить контейнер элементов, сделайте следующее: To modify the item container:

На панели «Структура документа» щелкните правой кнопкой мыши ImageGridView. In Document Outline, right-click ImageGridView. В контекстном меню выберите Изменить дополнительные шаблоны > Изменить созданный контейнер элемента (ItemContainerStyle) > Изменить копию. On the shortcut menu, select Edit Additional Templates > Edit Generated Item Container (ItemContainerStyle) > Edit a Copy. Откроется диалоговое окно Создание ресурса. The Create Resource dialog box opens.

В этом диалоговом окне замените значение Name (ключ) на ImageGridView_DefaultItemContainerStyle, а затем нажмите кнопку ОК. In the dialog box, change the Name (key) value to ImageGridView_DefaultItemContainerStyle, and then select OK.

В раздел Page.Resources кода XAML добавляется копия стиля по умолчанию. A copy of the default style is added to the Page.Resources section of your XAML.

Стиль GridViewItem по умолчанию задает значения многим свойствам. The GridViewItem default style sets a lot of properties. При этом в копии шаблона необходимо настроить только те свойства, которые нужно изменить. However, in your copy of the template, you only need to keep the properties that want to modify.

Как и на предыдущем шаге, для свойства ItemContainerStyle элемента управления GridView задано значение нового ресурса Style. As in the previous step, the GridView control’s ItemContainerStyle property is set to the new Style resource.

Удалите все элементы Setter , кроме Background и Margin . Delete all the Setter elements except Background and Margin .

Измените значение свойства Background на Gray . Change the value for the Background property to Gray .

До Before

После After

Измените значение свойства Margin на 8 . Change the value for the Margin property to 8 .

До Before

После After

Запустите приложение и посмотрите, как оно выглядит на данном этапе. Run the app and see how it looks now. Измените размер окна приложения. Resize the app window. Элемент управления GridView отвечает за изменение расположения изображений, но при некоторых значениях ширины в правой части окна приложения остается много пространства. The GridView control takes care of rearranging the images for you, but at some widths, there’s a lot of space on the right side of the app window. Приложение выглядело бы лучше, если бы изображения располагались по центру. It would look better if the images were centered. Как это сделать, описано в следующей части. You’ll take care of that next.

Если вы хотите поэкспериментировать, попробуйте изменять значения свойств Background и Margin и посмотрите на результат. If you want to experiment, try setting the Background and Margin properties to different values and see what effect it has.

Часть 5. Последние штрихи в макете Part 5: Apply some final adjustments to the layout

Чтобы расположить изображения по центру страницы, необходимо настроить выравнивание элемента управления Grid на странице. To center the images on the page, you need to adjust the alignment of the Grid control on the page. А возможно, следует настроить выравнивание изображений в GridView ? Or do you need to adjust the alignment of the images in the GridView ? Есть ли разница? Does it matter? Давайте посмотрим. Let’s see.

Дополнительные сведения о выравнивании см. в статье Выравнивание, поля и заполнение. For more info about alignment, see Alignment, margins, and padding.

(На этом шаге попробуйте установить в качестве значения свойства Background элемента GridView любой цвет на ваш выбор. (You might try setting the Background property of GridView to your favorite color for this step. Это поможет вам следить за изменениями в макете.) It will let you see more clearly what’s happening with the layout.)

Чтобы изменить выравнивание изображений, сделайте следующее: To modify the alignment of the images:

В GridView задайте для свойства HorizontalAlignment значение Center . In GridView , set the HorizontalAlignment property to Center .

До Before

После After

Запустите приложение и измените размер окна. Run the app and resize the window. Прокрутите вниз для просмотра других изображений. Scroll down to see more images.

Изображения располагаются по центру, и приложение выглядит лучше. The images are centered, which looks better. Тем не менее полоса прокрутки выровнена по краю элемента управления GridView , а не по краю окна. However, the scroll bar is aligned with the edge of the GridView control instead of with the edge of the window. Чтобы устранить эту проблему, необходимо выровнять по центру изображения в элементе GridView , а не сам элемент GridView на странице. To fix this, you’ll center the images in GridView rather than centering GridView on the page. Это дополнительная задача, но в результате внешний вид приложения улучшится. It’s a little more work, but it will look better in the end.

Удалите параметр HorizontalAlignment из предыдущего этапа. Remove the HorizontalAlignment setting from the previous step.

На панели «Структура документа» щелкните правой кнопкой мыши ImageGridView. In Document Outline, right-click ImageGridView. В контекстном меню выберите Изменить дополнительные шаблоны > Изменить макет элементов (ItemsPanel) > Изменить копию. On the shortcut menu, select Edit Additional Templates > Edit Layout of Items (ItemsPanel) > Edit a Copy. Откроется диалоговое окно Создание ресурса. The Create Resource dialog box opens.

В этом диалоговом окне замените значение Name (ключ) на ImageGridView_ItemsPanelTemplate, а затем нажмите кнопку ОК. In the dialog box, change the Name (key) value to ImageGridView_ItemsPanelTemplate, and then select OK.

В раздел Page.Resources кода XAML добавляется копия ItemsPanelTemplate по умолчанию. A copy of the default ItemsPanelTemplate is added to the Page.Resources section of your XAML. (Как и раньше, GridView обновляется со ссылкой на этот ресурс.) (And as before, GridView is updated to reference this resource.)

Мы уже использовали различные панели для расположения элементов управления в приложении, а в элементе GridView есть внутренняя панель для управления расположением его элементов. Just as you’ve used various panels to lay out the controls in your app, GridView has an internal panel that manages the layout of its items. Получив доступ к этой панели (ItemsWrapGrid), можно изменить ее свойства, чтобы поменять расположение элементов в элементе управления GridView . Now that you have access to this panel (ItemsWrapGrid), you can modify its properties to change the layout of items inside the GridView control.

В ItemsWrapGrid задайте для свойства HorizontalAlignment значение Center . In the ItemsWrapGrid , set the HorizontalAlignment property to Center .

До Before

После After

Запустите приложение и измените размер окна еще раз. Run the app and resize the window again. Прокрутите вниз для просмотра других изображений. Scroll down to see more images.

Теперь полоса прокрутки выровнена по краю окна. Now, the scroll bar is aligned with the edge of the window. Отличная работа! Good job! Вы создали базовый пользовательский интерфейс для приложения. You’ve created the basic UI for your app.

Дальнейшие действия Go further

Создав базовый пользовательский интерфейс, можете ознакомиться с другими руководствами из этой серии. Now that you’ve created the basic UI, check out these other tutorials. В них также описывается использование примера PhotoLab. They’re also based on the PhotoLab sample.

• Добавление реальных изображений и данных в учебнике по привязке данных XAML. Add real images and data in the XAML data binding tutorial.
• Создание пользовательского интерфейса, который может адаптироваться к различным размерам экрана, в учебнике по адаптивному макету XAML. Make the UI adapt to different screen sizes in the XAML adaptive layout tutorial.

Получите окончательную версию примера PhotoLab Get the final version of the PhotoLab sample

В этом руководстве не предусмотрено создание полноценного приложения. This tutorial doesn’t build up to the complete photo-editing app. Поэтому ознакомьтесь с окончательной версией, в которой присутствуют другие возможности, такие как пользовательская анимация и адаптивные макеты. So be sure to check out the final version to see other features, such as custom animations and adaptive layouts.