How to create a frameless window in Electron project

[Niu_YuPing]

Hi, I want to create an electron application with a frameless(no titlebar) main form, I set the form property 'border' to efbSingle but no change.

The 2nd question is how can I minimize and maximize with code in a frameless form.

The 3rd question is how to set the minimize and maximize icons to be shown or not.

Best Regards

[Tunde (Tünde Keller)]

Hi,

No direct support for these but you can freely modify the main.js file to your liking.

1. Add frame: false to you main form, this will make sure no border is added to it:

if (os.type() === 'Linux') {
    let icoPath = path.resolve(__dirname, './$(IconFileLinux)');
    mainWindow = new BrowserWindow({ width: 0, height: 0, frame: false, show: false, webPreferences: { nodeIntegration: true, contextIsolation: false }, useContentSize: true, icon: icoPath})
  } else {
    mainWindow = new BrowserWindow({ width: 0, height: 0, frame: false, show: false, webPreferences: { nodeIntegration: true, contextIsolation: false }, useContentSize: true})
  }

2. Example to minimize (you can also maximize or restore the window, check the Electron API for that).
   In your application add libelectron unit, then:

type
  TForm4 = class(TElectronForm)
    WebButton1: TWebButton;
    procedure WebButton1Click(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
    procedure MinimizeForm;
  end;

var
  Form4: TForm4;

implementation

{$R *.dfm}

procedure TForm4.MinimizeForm;
begin
  Electron.IPCRenderer.invoke('ipc-custom-window-minimize');
end;

procedure TForm4.WebButton1Click(Sender: TObject);
begin
  MinimizeForm;
end;

In the main.js file add at the bottom:

ipcMain.handle("ipc-custom-window-minimize", (event, args) => {
  let senderBW = BrowserWindow.fromWebContents(event.sender);
  senderBW.minimize();
});

3. Same as above. You can either directly disable things on the main form (or all child forms) by modifying the main.js and setting minimizable and maximizable or use the setters to apply them.

[Niu_YuPing]

Thanks @Tunde ,that is very helpful.