Создание и настройка формы

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

Мы обсудим, какие элементы управления XAML включаются в форму, как лучше упорядочить их на вашей странице и как оптимизировать форму для изменения размеров экрана. Но поскольку форма относится к относительной позиции визуальных элементов, давайте сначала обсудим макет страницы с XAML.

Что вам нужно знать?

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

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

Прочитайте эту документацию на панелях макета. Так как формы обычно отображаются в одном или нескольких вертикальных столбцах, вы хотите сгруппировать аналогичные элементы в StackPanelи упорядочить их в RelativePanel, если вам нужно. Начните сейчас объединять некоторые панели — если вам нужна ссылка, ниже приведена основная структура макета для двухколоночной формы:

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

Что включает форма?

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

• TextBox позволяет пользователю вводить текст в приложение.
• ToggleSwitch позволяет пользователю выбрать один из двух вариантов.
• DatePicker позволяет пользователю выбрать значение даты.
• TimePicker позволяет пользователю выбрать значение времени.
• ComboBox разворачивается, чтобы показать список элементов, доступных для выбора. Дополнительные сведения о них можно узнать здесь

Также может быть полезно добавить кнопки , чтобы пользователь мог сохранить или отменить действие.

Форматирование элементов управления в макете

Вы знаете, как упорядочивать панели макета и содержать элементы, которые вы хотите добавить, но как они должны быть отформатированы? Страница форм содержит некоторые конкретные рекомендации по проектированию. Ознакомьтесь с разделами о типах форм и макете для получения полезных рекомендаций. Мы обсудим доступность и относительную верстку в ближайшее время.

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

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

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

Сделать макет адаптивным

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

На странице Адаптивные макеты с помощью XAML содержатся подробные сведения о том, как реализовать эту схему. Теперь мы сосредоточимся на плавных макетах и визуальных состояниях в XAML.

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

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

<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 присоединяется к первому дочернему элементу корневого элемента. Здесь Grid является первым дочерним элементом корневого элемента Page.

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

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

Теперь, когда у вас есть хорошо спроектированный макет, который адаптируется к изменениям в размерах экрана, последнее, что можно сделать, чтобы улучшить взаимодействие с пользователем, — сделать приложение доступным. Есть много нюансов, но в такой форме это проще, чем кажется. Сосредоточьтесь на следующем:

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

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

Продвигаться дальше

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

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

Полезные API и документы

Ниже приведены краткие сведения об API и других полезных документах, которые помогут вам приступить к работе с привязкой данных.

Полезные API

API (Интерфейс программирования приложений)	Описание
Элементы управления , которые полезны для форм	Список полезных элементов управления входным вводом для создания форм и основные рекомендации по их использованию.
Сетка	Панель для упорядочения элементов в макетах с несколькими строками и несколькими столбцами.
RelativePanel (Относительная панель)	Панель для упорядочиния элементов относительно других элементов и границ панели.
Панель стека (StackPanel)	Панель для упорядочения элементов в одну горизонтальную или вертикальную линию.
VisualState	Позволяет задать внешний вид элементов пользовательского интерфейса в определенных состояниях.

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

Тема	Описание
Обзор специальных возможностей	Обзор широкого спектра параметров специальных возможностей в приложениях.
Контрольный список доступности	Практический контрольный список для обеспечения соответствия приложению стандартам специальных возможностей.
Обзор событий	Сведения о добавлении и структурировании событий для обработки действий пользовательского интерфейса.
формы	Общее руководство по созданию форм.
панели макета	Представляет обзор типов панелей макетов и мест, где их следует использовать.
шаблон списка и деталей	Шаблон проектирования, который можно реализовать для одной или нескольких форм.
НавигацияПросмотр	Элемент управления, который может содержать одну или несколько форм.
адаптивный дизайн	Обзор крупномасштабных принципов адаптивного проектирования.
Адаптивные макеты с XAML	Конкретная информация о визуальных состояниях и других реализациях адаптивного дизайна.
Размеры экрана для адаптивного дизайна	Руководство по определению соответствия размеров экранов соответствующим адаптивным макетам.

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

Пример кода	Описание
база данных заказов клиентов	Посмотрите на макет и формы в действии на примере многостраничного образца.
Галерея элементов управления XAML	Ознакомьтесь с выбором элементов управления XAML и их реализацией.
Дополнительные примеры кода	Выберите Элементы управления, макет и текст в раскрывающемся списке категорий, чтобы просмотреть связанные примеры кода.