XAML을 사용하여 앱 디자인: 크기 조정

크기 조정에 예상대로 응답하도록 C#/XAML 앱을 디자인하세요.

Windows 8의 매력적인 기능은 동시에 둘 이상의 앱을 화면에 표시하는 기능입니다. 사용자가 화면 위쪽에서 아래로 끌 때 앱을 화면 왼쪽이나 오른쪽으로 밀어 새 앱을 표시할 공간을 만들 수 있습니다. 앱에서 이러한 경우를 준비해야 하며, 필요한 경우 현재 화면에 표시되는 방식이나 내용을 변경해야 합니다.

보기에 하나의 앱을 표시하고 두 번째 앱을 열고 표시할 공간이 있는 화면

XAML 그리드를 사용하여 컨트롤을 배치한 경우 기본적으로 항목이 제대로 표시될 수도 있지만 몇 가지 사항을 미세 조정할 수 있습니다. XAML을 사용하여 앱 디자인: 방향에서 설명한 대로 동일한 메시지에 응답하고 Visual State Manager를 사용하는 것이 좋습니다. 예를 들어 나머지 컨트롤에 추가 공간을 제공하기 위해 일부 컨트롤을 숨기는 Narrow라는 새 시각적 상태를 만들 수 있습니다. 방법은 다음과 같습니다.

화면 크기 변경 검색

먼저 .cs 코드 숨김 페이지에 방향 변경 작업을 위한 처리기를 추가하겠습니다(없는 경우).


        public MyPage()
        {
            this.InitializeComponent();
           
            // Add the handler
            Window.Current.SizeChanged += Current_SizeChanged;
         }
        
        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            double width = e.Size.Width;

            // Obtain the orientation - Landscape or Portait
            string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();

            // Test to see if the app is fullscreen or not
            if (ApplicationView.GetForCurrentView().IsFullScreen)
            {
                // It is, so handle Landscape or Portrait visual states as before
                VisualStateManager.GoToState(this, CurrentViewState, false);
                return;
            }

            // At this point, the screen is split, so decide if it's narrow enough
            // to require a new visual state

            if (width < 800)
                VisualStateManager.GoToState(this, "Narrow", false);
        }



앱이 현재 전체 화면인지 여부를 알려주는 ApplicationView.GetForCurrentView().IsFullScreen 처리기의 두 번째 속성을 사용합니다. 전체 화면이 아닌 경우 분할해야 하며, 너비가 매우 좁아지면 새 시각적 상태를 활성화할 수 있습니다.

새 시각적 상태 지원

세로/가로 상태를 사용하여 이전과 마찬가지로 새 시각적 상태를 정의합니다. 이 예제에서는 표시되는 정보 열 중 하나를 숨겨 추가 공간을 만듭니다.


       <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="Portrait"/>
                <VisualState x:Name="Landscape"/>
                <VisualState x:Name="Narrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
          Storyboard.TargetName="TheSuperfluousColumn"
          Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
  

작동 방식을 보기 위해 화면이 분할되기 전의 앱은 다음과 같습니다.

세 개의 열, 일반 크기

사용자가 좁은 화면에 대한 추가 지원 없이 화면을 둘로 나눈 경우의 앱은 다음과 같습니다. 동일한 내용이 작은 공간에서 어떻게 왜곡되었는지 확인합니다.

세 개의 열, 왜곡 없음

이제 가장 중요한 정보만 표시하면 모든 항목이 덜 왜곡됩니다.

하나의 열, 왜곡 없음

최소 너비

앱에서 최소 너비 값을 지정할 수 있습니다. 기본적으로 이 값은 500입니다. 보기가 최소 크기보다 작으면 앱이 포기하고 "이런 조건에서는 작동하지 않음" 메시지를 표시한 후 일시 중단됩니다. 값을 최소값 320으로 변경하여 앱이 화면 측면에 좁은 열로 유지될 수 있도록 하면 사용자에게 항상 표시되는 유틸리티로 유용할 수 있습니다.

중요  앱 너비 크기 조정은 사용자가 수행합니다. 프로그래밍 방식으로 강제할 수 없습니다.

관련 항목

XAML을 사용하여 앱 디자인: 그리드
XAML을 사용하여 앱 디자인: 방향
창 크기 및 화면에 맞게 크기 조정에 대한 지침(Windows 스토어 앱)
빠른 시작: 다양한 창 크기에 맞는 앱 디자인
길고 좁은 레이아웃에 맞게 창 크기를 조정하기 위한 지침
빠른 시작: 앱 레이아웃 정의(JavaScript 및 HTML로 작성한 Windows 스토어 앱)

 

 

표시:
© 2015 Microsoft