Is this method of mine to design a WPF UI right?

Question

Let me state first that , yes there are tons of "resolution independent C# WPF layout" related questions here. My question isn't directly related to that, and I have read up most of them, and have read several tutorials.

GOAL:

As I am pretty new to WPF, my goal is to have a clear way to design a complex , realistic GUI, which is screen resolution independent, and scales appropriately as the window is resized by the user.

CAUSE OF CONFUSION:

I am getting very confused with the tons of options that many tutorials and stackoverflow posts suggest, using Viewboxs, liquid layout, relative layout, using different types of containers, and the fact that WPF is supposed to be resolution independent by design.

Question:

I do not have any intentions to start a debate, I know SO is not for that. I simply would like to know if this procedure that I am planning to use to design my real-world GUI is right.

1 > Design a Mockup in Illustrator ( or in Blend directly, I am not sure which should I use)

2 > Duplicate it by drag & drop design in WPF while designing for 1024 x 768 resolution using ( don't know which yet ) layout

3 > When my user launches my application , get screen size and resize every single control by doing some maths (Yukh! Is this really how I'd have to do it? What was the point of WPF being resolution independent, thats not truly drag and drop design is it?)

Most of my applications are database driven data entry and manipulation forms. Am I using the right strategy which is common practice in the industry or am I missing something?

Many thanks

Answer 1

One of the reasons why WPF is so easily resolution-independent is because of the layout controls it provides.

If you're new to WPF and don't know what layout controls exist yet, I would highly recommend checking out this quick visual start that demonstrates the different layout panels and how they size/arrange their children.

My typical method of building the GUI is:

• Sketch the layout somewhere. My preference is either in Balsamiq or on paper
• Figure out what panels are needed for that type of UI layout
• Type up the XAML to build it in an XAML editor

There are a few things to note here:

• Most elements are not absolutely sized or positioned in WPF. WPF's layout panels usually control the size or positioning of the elements inside them, so usually panels are used to layout controls instead of every control being given an individual size and position.

• The Drag/Drop WPF editor is not used. This is because it often adds unnecessary sizing, positioning, and margins to your controls, which makes your XAML a nightmare to read and maintain. It's far better to let the Panels do their job at sizing and positioning their child elements.

This doesn't mean you can't size or position elements at all, however typically you set relative properties for sizing and positioning instead of absolute ones, and let your Panels do the heavy work of determining where to draw your elements, and how big to make them.

For positioning, relative properties like HorizontalAlignment or VerticalAlignment are used instead of absolute properties like Canvas.Top/Canvas.Left or unnaturally large Margins, although most layout panels take care of positioning your elements in a specific way so that is not needed on most elements.

For sizing, this means setting MaxHeight or MinWidth instead of defining an absolute Height/Width for your elements, or using a Grid's star sizing to relatively size your elements to a percentage of the screen.

Answer 2

I am going to assume that by "resolution independence" you want your application to use all space that is available to it.

There are two main ways to accomplish this, one easy and one correct ;-)

Option 1: Scale the UI

With this option, you are designing a fixed layout for your user interface. You then apply a scale transform to make sure that the UI occupies the entire window.

To do this in WPF, just wrap everything in your UI inside a Viewbox:

<Viewbox>
    <RestOfYourUI />
</Viewbox>

Pros:

• Extremely simple to do in WPF
• Works excellent when all you want to do is handle different pixel densities (but still same/similar screen sizes in terms of cm/inches)

Cons:

• Everything is scaled equally much, meaning text can get unnaturally large or small.
• Does not really utilize the extra space for anything useful - you are not showing any more information than before

Option 2: Rearrange the UI

This is what the web designers call "responsive design" and simply means that you modify the entire layout and content of your UI to match the size and resolution of the current device (or screen/window).

This takes much more effort but the end result is IMO so much better. There isn't any simple checklist but some techniques to achieve this is:

• Use clever layout containers that handle resizing. Resize behavior is different for different panels, but generally the Grid and the DockPanel are good to use when you want to ensure that you are using all available space.
• Hide and show elements on demand. Detect when there is limited space and remove less used UI elements. A good real world example is the Ribbon in MS Office which resizes, rearranges and ultimately removes icons when it gets crowded

Pros:

• You're actually using the screen space to place new information

Cons:

• Takes much more effort to do and get right.

Personally I always go with Option 2 except in extremely rare cases.

Answer 3

Design a Mockup in Illustrator ( or in Blend directly, I am not sure which should I use)

Agreed, if that's the way you roll. I tend to do easier stuff directly in VS and use Blend when I need.

Duplicate it by drag & drop design in WPF while designing for 1024 x 768 resolution using ( don't know which yet ) layout

I still can't recommend WPF's designer. It's downright awful in 2010. It's probably gotten much better in 2012 but I've not got any cause to try it because I'm so used to just writing XAML.

When my user launches my application , get screen size and resize every single control by doing some maths (Yukh! Is this really how I'd have to do it? What was the point of WPF being resolution independent, thats not truly drag and drop design is it?)

Absolutely not. Use WPF's layout system to do the hard work for you. The basis of this is a Panel, which can decide what space to give its children. WPF's Grid control (which is a Panel) is very flexible, and allows you to assign proportional sizes to rows and columns, thus ensuring your layout can expand and contract in a reasonable fashion.

You will always need to keep a minimum size in mind though. Obviously you can't expect your UI to still look OK at 10x10! You can use MinWidth and MinHeight properties to control this, right up to the level of your Window.

Answer 4

3 > When my user launches my application , get screen size and resize every single control by doing some maths

No no, don't manually resize anything. Use a layout, for example a simple Grid.

You define rows and columns. For example:

<Grid Margin="5">
    <Grid.ColumnDefinition>
        <ColumnDefinition Height="Auto" />
        <ColumnDefinition Height="20" />
        <ColumnDefinition Height="*" />
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Content="some text" />
    <TextBox Grid.Row="1" />
    <Label Grid.Row="2" />

</Grid>

You have a auto-size column (i.e. the size will be the size of the Label), a fixed-size column (20) and a last column that uses all the remaining space. So basically when you resize the window, the size of this last column will use more or less space.

See link for more tips / examples about layouts in WPF.