Handle font size for multiple screen size windows 8 metro apps

Question

I have a text of font size 14.
On smaller screens it's visible but on bigger screens it becomes smaller.
How do I handle this?
On android we have SP which adjust the font size according to the screens.
Is there anything similar to this in windows 8 ?

check out this thread on the MSDN forums: http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/659e1e95-9013-4644-a3a4-896335dec8ef - ViewBox may be your answer, if indeed that's the behavior you want — Jim O'Neil, Oct 05 '12 at 14:30

Jerry Nixon · Answer 1 · 2013-01-15T18:04:04.453

I assume you are using XAML?

So, you should start with something like this:

<Page.Resources>
    <x:Double x:Key="MyFontSize" />
    <Style TargetType="TextBlock" x:Name="StandardText">
        <Setter Property="FontSize" Value="{StaticResource MyFontSize}" />
    </Style>
</Page.Resources>

<TextBlock Style="{StaticResource StandardText}">Hello World</TextBlock>

Then in your code behind have something like this:

Double _FontSize;
if (Windows.UI.ViewManagement.ApplicationView.Value
    == Windows.UI.ViewManagement.ApplicationViewState.FullScreenPortrait)
{
    // based on portrait
    if (this.RenderSize.Height > 2000)
        _FontSize = 30;
    if (this.RenderSize.Height > 1000)
        _FontSize = 20;
    else
        _FontSize = 10;
}
else
{
    // based on landscape
    if (this.RenderSize.Height > 1500)
        _FontSize = 30;
    if (this.RenderSize.Height > 1000)
        _FontSize = 20;
    else
        _FontSize = 10;
}
this.Resources["MyFontSize"] = _FontSize;

Whatever you detect when your app loads will always remain unless the user changes monitors on you!

Actually the screen size will change if you move the metro (store app) between displays when you have multiple monitors. — jr., Jan 12 '13 at 03:07
Stunning; I came to the same conclusion just yesterday. Maybe I was reading your comment in my mind (mental StackOverflow). — Jerry Nixon, Jan 15 '13 at 18:03

score 1 · Answer 2 · answered Oct 07 '12 at 20:00

1

I was doing a research on this. I came to know 2 different things. One is View Box and the other is logical DPI.

answered Oct 07 '12 at 20:00

user1714962

33
5

I tried using ViewBox in XAML but it was showing error (was using c#) – Inder Kumar Rathore Oct 08 '12 at 03:54
can you share your code? I have implemented ViewBox and it works fine. – user1714962 Oct 08 '12 at 15:44
ViewBox works fine in case of Landscape/Fill/Portrait View but not in Snap View.. So if you are not trying to show anything in Snap View than this thing should resolve your issue. – user1714962 Oct 13 '12 at 22:34

score 1 · Accepted Answer · answered Jan 15 '13 at 18:05

1

This will do exactly what you want.

<Viewbox>
    <TextBlock>Hello World</TextBlock>
</Viewbox>

answered Jan 15 '13 at 18:05

Jerry Nixon

31,313
14
117
233

Thank for your answer.. If you are a MS guy could you please look at this question http://stackoverflow.com/q/14337623/468724 – Inder Kumar Rathore Jan 15 '13 at 18:11

Handle font size for multiple screen size windows 8 metro apps

3 Answers3