양식 만들기 및 사용자 지정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. 대신, 페이지에서 UI 요소 컬렉션을 정렬하여 양식을 만들어야 합니다.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. 레이아웃 패널은 앱의 UI 요소를 포함하고 정렬 및 그룹화할 수 있는 컨테이너입니다.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. 이제 일부 패널을 결합하기 시작합니다. 참조가 필요한 경우 아래에 2열 양식에 대한 기본 레이아웃 프레임워크가 표시됩니다.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

사용자는 서로 다른 화면 폭의 다양한 디바이스에서 UI를 볼 수 있습니다.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. 그렇지만 추후에 만들 수 있는 추가 UI를 위해 이 지침을 염두에 두세요.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:

  • 키보드 지원 - UI 패널에서 요소의 순서가 화면에 표시되는 방식과 어떻게 일치하는지 확인하여 사용자가 이 사이를 쉽게 이동할 수 있도록 합니다.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 UI 전반에서 적용됩니다.Though you've created a form here, the concepts of layouts and controls are applicable across all XAML UIs you might construct. 자유롭게 제공한 링크를 통해 문서로 돌아가 가지고 있는 양식을 시험해보고, 새로운 UI 기능을 추가하고 사용자 환경을 구체화하세요.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

양식은 비워둘 필요도 없습니다. 한 발자국 나아가 마스터/세부 정보 패턴 또는 피벗 컨트롤 내에 자신의 양식을 채울 수 있습니다.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.
그리드Grid 다중 행/열 레이아웃의 요소를 배열하는 패널입니다.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 특정 상태일 때 UI 요소의 모양을 설정할 수 있습니다.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 앱이 접근성 표준을 준수하는지 확인하기 위한 실용적인 검사 목록입니다.A practical checklist to ensure your app meets accessibility standards.
이벤트 개요Events overview UI 작업을 처리하기 위한 이벤트 추가 및 구조화에 대해 자세히 설명합니다.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.
피벗 컨트롤Pivot control 하나 또는 여러 개의 양식을 포함할 수 있는 컨트롤입니다.A control that can contain one or multiple forms.
반응형 디자인Responsive design 대규모 반응형 디자인 원칙에 대한 개요입니다.An overview of large-scale responsive design principles.
XAML을 사용한 반응형 레이아웃Responsive 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.
XAML 컨트롤 갤러리XAML 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.