화면 해상도 조정. Mass Effect: Andromeda에서 Sapphire 솔루션을 사용한 비디오 카드 성능 테스트. 반응형 레이아웃을 위한 가장 중요한 화면 해상도

개발자들이 다양한 크기의 화면에 응용 프로그램을 적용하는 방법에 대해 많은 질문을 하는 것으로 나타났습니다. 필요한 정보가 있는 링크를 제공할 수 있도록 이 짧은 자료를 작성하기로 결정했습니다. Windows 8.1의 응용 프로그램뿐만 아니라 Windows 10 UWP 응용 프로그램의 개발도 영향을 받는지 고려할 것입니다.

화면 크기와 해상도가 다른 많은 장치가 있다는 것은 누구에게도 뉴스가 아닙니다. 작은 화면이지만 높은 해상도를 가진 장치는 큰 화면과 같은 해상도를 가진 장치와 다른 크기와 품질의 이미지가 필요합니다. 이는 장치의 물리적 픽셀 수가 시스템/응용 프로그램에서 표시하는 실제 픽셀 수와 항상 일치하지 않기 때문입니다.

배율은 표시된 픽셀에 대한 장치의 실제 픽셀 비율입니다. 이 계수를 계산할 때 사용자가 장치 화면을 보는 표준 거리도 고려됩니다.
Windows 8.1 응용 프로그램은 100%, 140% 및 180%의 세 가지 배율 인수를 지원합니다. Windows Phone 8.1 앱에는 더 다양한 배율 요소가 있습니다.
Windows 스토어 앱 에뮬레이터에서 화면 해상도를 변경하면 해상도 자체와 그 옆에 있는 배율 인수 값을 모두 볼 수 있습니다.

이미지 적응 과정은 이미지 현지화와 유사합니다. 다른 해상도에 대한 올바른 버전의 이미지를 가져오려면 이미지 폴더 안에 scale-100, scale-140, scale-180이라는 이름으로 3개의 폴더를 만들어야 합니다. 이 폴더 안에는 이미 같은 이름의 이미지가 추가되어 있습니다.


모든 파일을 하나의 폴더에 저장하려면 배율을 나타내는 이미지 파일에 접미사를 추가해야 합니다.

따라서 3가지 버전의 이미지를 생성해야 합니다. 표준 이미지의 너비가 200픽셀인 경우 140%로 크기를 조정하려면 너비에 1.4를 곱해야 합니다. 즉, 너비가 280픽셀인 동일한 이미지를 만들어야 합니다. 음, 180% 크기 조정의 경우 너비가 200 * 1.8 = 360픽셀인 동일한 이미지가 필요합니다.
응용 프로그램 실행 시 사용자의 화면 해상도에 따라 최적의 이미지가 자동으로 선택됩니다.
코드에서 이미지 파일을 지정하면 다음 공식 스니펫을 사용하여 DisplayInformation.GetForCurrentView().ResolutionScale 값을 기반으로 현재 화면 배율을 결정하는 올바른 해상도의 이미지를 표시할 수 있습니다.
// 네임스페이스 추가 필요 Windows.Graphics.Display; ResolutionScale resolutionScale = DisplayInformation.GetForCurrentView().ResolutionScale; 우리 URI = null; 스위치( resolutionScale) ( 케이스 ResolutionScale.Scale100Percent: uri = new Uri("ms-appx:///images/scale-100/girl.jpg"); break; 케이스 ResolutionScale.Scale140Percent: uri = new Uri("ms- appx:///images/scale-140/girl.png"); 중단; 케이스 ResolutionScale.Scale180Percent: uri = new Uri("ms-appx:///images/scale-180/girl.png"); 중단 ; ) 이미지.소스 = 새로운 BitmapImage(uri);
이러한 이미지 크기 조정 기능을 사용하면 Grid를 사용하고 비례 값 - *를 셀 크기로 지정하는 것과 같이 픽셀로 고정되지 않은 유연한 레이아웃으로 응용 프로그램을 만들 수 있습니다.

화면 크기에 맞게 애플리케이션 레이아웃 조정
애플리케이션의 콘텐츠가 Viewbox 컨테이너 요소에서 호스팅되는 경우 콘텐츠는 화면이 변경될 때 사용 가능한 공간을 채우기 위해 자동으로 늘어나고 크기가 조정됩니다. 비트맵 이미지가 이 배율에서 제대로 보이도록 하려면 방금 고려한 것처럼 다양한 크기의 여러 옵션을 추가해야 합니다.
Viewbox 안에 애플리케이션을 배치하는 것은 애플리케이션을 다른 화면에 적용하기 위해 제안된 옵션 중 하나입니다. 또 다른 옵션은 애플리케이션 요소를 숨기거나 크기를 조정하는 것입니다. 스냅 모드를 예로 사용하여 다양한 응용 프로그램 크기로 작업하는 것을 고려해 보겠습니다.
기본적으로 Windows 8.1 앱의 너비는 500픽셀 이상일 수 있습니다. 응용 프로그램이 좁은 보기에서 좋아 보이거나 다른 응용 프로그램과 함께 사용할 수 있는 경우 및 가능한 한 오랫동안 작업 위치에 두는 것이 바람직한 경우 최소 너비를 320픽셀로 설정할 수 있습니다. 매니페스트 편집기에서 최소 너비를 320으로 지정하거나 너비가 320인 MinWidth 속성을 매니페스트 코드에 추가하여 이를 수행할 수 있습니다(그런데 Windows 8 애플리케이션에서 스냅 모드는 320픽셀에 불과했습니다)

