Jump to content

(Solved) How to center the unicontainerpanel in the middle of the screen in a UniFrame


robinhodemorais

Recommended Posts

Hello, I'm creating a screen using UniFrame, in it I put a scrollBox to create a scrollbar due to the size of the screen and inside the scroll I have a unicontainerpanel with my components, this unicontainerpanel needs to be centered on the screen, so with the command below in create from UniFrame I can center, but uniFrame doesn't have the onResize or onScreenResize event as there is in uniForm, so how can I center my unicontainerpanel in a uniFrame when the user changes the screen size?

code used in OnCreate

  unicontainerpanel.Top := 0;
  unicontainerpanel.Left := Round((Screen.Width / 2) - (unicontainerpanel.Width / 2));

 

Link to comment
Share on other sites

Structure

> uniFrame (no alignment)

>> uniScrollBox(Align = alClient)

>>> uniSimplePanel (no alignment) - the uniSimplePanel is my central panel, which should be centered in the middle of the uniScrollBox

 

With the code below in uniFrame's onCreate I can center it, but if I move the browser it doesn't center in the middle again

procedure TfrmPagePadrao.UniFrameCreate(Sender: TObject);
begin
  uniSimplePanel.Top  := 0;
  uniSimplePanel.Left := Round((Screen.Width / 2) - (uniSimplePanel.Width / 2));
end;

image.thumb.png.0416dd1c8dd66cd3acaedf18f85cc109.png

Link to comment
Share on other sites

2 hours ago, andyhill said:

From my viewpoint you are using VCL positioning and thinking. 

You need to forget the VCL approach and position everything the Sencha way via Layout / LayoutConfig / Flex.

how can i do this with sencha? I do not know

Link to comment
Share on other sites

7 hours ago, Sherzod said:

Hello,

Please see related demos:

\FMSoft\Framework\uniGUI\Demos\Desktop\Clientside Alignment - xx

 

I checked these demos, but in all my tests I couldn't center as needed, I tried anchor but I couldn't either, the problem is if I move the browser it doesn't center, the attached demo shows the situation.

Link to comment
Share on other sites

A brief look at your screen shot, you have 3 panels each using 1/3 of the screen - Yes ?

If so this is how I would do it (there are many ways to do this):-

1) MainPanel Layout "vbox", LayoutConfig height "100%" width "100%" (all other panels sit inside this panel) - this becomes the browsers view

    a) TopPanel Layout "hbox", LayoutConfig height "33%" width "100%"

    b) MiddlePanel Layout "hbox", LayoutConfig height "33%" width "100%"

    c) BottomPanel Layout "hbox" LayoutConfig height "33%" width "100%"

Layout can define orientation importance

LayoutConfig allows for fine tuning

You can also use a combination of Flex (ratio adjuster) to automatically cater for dynamic changes

(I have done this from memory so forgive me if it is not correct)

 

Link to comment
Share on other sites

5 hours ago, andyhill said:

Did this help ?

hello, sorry for the delay, off here, so, my problem is the panel is inside, these are not the simple bluepanela that should always be more positioned in the middle of the scrollbox, I've tried in several ways here, but it wasn't, even following the examples in the demo, see that in the attached gif, when moving the browser it does not position itself, my problem is not being able to reposition it in the middle again using the uniframe > scrollbox > simplepanel

Link to comment
Share on other sites

  p.ClientEvents.ExtEvents.Values['afterlayout'] := ' function afterlayout(sender, layout, eOpts)'
                                                  + ' {'
                                                  + '    var PWidth  = Ext.get("' + p.jsid + '").getWidth();'
                                                  + '    var PHegith = Ext.get("' + p.jsid + '").getHeight();'
                                                  + '    var FWidth  = Ext.get("' + self.jsid + '").getWidth();'
                                                  + '    var FHegith = Ext.get("' + self.jsid + '").getHeight();'
                                                  + '    var PTop    = FHegith / 2 - PHegith/2;'
                                                  + '    var PLeft   = FWidth / 2  - PWidth/2;'
                                                  + '    Ext.get("' + p.JSId + '").setStyle({"top":PTop + "px","left":PLeft + "px"});'
                                                  + ' }';

据中.gif

  • Thanks 1
Link to comment
Share on other sites

unit Unit2;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics,
  Controls, Forms, uniGUITypes, uniGUIAbstractClasses,
  uniGUIClasses, uniGUIFrame, uniGUIBaseClasses, uniPanel;

type
  TUniFrame2 = class(TUniFrame)
    P: TUniContainerPanel;
    SP: TUniSimplePanel;
  private
    { Private declarations }
  public
    { Public declarations }
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
  end;

implementation

{$R *.dfm}

constructor TUniFrame2.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);
  p.ClientEvents.ExtEvents.Values['afterlayout'] := 'function afterlayout(sender, layout, eOpts)'
                                                  + ' {'
                                                  + ' var PWidth = Ext.get("' + p.jsid + '").getWidth ();'
                                                  + ' var PHegith = Ext.get("' + p.jsid + '").getHeight();'
                                                  + ' var FWidth = Ext.get("' + SP.jsid + '").getWidth();'
                                                  + ' var FHegith = Ext.get("' + SP.jsid + '").getHeight();'

                                                  + ' var PLeft = FWidth / 2  - PWidth/2;'
                                                  + ' var PTop  = FHegith / 2 - PHegith/2;'
                                                  + ' Ext.get("' + p.JSId + '").setStyle({"top":PTop + "px","left":PLeft + "px"});'
                                                  +'}';

end;
destructor TUniFrame2.Destroy;
begin

  inherited Destroy;
end;

end.
 

object UniFrame2: TUniFrame2
  Left = 0
  Top = 0
  Width = 472
  Height = 355
  Align = alClient
  Anchors = [akLeft, akTop, akRight, akBottom]
  TabOrder = 0
  ExplicitWidth = 320
  ExplicitHeight = 240
  object SP: TUniSimplePanel
    Left = 0
    Top = 0
    Width = 472
    Height = 355
    ParentColor = False
    Align = alClient
    TabOrder = 0
    ExplicitLeft = 68
    ExplicitTop = 181
    ExplicitWidth = 256
    ExplicitHeight = 128
    object P: TUniContainerPanel
      Left = 13
      Top = 14
      Width = 256
      Height = 128
      ParentColor = False
      Color = 12615680
      TabOrder = 1
    end
  end
end

  • Thanks 1
Link to comment
Share on other sites

  • robinhodemorais changed the title to (Solved) How to center the unicontainerpanel in the middle of the screen in a UniFrame

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...