Solved

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

Posted on 2014-02-15
19
759 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)
ID: 39862239
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
ID: 39862242
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 26

Expert Comment

by:Sinisa Vuk
ID: 39862442
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
ID: 39862837
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 37

Expert Comment

by:Geert Gruwez
ID: 39864500
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 37

Expert Comment

by:Geert Gruwez
ID: 39864507
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 26

Expert Comment

by:Sinisa Vuk
ID: 39864541
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
ID: 39866026
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 37

Accepted Solution

by:
Geert Gruwez earned 500 total points
ID: 39866725
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:shawn857
ID: 39869542
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 37

Expert Comment

by:Geert Gruwez
ID: 39869564
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
ID: 39871721
Thanks Geert, I'll try that. Geert, Is it necessary to set any Align or Anchor properties on my TPagecontrol... ?

Thanks
   Shawn
0
 
LVL 26

Expert Comment

by:Sinisa Vuk
ID: 39871728
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
ID: 39872408
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 37

Expert Comment

by:Geert Gruwez
ID: 39873879
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
ID: 39874402
Use Anchor property on all of the components on the form. 5 minutes work. No big deal ....
0
 

Author Comment

by:shawn857
ID: 39876058
Senad - anchor set to what? Top? Left?, etc?

Thanks
    Shawn
0
 
LVL 22

Expert Comment

by:senad
ID: 39876357
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
ID: 39892480
Thank you Geert!

Cheers
   Shawn
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction The parallel port is a very commonly known port, it was widely used to connect a printer to the PC, if you look at the back of your computer, for those who don't have newer computers, there will be a port with 25 pins and a small print…
In my programming career I have only very rarely run into situations where operator overloading would be of any use in my work.  Normally those situations involved math with either overly large numbers (hundreds of thousands of digits or accuracy re…
Need to grow your business through quality cloud solutions? With everything required to build a cloud platform and solution, you may feel like the distance between you and the cloud is quite long. Help is here. Spend some time learning about the Con…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

919 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

21 Experts available now in Live!

Get 1:1 Help Now