WebView in .Net MAUI App using Visual Studio 2022

hello everyone welcome back again in this video we will look at webview in a.net multi-platform application ui.net mobile using their Visual Studio 2022 but before we get started please make sure you subscribe to the channel if you haven't so let's get into it then okay.net multi-platform application UI dot net Maui webview displays remote web pages local HTML files and HTML strings in an app the content displayed a webview includes con supports for Cascadian style sheet CSS and JavaScript by default to enabled projects project.net projects include the platform permission required for webview to display a remote web page so enough of all the Talking let's get into the real stuff so as you can see here now before we get to it yeah I'm just going to briefly take you through how you can download and install the support for.net mode inside the visual studio so I have a visual studio installer update so to to get us going let's click on the modifier so this is a visual studio community 22. 2022 yeah so we click on the modify so here as you can see we've been taking to the webflow so if if you get into this page make sure that you've got this bus this bus checked as you can see I've already got it changed because I've already downloaded it so you saw the multi-platform application UI development right so this is basically for to help you build Android iOS windows and macro Mac apps from a single code base yeah so enough to follow that let's get to the rooster so I let's go to the visual studio and I've got a visual studio um open so we're going to create a new project a new.net Mario project here you go out we go scroll down so as you can you're going to select the dot NetApp yeah and we click on the list here you can configure the project details but we're not going to look too much into that so I'm just going to click on this so and we've created the application this might take a while so I'm just going to pause the video while the whole thing below so well it didn't take it a while so now we have the project loaded so it comes with a bunch of templates wow so we're just going to remove this scroll view template and we come inside the code behind yeah and we have to we're going to remove this so this event on counter on counterclick events yeah so we're going to remove this as well and just going to comment on this as well so now we've come back to the main page so as you can see we've got nothing here really so we can get by by just adding the webview straight up on the thumbnail so webview so here obviously you can just add the source the source of the webview so here we're actually opening the sky sports right so once we click on the Run just let's run it inside a uh an Android emulator yeah so we're just going to briefly run it I'm just going to pass away the whole thing loads so as you can see we've got this on the skyesports.com open inside the app our app here so basically this is just um uh the hard-coded URI but obviously we can also add the URI dynamically so that's what we're going to have a look at so we're just going to stop the application from running so instead of adding the the URI directly from here this is what we're going to do we're going to give our webviewer name so we can do that by using the X name so are we just going to call it webview it's more with small cap yeah so uh so from here obviously we come inside the code behind yeah so right after the initialize components we can set our web View if we call our webview here so as you can see it's showing up here so that source cellular source is equal to so here we can either um obviously if we is coming up dynamically we can you can visualize the screen and call it source okay so how we put this house here and and we can actually put our source URI here as well so basically we can also do it like this and it will run fine so let's let's run this to happen to see so if we come back to the Daniel code here we've removed the URL and we've actually put this webview here and we're actually calling it here webview.source yeah so let's let's plan it to see if it's gonna come up here so I'm just gonna okay so I might have one very quickly so as you can see here now we've got the the webview or the web content being displayed inside our our app yeah so I'm just gonna pause it let's also look at another way of doing it right so we come inside the thumbnail again so here we're going to remove the webview called all together from here right so inside the content page we're going to add we're going to give our content page a name so always explain and we're going to call it content so we give this uh oh man sorry and we've we call this content name name name yeah so here this content so we can call it we can call this content inside our code so I'm just going to remove this page here we're just going to leave the source after this yeah and so this time here instead of Sky Sports here we're gonna make you beat his boss yeah so we're gonna make this BT Sport so here this is what we're going to do we call the competence right then dot content so we're gonna set it to a new web View um actually this is what we're gonna do um we're gonna we're gonna initialize the variable the variable WB for webview is equal to new a new webview so here so the content the content we're going to set it to the WV for webview right so now you can set the source for the WB or webview wv.source is supported source The Source URI so we can say WB Dot reload so this will load the URI so so now once we run it we're supposed to get our BT Sport so if we look at the emulator okay it's gone now so let's let's run it to see if we will get the btsforce.com so I'm just going to force you want to helping us and it might it would take a very few moments so that's a mistake here so it's btspot.com it's it's a wrong URI so we're just going to change it here so in the bt.com so I'm just gonna paste the correct URI so it's a bt.com yeah so we run it again so that's basically the reason why nothing was showing okay so as you can see here now we've actually got the btsports.com coming up now so as you can see it's uh it is very simple to deal with uh webview inside my applications yeah basically we can also add a lookout HTML but this will be in the next video right and this same code base obviously we can run it inside a you can run it inside a Windows machine yeah so let's try that so this same code base we can open it on a Windows app so let's see what actually comes out of it so as you can see here now this same code base is running on the windows I mean windows 11. our Windows 10 yeah so as it is a very simple stuff or simple way to get you started in terms of using the web View so I'm just going to leave the video here but once again if you haven't subscribed to the Channel please make sure you do because I've got lots of videos coming up and I hope you have a lovely morning afternoon Wherever You Are peace

Channel: Hacked

Views: 8,112

Keywords: webview android, webview android example, webview .net maui, maui, visual studio 2022 maui, windows app webview, c# project, c# webview, programming, coding, mobile app, c# mobile app, c# multi platform, webview android studio

Id: GZGFlyaqWbA

Length: 11min 56sec (716 seconds)

Published: Thu Jan 26 2023