Windows Runtime 8.x XAML 및 UI를 UWP로 포팅하기

이전 토픽은 문제 해결입니다.

UI를 선언적 XAML 태그 형식으로 정의하는 사례는 Universal 8.1 앱에서 UWP(Universal Windows Platform) 앱으로 매우 잘 해석됩니다. 사용 중인 시스템 리소스 키 또는 사용자 지정 템플릿을 일부 조정해야 할 수도 있지만, 대부분의 태그가 호환된다는 것을 알 수 있습니다. 보기 모델의 명령적 코드에는 변경이 거의 또는 전혀 필요하지 않습니다. 프레젠테이션 계층에서 UI 요소를 조작하는 코드의 많은 부분 또는 대부분도 포팅이 간단해야 합니다.

명령형 코드

프로젝트가 빌드되는 단계에 이르려면 필수가 아닌 코드를 주석으로 처리하거나 스텁할 수 있습니다. 그런 다음, 한 번에 하나의 문제를 반복하며 빌드 및 런타임 문제가 다림질되고 포팅이 완료될 때까지 이 섹션의 다음 토픽(및 이전 토픽: 문제 해결)을 참조하세요.

적응형/반응형 UI

(각각 고유한 화면 크기와 해상도를 가진) 광범위한 장치에서 앱이 실행될 수 있으므로, 앱을 이식하는 최소한의 단계를 넘어 UI를 조정하여 해당 장치에서 가장 잘 보이도록 하고자 합니다. 적응형 Visual State Manager 기능을 사용하여 창 크기를 동적으로 감지하고 응답에서 레이아웃을 변경할 수 있으며, 이를 수행하는 방법의 예시는 Bookstore2 사례 연구 토픽의 적응형 UI 섹션에 나와 있습니다.

뒤로 가기 버튼 처리

Universal 8.1 앱의 경우, Windows Runtime 8.x 앱과 Windows Phone Store 앱은 표시하는 UI 및 백 버튼을 처리하는 이벤트에 대한 다른 접근 방식을 사용합니다. 하지만 Windows 10 앱의 경우, 앱에서 단일 접근 방식을 사용할 수 있습니다. 모바일 장치에서 버튼은 장치의 용량 버튼 또는 셸의 버튼으로 제공됩니다. 데스크톱 장치에서는 앱 내에서 뒤로 탐색이 가능할 때마다 앱의 크롬에 버튼을 추가합니다. 그러면 창으로 표시된 앱의 제목 표시줄 또는 태블릿 모드(Windows 10에만 해당)의 작업 표시줄에 해당 버튼이 표시됩니다. 백 버튼 이벤트는 모든 장치 패밀리에서 범용 개념이며, 하드웨어 또는 소프트웨어에서 구현된 버튼은 동일한 BackRequested 이벤트를 발생시킵니다.

아래의 예시는 모든 장치 패밀리에서 작동하고 모든 페이지에 동일한 처리가 적용되며 탐색을 확인할 필요가 없는 경우(예를 들어, 저장되지 않은 변경 내용에 대해 경고하는 경우) 적합합니다.

   // app.xaml.cs

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        [...]

        Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
        rootFrame.Navigated += RootFrame_Navigated;
    }

    private void RootFrame_Navigated(object sender, NavigationEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        // Note: On device families that have no title bar, setting AppViewBackButtonVisibility can safely execute 
        // but it will have no effect. Such device families provide back button UI for you.
        if (rootFrame.CanGoBack)
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Visible;
        }
        else
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Collapsed;
        }
    }

    private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        if (rootFrame.CanGoBack)
        {
            rootFrame.GoBack();
        }
    }

프로그래밍 방식으로 앱을 종료하기 위한 모든 장치 패밀리에 대한 단일 접근 방식도 있습니다.

   Windows.UI.Xaml.Application.Current.Exit();

참

참과 통합되는 코드를 변경할 필요는 없지만, 앱에 UI를 추가하여 Windows 10 셸의 일부가 아닌 참 표시줄을 대신해야 합니다. Windows 10에서 실행되는 Universal 8.1 앱에는 앱의 제목 표시줄에 시스템 렌더링 크롬에서 제공하는 자체 대체 UI가 있습니다.

컨트롤과 컨트롤 스타일 및 템플릿

Windows 10에서 실행되는 Universal 8.1 앱은 컨트롤과 관련하여 8.1 모양과 동작을 유지합니다. 하지만 해당 앱을 Windows 10 앱으로 포팅할 때는 모양 및 동작에 몇 가지 차이점이 있습니다. 기본적으로 Windows 10 앱에서 컨트롤의 아키텍처 및 디자인은 변경되지 않았으며 주로 디자인 언어, 간소화 및 유용성 개선과 관련하여 변경되었습니다.

참고 PointerOver 시각적 상태는 Windows 10 앱 및 Windows Runtime 8.x 앱의 사용자 지정 스타일/템플릿에서 적절하지만, Windows Phone Store 앱에서는 적절하지 않습니다. 이러한 이유로(그리고 Windows 10 앱에 대해 지원되는 시스템 리소스 키 때문에) Windows 10으로 앱을 포팅할 경우, Windows Runtime 8.x 앱의 사용자 지정 스타일/템플릿을 다시 사용하는 것이 권장됩니다. 사용자 지정 스타일/템플릿이 최신 시각적 상태 집합을 사용하고 있으며 기본 스타일/템플릿의 성능 향상을 활용하려는 경우, 새 Windows 10 기본 템플릿의 복사본을 편집하고 사용자 지정을 다시 적용합니다. 성능 향상의 한 가지 예시는 이전에 ContentPresenter 또는 패널을 묶은 테두리가 제거되고 이제 자식 요소가 테두리를 렌더링한다는 것입니다.

