Solved

My app's form does not show full-screen on computers with higher resolution display

Posted on 2014-02-15
19
752 Views
Last Modified: 2014-02-27
Hi Experts... I developed my D7 app on a relatively old laptop with lower resolution. When I install my app on computers with higher resolution, it doesn't show "full-screen" - and has big gaps to the right and bottom. It looks sloppy! Do you know if there is any Delphi component I can add to my app that will automatically "re-size" my form (and maybe controls too) so everything looks in proportion and is full-screen... no matter what the resolution is on the target computer?

Thanks!
   Shawn
0
Comment
Question by:shawn857
  • 8
  • 5
  • 3
  • +2
19 Comments
 
LVL 8

Expert Comment

by:Subrat (C++ windows/Linux)
Comment Utility
Use Anchor property to solve this issue. I have forgotten the another property but values are like clClient,clCustom or something simillar.You pay with these properties also.It'll solve your problem.
FYI;I don't hav Emabarcadero installed in my PC.
0
 

Author Comment

by:shawn857
Comment Utility
Thank you Subrat, but Anchor property of what... of my Form? I'm unfamiliar with how it works, can you please explain a little more on how I use it?

Thanks!
   Shawn
0
 
LVL 25

Expert Comment

by:Sinisa Vuk
Comment Utility
Use OnShow event of Form to set:
Self.WindowState := wsMaximized;

Open in new window

In design set Position property to poDefault.

This will maximize form to full except taskbar.

Do you want total "full screen"?
0
 

Author Comment

by:shawn857
Comment Utility
I think I would prefer some ready-made component to handle this... is there a free one (or inexpensive one) out there?

Thanks
    Shawn
0
 
LVL 36

Expert Comment

by:Geert Gruwez
Comment Utility
there is no component to fix this

when designing a form you need to think about what has to fill-out canvas space and what doesn't
otherwise it will always look "sloppy"

items which typically need to be set with align = alClient
memo, richtedit, grids, etc ...

if you resize all proportionally then it's gonna look "sloppy" too

proportional sizing means this:
a caption and memo
> on the small screen the memo can contain 20 lines

on the big screen it will also contain 20 lines
but the text will be 4 to 6 times bigger.

the feedback i got from the users with proportional
> do you think i have a visual disability ? No ? Really ?
> Then why are all the texts in font-size 40 instead of 10 ?

every component (or most of them) contain an alignment property to solve this
redesign your form with that property set correctly

there isn't any good quick-and-dirty component to do this correctly
0
 
LVL 36

Expert Comment

by:Geert Gruwez
Comment Utility
the windowstate wsMaximized will fill out your form completely on the screen it's displayed
> with a workaround bugfix: form_instance.top := 0;
on some delphi/windows versions the maximize doesn't put the form at the top
0
 
LVL 25

Expert Comment

by:Sinisa Vuk
Comment Utility
To show maximized form is easy - set in design mode properties of form:
Position := poDefault
WindowState := wsMaximized

About form scaling - maybe you can have a luck with Easysize component on Torry.net
0
 

Author Comment

by:shawn857
Comment Utility
Geert, you are correct and you've given me something to think about. I've been too concerned with trying to have my app be displayed as "fullscreen" to everybody. I should be focusing more on making it simply look decent to everybody, whether it fills their full screen or not. But still, all this alignment and anchor stuff is confusing to me and I basically don't know where to start.
   OK, certainly more info is needed for you guys to help me: My development computer is a fairly old IBM laptop, with 1024x768 resolution and 96 DPI (normal size).  And here is a screenshot of my app - basically it is a TPageControl with 3 pages on top of a regular form. When I designed my app, I made the main form and TPageControl basically fill out the full screen. For your information, the pertinent properties of my main form are:

Align = alLeft
Anchors = akLeft, akTop, akBottom
AutoScroll = True
AutoSize = False
FormStyle - fsNormal
Position = poScreenCenter
Scaled = True
WindowState = wsNormal


... and for my TPageControl

Align = alNone
Anchors = akLeft, akTop


Naturally, my form and PageControl are designed to be "wider" than "taller", as I designed it to fit the whole screen of my development computer... and I guess I would just like to keep these same basic proportions (ie. width > height) with any target computer - so it doesn't look too stretched out or "silly". I realize that on a higher resolution computer, there is then going to be some "empty space" at the right and the bottom of the screen... and that's okay, I can live with that - I don't need to have it "fullscreen" on every target computer. As Geert said, to increase font sizes so much that it looks ridiculous just to be "proportional", is not smart. So can anyone offer my some suggestions as to what "align" and "anchor" settings I might need to use to accomplish this?

