Docking layout off by a pixel or two

[Scott Gifford]

One other issue I'm having: I'm trying to devices of different sizes
and resolutions, including those that let you change from portrait to
landscape mode. Rather than doing tedious pixel calculations, I'd
like to just use the Dock property to lay things out automatically.

This almost works great.

The problem is that sometimes it's off by a pixel or so, and I can't
find a way to fix it. Here's a simple example. Create a new
Windows Mobile 5.0 SmartPhone app, drop in a Label component and dock
it to the bottom, then drop in a ListView component and dock it to the
center.

On my machine at least, the label sticks out by one pixel on either
side of the listbox. It doesn't cause any functional problems, but it
makes my app look very unpolished and unprofessional IMHO.

Is there a way to work around this? Or will I have to just live with
it or implement my own positioning?

Thanks,

----Scott.

 

[Simon Hart [MVP]]

You must be doing something wrong as this works for me. I am assuming you are
talking about WM pro (touch) not smartphone and you are dropping a label
control onto a form container as you are a listview control. What do you mean
by "sticks out"?

 

[Scott Gifford]

You must be doing something wrong as this works for me. I am
assuming you are talking about WM pro (touch) not smartphone

It is smartphone; Visual Studio says: Windows Mobile 5.0 Smartphone
SDK.

and you are dropping a label control onto a form container as you
are a listview control.
Right.

What do you mean by "sticks out"?

The label appears to be one pixel wider larger than the listview on
both sides, like this:

http://suspectclass.com/wmgui/wmgui.png

Although I can see in the debugger that they both have the same Width
property at runtime.

I stuck my (very simple) project here:

http://suspectclass.com/wmgui/GuiTest.zip

Thanks for any ideas!

----Scott.

 

[Simon Hart [MVP]]

It's not wider (although it appears wider) it's the fact that the listview is
drawing a 1px border on each side which is giving the appearance of the label
being wider. If you don't want this, then position the listview outside of
the client area ie x = -1, y = -1, width = Width + 2.

You might want to factor in higher res devices instead of hardcoding 1 pixel
for a border if you decide to do this.
--
Simon Hart
Visual Developer - Device Application Development MVP
http://simonrhart.blogspot.com

 

[Scott Gifford]

It's not wider (although it appears wider) it's the fact that the
listview is drawing a 1px border on each side which is giving the
appearance of the label being wider. If you don't want this, then
position the listview outside of the client area ie x = -1, y = -1,
width = Width + 2.

Right, but to do that I have to abandon using the Dock property and
position things manually. I've actually gotten it working fairly
device-independently without giving up visual layout by careful use of
the Anchor property, but I thought the Dock property would be more
reliable for laying it out on any device.

You might want to factor in higher res devices instead of hardcoding
1 pixel for a border if you decide to do this.

I'm not exactly sure what you mean here. Is there some smarter way to
get the border size for the ListView control?

Thanks!

----Scott.

 

[Simon Hart [MVP]]

Whats wrong with using the Anchor property? The functionality you are having
a problem with is perfectly OK, if it did anything else, it would be a bug.
It is annoying you can't specify no border on the listview, but to get around
this you simply draw the control outside of the viewable client area. The
Anchor and Dock are pretty much the same except the Anchor allows more
control.

In terms of border width, on hi-res devices, the border will not be 1px
probably 2px. To calculate this simply use: [val] * [dpi] / [designDPI].

See if this helps:
http://simonrhart.blogspot.com/2007/10/targeting-both-vga-and-qvga-screens.html

--
Simon Hart
Visual Developer - Device Application Development MVP
http://simonrhart.blogspot.com

 

[Scott Gifford]

Thanks for your answer Simon,

Whats wrong with using the Anchor property? The functionality you
are having a problem with is perfectly OK, if it did anything else,
it would be a bug. It is annoying you can't specify no border on
the listview, but to get around this you simply draw the control
outside of the viewable client area. The Anchor and Dock are pretty
much the same except the Anchor allows more control.

Since Anchor is based on counting pixels from the edges of the screen
and Dock is more policy based, I expected Dock to do a better job of
automatically adapting to different-sized screens, saving me from
having to do things like the DPI calculation you describe below. But
I can certainly use Anchor if that's the best option.

In terms of border width, on hi-res devices, the border will not be
1px probably 2px. To calculate this simply use: [val] * [dpi] /
[designDPI].

See if this helps:
http://simonrhart.blogspot.com/2007/10/targeting-both-vga-and-qvga-screens.html

Thanks, I didn't know about the device DPI stuff, I'll keep it in
mind while doing GUI development!

----Scott.

 

[Scott Gifford]

[...]

In terms of border width, on hi-res devices, the border will not be 1px
probably 2px. To calculate this simply use: [val] * [dpi] / [designDPI].

Should the value of [dpi] / [designDPI] be equal to Form.AutoScaleFactor?

Thanks!

----Scott.