다음은 컨트롤 변경의 몇 가지 구체적인 예시입니다.

컨트롤 이름	변경
AppBar	AppBar 컨트롤을 사용하는 경우(대신 CommandBar를 사용하는 것이 권장됩니다), Windows 10 앱에서는 기본적으로 숨겨지지 않습니다. 이를 AppBar.ClosedDisplayMode 속성을 사용하여 제어할 수 있습니다.
AppBar, CommandBar	Windows 10 앱의 AppBar 및 CommandBar에는 자세히 보기 버튼(줄임표)가 있습니다.
CommandBar	Windows Runtime 8.x 앱에는 CommandBar의 보조 명령이 항상 표시됩니다. Windows Phone Store 앱 및 Windows 10 앱에서는 명령 모음이 열릴 때까지 표시되지 않습니다.
CommandBar	Windows Phone Store 앱의 경우. CommandBar.IsSticky의 값은 바를 가볍게 해제할 수 있는지 여부에 영향을 주지 않습니다. Windows 10 앱에서 IsSticky가 true로 설정된 경우, CommandBar는 가벼운 해제 제스처를 무시합니다.
CommandBar	Windows 10 앱에서 CommandBar는 EdgeGesture.Completed 또는 UIElement.RightTapped 이벤트를 처리하지 않습니다. 탭이나 위로 살짝 밀기도 응답하지 않습니다. 이러한 이벤트를 처리하고 IsOpen을 설정하는 옵션이 여전히 있습니다.
DatePicker, TimePicker	DatePicker 및 TimePicker의 시각적 변경 내용으로 앱의 모양을 검토합니다. 모바일 장치에서 실행되는 Windows 10 앱의 경우, 이러한 컨트롤은 더 이상 선택 페이지로 이동하지 않고 해제할 수 있는 가벼운 팝업을 사용합니다.
DatePicker, TimePicker	Windows 10 앱에서는 플라이아웃에 DatePicker 또는 TimePicker를 넣을 수 없습니다. 이러한 컨트롤을 팝업 유형 컨트롤에 표시하려면 DatePickerFlyout 및 TimePickerFlyout을 사용할 수 있습니다.
GridView 및 ListView	GridView/ListView의 경우, GridView 및 ListView 변경을 참조하세요.
허브	Windows Phone Store 앱에서 허브 컨트롤은 마지막 섹션에서 첫 번째 섹션으로 래핑됩니다. Windows Runtime 8.x 앱 및 Windows 10 앱에서는 허브 섹션이 래핑하지 않습니다.
허브	Windows Phone Store 앱에서 허브 컨트롤의 배경 이미지는 허브 섹션을 기준으로 시차로 이동합니다. Windows Runtime 8.x 앱 및 Windows 10 앱에서는 시차가 사용되지 않습니다.
허브	Universal 8.1 앱 에서 HubSection.IsHeaderInteractive 속성은 섹션 헤더(및 옆에 렌더링된 펼침 버튼 문자 모양을)를 대화형으로 만듭니다. Windows 10 앱에는 헤더 옆에 대화형 "자세히 보기" 어도던스가 있지만 헤더 자체는 대화형이 아닙니다. IsHeaderInteractive는 상호 작용이 Hub.SectionHeaderClick 이벤트를 발생시킬지 여부를 결정합니다.
MessageDialog	MessageDialog를 사용하는 경우, 보다 유연한 ContentDialog를 대신 사용하는 것이 좋습니다. 또한 XAML UI 기본 사항 샘플을 참조하세요.
ListPickerFlyout 및 PickerFlyout	ListPickerFlyout 및 PickerFlyout은 Windows 10 앱에서 더 이상 사용되지 않습니다. 단일 선택 플라이아웃의 경우, MenuFlyout을 사용합니다. 더 복잡한 환경의 경우, 플라이아웃을 사용합니다.
PasswordBox	Windows 10 앱에서 PasswordBox.IsPasswordRevealButtonEnabled 속성은 더 이상 사용되지 않으며 설정해도 아무런 효과가 없습니다. 대신 PasswordBox.PasswordRevealMode를 사용합니다. 이 속성은 Peek의 기본값입니다(Windows Runtime 8.x 앱에서처럼 눈 문자 모양이 표시됨). 또한 암호 상자에 대한 지침을 참조하세요.
피벗	이제 피벗 컨트롤이 범용이므로 더 이상 모바일 장치에서만 사용하도록 제한되지 않습니다.
SearchBox	SearchBox는 유니버설 장치 패밀리에서 구현되지만, 모바일 장치에서는 완전히 작동하지 않습니다. AutoSuggestBox를 위해 사용되지 않는 SearchBox를 참조하세요.
SemanticZoom	SemanticZoom의 경우, SemanticZoom 변경 내용을 참조하세요.
ScrollViewer	ScrollViewer의 일부 기본 속성이 변경되었습니다. HorizontalScrollMode가 Auto이고, VerticalScrollMode는 Auto이며, ZoomMode는 Disabled입니다. 새로운 기본값이 앱에 적합하지 않은 경우, 스타일이나 컨트롤 자체의 로컬 값으로 변경할 수 있습니다.
TextBox	Windows Runtime 8.x 앱에서 TextBox의 맞춤법 검사는 기본적으로 해제되어 있습니다. Windows Phone Store 앱 및 Windows 10 앱에서는 기본적으로 설정됩니다.
TextBox	TextBox의 기본 글꼴 크기가 11에서 15로 변경되었습니다.
TextBox	TextBox.TextReadingOrder의 기본값이 기본값에서 DetectFromContent로 변경되었습니다. 바람직하지 않은 경우, UseFlowDirection을 사용합니다. 기본값은 사용되지 않습니다.
다양함	테마 컬러는 Windows Phone Store 앱 및 Windows 10 앱에 적용되지만, Windows Runtime 8.x 앱에는 적용되지 않습니다.

