글꼴 크기 Windows 스토어 유니버설 앱 (W8.1 + WP8.1)

Question

Windows 스토어 유니버설 앱 (W8.1 + WP8.1)에서 텍스트 크기를 조정하려면 어떻게해야합니까? 기본적으로 응용 프로그램은 사용되는 장치/해상도에 관계없이 동일하게 보입니다. 현재 상황은 텍스트 (글꼴 크기)를 제외하고 레이아웃 (동적 그리드 기반 레이아웃) 및 이미지 크기가 잘 맞습니다.

표시되는 텍스트는 WVGA 해상도 (480x800)는 좋지만 1080p 해상도는 매우 작습니다.

는 이미 Guidelines for scaling to pixel density 또는 Guidelines for supporting multiple screen sizes

처럼 물건을 많이 읽어하지만 난 여전히 관계없이 디스플레이 해상도/DPI의 읽을 수있어 텍스트의 크기를 조절하는 방법을 모르겠어요.

물론 DisplayInformation.ResolutionScale 속성을 사용하는 클래스를 작성하여 글꼴 크기를 적절한 값으로 변환 할 수 있습니다.

예 : WVGA에서

• 폰트 크기 16 scaleFactor와 1X와는 scaleFactor와의 1.6 배와 WXGA에 폰트 크기 16
• 폰트 크기 (16) 동일하면 scaleFactor와의 1.5 배 equals와 720에 폰트 크기 25,6
• 폰트 크기 16 같음 폰트 크기 24
scaleFactor와의 2.25X와 1080p의에
• 폰트 크기 16 폰트 크기 36

동일하지만 유엔 해요 이것이 모든 시나리오에서 효과가 있으면 확실합니다. 그렇게 할 수있는 더 좋은 방법이 있습니까? 나는 그러한 공통적 인 작업이 일부 기능을 통해 수행 될 수 있다고 생각했다.

면책 조항 : 이것은 (희망을 갖고) "google for this question"이라고 말하면서 나는 스케일링에 관한 많은 수의 페이지를 발견했지만 레이아웃이나 이미지는 모두 다룹니다. 그러나 글꼴 크기 조정에 대해서는 아무 것도 찾을 수 없었습니다. 내가 뭔가를 놓친다면 용서해주세요.

---

편집 : 난 내가 문제를 명확하게 표현하는 데 실패, 두려워 : (오른쪽 왼쪽에 WVGA, 1080p의)를

Answer 1

WinRT가 자동으로 그 위에 실행되는 모든 확장 할 수 있습니다 디스플레이의 픽셀 밀도에 따라 그렇게 할 것입니다. Windows 8.0에서는 100 %, 140 % 및 180 %로 확장하는 데 사용되었습니다. 최신 버전에는 더 많은 축척 요인이있을 수 있습니다. 나는 당신이이 스케일링에서 탈퇴 할 수 있다고 생각하지 않습니다.

시스템 수준에서 작동하는 기본 제공 스케일링을 사용하고 싶지 않다면 모든 것을 직접해야합니다. 글꼴 크기를 설정하여 수동으로 텍스트 크기를 조절하거나 텍스트 또는 전체 UI의 크기를 조절할 수 있습니다.

Answer 2

내 Windows Store 앱에서 FontSize 속성을 페이지 높이에 바인딩하고 값을 변환하는 것이 었습니다 (사례에 적합한 값을 찾을 때까지 조금만 재생해야했습니다).

<TextBlock Grid.Row="0" Text="Some Text" 
FontSize="{Binding ElementName=pageRoot, Path=ActualHeight, 
Converter={StaticResource PageHeightConverter}, ConverterParameter='BodyFontSize'}" /> 

그리고 여기 그것은 완벽 하진 내 변환기 클래스

class PageHeightConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     switch ((string)parameter) 
     { 
      case "HeroImage": 
       return ((((double)value) * 2)/3); 
      case "TitleFontSize": 
       return (int)((double)value/40); 
      case "BodyFontSize": 
       return (int)((double)value/60); 
      default: 
       return 0; 
     } 
    } 
} 

하지만 나는 perttier 솔루션을 찾을 때까지 꽤 잘 작동합니다.

Answer 3

나는 이에 대한 답변을 기다리고 있으며 직접 관련 질문을 게시했습니다.
중간 솔루션으로 iValueConverter를 사용했으며 이는 특정 해상도에서는 작동하지만 다른 해상도에서는 작동하지 않습니다. 장치의 실제 크기뿐만 아니라 다른 것 때문에

class FontSizeConverter : IValueConverter 
{ 
public object Convert(object value, Type targetType, object parameter, string language) 
    { 
    var display = Helpers.ScreenResolution(); 
    var height = display.Height; 
    var oldFontSize = (int)value; 
    if(oldFontSize == null) return; 

    // Calculate the new Fontsize based on the designed Fontsize 
    // and design display size in Visual Studio designer... 
    var newFontSize = (int)Math.Round((oldFontSize/768.0) * height, 0); 
    return newFontSize; 
} 

public object ConvertBack(object value, Type targetType, object parameter, string language) 
{ 
    throw new NotImplementedException(); 
}} 

난이 도움이되기를 바랍니다 ...

Answer 4

귀하의 샘플 이미지는 오해의 소지가되어 다음과 같이

내 iValueConverter이다. This blog post은보다 정확한 표현을 위해 에뮬레이터를 설정하는 방법을 알려줍니다.

모든 화면에서 똑같은 콘텐츠를 원한다면 (즉, 6 인치 전화기는 50 % 더 많은 콘텐츠를 표시하는 대신 4 인치 전화기의 날아간 버전을 보여줍니다) ViewBox을 사용하여 앱 규모를 조정하십시오 . 이것은 특히 좋은 사용자 경험이 아니지만.

Answer 5

은 내가 ResolutionScale 속성과 함께 사용하면 IValueConverter 방법을 사용하면 꽤 잘 작동 발견 :

class ScaleConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     var resolutionScale = (int)DisplayInformation.GetForCurrentView().ResolutionScale/100.0; 
     var baseValue = int.Parse(parameter as string); 
     var scaledValue = baseValue * resolutionScale; 
     if (targetType == typeof(GridLength)) 
      return new GridLength(scaledValue); 
     return scaledValue; 
    } 
} 

이, 유의하시기 바랍니다 나는 또한 ColumnDefinition을 위해 그것을 사용하고 당신은 (폰트 크기 이상 사용하는 경우 .Width) 올바른 Type'ed 출력을 반환 처리해야합니다. 당신이 사용하는 어떤 클래스

<TextBlock Text="string" FontSize="{Binding ElementName=root, Path=ActualHeight, Converter={StaticResource ScaleConverter}, ConverterParameter='30'}" /> 

그리고 당신이, 당신이 SwapChainBackgroundPanel 교체 다음을 포함 할 필요가에이 사용하는 각 XAML 페이지에 대한 솔루션을 완료 :

내 XAML 사용은 다음과 같이 보입니다 , 그리고 올바르게 XML 네임 스페이스를 정의 :

<SwapChainBackgroundPanel.Resources> 
    <local:ScaleConverter x:Key="ScaleConverter"></local:ScaleConverter> 
</SwapChainBackgroundPanel.Resources>