애플리케이션을 다양한 너비로 조정하는 가장 간단한 옵션은 화면 크기 조정 이벤트에서 컨트롤의 너비와 높이뿐만 아니라 가시성/비표시성을 명령적으로 설정하는 것입니다. 다음과 같이 할 수 있습니다.
public MainPage() ( this.InitializeComponent(); this.SizeChanged += MainPage_SizeChanged; ) /// 애플리케이션 크기 변경 이벤트 void MainPage_SizeChanged(object sender, SizeChangedEventArgs e) ( if (e.NewSize.Width< 500) { grdMain.Width = 475; txtField1.Visibility = Visibility.Collapsed; } else { grdMain.Width = 1000; txtField1.Visibility = Visibility.Visible; } } /// ...
그러나 이것은 C# 코드의 모든 기존 컨트롤을 반복하는 것이 어렵지 않은 소규모 응용 프로그램에서 수행할 수 있습니다. 일반 응용 프로그램의 경우 모양 변경 사항을 XAML VisualState 상태로 저장하는 것이 가장 좋습니다. 따라서 디자이너가 Blend에서 레이아웃을 편안하게 변경할 수 있는 기회를 제공할 수 있습니다. 다음 예제에는 이전 코드와 동일한 변경 사항이 포함되어 있습니다.
그페르그
이제 창 크기 조정 이벤트에서 원하는 상태로 이동할 수 있습니다(현재 화면 크기에 따라 다름).
void MainPage_SizeChanged(객체 발신자, SizeChangedEventArgs e) ( if (e.NewSize.Width< 500) { VisualStateManager.GoToState(this, "MinimalLayout", true); } else { VisualStateManager.GoToState(this, "DefaultLayout", true); } } // если необходимо определить является ли текущая ориентация устройства книжной или альбомной, то можно использовать сравнение // if (e.NewSize.Width < e.NewSize.Height)
여기에서 너비와 높이로 화면 크기를 얻기 위해 매개변수를 다시 사용했습니다. SizeChangedEventArgs e.
프로그램 실행 중 다른 시간에는 표시되는 응용 프로그램 창의 너비와 높이(장치 화면 크기에 의존하지 않는 소위 유효 픽셀)를 다음과 같이 얻을 수 있습니다.
이중 windowWidth = Window.Current.Bounds.Width; 이중 windowHeight = Window.Current.Bounds.Height; 유효 픽셀 외에도 ​​원시 픽셀(영어 원시 - 원시, 원시) - 화면 또는 물리적 픽셀의 실제 도트 수입니다. 예를 들어 장치의 화면 너비가 1080픽셀이면 원시 픽셀의 수는 가로로 1080이 됩니다.

응용 프로그램 창의 물리적 크기를 인치 단위로 얻으려면(어떤 이유로 갑자기 이 정보가 필요한 경우) 다음 트릭을 사용할 수 있습니다.
이중 너비 = Window.Current.Bounds.Width * (int)DisplayInformation.GetForCurrentView().ResolutionScale / 100; 이중 높이 = Window.Current.Bounds.Height * (int)DisplayInformation.GetForCurrentView().ResolutionScale / 100; 이중 dpi = DisplayInformation.GetForCurrentView().RawDpiY; // 모니터가 데이터를 반환하지 않거나 여러 모니터에서 화면 복제 또는 복제를 구성한 경우 DPI로 값 0이 반환됩니다. double screenDiagonal = Math.Sqrt(Math.Pow(width / dpi, 2) + Math.Pow(높이/dpi, 2));

유니버설 Windows 플랫폼 앱은 어떻습니까?

Windows 8.1 Universal Apps는 이미 WP 및 Store에 대한 자체 XAML 레이아웃을 만들 수 있는 기능을 제공했습니다. 다음 스크린샷에는 두 개의 MainPage.xaml 파일이 있습니다.

UWP 응용 프로그램에서는 응용 프로그램의 모양을 나타내는 많은 XAML 파일을 만들고 다양한 요소(화면 크기, 해상도 등)에 따라 올바른 파일을 선택할 수 있습니다. 해보자.
프로젝트에 디렉토리 생성 Device패밀리-모바일.
마우스 오른쪽 버튼으로 클릭하고 새 항목 추가를 선택하십시오.
옵션에서 XAML 보기를 선택하고 보기 이름을 바꾸려는 보기의 이름과 동일하게 지정해야 합니다. 간단한 경우 MainPage.xaml이 될 수 있습니다.
이제 DeviceFamily-Mobile 폴더에 있는 MainPage.xaml 파일에 추가할 XAML 코드가 모바일 장치에 표시됩니다. 데스크톱 및 기타 장치에서는 기본 MainPage의 응용 프로그램 디자인이 표시됩니다.

상대 패널
이제 새로운 RelativePanel 컨트롤을 사용할 수 있게 되어 자식 요소 간에 위치 관계를 만들 수 있습니다.
예를 들어 다음 코드: