Index: VerpakkingsDefinitie/UI/ZoekProductenScherm.dfm
===================================================================
diff -u -r550 -r554
--- VerpakkingsDefinitie/UI/ZoekProductenScherm.dfm	(.../ZoekProductenScherm.dfm)	(revision 550)
+++ VerpakkingsDefinitie/UI/ZoekProductenScherm.dfm	(.../ZoekProductenScherm.dfm)	(revision 554)
@@ -3,8 +3,8 @@
   Top = 0
   BorderStyle = bsSizeToolWin
   Caption = 'FormZoekProducten'
-  ClientHeight = 624
-  ClientWidth = 837
+  ClientHeight = 161
+  ClientWidth = 359
   Color = clBtnFace
   Font.Charset = DEFAULT_CHARSET
   Font.Color = clWindowText
@@ -14,15 +14,15 @@
   OldCreateOrder = False
   OnCreate = FormCreate
   DesignSize = (
-    837
-    624)
+    359
+    161)
   PixelsPerInch = 96
   TextHeight = 13
   object PageControl1: TPageControl
     Left = 0
     Top = 0
-    Width = 839
-    Height = 625
+    Width = 361
+    Height = 162
     ActivePage = TabSheetKortTekst
     Anchors = [akLeft, akTop, akRight, akBottom]
     Font.Charset = DEFAULT_CHARSET
@@ -32,8 +32,12 @@
     Font.Style = []
     ParentFont = False
     TabOrder = 0
+    ExplicitWidth = 839
+    ExplicitHeight = 625
     object TabSheetKortTekst: TTabSheet
       Caption = 'Kort tekst'
+      ExplicitWidth = 831
+      ExplicitHeight = 597
       object Label1: TLabel
         Left = 3
         Top = 16
@@ -83,18 +87,34 @@
     object TabSheetIdentificatieNr: TTabSheet
       Caption = 'Identificatie nr'
       ImageIndex = 1
+      ExplicitLeft = 0
+      ExplicitTop = 0
+      ExplicitWidth = 0
+      ExplicitHeight = 0
     end
     object TabSheetLeveranciersRef: TTabSheet
       Caption = 'Leveranciers ref'
       ImageIndex = 2
+      ExplicitLeft = 0
+      ExplicitTop = 0
+      ExplicitWidth = 0
+      ExplicitHeight = 0
     end
     object TabSheetTekst: TTabSheet
       Caption = 'Tekst'
       ImageIndex = 3
+      ExplicitLeft = 0
+      ExplicitTop = 0
+      ExplicitWidth = 0
+      ExplicitHeight = 0
     end
     object TabSheetProductboom: TTabSheet
       Caption = 'Productboom'
       ImageIndex = 4
+      ExplicitLeft = 0
+      ExplicitTop = 0
+      ExplicitWidth = 0
+      ExplicitHeight = 0
     end
   end
 end
Index: VerpakkingsDefinitie/UI/LogInScherm.dfm
===================================================================
diff -u -r551 -r554
--- VerpakkingsDefinitie/UI/LogInScherm.dfm	(.../LogInScherm.dfm)	(revision 551)
+++ VerpakkingsDefinitie/UI/LogInScherm.dfm	(.../LogInScherm.dfm)	(revision 554)
@@ -3,8 +3,8 @@
   Top = 0
   BorderStyle = bsNone
   Caption = 'Log In'
-  ClientHeight = 240
-  ClientWidth = 192
+  ClientHeight = 261
+  ClientWidth = 200
   Color = 1513421
   Font.Charset = DEFAULT_CHARSET
   Font.Color = clWindowText
@@ -15,12 +15,12 @@
   Position = poScreenCenter
   OnCreate = FormCreate
   DesignSize = (
-    192
-    240)
+    200
+    261)
   PixelsPerInch = 96
   TextHeight = 13
   object Label1: TLabel
-    Left = 19
+    Left = 22
     Top = 28
     Width = 162
     Height = 52
@@ -32,10 +32,11 @@
     Font.Name = 'Tahoma'
     Font.Style = [fsBold]
     ParentFont = False
+    ExplicitLeft = 341
   end
   object Label2: TLabel
-    Left = 43
-    Top = 90
+    Left = 45
+    Top = 92
     Width = 116
     Height = 16
     Anchors = [akTop]
@@ -46,9 +47,10 @@
     Font.Name = 'Tahoma'
     Font.Style = [fsBold]
     ParentFont = False
+    ExplicitLeft = 366
   end
   object Label3: TLabel
-    Left = 51
+    Left = 55
     Top = 143
     Width = 96
     Height = 16
@@ -60,26 +62,29 @@
     Font.Name = 'Tahoma'
     Font.Style = [fsBold]
     ParentFont = False
+    ExplicitLeft = 51
   end
   object EditGebruikersnaam: TEdit
-    Left = 19
+    Left = 23
     Top = 114
     Width = 159
     Height = 21
     Anchors = [akTop]
     TabOrder = 0
     OnChange = EditGebruikersnaamChange
+    ExplicitLeft = 19
   end
   object EditWachtwoord: TEdit
-    Left = 19
+    Left = 23
     Top = 167
     Width = 159
     Height = 21
     Anchors = [akTop]
     TabOrder = 1
+    ExplicitLeft = 19
   end
   object PanelLogIn: TPanel
-    Left = 53
+    Left = 57
     Top = 205
     Width = 92
     Height = 28
@@ -99,5 +104,6 @@
     OnClick = PanelLogInClick
     OnMouseDown = PanelLogInMouseDown
     OnMouseUp = PanelLogInMouseUp
+    ExplicitLeft = 53
   end
 end
Index: VerpakkingsDefinitie/Main.pas
===================================================================
diff -u -r552 -r554
--- VerpakkingsDefinitie/Main.pas	(.../Main.pas)	(revision 552)
+++ VerpakkingsDefinitie/Main.pas	(.../Main.pas)	(revision 554)
@@ -6,7 +6,7 @@
   Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,
   System.Classes, Vcl.Graphics,
   Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.ExtCtrls,
-  ApplicationContext, Agent;
+  ApplicationContext, Agent, Vcl.StdCtrls;
 
 const
   NAVHOME = 0;
@@ -20,8 +20,11 @@
     procedure FormCloseQuery(Sender: TObject; var CanClose: Boolean);
   private
     FAppContext: TApplicationContext;
-    FHuidigScherm: TForm;
     FAgent: TAgent;
+    procedure FreeControlChildrenRec(AControl: TControl);
+    procedure ConfigureerLayoutGridPanel(GridPanel: TGridPanel);
+    procedure PlaatsControlOpGrid(GridPanel: TGridPanel; Control: TControl; RowI: Integer; ColI: Integer; RowSpan: Integer = 1;
+      ColSpan: Integer = 1);
   public
     procedure NavigeerNaar(schermId: Integer);
   end;
@@ -36,6 +39,7 @@
 
 {$R *.dfm}
 
+// Dit event wordt altijd aangeroepen, OnClose niet
 procedure TFormMain.FormCloseQuery(Sender: TObject; var CanClose: Boolean);
 begin
   FAgent.GebruikerAfmelden(FAppContext.UserServerServiceContext); // Antwoord wordt genegeerd
@@ -47,34 +51,154 @@
   FAgent := TAgent.Create();
   { TODO -cMain: Wat doet dit in de originele applicatie?: fUiContext.ImagesScherm := TImagesScherm.Create(self); }
   { TODO -cMain: Kijken of "VerwerkParamStrings;" nodig is }
-  { TODO -cNavigatie :
-    'Scherm' cre�ren vanuit code. Tweede 'scherm' maken met twee secties (30%-70%). }
-  PanelMain := TPanel.Create(Self);
   PanelMain.Parent := Self;
-  PanelMain.Align := alClient;
+  PanelMain.Align := TAlign.alClient;
 
   Self.NavigeerNaar(NAVLOGIN);
 end;
 
-// Dit event wordt altijd aangeroepen, OnClose niet
 procedure TFormMain.NavigeerNaar(schermId: Integer);
+var
+  NieuwScherm: TControl;
+  GridPanel: TGridPanel;
+  NieuweGridControl: TControl;
+  i: Integer;
 begin
   Application.ProcessMessages; // Interrupts the execution of an application so that it can process the message queue.
 
   // Volgende subscherm laden in panel
-  FHuidigScherm.Free;
+  { TODO -cNavigatie : Huidige schermen verwijderen (indien nodig) met Controls property }
+
+  // PanelMain behouden we altijd, the children can be free.
+  for i := 0 to PanelMain.ControlCount - 1 do
+    FreeControlChildrenRec(PanelMain.Controls[i]);
+
   case schermId of
-    NAVHOME:
-      FHuidigScherm := TFormZoekProducten.Create(PanelMain, Self, FAppContext);
+    NAVHOME, NAVZOEKPRODUCTEN:
+      begin
+        { TODO -cUI : Onderzoeken of 'TSplitter' een beter alternatief is dan volledig een gridview }
+        // Gebruikersgegevens scherm, zoekscherm, resultaten en detail scherm tonen.
+        GridPanel := TGridPanel.Create(PanelMain);
+        NieuwScherm := GridPanel; // Nieuw scherm instellen, de configuratie is grid panel specifiek (daarom andere variabele).
+        ConfigureerLayoutGridPanel(GridPanel);
+        // Schermen op GridPanel plaatsen
+        // PlaatsControlOpGrid(GridPanel; Control; RowI; ColI; (opt) RowSpan; (opt)ColSpan);
+        // Gebruikersgegevens scherm bovenaan.
+        NieuweGridControl := TFormLogin.Create(GridPanel, Self, FAppContext, FAgent);
+        PlaatsControlOpGrid(GridPanel, NieuweGridControl, 0, 0, 1, 2);
+        // Zoekscherm daaronder links
+        NieuweGridControl := TFormZoekProducten.Create(GridPanel, Self, FAppContext);
+        PlaatsControlOpGrid(GridPanel, NieuweGridControl, 1, 0);
+        // Resultaten scherm daaronder links
+        NieuweGridControl := TFormLogin.Create(GridPanel, Self, FAppContext, FAgent);
+        PlaatsControlOpGrid(GridPanel, NieuweGridControl, 2, 0);
+        // Rechts is helemaal voor detail scherm
+        NieuweGridControl := TFormLogin.Create(GridPanel, Self, FAppContext, FAgent);
+        PlaatsControlOpGrid(GridPanel, NieuweGridControl, 1, 1, 2);
+      end;
     NAVLOGIN:
-      FHuidigScherm := TFormLogin.Create(PanelMain, Self, FAppContext, FAgent);
-    NAVZOEKPRODUCTEN:
-      FHuidigScherm := TFormZoekProducten.Create(PanelMain, Self, FAppContext);
+      NieuwScherm := TFormLogin.Create(PanelMain, Self, FAppContext, FAgent);
   end;
 
-  FHuidigScherm.Parent := PanelMain;
-  FHuidigScherm.Align := alClient;
-  FHuidigScherm.Show;
+  NieuwScherm.Parent := PanelMain;
+  NieuwScherm.Align := alClient;
+  NieuwScherm.Show;
 end;
 
+// Recursieve methode om de kinderen van een TWinControl te free-en (hanging pointers voorkomen)
+// Gebaseerd op: https://stackoverflow.com/questions/414928/is-there-any-way-to-get-all-the-controls-on-a-container-control
+procedure TFormMain.FreeControlChildrenRec(AControl: TControl);
+var
+  item: TControl;
+  i: Integer;
+begin
+  if AControl = nil then
+    Exit;
+  if AControl is TWinControl then
+  begin
+    i := 0;
+    // Tijden het free-en kan zijn dat er elementen verdwijnen uit de lijst.
+    // Het aantal elementen moet dus steeds opnieuw gecontroleerd worden (een for-lus berekent dit eenmalig)
+    while TWinControl(AControl).ControlCount < i do
+    begin
+      FreeControlChildrenRec(TWinControl(AControl).Controls[i]);
+    end;
+  end;
+  AControl.Free();
+end;
+
+procedure TFormMain.ConfigureerLayoutGridPanel(GridPanel: TGridPanel);
+const
+  colLeftSize: Integer = 375;
+  rowTopSize: Integer = 40;
+  rowMidSize: Integer = 200;
+begin
+  // Rijen en kolommen toevoegen
+
+  GridPanel.RowCollection.BeginUpdate;
+  GridPanel.ColumnCollection.BeginUpdate;
+
+  GridPanel.RowCollection.Clear;
+  GridPanel.ColumnCollection.Clear;
+
+  // Balk bovenaan met vaste hoogte voor gebruikersgegevens
+  with GridPanel.RowCollection.Add do
+  begin
+    SizeStyle := ssAbsolute;
+    Value := rowTopSize;
+  end;
+
+  // Daaronder links opzoek scherm met vaste hoogte
+  with GridPanel.RowCollection.Add do
+  begin
+    SizeStyle := ssAbsolute;
+    Value := rowMidSize;
+  end;
+
+  // Daaronder het resultaten scherm, dit schaalt automatisch
+  with GridPanel.RowCollection.Add do
+  begin
+    // De Autosize optie zou kijken naar het child. Hier is het de bedoeling dat het Grid Panel maximaal groeit.
+    SizeStyle := ssPercent;
+    Value := 100;
+  end;
+
+  // Linkerhelft van de schermen heeft vaste breedte
+  with GridPanel.ColumnCollection.Add do
+  begin
+    SizeStyle := ssAbsolute;
+    Value := colLeftSize;
+  end;
+
+  // Rechterhelft is volledig voor detail scherm
+  with GridPanel.ColumnCollection.Add do
+  begin
+    // De Autosize optie zou kijken naar het child. Hier is het de bedoeling dat het Grid Panel maximaal groeit.
+    SizeStyle := ssPercent;
+    Value := 100;
+  end;
+
+  GridPanel.RowCollection.EndUpdate;
+  GridPanel.ColumnCollection.EndUpdate;
+end;
+
+procedure TFormMain.PlaatsControlOpGrid(GridPanel: TGridPanel; Control: TControl; RowI: Integer; ColI: Integer;
+  RowSpan: Integer = 1; ColSpan: Integer = 1);
+var
+  index: Integer;
+begin
+  // Toevoegen aan grid panel op eerste lege plaats (Bij het toevoegen kan dit niet worden gekozen.
+  // Het wordt in de eerste lege plaats gezet)
+  Control.Parent := GridPanel;
+  Control.Visible := true; // Staat default op false
+  Control.Align := alClient; // Maakt elementen zo groot als het kan
+  Control.AlignWithMargins := true; // Spacing tussen de schermen
+  // Positie binnen grid aanpassen
+  index := GridPanel.ControlCollection.IndexOf(Control);
+  GridPanel.ControlCollection[index].row := RowI;
+  GridPanel.ControlCollection[index].RowSpan := RowSpan;
+  GridPanel.ControlCollection[index].Column := ColI;
+  GridPanel.ControlCollection[index].ColumnSpan := ColSpan;
+end;
+
 end.
Index: VerpakkingsDefinitie/Main.dfm
===================================================================
diff -u -r552 -r554
--- VerpakkingsDefinitie/Main.dfm	(.../Main.dfm)	(revision 552)
+++ VerpakkingsDefinitie/Main.dfm	(.../Main.dfm)	(revision 554)
@@ -2,8 +2,8 @@
   Left = 0
   Top = 0
   Caption = 'Verpakkings Definitie'
-  ClientHeight = 453
-  ClientWidth = 474
+  ClientHeight = 481
+  ClientWidth = 944
   Color = clBtnFace
   Font.Charset = DEFAULT_CHARSET
   Font.Color = clWindowText
@@ -14,16 +14,22 @@
   OnCloseQuery = FormCloseQuery
   OnCreate = FormCreate
   DesignSize = (
-    474
-    453)
+    944
+    481)
   PixelsPerInch = 96
   TextHeight = 13
   object PanelMain: TPanel
     Left = 0
     Top = 0
-    Width = 476
-    Height = 456
+    Width = 944
+    Height = 481
     Anchors = [akLeft, akTop, akRight, akBottom]
+    Color = clWhite
+    ParentBackground = False
+    ParentShowHint = False
+    ShowHint = True
     TabOrder = 0
+    ExplicitWidth = 497
+    ExplicitHeight = 441
   end
 end