Thanks!
    Shawn
fullscreen.jpg
0
 
LVL 36

Accepted Solution

by:
Geert Gruwez earned 500 total points
Comment Utility
i'll try and give you insight on what i do

first thing
when you program for a company you'll have to indicate a minimum size screen
that used to be 800x600 but with even forklift laptops having 1024x768 that's a little outdated, especially with the price of monitors these days
so .. go with 1024x768 as the minimum

usually you have areas which have a certain functionality
top and left are for navigating
  > like pagecontrol headers, treeview, menus, etc
bottom is info
  > statusbar, progress, hints, etc
the action part
  > in the middle

when I design a section within that, i also try and stay true to that
for example:
  a page in the pagecontrol could have a treeview on the left and a grid filled out with an extra statusbar on the bottom

don't bother about allowing the user to move the controls around
unless you provide an development environment like delphi
even microsoft office doesn't allow to place the ribbon controls on the right
i bet, it's because they also thought it would look like crap

the center of the screen is were the user works
and he/she will want to see as much data as is readable

to advise on your full screen sample: on that page
1: the select files groupbox set to align = altop
2:
below that, i would add a panel "pnlProcessFiles", edges removed, with align = altop
add the ok button, the progressbar and magnifying button  to the panel, i assume this is for processing the files ?
> i guess the magnifying glass would reveal the results next ?
3: below that, would be the results of the processing ... like a memo or grid with align = alClient

this way panels are used to "contain" components in certain areas
typically i start with a top panel "pnlOptions" align=alTop
and a sometimes a left panel "pnlNav" align=alLeft

one very neat component allows collapsing areas: the JvRollOut from Jedi VCL
This behaves like a panel, except when clicking on the caption, the section rolls up or down revealing the components on it
> this hiding of the buttons also exists in ribbon controls, the up/down  arrow on the upper right
this allows the user to have a bigger action area
i would add such a rollout with alTop and then move the groupbox and pnlProcessFiles to that "container"
After the user has processed the results and all is displayed in the grid he/she can close the top part by clicking the caption of the rollup

believe me, every line counts for a user

i have a screen where i followup about 100 databases,
when monitoring something you want to see in a blink of eye what's wrong.
scrolling is a real pain if the bad items are always off screen

the only time i use the anchors is when i want something to stick to the right side of the screen
in this case the right side of the edit boxes of your files selections
set the groupbox = altop
it will fillout the whole with of the page on the pagecontrol
move the select file buttons to the left edge
move the edits adjacent the buttons
now expand the edits so the right side ends at the right side of the page on the pagecontrol
now active the right anchor of the edits

in runtime, when resizing the form, the edits will grow with the width of the form
if someone has to enter a very long path/filename they have more change of displaying it completely in a wider form
be carefull to set a minimum form size too with this > or the edit will be very narrow

cutting it down:
divide the form using panels (or similar like JvRollout)
align the panels top or left
maximize the user working area, by setting the grid/memo like items to align = alClient
or allowing the edits to grow with the right area of the form
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:shawn857
Comment Utility
Thank you very much for the detailed reply Geert... this is a sensible framework I will absolutely follow for any future apps I make. Right now with this one though, I'm behind schedule as it is to get it out to my testers and I just can't undertake major design surgery on my app right now. Basically at this time, I would be satisfied having my app being snuggled up to the top left corner of the target user's screen, while keeping essentially the same size as I designed it , if possible(1024x768). If it doesn't fill the user's whole screen, that doesn't matter... just as long as my original proportions are still approximately okay. Could you give any advice of selections of Align and Anchor properties, or special code in the Form OnCreate event to achieve this?

Thank You!
    Shawn
0
 
LVL 36

Expert Comment

by:Geert Gruwez
Comment Utility
forget anchor and align for a form, they don't make sense in that aspect
subrat2009 doesn't seem to be a Delphi connaisseur

if you want it an initial position top, left, set form.position to poDesigned
and in the formcreate set top and left to 0

you could also set the mainform to poScreenCenter so it goes nicely in the middle of the attention ... :)
0
 

Author Comment

