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

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

Мы рассмотрим, какие элементы управления 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>

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

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

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

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

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

Дальнейшее продвижение в этом направлении

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

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

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

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

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

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

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