양식 만들기 및 사용자 지정

아티클
07/13/2023

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

양식에 들어갈 XAML 컨트롤, 페이지에서 이를 가장 잘 정렬하는 방법 및 화면 크기를 변경하기 위해 양식을 최적화하는 방법을 설명합니다. 하지만 양식은 시각적 요소의 상대 위치에 대한 것이기 때문에 먼저 XAML이 있는 페이지 레이아웃을 살펴보겠습니다.

알아야 할 사항?

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

이렇게 하기 위해 레이아웃 패널을 파악해야 합니다. 레이아웃 패널은 앱의 UI 요소를 포함하고 정렬 및 그룹화할 수 있는 컨테이너입니다. 다른 레이아웃 패널 내에 레이아웃 패널을 배치하면 각 항목 사이에 대해 항목을 표시할 위치와 방법에 대한 상당한 제어를 제공합니다. 또한 앱이 훨씬 더 쉽게 화면 크기를 변경할 수 있게 조정할 수 있습니다.

레이아웃 패널에 대한 설명서를 읽어 보세요. 양식은 일반적으로 하나 이상의 세로 열에서 표시되기 때문에 유사한 항목을 StackPanel에 그룹화하고, 필요한 경우 RelativePanel 내에 정렬할 수 있습니다. 이제 일부 패널을 결합하기 시작합니다. 참조가 필요한 경우 아래에 2열 양식에 대한 기본 레이아웃 프레임워크가 표시됩니다.

<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>

시각적 환경 개선을 위해 더 많은 속성이 있는 컨트롤을 사용자 지정할 수 있습니다.

반응형 레이아웃 만들기

사용자는 서로 다른 화면 폭의 다양한 디바이스에서 UI를 볼 수 있습니다. 화면에 관계없이 좋은 환경을 제공하기 위해 반응형 디자인을 사용해야 합니다. 진행하면서 유의해야 한 디자인 철학에 대한 좋은 조언을 해당 페이지를 통해 읽어보세요.

XAML을 사용한 반응형 레이아웃 페이지에서는 이를 구현하는 방법을 자세히 설명합니다. 지금은 유동 레이아웃 및 XAML에서 시각적 상태에 집중합니다.

준비한 기본 양식 개요는 특정 픽셀 크기와 위치를 최소로 사용하는 상대 컨트롤 위치를 따르므로 이미 유동 레이아웃입니다. 그렇지만 추후에 만들 수 있는 추가 UI를 위해 이 지침을 염두에 두세요.

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

Important

StateTriggers를 사용하는 경우 VisualStateGroups가 루트의 첫 번째 자식에 연결되어 있는지 항상 확인합니다. 여기서 Grid는 루트 Page 요소의 첫 번째 자식입니다.

다양한 화면 크기의 시각적 상태를 만드는 것은 실용적이지 않으며 두 개 이상의 화면은 앱의 사용자 환경에 큰 영향을 줄 수 있습니다. 대신 몇 가지 주요 중단점에 맞춰 디자인하는 것이 좋습니다. 여기에서 더 자세히 알아볼 수 있습니다.

접근성 지원 추가

화면 크기의 변경에 대응하는 잘 생성된 레이아웃이 있으므로 사용자 환경을 개선하기 위해 할 수 있는 마지막 작업은 앱에 액세스할 수 있도록 만드는 것입니다. 여러 방법을 사용할 수 있지만 이와 같은 양식에서는 보이는 것보다 쉽습니다. 다음에 중점을 둡니다.

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

더 많은 시각적 요소의 더 복잡한 레이아웃을 만드는 경우 자세한 내용은 접근성 검사 목록를 참조하세요. 결국 앱에 접근성이 필요 없지만 더 많은 고객을 유치하고 참여하게 만드는 데 도움이 됩니다.

추가 작업

여기에서 양식을 만들었지만 레이아웃과 컨트롤의 개념은 생성할 수 있는 모든 XAML UI 전반에서 적용됩니다. 자유롭게 제공한 링크를 통해 문서로 돌아가 가지고 있는 양식을 시험해보고, 새로운 UI 기능을 추가하고 사용자 환경을 구체화하세요. 더 자세한 레이아웃 기능에 대한 단계별 지침을 원한다면 적응형 레이아웃 자습서를 참조하세요.

양식을 비워둘 필요도 없습니다. 한발 더 나아가서 목록/세부 정보 패턴 또는 NavigationView 내에 사용자의 양식을 포함할 수 있습니다. 또는 양식의 코드 뒤에서 작업하려는 경우 이벤트 개요로 시작할 수 있습니다.

유용한 API 및 문서

여기에 데이터 바인딩을 시작하는 데 도움이 되는 API의 빠른 요약 및 다른 유용한 문서가 제공됩니다.

유용한 API

API	설명
양식에 유용한 컨트롤	양식을 만드는 데 유용한 입력 컨트롤 목록과 이 컨트롤을 어디에 사용할지에 대한 기본 지침입니다.
그리드	다중 행/열 레이아웃의 요소를 배열하는 패널입니다.
RelativePanel	다른 요소 및 패널의 경계를 기준으로 항목을 배열하는 패널입니다.
StackPanel	하나의 가로줄이나 세로줄로 요소를 배열하는 패널입니다.
VisualState	특정 상태일 때 UI 요소의 모양을 설정할 수 있습니다.

유용한 문서

토픽	설명
접근성 개요	앱에서 접근성 옵션에 대한 광범위한 개요입니다.
접근성 검사 목록	앱이 접근성 표준을 준수하는지 확인하기 위한 실용적인 검사 목록입니다.
이벤트 개요	UI 작업을 처리하기 위한 이벤트 추가 및 구조화에 대해 자세히 설명합니다.
양식	양식 작성에 대한 전반적인 지침입니다.
레이아웃 패널	레이아웃 패널의 유형과 용도에 대한 개요를 제공합니다.
목록/세부 정보 패턴	하나 또는 여러 개의 양식 주변에 구현할 수 있는 디자인 패턴입니다.
NavigationView	하나 또는 여러 개의 양식을 포함할 수 있는 컨트롤입니다.
반응형 디자인	대규모 반응형 디자인 원칙에 대한 개요입니다.
XAML을 사용한 반응형 레이아웃	반응형 디자인의 시각적 상태 및 기타 구현에 대한 정보입니다.
반응형 디자인의 화면 크기	반응형 레이아웃의 범위여야 하는 화면 크기에 대한 지침입니다.

유용한 코드 샘플

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

다음을 통해 공유