Windows应用商店和TextBox的拉伸问题，响应式设计

Question

I'm developing windows store application and I have big issue with textbox stretching. I'd like to have responsive design that means I'm using a lot of Grids and VerticalAlignment="Stretch" and HorizontalAlignment="Stretch"

Problem happens that FontSize in TextBoxes are the same and is not aligned to center. That is reason why I'm using ViewBox .

But ViewBox is not allowed to stretch and fill space in Grid cell.

<Viewbox Grid.Row="1" 
    Grid.Column="1" 
    HorizontalAlignment="Stretch" 
    VerticalAlignment="Stretch" >
    <TextBox HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
        Text="{Binding Name, Mode=TwoWay}" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch"/>
</Viewbox>

I could use some hardcoded sizes but in various types of the resolution makes me desperate to make my UI fitable to all types of devices.

I also try to count sizes according to actual screen size but this approach is very cumbersome.

• Do you have any idea how to solve this issue?
• What is the best way to do responsive design in windows store app?
• Dont you know some 3rd party TextBox control that is better like native winRT control?
• Is it good way to use ViewBox for discrete control or is better to use ViewBox for whole screen and set hardcoded sizes?

Answer 1

Stretching a TextBox control horizontally or vertically, doesn't lead to stretching the text inside it, this just causes that the Control resizes to fill available space and displays more text inside it. Glyph size is still depended on FontSize property only.

If you want to horizontally align TextBox contents, set TextAlignment property to HorizontalAlignment.Center. If you want to vertically align TextBox contents, unfortunately there is not a VerticalTextAlignment, but you can set VerticalAlignment to VerticalAlignment.Center (instead of Stretch) so that TextBox positions vertically in middle of it's container.

And for designing you app to fit all types of devices, you may take a look at guidelines in MSDN:

• Guidelines for supporting multiple screen sizes
• Guidelines for resizing to narrow layouts
• Quickstart: Designing apps for different window sizes

My personal exprience is that designing for multiple sizes does not mean that you must not hardcore any size at all, or you need to stretch content of a textbox. It's more a matter of repositioning, hiding/showing elements, in different ways. Take a look at built-in Windows Metro Apps (Now Universal) and how they behave on different sizes.