UWP 앱 컨트롤에 대한 자세한 정보는 함수별 컨트롤, 컨트롤 목록 및 컨트롤에 대한 지침을 참조하세요.

Windows 10의 디자인 언어

Universal 8.1 앱과 Windows 10 앱의 디자인 언어 사이에는 작지만 중요한 차이점이 있습니다. 모든 세부 정보는 디자인을 참조하세요. 디자인 언어의 변화에도 불구하고 디자인 원칙은 기본 일관성을 유지합니다. 즉, 세부 사항에 세심하지만 항상 크롬이 아닌 콘텐츠에 초점을 맞추고, 시각적 요소를 치열하게 줄이며 디지털 작업에 대한 인증을 유지하면서 단순성을 위해 노력합니다. 특히 입력 체계와 함께 시각적 계층 구조를 사용하고 그리드에서 디자인하며 유동적인 애니메이션으로 환경에 활기를 불어넣습니다.

유효 픽셀, 시청 거리 및 배율 계수

이전에는 보기 픽셀이 실제 장치의 실제 크기 및 해상도에서 벗어나 UI 요소의 크기와 레이아웃을 추상화할 수 있었습니다. 이제 보기 픽셀은 유효 픽셀로 발전했으며, 여기에 해당 용어, 의미 및 추가 값에 대한 설명이 있습니다.

"해상도"라는 용어는 픽셀 밀도 측정값을 의미하며, 일반적으로 생각되는 픽셀 개수는 아닙니다. "효과적인 해상도"는 이미지 또는 문자 모양을 구성하는 물리적 픽셀이 시야 거리와 장치의 물리적 픽셀 크기(픽셀 밀도가 실제 픽셀 크기의 상호)의 차이를 고려하여 눈으로 확인하는 방식입니다. 효과적인 해결 방법은 사용자 중심이기 때문에 환경을 구축하는 데 유용한 메트릭입니다. 사용자의 환경을 좋은 환경으로 만들기 위해 모든 요소를 이해하고 UI 요소의 크기를 제어할 수 있습니다.

다른 장치의 유효 픽셀 너비는 가장 작은 장치의 경우 320 epx에서 적당한 크기의 모니터의 경우 1024 epx에 이르기까지 다양하며 훨씬 더 높은 너비를 훨씬 넘습니다. 자동 크기 요소 및 동적 레이아웃 패널을 항상 사용하기만 하면 됩니다. 또한 XAML 태그에서 UI 요소의 속성을 고정 크기로 설정하는 사례도 있습니다. 확장 요소는 실행되는 장치 및 사용자가 만든 표시 설정에 따라 앱에 자동으로 적용됩니다. 또한 이 배율 인수는 고정된 크기로 모든 UI 요소를 유지하여 다양한 화면 크기에 걸쳐 사용자에게 상수 크기의 터치(및 읽기) 대상을 표시합니다. 동적 레이아웃과 함께 UI는 단순히 다른 장치에서 광학적으로 스케일링되는 것이 아닙니다. 대신 사용 가능한 공간에 적절한 양의 콘텐츠를 맞추는 데 필요한 작업을 수행합니다.

앱이 모든 장치에서 최상의 환경을 갖도록 각 비트맵 자산을 특정 배율 인수에 적합한 크기 범위로 만드는 것이 권장됩니다. 100%-scale, 200%-scale 및 400%-scale(우선 순위 순서)로 자산을 제공하면 대부분의 경우 모든 중간 배율 인수에서 우수한 결과를 얻을 수 있습니다.

참고 어떤 이유로든 둘 이상의 크기로 자산을 만들 수 없는 경우, 100%-scale 자산을 만듭니다. Microsoft Visual Studio에서 UWP 앱의 기본 프로젝트 템플릿은 브랜딩 자산(타일 이미지 및 로고)을 한 가지 크기로만 제공하지만 100%-scale은 아닙니다. 사용자 고유의 앱에 대한 자산을 작성할 때, 이 섹션의 지침에 따라 100%, 200% 및 400% 크기를 제공하고 자산 팩을 사용합니다.

복잡한 아트워크가 있는 경우, 더 많은 크기로 자산을 제공할 수 있습니다. 벡터 아트를 시작하는 경우, 스케일 팩터에서 고품질 자산을 비교적 쉽게 생성할 수 있습니다.

모든 배율 인수를 지원하지 않는 것이 좋지만, Windows 10 앱의 전체 배율 인수 목록은 100%, 125%, 150%, 200%, 250%, 300% 및 400%입니다. 사용자가 제공하는 경우, Store는 각 장치에 대한 올바른 크기의 자산을 선택하고 해당 자산만 다운로드합니다. Store는 장치의 DPI에 따라 다운로드할 자산을 선택합니다. Windows Runtime 8.x 앱에서 140%, 220% 등의 배율 인수로 자산을 다시 사용할 수 있지만, 앱은 새로운 배율 인수 중 하나로 실행되므로 일부 비트맵 크기 조정은 어쩔 수 없습니다. 다양한 장치에서 앱을 테스트하여 사례의 결과에 만족하는지 확인합니다.

