Формы

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

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

Пример формы

Когда следует использовать форму?

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

Вход в учетную запись
Регистрация учетной записи
Изменение параметров приложения, таких как конфиденциальность или параметры отображения
Провести опрос
Купить товар
Оставить отзыв

Типы форм

При рассмотрении вопроса о том, как вводимые пользователем данные отправляются и отображаются, существует два типа форм:

1. Мгновенное обновление

Страница параметров

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

2. Отправка с помощью кнопки

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

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

Сделать невозможным отправить недопустимые сведения с помощью правильного элемента управления (т. е. использовать CalendarDatePicker, а не TextBox для дат календаря). Дополнительные сведения о выборе соответствующих элементов управления входами в форме см. в разделе "Элементы управления вводом" далее.
При использовании элементов управления TextBox предоставьте пользователям указание требуемого формата ввода со свойством PlaceholderText .
Предоставьте пользователям соответствующую экранную клавиатуру, указав ожидаемые входные данные элемента управления с помощью свойства InputScope .
Пометьте необходимые входные данные звездочкой * на метке.
Отключите кнопку отправки, пока не будут заполнены все необходимые сведения.
Если при отправке есть недопустимые данные, пометьте элементы управления с недопустимыми данными выделенными полями или границами и потребуйте от пользователя повторно отправить форму.
Для других ошибок, таких как сбой сетевого подключения, убедитесь, что пользователю отображается соответствующее сообщение об ошибке.

Макет

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

Наклейки

Метки должны быть выровнены по левому краю и помещены над элементом управления входными данными. Многие элементы управления имеют встроенное свойство Header для отображения метки. Для элементов управления, которые не имеют свойства заголовка или для групп элементов управления, вместо этого можно использовать TextBlock .

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

Для стилей шрифтов используйте шкалу размеров шрифтов Windows по умолчанию. Используется TitleTextBlockStyle для заголовков страниц, SubtitleTextBlockStyle заголовков групп и BodyTextBlockStyle меток элементов управления.

Делать	Не

Spacing

Чтобы визуально отделять группы элементов управления друг от друга, используйте выравнивание, поля и заполнение. Отдельные входные элементы управления имеют высоту 80 пикселей и должны быть расположены на расстоянии 24 пикселей. Группы элементов управления должны располагаться на расстоянии 48 пикселей друг от друга.

формирует группы

Колонны

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

Делать	Не

Отзывчивый макет

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

Фокус форм

Вкладка останавливается

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

Фокусировка на элементе управления в форме при использовании клавиши Tab

Элементы управления вводом

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

Ввод текста

Контроль	Использование	Example
TextBox	Захват одного или нескольких строк текста	Имена, ответы на бесплатные формы или отзывы
ПарольБокс	Сбор частных данных путем скрытия символов	Пароли, номера социального страхования (SSN), ПИН-коды, сведения о кредитной карте
Блок автовнушения	Отображение пользователей списка предложений из соответствующего набора данных по мере их ввода	Поиск в базе данных, строка 'Отправить по электронной почте:', предыдущие запросы
Блок RichEditBox	Изменение текстовых файлов с форматированным текстом, гиперссылками и изображениями	Отправка файла, предварительного просмотра и редактирования в приложении

Отбор

Контроль	Использование	Example
Флажок	Выбор или отмена выбора одного или нескольких элементов действия	Примите условия, добавьте необязательные элементы, выберите все, что применяется
RadioButton	Выберите один вариант из двух или нескольких вариантов	Выберите тип, метод доставки и т. д.
Переключатель	Выберите один из двух взаимоисключающих вариантов	Вкл./выкл.

Примечание. Если есть пять или более элементов выбора, используйте элемент управления списком.

Lists

Контроль	Использование	Example
ComboBox	Запуск в компактном состоянии и развертывание для отображения списка элементов, доступных для выбора	Выбор из длинного списка элементов, таких как государства или страны или регионы
ListView	Классифицировать элементы и назначать заголовки групп, перетаскивать элементы, курировать содержимое и переупорядочение элементов	Параметры ранжирования
GridView	Упорядочивание и просмотр коллекций на основе изображений	Выбор фотографии, цвета, темы отображения

Числовые входные данные

Контроль	Использование	Example
Ползунок	Выберите число из диапазона смежных числовых значений	Проценты, громкость, скорость воспроизведения
Оценка	Оцените звездами	Отзывы клиентов

Дата и время

Контроль	Использование
CalendarView	Выбор одной даты или диапазона дат из всегда видимого календаря
CalendarDatePicker	Выбор одной даты из контекстного календаря
DatePicker	Выберите одну локализованную дату, если контекстная информация не важна
TimePicker	Выберите одно значение времени

Дополнительные элементы управления

Полный список элементов управления UWP см. в индексе элементов управления по функциям.

Для более сложных и настраиваемых элементов управления пользовательским интерфейсом ознакомьтесь с ресурсами, доступными от таких компаний, как Telerik, SyncFusion, DevExpress, Infragistics, ComponentOne и ActiPro.

Пример формы одного столбца

В этом примере используется акриловый список/детализация и элемент управления NavigationView. Снимок экрана: другой пример формы

<StackPanel>
    <TextBlock Text="New Customer" Style="{StaticResource TitleTextBlockStyle}"/>
    <Button Height="100" Width="100" Background="LightGray" Content="Add photo" Margin="0,24" Click="AddPhotoButton_Click"/>
    <TextBox x:Name="Name" Header= "Name" Margin="0,24,0,0" MaxLength="32" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
    <TextBox x:Name="PhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="15" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
    <TextBox x:Name="Email" Header="Email" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <RelativePanel>
        <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
        <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
             <x:String>WA</x:String>
        </ComboBox>
    </RelativePanel>
    <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
    <StackPanel Orientation="Horizontal">
        <Button Content="Save" Margin="0,24" Click="SaveButton_Click"/>
        <Button Content="Cancel" Margin="24" Click="CancelButton_Click"/>
    </StackPanel>  
</StackPanel>

Пример формы двух столбцов

В этом примере используется элемент управления Pivot , акриловый фон и панель команд в дополнение к элементам управления входными данными. Снимок экрана: пример формы

<Grid>
    <Pivot Background="{ThemeResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}" >
        <Pivot.TitleTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="Company Name" Style="{ThemeResource HeaderTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </Pivot.TitleTemplate>
        <PivotItem Header="Orders" Margin="0"/>    
        <PivotItem Header="Customers" Margin="0">
            <!--Form Example-->
            <Grid Background="White">
                <RelativePanel>
                    <StackPanel x:Name="Customer" Margin="20">
                        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="CustomerPhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <RelativePanel>
                            <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="Text" />
                            <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
                                <x:String>WA</x:String>
                            </ComboBox>
                        </RelativePanel>
                        <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
                    </StackPanel>
                    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
                        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="AssociatePhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <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>
                </RelativePanel>
            </Grid>
        </PivotItem>
        <PivotItem Header="Invoices"/>
        <PivotItem Header="Stock"/>
        <Pivot.RightHeader>
            <CommandBar OverflowButtonVisibility="Collapsed" Background="Transparent">
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit" />
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
            </CommandBar>
        </Pivot.RightHeader>
    </Pivot>
</Grid>

Пример базы данных заказов клиентов

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

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-11-25