uwp
적응 UI

AdaptiveTrigger를 사용하여 UI 레이아웃 변경

UWP 응용 프로그램은 윈도우 모드 및 여러 장치에서 실행할 수 있습니다. 로우 엔드 폰에서 거대한 표면 허브 스크린까지 다양한 화면 크기로 디스플레이 할 수 있습니다. 상대 위치 지정을 사용하면 많은 시나리오에서 충분하지만 창 크기가 커지면 페이지의 컨트롤을 다른 위치로 이동하여 레이아웃을 완전히 변경하는 것이 항상 재미 있습니다.

이 샘플에서는 좁은 화면에서는 세로 레이아웃을 사용하고 와이드 스크린에서는 가로 레이아웃을 사용합니다. 대형 화면에서 항목의 크기도 변경합니다.

<Border x:Name="item2"
        Background="Aquamarine"
        Width="50"
        Height="50">
    <TextBlock Text="Item 2"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<Border x:Name="item3"
        Background="LightCoral"
        Width="50"
        Height="50">
    <TextBlock Text="Item 3"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>

        <VisualState x:Name="ultrawide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
                <Setter Target="item1.Width" Value="100" />
                <Setter Target="item1.Height" Value="100" />
                <Setter Target="item2.Width" Value="100" />
                <Setter Target="item2.Height" Value="100" />
                <Setter Target="item3.Width" Value="100" />
                <Setter Target="item3.Height" Value="100" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="wide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="narrow" />
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

창 크기를 조정하면 시스템은 현재 창 너비와 AdaptiveTrigger의 최소 너비를 비교합니다. 현재 너비가 최소 너비보다 크거나 같으면 트리거가 활성화되고 해당 VisualState가 표시됩니다.

다음은 여러 상태에 대한 출력입니다.

제한된

넓은

울트라 와이드