by:shawn857
Comment Utility
Thanks Geert, I'll try that. Geert, Is it necessary to set any Align or Anchor properties on my TPagecontrol... ?

Thanks
   Shawn
0
 
LVL 25

Expert Comment

by:Sinisa Vuk
Comment Utility
Try to make small test example with some components you use in real app. Play with align/anchor properties as Geert suggest. You will teach something and not mess up real app.
0
 

Author Comment

by:shawn857
Comment Utility
Geert, the poDesigned worked good. Geert, I will urge my users to have a minimum screen resolution of 1024x768... but in the event that a user has a very low resolution (for example 800x600), I wrote some code for my Form.OnCreate event in hopes of keeping my form's width/height ratio and proportions "approximately" the same, no matter the resolution on the target computer:

  OriginalFormHeight := 738;
  OriginalFormWidth := 1024;

  Frmindicate.Left :=0;
  Frmindicate.Top :=0;

  if (Screen.Height >= OriginalFormHeight) and (Screen.Width >= OriginalFormWidth) then
  begin
    Frmindicate.Height := OriginalFormHeight;
    Frmindicate.Width := OriginalFormWidth;
  end
  else if (Screen.Height < OriginalFormHeight) and (Screen.Width >= OriginalFormWidth) then   // eg. 1280 x 700
  begin
    Frmindicate.Height := Screen.Height;
    Frmindicate.Width := Round(Screen.Height * (OriginalFormWidth / OriginalFormHeight));
  end
  else if (Screen.Height >= OriginalFormHeight) and (Screen.Width < OriginalFormWidth) then   // eg. 1000 x 824
  begin
    Frmindicate.Width := Screen.Width;
    Frmindicate.Height := Round(Screen.Width * (OriginalFormHeight / OriginalFormWidth));
  end
  else      // both height and Width are smaller than development machine's, 
  begin
    if (Screen.Width/Screen.Height) >= (OriginalFormWidth/OriginalFormHeight) then        // eg. 800 x 580
    begin
      Frmindicate.Height := Screen.Height;
      Frmindicate.Width := Round(Screen.Height * (OriginalFormWidth / OriginalFormHeight));
    end
    else    // eg. 800x648
    begin
      Frmindicate.Width := Screen.Width;
      Frmindicate.Height := Round(Screen.Width * (OriginalFormHeight / OriginalFormWidth));
    end;
  end;

Open in new window



(...Frmindicate is what I named my Form)

Well, when I run this on 800x600 resolution, the form is the proper size, but my controls within the form (TPagecontrol, etc) don't show up completely or are only partially shown. Would "anchoring" or "aligning" My TPagecontrol to my Form do any good?

Thanks
   Shawn
0
 
LVL 36

Expert Comment

by:Geert Gruwez
Comment Utility
i assume the missing controls are on the bottom and on the right side ?
anchors is useless in this case

you can set the min max size in the constraints of a control

if you place controls on those side, you need the following

Basic setup:
The top and left panel as usual alTop and alLeft aligned
The data panel filling out the rest of the form with alClient

within that data panel,
you need an extra panel on the bottom or on the right side
> make sure the parent is the data panel
the right panel should be set to align = alRight
the bottom panel should be set to align = alBottom

set the width of the right panel, height of bottom panel
and cut/paste the buttons to that new panel

here is a form sample with everything aligning accordingly

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, StdCtrls, ExtCtrls;

type
  TForm1 = class(TForm)
    pnlLeft: TPanel;
    pnlTop: TPanel;
    pnlData: TPanel;
    Panel4: TPanel;
    pnlDataBottom: TPanel;
    btnRemoveBorders: TButton;
    pnlResults: TPanel;
    Label1: TLabel;
    Memo1: TMemo;
    pnlTopRightButton: TPanel;
    btnStayOnTheright: TButton;
    Edit1: TEdit;
    Label2: TLabel;
    Button1: TButton;
    procedure btnRemoveBordersClick(Sender: TObject);
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.btnRemoveBordersClick(Sender: TObject);
var
  I: Integer;
begin
  for I := 0 to ComponentCount - 1 do
    if Components[I] is TPanel then
      (Components[I] as TPanel).BevelOuter := bvNone;
end;

end.

Open in new window