리터럴 차원 값이 태그(크기 모양 또는 기타 요소, 입력 체계)에 사용되는 Windows Runtime 8.x 앱의 XAML 태그를 다시 사용할 수도 있습니다. 하지만 경우에 따라 Windows 10 앱의 장치에서 Universal 8.1 앱보다 더 큰 배율 인수가 사용됩니다(예를 들어 140%가 사용된 곳에 150%가 사용되고, 180%가 사용된 곳에 200%가 사용됨). 그러므로 Windows 10에서 이러한 리터럴 값이 너무 큰 경우 0.8을 곱해 봅니다. 자세한 정보는 UWP 앱에 대한 응답성 있는 설계 101을 참조하세요.

GridView 및 ListView 변경

GridView에 대한 기본 스타일 setter가 컨트롤을 세로로 스크롤하도록 몇 가지가 변경되었습니다(가로 대신, 이전의 기본값과 같음). 기본 스타일의 복사본을 프로젝트에서 편집한 경우, 복사본에는 이러한 변경 내용이 없으므로 수동으로 만들어야 합니다. 변경 내용의 목록은 다음과 같습니다.

• ScrollViewer.HorizontalScrollBarVisibility에 대한 setter가 자동에서 사용 안 함으로 변경되었습니다.
• ScrollViewer.VerticalScrollBarVisibility에 대한 setter가 사용 안 함에서 자동으로 변경되었습니다.
• ScrollViewer.HorizontalScrollMode의 setter가 사용함에서 사용 안 함으로 변경되었습니다.
• ScrollViewer.VerticalScrollMode의 setter가 사용 안 함에서 사용함으로 변경되었습니다.
• ItemsPanel의 setter에서 ItemsWrapGrid.Orientation 값이 세로에서 가로로 변경되었습니다.

마지막 변경 내용(방향으로 변경)이 모순된 것처럼 보인다면, 랩 그리드에 대해 이야기하고 있음을 기억하세요. 가로 방향 줄 바꿈 눈금(새 값)은 텍스트가 가로로 흐르고 페이지 끝에 있는 그 다음 줄로 나누기되는 쓰기 시스템과 유사합니다. 같은 텍스트 페이지가 세로로 스크롤됩니다. 반대로 세로 방향의 줄 바꿈 눈금(이전 값)은 텍스트가 세로로 흐르므로 가로로 스크롤되는 쓰기 시스템과 비슷합니다.

Windows 10에서 변경되었거나 지원되지 않는 GridView 및 ListView의 측면은 다음과 같습니다.

• IsSwipeEnabled 속성(Windows Runtime 8.x 앱에만 해당)은 Windows 10 앱에 대해 지원되지 않습니다. API는 여전히 존재하지만, 설정해도 아무런 효과가 없습니다. 아래쪽 살짝 밀기(데이터가 검색할 수 없음을 보여 주므로 지원되지 않음) 및 마우스 우클릭(상황에 맞는 메뉴를 표시하기 위해 예약됨)을 제외한 모든 이전 선택 제스처가 지원됩니다.
• ReorderMode 속성(Windows Phone Store 앱만 해당)은 Windows 10 앱에서 지원되지 않습니다. API는 여전히 존재하지만, 설정해도 아무런 효과가 없습니다. 대신 GridView 또는 ListView에서 AllowDrop 및 CanReorderItems를 true로 설정한 다음, 사용자는 길게 누르기(또는 클릭 및 끌기) 제스처를 사용하여 순서를 변경할 수 있습니다.
• Windows 10용으로 개발할 때는 ListView 및 GridView에 대한 항목 컨테이너 스타일에서 GridViewItemPresenter 대신 ListViewItemPresenter를 사용합니다. 올바른 형식이 표시되게 하려면 기본 항목 컨테이너 스타일의 복사본을 편집합니다.
• Windows 10 앱에 대한 선택 시각적 개체가 변경되었습니다. SelectionMode를 Multiple로 설정하면, 기본적으로 각 항목에 대한 검사 상자가 렌더링됩니다. ListView 항목의 기본 설정은 검사 상자가 항목 옆에 인라인으로 배치되는 것을 의미하므로 나머지 항목이 차지하는 공간이 약간 줄어들고 이동됩니다. GridView 항목의 경우, 검사 상자는 기본적으로 항목 위에 오버레이됩니다. 그러나 두 경우 모두 아래의 예시와 같이 항목 컨테이너 스타일 내의 ListViewItemPresenter 요소에서 CheckMode 속성을 사용하여 검사 상자의 레이아웃(인라인 또는 오버레이)과 해당 레이아웃이 전부 표시되는지(SelectionCheckMarkVisualEnabled 속성 포함) 여부를 제어할 수 있습니다.
• Windows 10에서 ContainerContentChanging 이벤트는 UI 가상화 중에 항목당 두 번 발생합니다(회수에 한 번, 다시 사용하기 위해 한 번). InRecycleQueue 값이 true이고 수행할 특별한 회수 작업이 없는 경우 동일한 항목이 다시 사용될 때 다시 입력된다는 보장으로 이벤트 처리기를 즉시 종료할 수 있습니다(이때 InRecycleQueue는 false임).

<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem|GridViewItem">
    ...
    <Setter.Value>
        <ControlTemplate TargetType="ListViewItem|GridViewItem">
            <ListViewItemPresenter CheckMode="Inline|Overlay" ... />
        </ControlTemplate>
    </Setter.Value>
    ...
</Style>

인라인 검사 상자가 있는 ListViewItemPresenter

오버레이된 검사 상자가 있는 ListViewItemPresenter

