Создание и настройка формыCreate and customize a form

Если вы создаете приложение, которое требует от пользователей ввода значительного объема информации, скорее всего, вы захотите создать форму, которую они смогут заполнить. В этой статье мы покажем, что необходимо знать, чтобы создать удобную и надежную форму.If you're creating an app that requires users to input a significant amount of information, chances are you'll want to create a form for them to fill out. This article will show you what you need to know in order to create a form that is useful and robust.

Это не руководство.This is not a tutorial. Если оно вам требуется, используйте наше руководство по адаптивному макету, в котором приводятся пошаговые инструкции.If you want one, see our adaptive layout tutorial, which will provide you with a step-by-step guided experience.

Мы рассмотрим, какие элементы управления XAML входят в форму, как лучше всего разместить их на странице и как оптимизировать форму для изменения размеров экрана.We'll discuss what XAML controls go into a form, how to best arrange them on your page, and how to optimize your form for changing screen sizes. В связи с тем, что по своей сути форма определяет относительное положение визуальных элементов, давайте сначала рассмотрим макет страницы с XAML.But because a form is about the relative position of visual elements, let's first discuss page layout with XAML.

Что необходимо знать?What do you need to know?

В UWP нет отдельного элемента формы, который можно добавить в приложение и настроить.UWP does not have an explicit form control that you can add to your app and configure. Вместо этого необходимо создать форму, разместив набор элементов пользовательского интерфейса на странице.Instead, you'll need to create a form by arranging a collection of UI elements on a page.

Для этого необходимо понимать, что такое панели макета.To do so, you'll need to understand layout panels. Это контейнеры, которые содержат элементы пользовательского интерфейса в приложении и позволяют упорядочивать и группировать их.These are containers that hold your app's UI elements, allowing you to arrange and group them. Размещение панелей макета в других панелях макета обеспечивает больший контроль над тем, где и как ваши элементы отображаются относительно друг друга.Placing layout panels within other layout panels gives you a great deal of control over where and how your items display in relation to one another. Это также сильно упрощает адаптацию приложения для изменения размеров экрана.This also makes it far easier to adapt your app to changing screen sizes.

Прочтите эту документацию по панелям макета.Read this documentation on layout panels. Так как формы обычно отображаются в одном или нескольких вертикальных столбцах, вам может потребоваться сгруппировать похожие элементы в StackPanel и упорядочить их в RelativePanel при необходимости.Because forms are usually displayed in one or more vertical columns, you'll want to group similar items in a StackPanel, and arrange those within a RelativePanel if you need to. Начните группировать некоторые панели сейчас. Если вам потребуется образец, ниже приводится базовая структура макета для формы с двумя столбцами.Start putting together some panels now — if you need a reference, below is a basic layout framework for a two-column form:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Customer">
        <!--Save and Cancel buttons-->
    </StackPanel>
</RelativePanel>

Какие компоненты составляют форму?What goes in a form?

Вам потребуется заполнить форму различными элементами управления XAML.You'll need to fill your form with an assortment of XAML Controls. Вероятно, они вам знакомы, но при необходимости вы всегда можете освежить свои знания, прочитав соответствующий раздел.You're probably familiar with those, but feel free to read up if you need a refresher. В частности, вам потребуются элементы управления, позволяющие пользователю вводить текст или выбирать какое-либо значение из списка.In particular, you'll want controls that allow your user to input text or choose from a list of values. Это основной список элементов, которые можно добавить. Вам не требуется читать о них все, просто ознакомьтесь с ними, чтобы понять, как они выглядят и работают.This is a basic list of options you could add – you don't need to read everything about them, just enough so you understand what they look like and how they work.

  • TextBox позволяет пользователю вводить текст в вашем приложении.TextBox lets a user input text into your app.
  • ToggleSwitch позволяет пользователю выбрать один из двух вариантов.ToggleSwitch lets a user choose between two options.
  • DatePicker дает пользователю возможность выбора даты.DatePicker lets a user select a date value.
  • TimePicker дает пользователю возможность выбора времени.TimePicker lets a user select a time value.
  • ComboBox разворачивается для отображения списка предлагаемых к выбору вариантов.ComboBox expand to display a list of selectable items. Подробнее об этом рассказывается здесь.You can learn more about them here

