locked
Making an application look good in multiple resolutions and or snapped. RRS feed

  • Question

  • Lets say I make an app, just a single textblock and a textbox below it...now the textblock is pretty long, but not too long that it wraps lines...but once I snap the app it becomes wrapped, possibly even to 2 or 3 lines depending on how I snap it...how do I make fluid layouts where everything below the textblock will move down instead of being covered/overlapped by text...

    What would be the best way to do this...and keep in mind, I could have maybe 2 or 3 textblocks in a row, so the next one would need to move down, the next one wrapping makes the 3rd have to move even further when it wraps, etc...how would I make a fluid layout like this without the texts overlapping other textblocks, textbox's, or other controls/user made controls, etc...

    Thursday, October 3, 2013 5:29 PM

Answers

  • See Quickstart: Designing apps for different window sizes

    The basic concept is to use layout controls that will flow and resize as the screen changes. For gross changes (portrait to landscape, skinny to wide, etc.) you can use visual states to switch completely between layouts.

    For your example scenario I'd put the TextBlocks in a StackPanel so they will stack without overlapping and put the StackPanel in a ScrollViewer so the whole thing can be used even if there are enough TextBlocks that they don't fit on the screen.

    If the TextBlocks are data driven I'd probably use a ListBox or ListView instead, but the TextBlock in the data template, and then bind to the collection of data to fill the TextBlocks.

    --Rob

    • Marked as answer by Maya Key Friday, October 4, 2013 1:16 AM
    Thursday, October 3, 2013 7:45 PM
    Moderator
  • If I understand the look you are aiming for it sounds like a good use of a Grid control with Rows and Columns set up for your various controls.

    --Rob

    • Marked as answer by Maya Key Friday, October 4, 2013 1:16 AM
    Friday, October 4, 2013 12:40 AM
    Moderator

All replies

  • See Quickstart: Designing apps for different window sizes

    The basic concept is to use layout controls that will flow and resize as the screen changes. For gross changes (portrait to landscape, skinny to wide, etc.) you can use visual states to switch completely between layouts.

    For your example scenario I'd put the TextBlocks in a StackPanel so they will stack without overlapping and put the StackPanel in a ScrollViewer so the whole thing can be used even if there are enough TextBlocks that they don't fit on the screen.

    If the TextBlocks are data driven I'd probably use a ListBox or ListView instead, but the TextBlock in the data template, and then bind to the collection of data to fill the TextBlocks.

    --Rob

    • Marked as answer by Maya Key Friday, October 4, 2013 1:16 AM
    Thursday, October 3, 2013 7:45 PM
    Moderator
  • Rob Caplan, this was very helpful on the basics of working with the controls to make them flow very easily and seamlessly...I am however missing one thing that will help complete it...I have lots of controls now inside a stackpanel and making them flow how I like...even a few grids with extra content in them so they can be layed out more exactly in 3d open space(such as textblock to the left center of a textbox...all this is working fine...

    However at the end of my flow I have put in a listview which is meant to be under the rest of the content & span the full width & height that's left, and display that scrollable list of items...but I can't make it work right...everything I try either stretches over the content, forces me to make it have a set height, which I am not wanting to do, or to make it so it has a set position which I also don't want...I want it to flow with the rest of my content...other attempts get it better but than the scrollbar never appears...I am guessing because it gets bigger and bigger(the control but never stops x pixels above where my margin should be stopping it...

    I guess what I really want (in VB Equalivalency...is a grid anchored top with the variable height of my current stackpanel) but with another grid set to fill the rest of the region which I could put my listview...

    Would there be any equivalent to this for windows store apps, or a way to accomplish my result?  Because this is all I am stuck on now to make my layout flow as it should...

    Thursday, October 3, 2013 8:49 PM
  • If I understand the look you are aiming for it sounds like a good use of a Grid control with Rows and Columns set up for your various controls.

    --Rob

    • Marked as answer by Maya Key Friday, October 4, 2013 1:16 AM
    Friday, October 4, 2013 12:40 AM
    Moderator
  • Except I am unsure of exactly how the row+column setup works...as I do want the last thing to take up the rest of the existing space, some of the text to wrap and push other content down, and the only content side by side is a short word telling what users should put in the box that's directly to the right...

    Friday, October 4, 2013 12:43 AM
  • n/m on my last post, I figured that out...I was thinking the same thing as you except I failed to figure out why it didn't yield even close to the results as I wanted, now I figured out how to get it working...I decided it easier to leave it as it's as far as the stackpanel is concerned, at least for now...because it's a lot of work just to re-work simple values like margins, etc...to get the placement as it should be...as well as row sizes and more...distance between rows, padding, margins...whatever it maybe to get it to display just right...when it already looks as it should now with the stackpanel in use.  And it even wraps and pushes content down as it should...
    Friday, October 4, 2013 1:16 AM
  • I also went ahead and used rows (not columns) as the only content needed was a simple textblock beside a textbox and it wasn't needed...and it was much easier than I thought to get it setup...although a lot of rows for something seemingly simple, and all may not really be needed, but they are there...in case content ever needs to wrap specific content...or I adjust spacing probably more easily separated as it is.
    Friday, October 4, 2013 1:36 AM