• (위에서 지정한 이유로) 선택을 위해 아래쪽 살짝 밀기 및 오른쪽 클릭 제스처를 제거하면 상호 작용 모델이 변경되며, 그 결과로 ItemClick 및 SelectionChanged 이벤트가 더 이상 상호 배타적이지 않게 됩니다. Windows 10 앱의 경우, 시나리오를 검토하고 "선택" 또는 "호출" 상호 작용 모델을 채택할지를 결정합니다. 자세한 정보는 상호 작용 모드를 변경하는 방법을 참조하세요.
• ListViewItemPresenter의 스타일 지정을 위해 사용하는 속성에 몇 가지 변경 내용이 있습니다. 새로운 속성은 CheckBoxBrush, PressedBackground, SelectedPressedBackground 및 FocusSecondaryBorderBrush입니다. Windows 10 앱에 대해 무시되는 속성으로는 Padding(대신 ContentMargin 사용),CheckHintBrush, CheckSelectingBrush, PointerOverBackgroundMargin, ReorderHintOffset, SelectedBorderThickness 및 SelectedPointerOverBorderBrush가 있습니다.

이 테이블은 ListViewItem 및 GridViewItem 컨트롤 템플릿의 시각적 상태와 시각적 상태 그룹의 변경 내용을 설명합니다.

8.1	기능 상태	Windows 10/11	기능 상태
CommonStates		CommonStates
	일반		일반
	PointerOver		PointerOver
	누름		누름
	PointerOverPressed		[사용할 수 없음]
	사용 안 함		[사용할 수 없음]
	[사용할 수 없음]		PointerOverSelected
	[사용할 수 없음]		선택됨
	[사용할 수 없음]		PressedSelected
[사용할 수 없음]		DisabledStates
	[사용할 수 없음]		사용 안 함
	[사용할 수 없음]		설정됨
SelectionHintStates		[사용할 수 없음]
	VerticalSelectionHint		[사용할 수 없음]
	HorizontalSelectionHint		[사용할 수 없음]
	NoSelectionHint		[사용할 수 없음]
[사용할 수 없음]		MultiSelectStates
	[사용할 수 없음]		MultiSelectDisabled
	[사용할 수 없음]		MultiSelectEnabled
SelectionStates		[사용할 수 없음]
	선택 취소하기		[사용할 수 없음]
	선택 취소함		[사용할 수 없음]
	UnselectedPointerOver		[사용할 수 없음]
	UnselectedSwiping		[사용할 수 없음]
	선택하기		[사용할 수 없음]
	선택됨		[사용할 수 없음]
	SelectedSwiping		[사용할 수 없음]
	SelectedUnfocused		[사용할 수 없음]

사용자 지정 ListViewItem 또는 GridViewItem 컨트롤 템플릿이 있는 경우, 위의 변경 내용에 비추어 검토합니다. 새로운 기본 템플릿의 복사본을 편집하고 사용자 지정을 다시 적용하여 다시 시작하는 것이 권장됩니다. 어떤 이유로든 이 작업을 수행할 수 없고 기존 템플릿을 편집해야 하는 경우, 해당 작업을 수행하는 방법에 대한 몇 가지 일반적인 지침을 여기에서 확인하세요.

• 새로운 MultiSelectStates 시각적 상태 그룹을 추가합니다.
• 새로운 MultiSelectDisabled 시각적 상태를 추가합니다.
• 새로운 MultiSelectEnabled 시각적 상태를 추가합니다.
• 새로운 DisabledStates 시각적 상태 그룹을 추가합니다.
• 새로운 Enabled 시각적 상태를 추가합니다.
• PointerOverPressed 시각적 상태를 CommonStates 시각적 상태 그룹에서 제거합니다.
• DisabledStates 시각적 상태 그룹으로 Disabled 시각적 상태를 이동합니다.
• 새로운 PointerOverSelected 시각적 상태를 추가합니다.
• 새로운 PressedSelected 시각적 상태를 추가합니다.
• SelectedHintStates 시각적 상태 그룹을 제거합니다.
• SelectionStates 시각적 상태 그룹에서 Selected 시각적 상태를 CommonStates 시각적 상태 그룹으로 이동합니다.
• 전체 SelectionStates 시각적 상태 그룹을 제거합니다.

현지화 및 세계화

Resources.resw 파일은 UWP 앱 프로젝트의 Universal 8.1 프로젝트에서 다시 사용할 수 있습니다. 파일을 복사한 뒤, 프로젝트에 추가하고 빌드 작업을 PRIResource로 설정한 다음 출력 디렉터리에 복사하기를 복사하지 않음으로 설정합니다. ResourceContext.QualifierValues 토픽에서는 장치 패밀리별 리소스를 장치 패밀리 리소스 선택 요소에 따라 로드하는 방법을 설명합니다.

원격 재생

Windows.Media.PlayTo 네임스페이스의 API는 Windows.Media.Casting API를 위해 Windows 10 앱에서 더 이상 사용되지 않습니다.

리소스 키 및 TextBlock 스타일 크기

디자인 언어는 Windows 10용으로 발전했으며 결과적으로 특정 시스템 스타일이 변경되었습니다. 경우에 따라 보기의 시각적 디자인을 다시 확인하여 변경된 스타일 속성과 조화를 이루도록 합니다.

경우에 따라 리소스 키가 더 이상 지원되지 않습니다. Visual Studio의 XAML 태그 편집기는 확인할 수 없는 리소스 키에 대한 참조를 강조 표시합니다. 예를 들어 XAML 태그 편집기는 빨간색 물결선이 있는 스타일 키 ListViewItemTextBlockStyle에 대한 참조에 밑줄을 긋습니다. 수정되지 않은 경우, 에뮬레이터 또는 장치에 배포하려고 하면 앱이 즉시 종료됩니다. 그러므로 XAML 태그 정확성에 주목하는 것이 중요합니다. 또한 Visual Studio는 이러한 문제를 파악하는 데 유용한 도구가 됩니다.