Также может потребоваться добавить кнопки, чтобы пользователь мог сохранить или отменить результат.You also might want to add buttons, so the user can save or cancel.

Форматирование элементов управления в макетеFormat controls in your layout

Вы знаете, как расположить панели макета и какие элементы требуется добавить, но как они должны форматироваться?You know how to arrange layout panels and have items you'd like to add, but how should they be formatted? На странице форм приводятся некоторые рекомендации по оформлению.The forms page has some specific design guidance. Полезные советы можно найти в разделах Типы форм и Макет.Read through the sections on Types of forms and layout for useful advice. Чуть позже мы более подробно обсудим специальные возможности и относительный макет.We'll discuss accessibility and relative layout more shortly.

Учитывая эти советы, начните добавлять необходимые элементы управления в макет и не забывайте давать им имена и размещать их надлежащим образом.With that advice in mind, you should start adding your controls of choice into your layout, being sure they're given labels and spaced properly. В качестве примера приводим пустую структуру для одностраничной формы с использованием приведенного выше макета, элементов управления и рекомендаций по оформлению.As an example, here's the bare-bones outline for a single-page form using the above layout, controls, and design guidance:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" HorizontalAlignment="Left" />
            <RelativePanel>
                <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" HorizontalAlignment="Left" />
                <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0" RelativePanel.RightOf="City">
                    <!--List of valid states-->
                </ComboBox>
            </RelativePanel>
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.Below="Customer">
        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <DatePicker x:Name="TargetInstallDate" Header="Target install Date" HorizontalAlignment="Left" Margin="0,24,0,0"></DatePicker>
        <TimePicker x:Name="InstallTime" Header="Install Time" HorizontalAlignment="Left" Margin="0,24,0,0"></TimePicker>
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Associate">
        <Button Content="Save" Margin="24" />
        <Button Content="Cancel" Margin="24" />
    </StackPanel>
</RelativePanel>

Вы можете настроить элементы управления с помощью дополнительных свойств для улучшения их внешнего вида.Feel free to customize your controls with more properties for a better visual experience.

Обеспечение гибкости макетаMake your layout responsive

Пользователи могут просматривать ваш пользовательский интерфейс на различных устройствах с разной шириной экрана.Users might view your UI on a variety of devices with different screen widths. Чтобы обеспечить удобство использования независимо от экрана, следует использовать гибкий дизайн.To ensure that they have a good experience regardless of their screen, you should use responsive design. Прочтите информацию на этой странице, чтобы найти полезные советы по философии дизайна, которые помогут вам в дальнейшей работе.Read through that page for good advice on the design philosophies to keep in mind as you proceed.

На странице Гибкие макеты на основе XAML приведены подробные сведения о том, как это реализовать.The Responsive layouts with XAML page gives a detailed overview of how to implement this. Сейчас мы подробно рассмотрим гибкие макеты и визуальные состояния в XAML.For now, we'll focus on fluid layouts and visual states in XAML.

Структура базовой формы, которую мы составили, уже соответствует понятию гибкого макета, так как она зависит главным образом от относительного положения элементов управления с минимальным использованием конкретных положений и размеров в пикселях.The basic form outline that we've put together is already a fluid layout, as it's depending mostly on the relative position of controls with only minimal use of specific pixel sizes and positions. Однако это руководство может пригодиться вам в будущем при создании другого пользовательского интерфейса.Keep this guidance in mind for more UIs you might create in the future, though.

Более важным аспектом создания гибких макетов являются визуальные состояния.More important to responsive layouts are visual states. Визуальное состояние определяет значения свойств, применяемые к определенному элементу, когда выполняется какое-либо условие.A visual state defines property values that are applied to a given element when a given condition is true. Здесь можно прочитать, как это сделать на языке XAML, а затем реализовать в форме.Read up on how to do this in xaml, and then implement them into your form. Вот как может выглядеть очень простой образец из нашего предыдущего примера.Here's what a very basic one might look like in our previous sample:

