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.