양식

양식은 사용자로부터 데이터를 수집하고 제출하는 컨트롤 그룹입니다. 양식은 일반적으로 설정 페이지, 설문 조사, 계정 만들기 등에 사용됩니다.

이 문서에서는 양식에 대한 XAML 레이아웃을 만들기 위한 디자인 지침에 대해 설명합니다.

양식의 예

양식을 사용해야 하는 경우는 언제인가요?

양식은 서로 명확하게 관련된 데이터 입력을 수집하기 위한 전용 페이지입니다. 사용자로부터 데이터를 명시적으로 수집해야 하는 경우 양식을 사용해야 합니다. 사용자가 다음을 수행할 수 있는 양식을 만들 수 있습니다.

계정에 로그인
계정 등록
개인 정보 또는 표시 옵션과 같은 앱 설정 변경
설문 조사 수행
항목 구매
피드백 제공

양식 유형

사용자 입력을 제출하고 표시하는 방법을 고려할 때 다음과 같은 두 가지 형식의 양식이 있습니다.

1. 즉시 업데이트

설정 페이지

사용자가 양식의 값 변경 결과를 즉시 확인하도록 하려면 즉시 업데이트 양식을 사용합니다. 예를 들어 설정 페이지에서 현재 선택 항목이 표시되고 선택 항목에 대한 변경 내용이 즉시 적용됩니다. 앱의 변경 내용을 승인하려면 각 입력 컨트롤 에 이벤트 처리기를 추가 해야 합니다. 사용자가 입력 컨트롤을 변경하면 앱이 적절하게 응답할 수 있습니다.

2. 단추로 제출

다른 형식의 폼을 사용하면 사용자가 단추를 클릭하여 데이터를 제출할 시기를 선택할 수 있습니다.

이러한 형식의 양식은 사용자가 응답할 수 있는 유연성을 제공합니다. 일반적으로 이 형식의 양식은 자유 형식 입력 필드를 더 많이 포함하므로 더 다양한 응답을 받습니다. 제출 시 유효한 사용자 입력 및 적절한 형식의 데이터를 보장하려면 다음 권장 사항을 고려하세요.

올바른 컨트롤(즉, 일정 날짜에 TextBox 대신 CalendarDatePicker 사용)을 사용하여 잘못된 정보를 제출할 수 없도록 합니다. 나중에 입력 컨트롤 섹션에서 양식에서 적절한 입력 컨트롤을 선택하는 방법은 자세히 알아보세요.
TextBox 컨트롤을 사용하는 경우 PlaceholderText 속성을 사용하여 원하는 입력 형식의 힌트를 사용자에게 제공합니다.
InputScope 속성을 사용하여 컨트롤의 예상 입력을 표시하여 사용자에게 적절한 화상 키보드를 제공합니다.
레이블에 별표 *를 사용하여 필수 입력을 표시합니다.
모든 필수 정보가 입력될 때까지 제출 단추를 사용하지 않도록 설정합니다.
제출 시 잘못된 데이터가 있는 경우 강조 표시된 필드 또는 테두리가 있는 잘못된 입력으로 컨트롤을 표시하고 사용자가 양식을 다시 제출하도록 요구합니다.
네트워크 연결 실패와 같은 다른 오류의 경우 사용자에게 적절한 오류 메시지를 표시해야 합니다.

Layout

사용자 환경을 용이하게 하고 사용자가 올바른 입력을 입력할 수 있도록 하려면 양식에 대한 레이아웃을 디자인하기 위한 다음 권장 사항을 고려하세요.

Labels

레이블은 왼쪽 맞춤으로 입력 컨트롤 위에 배치해야 합니다. 많은 컨트롤에는 레이블을 표시하는 기본 제공 Header 속성이 있습니다. Header 속성이 없는 컨트롤의 경우 또는 컨트롤 그룹에 레이블을 지정하려면 TextBlock 을 대신 사용할 수 있습니다.

접근성을 위해 디자인하려면 모든 개별 및 컨트롤 그룹에 레이블을 지정하여 사용자 및 화면 읽기 프로그램 모두에 대한 명확성을 제공합니다.

글꼴 스타일의 경우 기본 Windows 서체 계열을 사용합니다. 페이지 제목, TitleTextBlockStyle 그룹 제목 및 SubtitleTextBlockStyle 컨트롤 레이블에 사용합니다BodyTextBlockStyle.

하세요	하지 마세요

Spacing

컨트롤 그룹을 서로 시각적으로 구분하려면 정렬, 여백 및 안쪽 여백을 사용합니다. 개별 입력 컨트롤의 높이가 80px이고 간격은 24px여야 합니다. 입력 컨트롤 그룹은 간격이 48px여야 합니다.