여전히 지원되는 키의 경우, 디자인 언어를 변경하면 일부 스타일에서 설정한 속성이 변경됩니다. 예를 들어 TitleTextBlockStyle은(는) FontSize를 Windows Runtime 8.x 앱에서는 14.667px로, Windows Phone Store 앱에서는 18.14px로 설정합니다. 그러나 동일한 스타일은 Windows 10 앱에서 FontSize를 훨씬 더 큰 24px로 설정합니다. 디자인 및 레이아웃을 검토하고 적절한 위치에서 적절한 스타일을 사용합니다. 자세한 정보는 글꼴에 대한 지침 및 디자인 UWP 앱을 참조하세요.

더 이상 지원되지 않는 키의 전체 목록입니다.

• CheckBoxAndRadioButtonMinWidthSize
• CheckBoxAndRadioButtonTextPaddingThickness
• ComboBoxFlyoutListPlaceholderTextOpacity
• ComboBoxFlyoutListPlaceholderTextThemeMargin
• ComboBoxHighlightedBackgroundThemeBrush
• ComboBoxHighlightedBorderThemeBrush
• ComboBoxHighlightedForegroundThemeBrush
• ComboBoxInlinePlaceholderTextForegroundThemeBrush
• ComboBoxInlinePlaceholderTextThemeFontWeight
• ComboBoxItemDisabledThemeOpacity
• ComboBoxItemHighContrastBackgroundThemeMargin
• ComboBoxItemMinHeightThemeSize
• ComboBoxPlaceholderTextBlockStyle
• ComboBoxPlaceholderTextThemeMargin
• CommandBarBackgroundThemeBrush
• CommandBarForegroundThemeBrush
• ContentDialogButton1HostPadding
• ContentDialogButton2HostPadding
• ContentDialogButtonsMinHeight
• ContentDialogContentLandscapeWidth
• ContentDialogContentMinHeight
• ContentDialogDimmingColor
• ContentDialogTitleMinHeight
• ControlContextualInfoTextBlockStyle
• ControlHeaderContentPresenterStyle
• ControlHeaderTextBlockStyle
• FlyoutContentPanelLandscapeThemeMargin
• FlyoutContentPanelPortraitThemeMargin
• GrabberMargin
• GridViewItemMargin
• GridViewItemPlaceholderBackgroundThemeBrush
• GroupHeaderTextBlockStyle
• HeaderContentPresenterStyle
• HighContrastBlack
• HighContrastWhite
• HubHeaderCharacterSpacing
• HubHeaderFontSize
• HubHeaderMarginThickness
• HubSectionHeaderCharacterSpacing
• HubSectionHeaderFontSize
• HubSectionHeaderMarginThickness
• HubSectionMarginThickness
• InlineWindowPlayPauseMargin
• ItemTemplate
• LeftFullWindowMargin
• LeftMargin
• ListViewEmptyStaticTextBlockStyle
• ListViewItemContentTextBlockStyle
• ListViewItemContentTranslateX
• ListViewItemMargin
• ListViewItemMultiselectCheckBoxMargin
• ListViewItemSubheaderTextBlockStyle
• ListViewItemTextBlockStyle
• MediaControlPanelAudioThemeBrush
• MediaControlPanelPhoneVideoThemeBrush
• MediaControlPanelVideoThemeBrush
• MediaControlPanelVideoThemeColor
• MediaControlPlayPauseThemeBrush
• MediaControlTimeRowThemeBrush
• MediaControlTimeRowThemeColor
• MediaDownloadProgressIndicatorThemeBrush
• MediaErrorBackgroundThemeBrush
• MediaTextThemeBrush
• MenuFlyoutBackgroundThemeBrush
• MenuFlyoutBorderThemeBrush
• MenuFlyoutLandscapeThemePadding
• MenuFlyoutLeftLandscapeBorderThemeThickness
• MenuFlyoutPortraitBorderThemeThickness
• MenuFlyoutPortraitThemePadding
• MenuFlyoutRightLandscapeBorderThemeThickness
• MessageDialogContentStyle
• MessageDialogTitleStyle
• MinimalWindowMargin
• PasswordBoxCheckBoxThemeMargin
• PhoneAccentBrush
• PhoneBackgroundBrush
• PhoneBackgroundColor
• PhoneBaseBlackColor
• PhoneBaseHighColor
• PhoneBaseLowColor
• PhoneBaseLowSolidColor
• PhoneBaseMediumHighColor
• PhoneBaseMediumMidColor
• PhoneBaseMediumMidSolidColor
• PhoneBaseMidColor
• PhoneBaseWhiteColor
• PhoneBorderThickness
• PhoneButtonBasePressedForegroundBrush
• PhoneButtonContentPadding
• PhoneButtonFontWeight
• PhoneButtonMinHeight
• PhoneButtonMinWidth
• PhoneChromeBrush
• PhoneChromeColor
• PhoneControlBackgroundColor
• PhoneControlDisabledColor
• PhoneControlForegroundColor
• PhoneDisabledBrush
• PhoneDisabledColor
• PhoneFontFamilyLight
• PhoneFontFamilySemiBold
• PhoneForegroundBrush
• PhoneForegroundColor
• PhoneHighContrastSelectedBackgroundThemeBrush
• PhoneHighContrastSelectedForegroundThemeBrush
• PhoneImagePlaceholderColor
• PhoneLowBrush
• PhoneMidBrush
• PhonePageBackgroundColor
• PhonePivotLockedTranslation
• PhonePivotUnselectedItemOpacity
• PhoneRadioCheckBoxBorderBrush
• PhoneRadioCheckBoxBrush
• PhoneRadioCheckBoxCheckBrush
• PhoneRadioCheckBoxPressedBrush
• PhoneStrokeThickness
• PhoneTextHighColor
• PhoneTextLowColor
• PhoneTextMidColor
• PhoneTextOverAccentColor
• PhoneTouchTargetLargeOverhang
• PhoneTouchTargetOverhang
• PivotHeaderItemPadding
• PlaceholderContentPresenterStyle
• ProgressBarHighContrastAccentBarThemeBrush
• ProgressBarIndeterminateRectagleThemeSize
• ProgressBarRectangleStyle
• ProgressRingActiveBackgroundOpacity
• ProgressRingElipseThemeMargin
• ProgressRingElipseThemeSize
• ProgressRingTextForegroundThemeBrush
• ProgressRingTextThemeMargin
• ProgressRingThemeSize
• RichEditBoxTextThemeMargin
• RightFullWindowMargin
• RightMargin
• ScrollBarMinThemeHeight
• ScrollBarMinThemeWidth
• ScrollBarPanningThumbThemeHeight
• ScrollBarPanningThumbThemeWidth
• SliderThumbDisabledBorderThemeBrush
• SliderTrackBorderThemeBrush
• SliderTrackDisabledBorderThemeBrush
• TextBoxBackgroundColor
• TextBoxBorderColor
• TextBoxDisabledHeaderForegroundThemeBrush
• TextBoxFocusedBackgroundThemeBrush
• TextBoxForegroundColor
• TextBoxPlaceholderColor
• TextControlHeaderMarginThemeThickness
• TextControlHeaderMinHeightSize
• TextStyleExtraExtraLargeFontSize
• TextStyleExtraLargePlusFontSize
• TextStyleMediumFontSize
• TextStyleSmallFontSize
• TimeRemainingElementMargin

