양식 만들기 및 사용자 지정

사용자가 상당한 양의 정보를 입력해야 하는 앱을 만드는 경우 작성할 양식을 만들 수 있습니다. 이 문서에서는 유용하고 강력한 양식을 만들기 위해 알아야 할 내용을 보여줍니다.

양식에 XAML 컨트롤의 , 페이지에서 가장 잘 정렬하는 방법 및 화면 크기를 변경하기 위해 양식을 최적화하는 방법에 대해 설명합니다. 그러나 폼은 시각적 요소의 상대적 위치에 관한 것이므로 먼저 XAML을 사용하여 페이지 레이아웃을 살펴보겠습니다.

알아야 할 사항

UWP에는 앱에 추가하고 구성할 수 있는 명시적 양식 컨트롤이 없습니다. 대신 페이지에서 UI 요소 컬렉션을 정렬하여 양식을 만들어야 합니다.

이렇게 하려면 레이아웃 패널을 이해해야 합니다. 앱의 UI 요소를 보관하여 정렬하고 그룹화할 수 있는 컨테이너입니다. 다른 레이아웃 패널 내에 레이아웃 패널을 배치하면 항목이 서로 관련하여 표시되는 위치와 방법을 제어할 수 있습니다. 이렇게 하면 화면 크기 변경에 앱을 훨씬 쉽게 적용할 수 있습니다.

레이아웃 패널에 대한 이 설명서를 읽어보세요. 양식은 일반적으로 하나 이상의 세로 열에 표시되므로 유사한 항목들을 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 컨트롤로 양식을 채워야 합니다. 아마도 그것들에 익숙하겠지만, 상기할 필요가 있다면 마음껏 읽어보세요. 특히 사용자가 텍스트를 입력하거나 값 목록에서 선택할 수 있도록 하는 컨트롤을 사용할 수 있습니다. 이 옵션은 추가할 수 있는 기본 옵션 목록입니다. 이에 대한 모든 항목을 읽을 필요가 없으므로 모양과 작동 방식을 이해할 수 있습니다.

텍스트 상자은 사용자가 앱에 텍스트를 입력할 수 있게 합니다.
ToggleSwitch 사용자가 두 가지 옵션 중에서 선택할 수 있습니다.
날짜 선택기 사용자가 날짜 값을 선택할 수 있습니다.
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>

더 나은 시각적 환경을 위해 더 많은 속성을 사용하여 컨트롤을 자유롭게 사용자 지정할 수 있습니다.

레이아웃 응답성 설정

사용자는 화면 너비가 다른 다양한 디바이스에서 UI를 볼 수 있습니다. 화면과 관계없이 좋은 환경을 갖도록 하려면 반응형 디자인사용해야 합니다. 계속 진행하면서 염두에 두어야 할 디자인 철학에 대한 좋은 조언을 보려면 해당 페이지를 읽어보세요.

XAML 페이지의 반응형 레이아웃은 이를 구현하는 방법에 대한 자세한 개요를 제공합니다. 지금은 XAML에서 유동 레이아웃과 시각적 상태에 초점을 맞추겠습니다.

우리가 만든 기본 폼의 개요는 형성이 이미 유체 레이아웃입니다. 이는 주로 컨트롤의 상대적 위치에 의존하며, 특정 픽셀 크기와 위치의 사용은 최소화되었기 때문입니다. 하지만 나중에 만들 수 있는 더 많은 UI에 대해 이 지침을 염두에 두어야 합니다.

반응형 레이아웃에서 더 중요한 것은 시각적 상태입니다. 시각적 상태는 지정된 조건이 참일 때 지정된 요소에 적용되는 속성 값을 정의합니다. 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 요소의 첫 번째 자식입니다.

다양한 화면 크기에 대한 시각적 상태를 만드는 것은 실용적이지 않으며, 두어 가지 화면 크기가 아니면 앱의 사용자 경험에 큰 영향을 미치지 않을 것입니다. 몇 가지 주요 중단점에 맞춰 디자인하는 것을 권장합니다.여기에서 자세히 읽을 수 있습니다.

접근성 지원 추가