dfm:
object Form1: TForm1
  Left = 103
  Top = 157
  Caption = 'Form1'
  ClientHeight = 312
  ClientWidth = 684
  Color = clBtnFace
  Constraints.MinHeight = 350
  Constraints.MinWidth = 700
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
  object pnlLeft: TPanel
    Left = 0
    Top = 41
    Width = 81
    Height = 271
    Align = alLeft
    Caption = 'Panel Left'
    TabOrder = 0
  end
  object pnlTop: TPanel
    Left = 0
    Top = 0
    Width = 684
    Height = 41
    Align = alTop
    TabOrder = 1
    DesignSize = (
      684
      41)
    object Label2: TLabel
      Left = 224
      Top = 16
      Width = 196
      Height = 13
      Caption = 'Right side of edit grows with right border'
    end
    object btnRemoveBorders: TButton
      Left = 16
      Top = 8
      Width = 121
      Height = 25
      Caption = 'btnRemoveBorders'
      TabOrder = 0
      OnClick = btnRemoveBordersClick
    end
    object pnlTopRightButton: TPanel
      Left = 545
      Top = 1
      Width = 138
      Height = 39
      Align = alRight
      TabOrder = 1
      object btnStayOnTheright: TButton
        Left = 8
        Top = 9
        Width = 121
        Height = 25
        Caption = 'Stay on the right'
        TabOrder = 0
      end
    end
    object Edit1: TEdit
      Left = 426
      Top = 10
      Width = 106
      Height = 21
      Anchors = [akLeft, akTop, akRight]
      TabOrder = 2
      Text = 'Edit1'
    end
  end
  object pnlData: TPanel
    Left = 81
    Top = 41
    Width = 603
    Height = 271
    Align = alClient
    Caption = 'Panel DATA'
    TabOrder = 2
    ExplicitLeft = 87
    ExplicitTop = 65
    ExplicitWidth = 882
    ExplicitHeight = 460
    object Panel4: TPanel
      Left = 481
      Top = 1
      Width = 121
      Height = 210
      Align = alRight
      Caption = 'Panel Data Right'
      TabOrder = 0
      DesignSize = (
        121
        210)
      object Button1: TButton
        Left = 16
        Top = 179
        Width = 94
        Height = 25
        Anchors = [akRight, akBottom]
        Caption = 'Bottom Right'
        TabOrder = 0
      end
    end
    object pnlDataBottom: TPanel
      Left = 1
      Top = 211
      Width = 601
      Height = 59
      Align = alBottom
      Caption = 'Panel Data Bottom'
      TabOrder = 1
    end
    object pnlResults: TPanel
      Left = 1
      Top = 1
      Width = 480
      Height = 210
      Align = alClient
      Caption = 'Panel Results'
      TabOrder = 2
      ExplicitLeft = 248
      ExplicitTop = 120
      ExplicitWidth = 385
      ExplicitHeight = 233
      object Label1: TLabel
        Left = 1
        Top = 1
        Width = 478
        Height = 13
        Align = alTop
        Caption = 'Results :'
        ExplicitWidth = 42
      end
      object Memo1: TMemo
        Left = 1
        Top = 14
        Width = 478
        Height = 195
        Align = alClient
        Constraints.MinHeight = 195
        Constraints.MinWidth = 470
        Lines.Strings = (
          'Memo1')
        TabOrder = 0
        ExplicitLeft = 5
        ExplicitTop = 9
        ExplicitWidth = 757
        ExplicitHeight = 408
      end
    end
  end
end

Open in new window

0
 
LVL 22

Expert Comment

by:senad
Comment Utility
Use Anchor property on all of the components on the form. 5 minutes work. No big deal ....
0
 

Author Comment

by:shawn857
Comment Utility
Senad - anchor set to what? Top? Left?, etc?

Thanks
    Shawn
0
 
LVL 22

Expert Comment

by:senad
Comment Utility
http://www.youtube.com/watch?v=FNWcy8S2k4Y
if its on the right (the component)  then turn off akLeft,akTop (False) and set other 2 to True.So no matter how the form resizes components stay in place. Resolution has nothing to do with it.
0
 

Author Closing Comment

by:shawn857
Comment Utility
Thank you Geert!

Cheers
   Shawn
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

A lot of questions regard threads in Delphi.   One of the more specific questions is how to show progress of the thread.   Updating a progressbar from inside a thread is a mistake. A solution to this would be to send a synchronized message to the…
The uses clause is one of those things that just tends to grow and grow. Most of the time this is in the main form, as it's from this form that all others are called. If you have a big application (including many forms), the uses clause in the in…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now