mở rộng kích thước phông chữ trong Windows Store Universal App (W8.1 + WP8.1)

Question

Làm cách nào để mở rộng văn bản trong Windows Store Universal App (W8.1 + WP8.1)? Về cơ bản, ứng dụng sẽ giống nhau bất kể thiết bị/độ phân giải nào được sử dụng. Tình hình hiện tại là bố trí (bố trí dựa trên lưới động) và hình ảnh cũng có quy mô tốt ngoại trừ văn bản (cỡ chữ).

Văn bản được hiển thị trông đẹp mắt với độ phân giải WVGA (480 × 800) nhưng không thể tin được với độ phân giải 1080p.

Tôi đã đọc rất nhiều thứ như Guidelines for scaling to pixel density hoặc Guidelines for supporting multiple screen sizes

Nhưng tôi vẫn không biết làm thế nào để mở rộng văn bản để có thể đọc được ở bất kể độ phân giải màn hình/DPI.

Tất nhiên tôi có thể viết một lớp sử dụng thuộc tính DisplayInformation.ResolutionScale để chuyển đổi kích thước phông chữ thành giá trị phù hợp.

dụ:

• FontSize 16 trên WVGA với ScaleFactor 1x bằng FontSize 16
• FontSize 16 trên WXGA với ScaleFactor 1.6x bằng FontSize 25,6
• FontSize 16 trên 720p với bằng ScaleFactor 1.5x FontSize 24
• FontSize 16 trên 1080p với ScaleFactor 2.25x bằng FontSize 36

Nhưng tôi un chắc chắn nếu điều này sẽ làm việc cho tất cả các kịch bản. Có cách nào tốt hơn để làm như vậy không? Tôi nghĩ rằng một nhiệm vụ phổ biến có thể được thực hiện với một số chức năng xây dựng.

Tuyên bố từ chối trách nhiệm: đây là (hy vọng) không phải là câu hỏi "cho tôi google điều này cho bạn" Tôi tìm thấy rất nhiều trang về quy mô nhưng tất cả đều bao gồm bố cục hoặc hình ảnh. Nhưng tôi không thể tìm thấy bất cứ điều gì về quy mô kích thước phông chữ. Xin hãy tha thứ cho tôi nếu tôi bỏ lỡ điều gì đó.

---

Edit: Tôi sợ, tôi thất bại trong việc thể hiện các vấn đề rõ ràng: (WVGA bên trái, 1080p ở bên phải)

Answer 1

WinRT có thể tự động mở rộng tất cả mọi thứ đang chạy trên đầu trang của nó và sẽ làm như vậy dựa trên mật độ điểm ảnh của màn hình. Trong Windows 8.0, nó được sử dụng để mở rộng 100%, 140% và 180%. Phiên bản mới hơn có thể có nhiều yếu tố quy mô hơn. Tôi không tin rằng bạn có thể chọn không tham gia quy mô này.

Nếu bạn không quan tâm đến việc sử dụng quy mô mở rộng hoạt động ở cấp độ hệ thống, thì bạn buộc phải tự làm mọi thứ. Bạn có thể mở rộng văn bản theo cách thủ công bằng cách đặt kích thước phông chữ hoặc bạn có thể sử dụng sức mạnh của các biến đổi để mở rộng văn bản hoặc toàn bộ giao diện người dùng của mình.

Answer 2

Điều tôi đã làm cho ứng dụng Cửa hàng Windows là liên kết thuộc tính FontSize với chiều cao trang và chuyển đổi giá trị (bạn phải phát một chút, cho đến khi bạn tìm được giá trị phù hợp cho trường hợp của mình).

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

Và đây là lớp Chuyển đổi của tôi

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; 
     } 
    } 
} 

Đó không phải là hoàn hảo, nhưng hoạt động khá tốt cho đến khi tôi tìm thấy một giải pháp perttier.

Answer 3

Tôi đang chờ câu trả lời cho điều này và đã tự mình đăng một câu hỏi liên quan.
Là giải pháp tạm thời, tôi đã sử dụng iValueConverter và hoạt động ở độ phân giải nhất định nhưng không hoạt động ở các độ phân giải nhất định.

My IValueConverter là như sau:

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(); 
}} 

Tôi hy vọng điều này sẽ giúp ...

Answer 4

hình ảnh mẫu của bạn được gây hiểu lầm bởi vì kích thước thực tế của thiết bị sẽ khác nhau là tốt. This blog post cho bạn biết cách thiết lập trình giả lập để có đại diện chính xác hơn.

Nếu bạn muốn nội dung giống nhau trên mọi màn hình (ví dụ: điện thoại 6 "chỉ hiển thị phiên bản điện thoại 4" bị thổi, thay vì hiển thị thêm 50% nội dung), hãy sử dụng ViewBox để mở rộng ứng dụng của bạn . Tuy nhiên, đây không phải là trải nghiệm người dùng đặc biệt tốt.

Answer 5

tôi thấy rằng việc sử dụng các phương pháp IValueConverter làm việc khá tốt khi được sử dụng kết hợp với các ResolutionScale tài sản:

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; 
    } 
} 

Xin lưu ý, rằng nếu bạn sử dụng cho hơn FontSize (như tôi cũng đang sử dụng nó cho ColumnDefinition .Width) bạn sẽ cần xử lý trả về kết quả Type'ed thích hợp.

sử dụng XAML của tôi trông giống như sau:

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

Và chỉ cần hoàn thành các giải pháp, đối với mỗi trang XAML bạn sử dụng này, bạn cần phải bao gồm những điều sau đây, thay thế SwapChainBackgroundPanel với bất cứ lớp học mà bạn đang sử dụng và xác định đúng không gian tên xml:

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