विंडोज स्टोर में फ़ॉन्ट आकार स्केलिंग यूनिवर्सल ऐप (W8.1 + WP8.1)

Question

मैं विंडोज स्टोर यूनिवर्सल ऐप (W8.1 + WP8.1) में टेक्स्ट कैसे स्केल करूं? असल में, ऐप को वही देखना चाहिए चाहे डिवाइस/रिज़ॉल्यूशन का उपयोग किया जाए। वर्तमान स्थिति यह है कि पाठ (फ़ॉन्ट आकार) को छोड़कर लेआउट (गतिशील ग्रिड आधारित लेआउट) और छवियों को अच्छी तरह से स्केल किया जाता है।

प्रदर्शित पाठ WVGA रिज़ॉल्यूशन (480 × 800) के लिए अच्छा लग रहा है लेकिन 1080p रिज़ॉल्यूशन के लिए अविश्वसनीय छोटा है।

मैं पहले से ही की तरह Guidelines for scaling to pixel density या Guidelines for supporting multiple screen sizes

सामान का एक बहुत पढ़ा लेकिन मैं अभी भी प्रदर्शन रिज़ॉल्यूशन/डीपीआई की परवाह किए बिना पठनीय रहने के लिए पाठ पैमाने पर करने के लिए कैसे पता नहीं है।

बेशक मैं एक वर्ग लिख सकता हूं जो DisplayInformation.ResolutionScale संपत्ति का उपयोग फ़ॉन्ट आकार को एक विनियमित मूल्य में बदलने के लिए करता है।

उदाहरण:

• WVGA पर FONTSIZE 16 ScaleFactor 1x साथ ScaleFactor 1.6x साथ WXGA पर FONTSIZE 16
• FONTSIZE 16 के बराबर होती है ScaleFactor 1.5x बराबरी के साथ 720p पर FONTSIZE 25,6
• FONTSIZE 16 के बराबर होती है fONTSIZE 24
• fONTSIZE 16 ScaleFactor 2.25x साथ 1080p पर fONTSIZE 36

के बराबर होती है लेकिन मैं संयुक्त राष्ट्र हूँ निश्चित है कि यह सभी परिदृश्यों के लिए काम करेगा। क्या ऐसा करने का कोई बेहतर तरीका है? मैंने सोचा कि इस तरह का एक सामान्य कार्य कार्यक्षमता में कुछ निर्माण के साथ किया जा सकता है।

अस्वीकरण: यह (उम्मीद है) यह नहीं है कि "मुझे आपके लिए यह प्रश्न पूछने दें" मुझे कई पेज मिलते हैं जो स्केलिंग के बारे में हैं लेकिन वे सभी लेआउट या छवियों को कवर करते हैं। लेकिन मुझे फ़ॉन्ट आकार स्केलिंग के बारे में कुछ भी नहीं मिला। अगर मुझे कुछ याद आया तो कृपया मुझे माफ़ कर दो।

---

संपादित करें: मुझे डर है, मैं स्पष्ट रूप से समस्या को व्यक्त करने में विफल रहा हूँ: (दाईं ओर बाईं तरफ WVGA, 1080p)

Answer 1

WinRT स्वचालित रूप से सब कुछ के शीर्ष पर चल रहे माप सकते हैं और प्रदर्शन के पिक्सेल घनत्व के आधार पर ऐसा करेगा। विंडोज 8.0 में यह 100%, 140% और 180% में स्केल करने के लिए प्रयोग किया जाता था। नए संस्करण में और भी अधिक पैमाने पर कारक हो सकते हैं। मुझे विश्वास नहीं है कि आप इस स्केलिंग से बाहर निकल सकते हैं।

यदि आप अंतर्निहित स्केलिंग का उपयोग करने में रुचि नहीं रखते हैं जो सिस्टम स्तर पर संचालित होता है, तो आपको अपने आप को सब कुछ करने के लिए मजबूर होना पड़ता है। आप फ़ॉन्ट आकार को सेट करके मैन्युअल रूप से टेक्स्ट स्केल कर सकते हैं या आप ट्रांसफॉर्म की शक्ति का उपयोग अपने टेक्स्ट या अपने पूरे यूआई को स्केल करने के लिए कर सकते हैं।

Answer 2

मैंने अपने विंडोज स्टोर ऐप के लिए जो किया वह फ़ॉन्ट आकार संपत्ति को पृष्ठ की ऊंचाई पर बांधना था और मूल्य को परिवर्तित करना था (जब तक आपको अपने मामले के लिए सही मूल्य नहीं मिल जाता तब तक आपको थोड़ा सा खेलना होगा)।

<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

मैंने पाया कि IValueConverter पद्धति का उपयोग करके बहुत अच्छी तरह से काम किया जब ResolutionScale संपत्ति के साथ मिलाकर प्रयोग:

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

कृपया ध्यान दें कि आप FONTSIZE से अधिक के लिए उपयोग करते हैं (जैसा कि मैं भी ColumnDefinition के लिए यह उपयोग कर रहा हूँ .Width) आपको उचित टाइप किए गए आउटपुट को वापस करने में संभाल करने की आवश्यकता होगी।

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

और बस समाधान, तो आप इस पर उपयोग करते हैं, आप निम्नलिखित को शामिल करने की जरूरत है, साथ SwapChainBackgroundPanel की जगह प्रत्येक XAML पेज के लिए पूरा करने के लिए जो कुछ भी वर्ग का उपयोग कर रहे:

मेरे XAML उपयोग इस तरह दिखता है , और एक्सएमएल नेमस्पेस को सही ढंग से परिभाषित करना:

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