양식 그룹

칼럼

열을 만들면 특히 큰 화면 크기에서 양식의 불필요한 공백을 줄일 수 있습니다. 그러나 다중 열 양식을 만들려는 경우 열 수는 페이지의 입력 컨트롤 수와 앱 창의 화면 크기에 따라 달라집니다. 수많은 입력 컨트롤로 화면을 압도하는 대신 양식에 대해 여러 페이지를 만드는 것이 좋습니다.

하세요	하지 마세요

반응형 레이아웃

화면 또는 창 크기가 변경되면 양식의 크기가 조정되므로 사용자가 입력 필드를 간과하지 않습니다. 자세한 내용은 반응형 디자인 기술을 참조하세요. 예를 들어 화면 크기에 관계없이 양식의 특정 영역을 항상 볼 수 있도록 유지할 수 있습니다.

양식 포커스

탭 정지

사용자는 키보드를 사용하여 탭 정지를 사용하여 컨트롤을 탐색할 수 있습니다. 기본적으로 컨트롤의 탭 순서는 XAML에서 만들어진 순서를 반영합니다. 기본 동작을 재정의하려면 컨트롤의 IsTabStop 또는 TabIndex 속성을 변경합니다.

폼 컨트롤에 대한 탭 포커스

Input 컨트롤

입력 컨트롤은 사용자가 양식에 정보를 입력할 수 있도록 하는 UI 요소입니다. 양식에 추가할 수 있는 몇 가지 일반적인 컨트롤은 아래에 나열되어 있으며 사용 시기에 대한 정보도 나와 있습니다.

문자 입력

제어	사용	예시
텍스트박스	한 줄 또는 여러 줄의 텍스트 캡처	이름, 자유 형식 응답 또는 피드백
비밀번호 상자	문자를 숨겨 개인 데이터 수집	암호, SSN(사회 보장 번호), PIN, 신용 카드 정보
자동 제안 상자	사용자가 입력할 때 해당 데이터 집합의 제안 목록 표시	데이터베이스 검색, 메일 수신처 줄, 이전 검색어
리치 에디트박스	서식이 지정된 텍스트, 하이퍼링크 및 이미지를 사용하여 텍스트 파일 편집	앱에서 파일 업로드, 미리 보기 및 편집

Selection

제어	사용	예시
확인란	하나 이상의 작업 항목 선택 또는 선택 취소	사용 약관에 동의하고, 선택적 항목을 추가하고, 적용되는 모든 항목을 선택합니다.
RadioButton	두 개 이상의 선택 항목 중에서 한 가지 옵션 선택	선택 유형, 배송 방법 등
토글 스위치	두 가지 상호 배타적 옵션 중 하나를 선택합니다.	켜기/끄기

참고: 5개 이상의 선택 항목이 있는 경우 목록 컨트롤을 사용합니다.

Lists

제어	사용	예시
ComboBox	압축 상태에서 시작하고 확장하여 선택 가능한 항목 목록 표시	주 또는 국가/지역과 같은 긴 항목 목록에서 선택
ListView	항목 분류 및 그룹 헤더 할당, 항목 끌어서 놓기, 콘텐츠 큐레이팅 및 항목 다시 정렬	순위 옵션
GridView	이미지 기반 컬렉션 정렬 및 찾아보기	사진, 색, 테마 표시 선택

숫자 입력

제어	사용	예시
슬라이더	연속 숫자 값 범위에서 숫자 선택	백분율, 볼륨, 재생 속도
평가	별을 사용하여 평가	고객 피드백

날짜 및 시간

제어	사용
CalendarView	항상 표시되는 달력에서 단일 날짜 또는 날짜 범위 선택
CalendarDatePicker	상황에 맞는 달력에서 단일 날짜 선택
DatePicker	컨텍스트 정보가 중요하지 않은 경우 지역화된 단일 날짜 선택
TimePicker	단일 시간 값 선택

추가 컨트롤

UWP 컨트롤의 전체 목록은 함수별 컨트롤 인덱스를 참조하세요.

더 복잡하고 사용자 지정 UI 컨트롤을 보려면 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>

두 열로 된 양식 예제

이 예제에서는 입력 컨트롤 외에도 피벗 컨트롤, 아크릴 배경 및 CommandBar 를 사용합니다. 양식 예제의 스크린샷

<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 데이터베이스에 연결하고 완전히 구현된 양식을 보는 방법을 알아보려면 Customers Orders 데이터베이스 앱 샘플을 참조하세요.

피드백

이 페이지가 도움이 되었나요?

Last updated on 2025-11-25