How to manually create a window and manipulate it

[fralonra]

Hi all, I'm using Tauri (beta version) to build a project.

I'm wondering how to create a window from Rust backend and manipulate the window afterward.

I have seen methods like create_window, show, hide etc, but have no idea how to use them for there is little doc about this topic.

Thanks for reply.

[amrbashir]

you have to get an app handle or window handle which you can obtain in any hook on the tauri builder.

note: code below doesn't have any arguments just for simplicity, check the urls to see the arguments needed.

tauri::Builder::default()
	.setup(|app|{
		let window = app.create_window(); // https://tauri.studio/en/docs/api/rust/tauri/window/struct.Window#create_window
	})
	.on_page_load(|window, _| {
		let window = window.create_window();
	})
	.run();

or from js you can just use the WebviewWindow constructor

import { WebviewWindow } from "@tauri-apps/api/window";
// or `withGlobalTauri: true` in tauri.conf.json
const { WebviewWindow } = window.__TAURI__.window;

new WebviewWindow() // https://tauri.studio/en/docs/api/js/classes/window.webviewwindow/

[amrbashir]

the third paramter of create_window is a closure where you get access to WindowAttributes builder that you can mutate it in the closure then return it again.

Can't give you a full example now as I am on my phone, join our discord community and we will guide you through.

[fralonra]

the third paramter of create_window is a closure where you get access to WindowAttributes builder that you can mutate it in the closure then return it again.

Can't give you a full example now as I am on my phone, join our discord community and we will guide you through.

Sorry I can't use discord on weekdays. Still I can't find any information about how to modify the webview window through WebviewAttributes.

[amrbashir]

here is a full example

use tauri::WindowBuider;

tauri::Builder::default()
	.setup(|app|{
		app.create_window("window2".to_string(), WindowUrl::default(), |WinAttrs, WebviewAttrs| {
      		let WinAttrs = WinAttrs
        	.title("Main 2")
        	.resizable(true)
       		.transparent(false)
        	.decorations(true)
        	.always_on_top(false)
        	.inner_size(800.0, 600.0)
        	.min_inner_size(300.0, 150.0)
        	.fullscreen(false);
       		(WinAttrs, WebviewAttrs)
       	});
	})
	.run();

[fralonra]

Thanks for the detail example!

I've already been working on this way though there are still some errors, but I assume that's not due to Tauri.

I was confused because I had misunderstood that I should modify WindowAttributes, the second parameter of the closure.

Edited: things have been done, thanks!

[THEGOLDENPRO]

How do I do this in tauri 1.6.6, app doesn't have .create_window() for me. Was this removed?

[HuakunShen]

Is there a way to toggle a window's transparency?

I know appWindow.setDecorations(false); can be used to change decorations, but there is not an api for changing window transparency.

[FabianLars]

Is there a way to toggle a window's transparency?

Not via the native apis, that can only be set on initialization. I guess you can just change the frontend's css to be opaque 🤔