locked
Problem creating consistent text sizes in buttons with ViewBox RRS feed

  • Question

  • Hi, I'm running into a problem with consistent font sizes in my scalable buttons.

    My Goal:

    • A UI that scales with different UIs and views (Landscape, Filled, Snapped, Portrait).

    My buttons in my grid are scaling great in the 4 views after setting:

    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

    The fonts were not though, they were a fixed size. So I did some research and saw someone had used a <Viewbox> control in the Button's content to resize the font automatically. I thought this was the answer, it was working so well except the font sizes were different on some buttons. I tried dynamically setting the MaxHeight of the Viewbox to the smallest font button but this didn't work. Here's an example of what I tried to do:

    <Button x:Name="btnOne" Grid.Column="1" Grid.Row="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Viewbox MaxHeight="{Binding ActualHeight, ElementName=btnTwo, Mode=TwoWay}">
            <TextBlock>
    	     I
            </TextBlock>
        </Viewbox>
    </Button>
    <Button x:Name="btnTwo" Grid.Column="2" Grid.Row="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Viewbox>
            <TextBlock>
    	     M   
            </TextBlock>
        </Viewbox>
    </Button>
    

    When in Snapped view the "M" button renders a small font while the "I" is bigger because the buttons are tall and narrow. I'm trying to get the "I" button (btnOne) to match the same font size as "M" (btnTwo).

    Anyone know a better way to scale fonts consistently?

    Thanks, Mark Moeykens

    Wednesday, August 21, 2013 11:53 PM

Answers

  • After a lot of experimenting I finally found a solution to this. As it turns out the binding wasn't working after trying countless variations.

    So instead I set the Viewbox.MaxHeight property on the Page.LayoutUpdated event and it worked fine.

     
    private void Page_LayoutUpdated(object sender, object e)
    {
        viewboxOne.MaxHeight = viewboxTwo.ActualHeight;
    }
    

    FYI:

    The Page.SizeChanged event didn't work because the viewbox did not have the ActualHeight property set at that time. LayoutUpdated event happens after SizeChanged event.

    Not sure if there's a better event or way to do this so I'm still willing to hear suggestions!
    Sunday, August 25, 2013 3:48 AM

All replies

  • ViewBox will scale the way you are seeing it behave.  You cannot link the two.  Can you describe in more detail why you want to do this?

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Thursday, August 22, 2013 8:09 PM
    Moderator
  • Hi Jeff,

    When in Landscape mode the buttons are bigger and when in Snapped mode the buttons become a lot smaller. So I want the button text font size to scale with the button size. It works perfectly except for one button where the font size is a lot bigger than the rest and it just looks funny. So it's almost like I really want one button text font size to scale with the UI and the rest of the button text font sizes to match it for consistency.

    Or perhaps this is the wrong way to go about it? Is there a more standard way to scale button text font size to the different view modes? I'm open to any suggestions and best practices.

    Thanks!

    Mark


    • Edited by Mark Moeykens Thursday, August 22, 2013 10:01 PM typo
    Thursday, August 22, 2013 9:21 PM
  • After a lot of experimenting I finally found a solution to this. As it turns out the binding wasn't working after trying countless variations.

    So instead I set the Viewbox.MaxHeight property on the Page.LayoutUpdated event and it worked fine.

     
    private void Page_LayoutUpdated(object sender, object e)
    {
        viewboxOne.MaxHeight = viewboxTwo.ActualHeight;
    }
    

    FYI:

    The Page.SizeChanged event didn't work because the viewbox did not have the ActualHeight property set at that time. LayoutUpdated event happens after SizeChanged event.

    Not sure if there's a better event or way to do this so I'm still willing to hear suggestions!
    Sunday, August 25, 2013 3:48 AM
  • Thanks for sharing your solution with the community!

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Monday, August 26, 2013 12:24 PM
    Moderator