AutoSuggestBox를 위해 사용되지 않는 SearchBox

SearchBox는 유니버설 장치 패밀리에서 구현되지만, 모바일 장치에서는 완전히 작동하지 않습니다. 유니버설 검색 환경을 위해 AutoSuggestBox를 사용합니다. AutoSuggestBox를 사용하여 검색 환경을 구현하는 일반적인 방법은 다음과 같습니다.

사용자가 입력을 시작하면 UserInput의 이유로 TextChanged 이벤트가 발생합니다. 그런 다음 제안 목록을 채우고 AutoSuggestBox의 ItemsSource를 설정합니다. 사용자가 목록을 탐색하면서 SuggestionChosen 이벤트가 발생합니다(TextMemberDisplayPath를 설정한 경우, 지정된 속성으로 텍스트 상자가 자동으로 채워집니다). 사용자가 Enter 키를 사용하여 선택을 제출하면 QuerySubmitted 이벤트가 발생하며, 이때 해당 제안에 대한 작업을 수행할 수 있습니다(이 경우 지정된 콘텐츠에 대한 자세한 내용이 포함된 다른 페이지로 이동할 가능성이 높음). SearchBoxQuerySubmittedEventArgs의 LinguisticDetails 및 언어 속성은 더 이상 지원되지 않습니다(해당 기능을 지원하는 동일한 API가 있음). 또한 KeyModifiers는 더 이상 지원되지 않습니다.

또한 AutoSuggestBox는 IME(입력기)를 지원합니다. 또한 이 작업을 수행하여 "찾기" 아이콘을 표시할 수도 있습니다(아이콘과 상호 작용하면 QuerySubmitted 이벤트가 발생함).

   <AutoSuggestBox ... >
        <AutoSuggestBox.QueryIcon>
            <SymbolIcon Symbol="Find"/>
        </AutoSuggestBox.QueryIcon>
    </AutoSuggestBox>

또한 AutoSuggestBox 포팅 샘플을 참조하세요.

SemanticZoom 변경 내용

SemanticZoom에 대한 축소 제스처는 그룹 헤더를 탭하거나 클릭하는 Windows Phone 모델에 수렴되었습니다(따라서 데스크톱 컴퓨터에서는 더 이상 축소하기 위한 마이너스 버튼 어포던스가 표시되지 않음). 이제 동일한 일관된 동작을 모든 장치에서 무료로 사용할 수 있습니다. Windows Phone 모델과의 외관상 차이점 한 가지는 축소 보기(점프 목록)가 확대 보기를 오버레이하는 대신 대체한다는 것입니다. 이러한 이유로 축소 보기에서 반 불투명 배경을 제거할 수 있습니다.

Windows Phone Store 앱에서 축소 보기는 화면 크기로 확장됩니다. Windows Runtime 8.x 앱 및 Windows 10 앱에서는 축소 보기의 크기가 SemanticZoom 컨트롤의 범위로 제한됩니다.

Windows Phone Store 앱에서 축소 보기 뒤에 있는 콘텐츠(z 순서)는 축소 보기의 배경에 투명도가 있는지를 표시합니다. Windows Runtime 8.x 앱 및 Windows 10 앱에서는 축소 보기 뒤에 아무것도 표시되지 않습니다.

Windows Runtime 8.x 앱에서 앱이 비활성화된 뒤 다시 활성화되면 축소 보기가 사라지고(표시되어 있는 경우) 확대 보기가 대신 표시됩니다. Windows Phone Store 앱 및 Windows 10 앱에서 축소 보기가 표시되고 있는지 여부에 대한 표시가 유지됩니다.