화면 크기 변경에 대응하는 잘 구성된 레이아웃이 있으므로, 사용자 경험을 더욱 개선하기 위한 마지막으로 제안할 수 있는 것은 앱을 접근 가능하게 만드는 것입니다. 이런 형태에는 많은 것이 포함될 수 있지만, 이와 같은 형태라면 보기보다 쉽습니다. 다음 사항에 집중합니다.

키보드 지원 - 사용자가 쉽게 탭할 수 있도록 UI 패널의 요소 순서가 화면에 표시되는 방식과 일치하는지 확인합니다.
화면 읽기 프로그램 지원 - 모든 컨트롤에 설명이 포함된 이름이 있는지 확인합니다.

더 많은 시각적 요소를 사용하여 더 복잡한 레이아웃을 만드는 경우 자세한 내용은 접근성 검사 목록 참조하세요. 결국 앱에 접근성이 필요하지는 않지만 더 많은 대상 그룹에 도달하고 참여하도록 도와줍니다.

더 나아가기

여기에서 양식을 만들었지만 레이아웃 및 컨트롤의 개념은 구성할 수 있는 모든 XAML UI에 적용할 수 있습니다. 자유롭게 연결된 문서를 다시 검토하고, 보유한 양식을 실험하며, 새로운 UI 기능을 추가하고, 사용자 경험을 더욱 세밀하게 개선하세요. 더 자세한 레이아웃 기능을 통해 단계별 지침을 원하는 경우 적응형 레이아웃 자습서 참조하세요.

양식은 독립적으로 존재할 필요가 없습니다. 한 단계 더 나아가 목록/세부 정보 패턴 또는 NavigationView에 양식을 포함할 수 있습니다. 또는 양식의 코드 숨김 작업을 수행하려는 경우 이벤트 개요시작할 수 있습니다.

유용한 API 및 문서

다음은 데이터 바인딩 작업을 시작하는 데 도움이 되는 API 및 기타 유용한 설명서의 빠른 요약입니다.

유용한 API

응용 프로그램 인터페이스 (API)	설명
유용한 양식 컨트롤	양식을 만드는 데 유용한 입력 컨트롤 목록과 양식을 사용할 위치에 대한 기본 지침입니다.
그리드	다중 행 및 다중 열 레이아웃의 요소를 정렬하기 위한 패널입니다.
RelativePanel	다른 요소와 패널의 경계를 기준으로 항목을 정렬하기 위한 패널입니다.
StackPanel	요소를 단일 가로 또는 세로 선으로 정렬하기 위한 패널입니다.
VisualState	특정 상태일 때 UI 요소의 모양을 설정할 수 있습니다.

유용한 문서

주제	설명
접근성 개요	앱의 접근성 옵션에 대한 광범위한 개요입니다.
접근성 검사 목록	앱이 접근성 표준을 충족하는지 확인하는 실용적인 검사 목록입니다.
이벤트 개요	UI 작업을 처리하기 위한 이벤트 추가 및 구조화에 대한 세부 정보입니다.
양식	양식을 만들기 위한 전반적인 지침입니다.
레이아웃 패널	레이아웃 패널 유형 및 사용 위치에 대한 개요를 제공합니다.
목록/세부 정보 패턴	하나 이상의 폼을 중심으로 구현할 수 있는 디자인 패턴입니다.
내비게이션뷰	하나 이상의 폼을 포함할 수 있는 컨트롤입니다.
반응형 디자인	대규모 반응형 디자인 원칙에 대한 개요입니다.
XAML을 사용한 반응형 레이아웃	시각적 상태 및 반응형 디자인의 다른 구현에 대한 특정 정보입니다.
반응형 디자인을 위한 화면 크기	반응형 레이아웃의 범위를 지정해야 하는 화면 크기에 대한 지침입니다.

유용한 코드 샘플

코드 샘플	설명
고객 주문 데이터베이스	다중 페이지 엔터프라이즈 샘플에서 작동 중인 레이아웃 및 양식을 참조하세요.
XAML 컨트롤 갤러리	XAML 컨트롤의 선택 사항 및 구현 방법을 참조하세요.
추가 코드 샘플	범주 드롭다운 목록에서 컨트롤, 레이아웃 및 텍스트 선택하여 관련 코드 샘플을 확인합니다.

피드백

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

Last updated on 2025-06-10