Usability Hacks

I came across an interesting set of user annoyances as I was building an app the other day that I thought I'd share with my readers (Hi Jeff and Steve.... and Mom).  I wanted to make a scroll viewer.  Not so tough.  Click, drag, done.  I wanted to put more than one thing in it.  Also not the end of the world.  Add a grid to the scroll viewer, then add stuff to the grid to your heart's delight.  Yay for good UI!  My enthusiasm didn't last, however, once I actually wanted to use the scrolling capability of the scroll viewer.  I want to add more stuff than can fit in the bounds of the viewer... you know... so I use the scroller to get to them.  Just keep adding things, right?  Not exactly.

It sure looks like the stuff is extending down out the bottom of the ScrollViewer:

 

Though even this isn't particularly satisfactory.  What if I actually wanted to edit that outlined stuff down below the bottom of the viewer?  I can't even see it, since I can't scroll the ScrollViewer during design time.  Well, no worries.  I can just run the application and see what it looks like...

And here we come across the second problem. I can scroll at run time either.  The ScrollViewer thinks that its contents fit within its bounds, and therefore it displays no scroll bar.  The issue here is that the grid has fit itself to be precisely the size of the scroll viewer.  There may be things down off the bottom of it, but the grid simply clips those.  We can do better.  The simplest way to take care of this problem is to make your own user control out of the grid (right click on the grid in the timeline and select "Make Into User Control."  This will bring up another artboard containing only the grid element and its children.

 

We don't need a ScrollViewer inside a ScrollViewer, so go ahead and remove the ScrollViewer from the timeline by right clicking and selecting "Ungroup" (because we are ungrouping its children, even though there is only one of them).  Do the same thing to the grid, since the LayoutRoot is a grid already.  You'll have to reapply any background coloring.

Now reset the size of the User Control iteslf.  You'll probably have to realign and drag out your LayoutRoot to expand to the size.  I recommend using the grid qualities to keep your items aligned properly (Add grid rows and columns by using the selection tool when the LayoutRoot is the active element... click around the sides.  You'll see a little yellow line pop up.)

Make sure to expand the Layout property in the property editor and set the Minimum height and width of your User Control.  This ensures that it won't get squished to fit in the scroll viewer back in the main window.

 

 

 I changed my background color at this point to keep track of the screenshots, but now you should have something looking like this (if you're playing along at home).

When you switch back to the main window now, you need to rebuild to see your pretty new user control. 

Now when I run the application, I get what I want:

I can move down and see my button of amazing awesomeness!  Sweet!

I think this whole thing is a little clunky, and if you were making a bunch of these, the process would get irritating quickly.  You could make one master usercontrol that was just a big grid to cut down on the time, but what would really be helpful is to allow design-time scrolling.  Not a feature we have just yet, nor one I can comment on for the future.  But it would sure be nice.  We'll see.

Comments

• Anonymous
  November 26, 2007
  The URLs of the images in this blog post do not point to a public server. The images are not visible to me.