Windows Phone Store 앱 및 Windows 10 앱에서는 뒤로 가기 버튼을 누르면 축소 보기가 해제됩니다. Windows Runtime 8.x 앱의 경우, 기본 제공된 뒤로 가기 버튼 처리가 없으므로 이 문제에 해당되지 않습니다.

설정

Windows Runtime 8.x SettingsPane 클래스는 Windows 10에 적합하지 않습니다. 대신 사용자에게 설정 페이지를 빌드하는 것 외의 앱 내에서 액세스할 수 있는 방법을 제공해야 합니다. 이 앱 설정 페이지를 탐색 창에서 마지막으로 고정된 항목으로 노출하는 것이 권장되지만, 전체 옵션의 집합은 다음과 같습니다.

• 탐색 창입니다. 설정은 선택의 탐색 목록의 마지막 항목이어야 하며, 아래에 고정됩니다.
• Appbar/도구 모음(탭 보기 또는 피벗 레이아웃 내)입니다. 설정은 앱 바 또는 도구 모음 메뉴 플라이아웃의 마지막 항목이어야 합니다. 탐색 내에서 설정을 최상위 항목 중 하나로 두는 것은 권장하지 않습니다.
• 허브입니다. 설정은 메뉴 플라이아웃 내에 있어야 합니다(앱 바 메뉴 또는 허브 레이아웃 내의 도구 모음 메뉴에서 사용할 수 있음).

마스터 세부 정보 창 내에 설정을 묻지 않는 것이 권장됩니다.

설정 페이지는 앱 창 전체를 채워야 하며, 또한 설정 페이지는 정보 및 피드백이 있어야 하는 위치입니다. 설정 페이지의 디자인에 대한 지침은 앱 설정에 대한 지침을 참조하세요.

텍스트

텍스트(또는 입력 체계)는 UWP 앱의 중요한 측면이며 포팅하는 동안 보기가 새 디자인 언어와 조화를 이루도록 보기의 시각적 디자인을 다시 확인할 수 있습니다. 사용 가능한 UWP(Universal Windows Platform) TextBlock 시스템 스타일을 다음의 그림을 활용하여 찾을 수 있습니다. 사용한 Windows Phone Silverlight 스타일에 해당하는 스타일을 찾습니다. 또는 고유한 유니버설 스타일을 만들고 속성을 Windows Phone Silverlight 시스템 스타일에서 해당 스타일로 복사할 수 있습니다.

Windows 10 앱에 대한 시스템 TextBlock 스타일

기본 글꼴 패밀리는 Windows Runtime 8.x 앱 및 Windows Phone Store 앱에서 전역 사용자 인터페이스입니다. Windows 10 앱의 기본 글꼴 패밀리는 Segoe UI입니다. 그러므로 앱의 글꼴 메트릭이 다르게 보일 수 있습니다. 8.1 텍스트의 모양을 재현하려면 LineHeight 및 LineStackingStrategy 등의 속성을 사용하여 고유한 메트릭을 설정할 수 있습니다.

텍스트의 기본 언어는 Windows Runtime 8.x 앱 및 Windows Phone Store 앱에서 빌드 언어 또는 en-us로 설정됩니다. Windows 10 앱에서 기본 언어는 최상위 앱 언어(글꼴 대체)로 설정됩니다. FrameworkElement.Language를 명시적으로 설정할 수 있지만, 더 나은 글꼴 대체 동작을 사용하려면 해당 속성에 대한 값을 설정하지 않는 것이 좋습니다.

자세한 정보는 글꼴에 대한 지침 및 디자인 UWP 앱을 참조하세요. 또한 텍스트 컨트롤에 대한 변경 내용을 보려면 위의 컨트롤 섹션을 참조하세요.

테마 변경 사항

Universal 8.1 앱의 경우, 기본 테마는 기본적으로 어둡습니다. Windows 10 장치의 경우, 기본 테마가 변경되었지만 App.xaml에서 요청된 테마를 선언하여 사용하는 테마를 제어할 수 있습니다. 예를 들어 모든 장치에서 어두운 테마를 사용하려면 루트 Application 요소에 RequestedTheme="Dark"을(를) 추가합니다.

타일 및 알림

타일 및 알림의 경우, Windows 10 앱에서 현재 사용 중인 템플릿이 계속 작동합니다. 그러나 사용 가능한 새로운 적응형 템플릿이 있으며 알림, 타일, 알림 및 배지에 설명되어 있습니다.

이전에는 데스크톱 컴퓨터에서 알림 메시지는 일시적인 메시지였습니다. 누락되거나 무시되면 사라지고 더 이상 검색할 수 없었습니다. Windows Phone에서 알림 메시지가 무시되거나 일시적으로 해제되면 Action Center로 이동합니다. 이제 Action Center는 모바일 장치 패밀리로 제한되지 않습니다.

더 이상 알림 메시지를 보내기 위해 기능을 선언할 필요가 없습니다.

창 크기

Universal 8.1 앱의 경우, ApplicationView 앱 매니페스트 요소를 사용하여 최소 창 너비를 선언합니다. UWP 앱에서 명령적 코드를 사용하여 최소 크기(너비 및 높이 모두)를 지정할 수 있습니다. 기본 최소 크기는 500x320epx이며 허용되는 최소 크기 중 가장 작은 크기이기도 합니다. 허용되는 가장 큰 최소 크기는 500x500epx입니다.

   Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetPreferredMinSize
        (new Size { Width = 500, Height = 500 });

다음 토픽은 I/O, 장치 및 앱 모델에 대해 포팅하기입니다.