<Page ...>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="Associate.(RelativePanel.RightOf)" Value="Customer"/>
                        <Setter Target="Associate.(RelativePanel.Below)" Value=""/>
                        <Setter Target="Save.(RelativePanel.Below)" Value="Customer"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <RelativePanel>
            <!-- Customer StackPanel -->
            <!-- Associate StackPanel -->
            <!-- Save StackPanel -->
        </RelativePanel>
    </Grid>
</Page>

Важно!

При использовании StateTriggers всегда следует убедиться, что свойство VisualStateGroups присоединено к первому дочернему элементу корня.When you use StateTriggers, always ensure that VisualStateGroups is attached to the first child of the root. (Здесь Grid — это первый дочерний элемент корня Page.)Here, Grid is the first child of the root Page element.

Создание визуальных состояний для самых разных размеров экрана непрактично, но и создание лишь пары состояний, вероятно, окажет незначительное влияние на работу пользователей вашего приложения.It's not practical to create visual states for a wide array of screen sizes, nor are more than a couple likely to have significant impact on the user experience of your app. Вместо этого мы рекомендуем при разработке дизайна опираться на несколько ключевых точек останова. Узнать об этом больше можно здесь.We recommend designing instead for a few key breakpoints - you can read more here.

Добавление поддержки специальных возможностейAdd accessibility support

Теперь у вас есть продуманный макет, который реагирует на изменение размеров экрана. Последняя область, где можно улучшить взаимодействие с пользователем, — добавление специальных возможностей в приложение.Now that you have a well-constructed layout that responds to changes in screen sizes, a last thing you can do to improve the user experience is to make your app accessible. Сюда можно включить множество доработок, но в нашей форме это реализуется проще, чем кажется.There's a lot that can go into this, but in a form like this one it's easier than it looks. Обратите внимание на следующее.Focus on the following:

  • Поддержка клавиатуры — обеспечьте соответствие порядка элементов в панелях вашего пользовательского интерфейса их отображению на экране, чтобы пользователь мог легко перемещаться по ним с помощью клавиши TAB.Keyboard support - ensure the order of elements in your UI panels match how they're displayed on screen, so a user can easily tab through them.
  • Поддержка средств чтения с экрана — следите за тем, чтобы все элементы управления имели говорящее за себя имя.Screen reader support - ensure all your controls have a descriptive name.

При создании более сложных макетов с дополнительными визуальными элементами необходимо использовать контрольный список специальных возможностей для получения дополнительных сведений.When you're creating more complex layouts with more visual elements, you'll want to consult the accessibility checklist for more details. В конце концов, хотя специальные возможности в приложении необязательны, они помогают привлечь более широкую аудиторию.After all, while accessibility isn't necessary for an app, it helps it reach and engage a larger audience.

Дальнейшая работаGoing further

Несмотря на то, что здесь вы создали форму, принципы макетов и элементов управления применяются во всех пользовательских интерфейсах на XAML, которые можно создать.Though you've created a form here, the concepts of layouts and controls are applicable across all XAML UIs you might construct. Вы всегда можете снова прочитать документы, ссылки на которые мы здесь приводим, и поэкспериментировать со своей формой, добавляя новые функции пользовательского интерфейса и отлаживая работу пользователя с ним.Feel free to go back through the docs we've linked you to and experiment with the form you have, adding new UI features and further refining the user experience. Пошаговое руководство в виде более подробных описаний функций макета приведено в нашем руководстве по адаптивному макету.If you want step-by-step guidance through more detailed layout features, see our adaptive layout tutorial

Формы также существуют не в вакууме — можно пройти на один шаг дальше и включить свою форму в шаблон основных и подробных данных или элемент управления Pivot.Forms also don't have to exist in a vacuum - you could go one step forward and embed yours within a master/details pattern or a pivot control. Также, если вы хотите поработать с кодом программной части своей формы, то можете приступить к работе с разделом общих сведений о событиях.Or if you want to get to work on the code-behind for your form, you might want to get started with our events overview.

Полезные интерфейсы API и документыUseful APIs and docs

Вот краткое описание интерфейсов API и другая полезная документация, которая поможет вам приступить к работе с привязкой данных.Here's a quick summary of APIs and other useful documentation to help you get started working with Data Binding.

Полезные интерфейсы APIUseful APIs

APIAPI ОписаниеDescription
Удобные элементы управления для формControls useful for forms Список удобных элементов управления вводом для создания форм и базовые инструкции по их использованию.A list of useful input controls for creating forms, and basic guidance of where to use them.
GridGrid Панель для размещения элементов в несколько строк и столбцов.A panel for arranging elements in multi-row and multi-column layouts.
RelativePanelRelativePanel Панель для размещения элементов относительно других элементов и границ панели.A panel for arraging items in relation to other elements and to the panel's boundaries.
StackPanelStackPanel Панель для упорядочения элементов в одной горизонтальной или вертикальной полосе.A panel for arranging elements into a single horizontal or vertical line.
VisualStateVisualState Позволяет задать внешний вид элементов пользовательского интерфейса, когда они находятся в различных состояниях.Allows you to set the appearance of UI elements when they're in particular states.

Полезные документыUseful docs

РазделTopic ОписаниеDescription
Обзор специальных возможностейAccessibility overview Общие сведения о специальных возможностях в приложениях.A broad-scale overview of accessibility options in apps.
Accessibility checklist (Контрольный список специальных возможностей)Accessibility checklist Практический контрольный список для обеспечения соответствия стандартам специальных возможностей.A practical checklist to ensure your app meets accessibility standards.
Общие сведения о событияхEvents overview Сведения о добавлении и структуризации событий для обработки действий пользовательского интерфейса.Details on adding and structuring events to handle UI actions.
ФормыForms Общее руководство по созданию форм.Overall guidance for creating forms.
Панели макетаLayout panels Обзор типов панелей макета и их использования.Provides an overview of the types of layout panels and where to use them.
Шаблон основных и подробных данныхMaster/details pattern Шаблон проектирования, который можно реализовать с одной или несколькими формами.A design pattern that can be implemented around one or multiple forms.
Элемент управления PivotPivot control Элемент управления, который может содержать одну или несколько форм.A control that can contain one or multiple forms.
Гибкий дизайнResponsive design Общие сведения об основных принципах адаптивного дизайна.An overview of large-scale responsive design principles.
Гибкие макеты на основе XAMLResponsive layouts with XAML Конкретные сведения о визуальных состояниях и других реализациях адаптивного дизайна.Specific information on visual states and other implementations of responsive design.
Размеры экранов для адаптивного дизайнаScreen sizes for responsive design Рекомендации по размерам экрана, для которых необходимо предусматривать гибкие макеты.Guidance on which screen sizes to which responsive layouts should be scoped.

Полезные примеры кодаUseful code samples

Пример кодаCode sample ОписаниеDescription
Руководство по адаптивным макетамAdaptive layout tutorial Пошаговое руководство по адаптивным макетам и гибкому дизайну.A step-by-step guided experience through adaptive layouts and responsive design.
База данных заказов клиентовCustomer Orders Database Посмотрите макеты и формы в действии в корпоративном многостраничном примере.See layout and forms in action on a multi-page enterprise sample.
Коллекция элементов управления XAMLXAML Controls Gallery Ознакомьтесь с коллекцией элементов управления XAML и способами их реализации.See a selection of XAML controls, and how they're implemented.
Дополнительные примеры кодаAdditional code samples Выберите Элементы управления, макет и текст из раскрывающегося списка категорий, чтобы просмотреть соответствующие примеры кода.Choose Controls, layout, and text in the category drop-down list to see related code samples.