WinUI 3.0 - Building Modern Desktop Apps with .NET and C#

today is about win ui 3.0 on building modern app desktop applications with net and c sharp but before what is the dot net user group i will okay the animation did not run yeah okay good first uh it's a youth group it's free for everybody we have some gold sponsors that we would like to thank offering solutions people and for texture today one of the persons that are helping us is here mark hello again for your continuous support also for our usual locations when we could celebrate events in person back in 2019 look so far away in time impact hub and the stanford group thanks again to them and to our partners azure user group um dot net central dot net day switzerland and chase angular thank you for your support again who are we well you know me already we have powell we have michael's tape we have nigel which is the house say hi nigel we have lauren we have fabian and mark mueller say hi bye again so to be clear what do we do we organize events for developers to developers to share knowledge and usually we do a session later on so it will depend on if we so we do the speech and after the speech we close the streaming and we are welcome to stay and ask questions and talk about technology or whatever we want so a bit of networking there and usually we used to do some beer and pizza back in 2018 not anymore we hope we can do that surely in one or two months maybe we'll see what can you do you can follow us in twitter zurich you can follow hello okay please mute your mix please you can join our meet a group probably you are here through that tell your peers help us grow and you are free to propose new content and speakers for yourself to speak that would be very welcome so mark yeah um today we got a little special announcement from our friends of dev express you maybe know uh that the dev express ui controls even though for vinui but they also have developer productivity tools for refactoring code navigation code analyzes etc and i think you need to click or something because there should be a link we have a free offering so all our members from our user group will get a one-year free license for code rush their new developer productivity tool let's add on to visual studio and yeah um if you click the link you can download it i will share the link also in the chat register and you got a free license for one year from devexpress which is cool a little bit just try it out it's free yeah uh so uh yeah cool great cool that's all ready you yeah i'll just i'll just post a link in the chat yeah perfect uh thanks mark for dealing with all of it and for bringing this sponsorship i think we we need some free stuff to to motivate ourselves a bit more so uh when ui the session today is about the modern native ui platform for windows and today we are going to see some about the concepts what is the status today of these development framework ui development framework and and how does it compare to the other proposals that we have in the table and how to do that in net and c-sharp hands-on who is going to do that thomas carlos hoover which is on the stage with this very cool panel of lads behind his nanolibs i guess he's a software integer microsoft mpp book and pluralsight author and it did not fit but he's also open source contributor he recently has done quite cool projects and exploring short generators and other stuff and he's a proud father well and likes to go with the skateboard as well right and he's a super cool guy and amazing speaker on the other side so i hope we will have a cool time with you thomas thomas the stage is yours okay thank you so welcome also from my side thanks for the introduction and yeah welcome to the today's session building modern desktop apps with dot net and c-sharp the introduction was already perfect so um there is nothing else to say um i live here in a house with four four women i'm married to one and three the other three are our daughters um no that's not right i live even here with five women because the cat is also a woman so yes and if you want to reach me before or after or during the session um yeah it works only after the session twitter might might be the best way um but you can also contact me via my home page there is a contact link or just use thomas at thomas claudius uber.com or thomastowtoob trivadis.com all right but let's dive into the topic because the session is not about me but about win ui 3 and all the different desktop frameworks and today when you want to build a desktop application with net you send before the choice which ui framework should you actually use to build your desktop application and then you see oh there is a bunch of them there is windows forms there is wpf there is uwp there is wind ui there is samreen forms and with net 6 there will also be dotnet maui which you can use to build cross-platform applications for mac os for windows for android for ios and so on so we need to sort this and this is what we will do today and this brings me to the agenda we will look in the first part we will go back in time for some of you who work already with more modern things than windows forms and wpf and for many of you maybe you still work with these technologies i do i have still many customers who have windows forms applications and also wpf applications um normally i work three days per week at a customer where we have a really big wpf application so um these technologies are still there and this is where we start today and after that we look at uwp and win ui and you will learn how these different things relate to each other and in the in the third part we look at cross-platform development um with net maui just to give you an overview what it is about i heard once that the brain starts to group things if you see more than three items on a slide so i have only three points on my agenda but let's see if i if i can keep this rule during the session okay so let's start if there are any if there are any questions please hack them in the chat so um or you can just unmute yourself and ask the questions so feel free to to interrupt me sometimes i might speak in a way that you think you shouldn't interrupt me but you can always interrupt me just throw in and and bring up your questions but i will also hang a bit around after the session so we can also discuss there about the topics that we see here and to go deeper into special things and maybe to do some off-session stuff that comes to your mind to look at that stuff okay let's go back in time in 2001 or 2002 microsoft introduced windows forms with a.net framework 1.0 and at that time there was no choice if you want to build a desktop application with net you go with windows forms because there was nothing else windows forms is built on top of gdi plus which stands for graphics device interface which is a layer of the win32 api that belongs to the windows kernel or to windows 10 or windows 7 so this is part of the windows api and windows forms is actually just a wrapper around this technology so that you can use it in a nice way with net in windows forms everything feels like.net but under the hood it's this native win32 gdi plus stuff then a few years later in 2006 dotnet framework 3.0 came out and microsoft introduced the windows presentation foundation which was a bit more modern framework because it was built on top of the so-called milkor which stands for media integration layer core and this is a library that wraps directx before the session i discussed a bit with with josie about gaming yeah we talked about gaming and what games we play and if you play games on the computer you might know directx because when you install a game you get sometimes the message this game requires directx version 11. you have to install it in addition and then you have to install it and directx is nothing else than a than a library that gives access to the hardware and in this case to the gpu to the graphics processing unit so that you can really make use of those powerful graphics cards that in that are in modern computers today we have them even in notebooks but at the beginning of wpf we didn't know exactly what to do with this and you might remember the rotating three-dimensional cubes everyone was creating the typical case nobody needs in their applications and later on um yeah we haven't seen the many 3d applications built with wpf but mostly line of business applications so the difference under the hood is gpu and cpu for the rendering um but if you want to build a real 3d application maybe wpf is also not the way to go because there are better approaches for example using directx directly from a developer perspective the big difference was that in wpf you write your user interface with this xml based syntax which is called semi the xml accent extensible application markup language and in windows forms you build it with c-sharp or respectively you use the visual designer in visual studio which is quite powerful for windows forms and in wpf on the other side the visual designer is not used so often because the layout is totally different and it works not so well with drag and drop from the toolbox like you do with windows forms okay so with dot net framework 3 we had the choice between these two and i started in 2006 with wpf already with the preview versions you might also remember.net framework 3 was called winfx at that time so microsoft said yeah we will bring now out winfx after dot net framework 2.0 and everybody thought what the heck is win fx and later they changed the name to dotnet framework 3 and everybody was happy again and wpf at that time had the name avalonia and today is still an open source library available that that uses that avalonia name and that is also a cross cross compilation framework for wpf then later in the later later years dot net core one came out which is a cross-platform implementation of net that runs on windows mac os and linux if you do net development you might know this and now when you look at the name.net core when you think when would you give something the name core you would give it the name core if it contains only the core of something and in this case dot net core one contains console applications and asp.net core applications so a core part of the dot net framework because in.net framework you have also console applications and asp.net applications but that core part was meant for server side applications think about all the container stuff that also was on the rise with docker and kubernetes and everything and to run applications with net on those containers that are usually linux based you need a cross-platform implementation of.net and i think this is what something where i'm still today impressed how microsoft anticipated all these steps with these containerization things to bring everything cross-platform when i saw sql server runs now in the or linux read it i thought who wants to do this who wants to run their linux server on linux but when you when you have a docker container or an any other container platform then this is something that should and must work to compete in the market and so for server side applications to build a web api and stuff like that asp.net core runs on all different platforms and linux supports the docker containers i don't know if anyone ever if you use the windows container it's possible to do this but maybe mostly to support legacy software um i haven't seen people using windows containers so yeah let's see but now later microsoft noticed that.net core has many advantages over net framework because it had a better runtime they could do things differently because they didn't have to look back on the old stuff that they have to support and with net core 3 they noticed hey actually we should make dot net core the main platform because there we can we can do much better things we have a better runtime it allows us to support c-sharp features that we can't support in.net framework because of runtime limitations that that we have to support the older applications what if we actually just copy the source code of wpf and windows forms to.net core and compile it against dot net core and then we have it there too and this is actually in simple words what they did they copied over wpf and windows forms also the.net core and under the hood everything stays the same wpf wraps that micro thing and windows forms wraps that gdi plus thing but now you can just build your wpf or windows forms application with net core and you get the latest and greatest features of the runtime and of the c-sharp language they also open sourced the code so you can you can now take a look at the wpf code and also add the winforms code the winforms repository is actually quite quite active so they create pull requests and they merge it into the main branch on the wpf repository there doesn't happen so much so a few few weeks or months ago someone asked is this repository dead and this is also always the question people ask if nothing happens on a repository right but it doesn't mean that the technology is is dead i think both technologies are quite major but then someone from microsoft answered that they built up a team for wpf so that they can merge pull requests faster on the wpf repository to bring this also forward but this already shows that the main the main workforce at microsoft is already on the more modern part which is win ui we will see that later but today it looks like this now a question you might ask if you are on wpf why using.net core let's also clarify this there are a few advantages the deployment for example you can deploy with net core side by side and self-contained this means you can bundle the whole framework with your application and then you can give it to a clean computer where nothing is installed and it will just run this is different to net framework where you have to ask your administrator to install all the net framework versions on the different machines and everything and then if a new.net framework version comes out you have to wait until all your clients have that version and so on so this pain goes away with a self-contained side-by-side deployment and it means one application can use dotnet core three another one can use dotnet core 3.1 another one can use dotnet 5 and so on you can just bundle it with your application and it won't be affected by the other applications or other frameworks installed on that machine but if you want you can still do the traditional approach if you say okay it makes not much much sense if i have 200 applications and every application brings dotnet core with it another advantage is the core runtime and api this gives you c-sharp features version 8 and version 9. so if you want to use the latest c-sharp version you can only use it if you run your application with net core when dotnet framework has their limitations then performance is a bit better um you won't feel this in a wpf or an awareness forms app in a traditional way think about performance that when you think about the origin of net core which is a server side framework with asp.net core where throughput file access database access all these things must be highly optimized so that when you have 100 000 concurrent connections it should really be performant because then you will notice if a connection takes 50 milliseconds or 45 milliseconds things like that and if you're doing a net core wpf application for example if you if you do a file scan if you scan the whole file system it will be faster than a.net framework application that does the same thing but the rendering and all that stuff is the same because under the hood you have that micro directix stuff which didn't change the last part is that is also an advantage is the net cli the command line interface this is quite powerful if you want to run commands in your continuous integration continuous deployment scripts then you can just use different net commands to do everything which is something that i really like because it's so simple to build the project to run the tests to package a new get package with the cli all that stuff is quite comfortable with net core so we have these two parts and when you look now at the two frameworks it's also the case that dot net framework 4.8 is the last major version so microsoft won't bring out a new version here but they committed that they will support it for the lifetime of windows and so i think windows will live for quite a few years and if windows won't live anymore then we might have anyway a problem with our windows desktop applications dot net core on the other side is the future so it's it gets developed and with net 5 microsoft started to drop the core from the name because as i mentioned before at the beginning they thought they thought this is the coreoff.net but now they moved everything over and it's no more the core it's the proper thing and so they just omit the name core from net core since version five and um i think some some people might still use it and but i think in one two years we are used to it and we will just say.net 5.6 and so on here is also interesting these versions appear every year in november and every second year we get a so-called long-term support version and the difference is the long-term support version is supported for three years and the other versions are supported only for one year but it's not exactly one year and three years there is a i think a plus of three months so the long term support has three years and three months so that you have time to switch after the three years and the the other ones have one year and three months so that you have also time to switch to the next version why is this important it might only be important if you have for example an application where you say hey i don't plan to touch this application for the for the next three four years then you should think about or consider using the lts version as that gets security updates and all that stuff and if you work on an application you can just increase the version because then you will go from net 5 to.net 6 to net 7 which is i think for most of my customers where i work at is this usually the case that they just it won't happen that they won't build a feature for three months so i guess they will just switch to the newest version when it comes out for new applications you shouldn't use dotnet framework anymore this is a recommend recommendation from microsoft so you should create the new application with net core so that you get all the features that you have there so there is no reason to build a new application with dot net core but there is also no reason except the advantages i mentioned to port an existing.net framework application to.net core so if you want to use the latest c-sharp version that's a reason but if it just runs and you don't build new features just keep it on.net framework microsoft visual studio is actually also a wpf application and it runs on.net framework i don't know if it gets ported.net core in the future in the future but maybe that's possible but today i think it's still.net framework and let's see if visual studio 2022 is a different thing or if it still runs on.net framework or not but yeah that's a different thing it's also an existing application and it shows maybe a port is quite hard because they have also many interop and com things there that might be a bit harder to port now.net core as mentioned is a cross-platform framework runs on different platforms but wpf and windows forms run only on windows this is something many people get wrong and they run only on windows no matter which framework you use so dot net core is that windows only part with wpf and windows forms and it has the cross platform part with asp.net core entity framework core and machine learning.net that is that runs also on all different platforms and if you have existing.net framework applications you can build glass libraries with dotnet standard 2.0 and you can reference them from.net core and net framework this means what we did at some customers is porting existing class libraries from dotnet framework to dotnet standard but we keep the the wpf application with net framework but report the glass libraries so dotnet standard if that's possible and this means in the end all the glass libraries can be used already in a net core application and the only thing that needs to be switched is the client project that is on.net framework and this can be done in the future if it's wanted or necessary and else they just keep it there if you have only.net core then you don't have to use dotnet standard you can build.net class libraries which gives you some advantages um for example one advantage i i saw recently is when you build a.net standard 2.0 class libraries and you want to use that nullable reference type feature i don't know if you have heard about it but it allows you to to annotate reference types with a question mark to to mark them as nullable and then the compiler will tell you where you can or where you have problems in your code where a null reference exception might appear and dotnet standard is not marked with these nullable types but.net.net 5 for example or net core 5 is so if you target with your class library.net 5 and you turn that feature on you will see many errors and if you target.net standard 2.0 and you turn that feature on you will see no errors because.net standard doesn't have these annotations so that's the reason why you might want to target.net core then later instead of donald standard or you can even target both if you want with the project okay so let's wrap this up dot net win forms in wpf we have seen this they were ported to dotnet core which is the modern framework and they still exist today you can build applications with them and i think they will support it for many years to come because now they are on the most modern platform that is available which is net 5 and you can use them there now let's look at the next beast and that's the session of the title uwp and win ui the universal windows platform is a special thing so right now you can build desktop apps with dot net that we have seen with wpf in windows forms and with windows 10 microsoft introduced besides this win32 hosting model that sits on the windows 10 kernel and that is used by wpf and windows forms microsoft introduced the universal windows platform hosting model that has different things like for example a modern windows api that is called winrt which stands for windows runtime this is a modern api that uses dotnet metadata to describe its contents and it uses also.net concepts like classes properties methods and so on at that time you might also remember winrt was introduced already in windows 8 and microsoft introduced also an operating system that was also called windows rt and that led to a bit confusion um but that api that was introduced in in windows windows 8 is now in windows 10 and it is part of the universal windows platform but uw yeah you have one question in the chat do you want me to read it out yes please read it from samurai do you know what is the reason why the bezel studio designer for wpf dot net 5 is a slower compared to than the one in dot net framework yeah that's a good that's a good question the reason is they had to rewrite the full designer and it's a different hosting model with net core so they they can't load the designer that is built with net framework into visual studio they have to load the dot net core runtime in the into the process and run this behind the scenes so that should be the reason why it is slower than in.net framework if it's that the if that's the case for you in your machine to be honest i haven't noticed this but the reason for this might be because i'm not using the decider so that's hard yeah if you if you don't use your screen wipers then you don't know that they don't work anymore and yeah so i think that's the reason it's a different hosting model but i i think we will see optimizations there the windows forms designer had even a harder part because that was not supported at the beginning and now there is a version but it's still in preview and the thing is they had to write every rewrite everything for this to port it to the net core stuff to host it there but yeah maybe you can can give more details about this what is low end i have to try it but to be honest i i haven't tried the designer in the last i don't know yes maybe okay let's continue uwp contains also besides the winner t the same ui framework and semi controls and now the important thing is these parts are built into windows 10 which means they are native in windows 10 built with c plus plus and built close to the metal and on top of that you can build a uwp application with dot net or c plus plus that uses saml a very similar syntax like known from wpf and then you can run that application on windows 10 and you can also bring it to the microsoft store if you want one of the big advantages of uwp is that it runs on different platforms you can run your application not only on the pc but also on the hololens or on the xbox or on iot devices like for example on a raspberry pi but now there is also a little disadvantage of uwp and that is that your application suddenly depends on a feature that is built into windows 10. the controls and also the ui framework are a part of windows 10 and this means if you want to build a uwp application with the latest and modernist preview for example you want to use the latest control then your customers your users have to use the latest windows 10 version so that you are able to use this control and this is a huge dependency problem and this is something microsoft solved with the windows ui library first they introduced win ui 2.x which is a new get package with the name microsoft ui saml and you can install this in your uwp application and in simple words what they did is they copied the semi controls to this nuget package and and then you can reference that nuget package in your uwp application and you will get the latest controls without having your users to switch to the latest windows 10 version that they copied the whole thing is not really true because it's still in windows 10 for existing applications of course but now with this part um they didn't reach the end because you see the same ui framework is still in windows 10 and so when ui 3.0 is the next thing they introduced and that is available already today for production applications and it contains also the semi controls like wind ui two but in addition they took now the saml ui framework from windows 10 and they copied it to win ui three and so win ui 3 is a full-blown nuget package that contains a full ui framework like wpf and windows forms r2 so we have another ui framework that is now decoupled from windows 10. now you can also watch on github the code of this one and you can discuss and talk about features and i recommend you to take a look because the team usually does also every month a community call where they talk about new features sometimes they show new things that are coming up which is quite interesting with win ui 3 building a uwp application the traditional way is now the deprecated or obsolete way because from a traditional uwp application you can't reference that win ui 3.0 nuget package it's not meant to be used in such an application because it such a uwp application depends still on the assembly ui framework of windows 10. instead of doing this there is a new application template in visual studio called win ui in uwp and you can use that template to create a uwp application and you will automatically have a reference to this win ui 3.0 nuget package this means you can forget about the traditional uwp approach for new applications and you can also forget about the semi controls and some ui framework in windows 10 for new applications now the interesting part is so you have now this uwp uwp hosting model but there are a few differences to the win ui win32 hosting model for example it runs in a sandbox and that sandbox can be a limitation and maybe you want to use the win ui win32 hosting model and you can also do this with another template that is called win ui in desktop and this template allows you to create a win32 application that can do everything that does not run in a sandbox and it uses the modern semiui framework that comes with the win ui 3 nuget package also wpf and winforms can be modernized with the technology called semi islands so you can bring in wind ui three features into your existing applications if you have the need for this i think it always depends if you have a really huge application and you see when ui 3 contains something that you want then you can just use it if you have a small application you might consider instead of semi-islands to migrate it to win ui and to directly use the newer framework now if someone asks you what is win ui win ui is actually the native ui platform of windows 10 so all the parts in windows 10 like the start menu or the settings um window they are built with wind ui and you can do this now too for you yeah we have another question yeah it's from horst yes the sum of designer is no longer available in win ui 3.0 do you know when it will be back no i don't know when it will be back i hope we will get some news they are um at the build next week and so that that we see there what happens there but i don't know when it will be back and so and there is also nothing i'm not allowed to talk about so it's really zero in my knowledge about this one okay we will not ask about that i have another question this time is from me what's the current parity from the summer controls of wind ui 3.0 with wpf yeah we that's a good question the controls is often something that we that we look at and maybe we we look at this right now when the question appears i have it later on my slides on the on the microsoft store there is an application that is called win ui 3 controls gallery so that you can search for this application and that's a win ui three application that allows you to browse all the controls that are available in win ui three so for example you can look here at basic inputs and then you see here button checkbox and so on and and hyperlink button and you can click on on one of these i think let's take color picker and then you see what's available here what you can do in win ui you see also here different things collections data grid and yeah here's nothing it comes now up this is a video here you see something with the data grid and then you can click through this date and time or layout and menus and toolbars and so on and you can click through and you can see then hey what's available there and is something that is a must for my application available or cannot i find it in this application then it's not there and so you can look through this and then you will find out hey the features are there and maybe they are not there so most controls are there but data crit is still something in production i think the one that is here is a third-party one i think it's from telerik but i'm not totally sure and so there is something on github that is discussed that comes also input validation is something that is missing in general that will come um but other things appear like for example here the tab view that we have proper tab control and this is now also something that is available for you if you use actually the windows terminal which is a an application that you also get from the microsoft store you can see this windows terminal uses win ui it's a win ui application it uses the tab control that you see here it's exactly the same control so it's built with wind ui you can also look at that one it's open to us but back to your question check out this win ui 3 controls gallery in the microsoft store and install it and then just browse browse through these different menu items here and you will get an express impression what's available for you and there might be parts from wpf that you miss and there might be parts that are even better and yeah so check this out and then you can see if a switch might be good for you okay okay thank you now with the hosting models when you compare these uwp and desktop first you write nearly for all things exactly the same seminar and c sharp code so it doesn't matter which hosting model you use the difference is the desktop model runs on the pc and the other one on other devices uwp is sandboxed which means you have to declare capabilities for example if you want to use the internet connection you have to declare this if you want to access documents you have to declare this like you know it from mobile applications where they say this application wants to access your documents your camera do you accept so this kind of things that make sense with a store but win32 application on the other side has full access now if you build for the pc there might still be a reason to go with uwp and that's the lifecycle management because uwp applications they can save battery power because they are suspended when you switch to another application or when you minimize the application this means they really save processor power and so the battery which might be important if you build an application for a tablet where battery power is important on the other side the win32 application it's always running when you start it no matter if you minimize the window or if you navigate to another application but also here um it's interesting to see the biggest point is you write the same semicolon and what microsoft actually wants is they want that you don't have to make the choice of uwp and desktop you don't have to make the choice which framework you can should use to get the latest technology so you can use win ui in wpf2 to get deleted stuff so different things like that and now when you start with when ui you will see something also that is called project reunion this is the project that microsoft has and they say now okay with win ui you can use net or c plus plus so also the c plus plus developers that were hanging on mfc before they switched to um before microsoft brought out win ui also the classplus developers can now use the latest technology because think about them they couldn't use windows forms it was not net only they couldn't use wpf it was.net only and now win ui is also available for c plus plus developers if they want to use it so you can choose net or c plus plus uwp or win32 you have that choice and the project reunion is a bit hard to understand when you read about it you think what is it actually and what do they do and when you they have also a github repository and win ui itself is one project of this project reunion so it belongs to it and what the goal is of them is they want to provide all the stuff as new get packages when you think as win ui what i showed you now they exported the framework and the semi controls from windows 10 into the win ui 3 new get package which means you can reference that nuget package and you get these features and this is what project reunion is about they do the same with windows 10 apis they provide a new get package that contains all the codes that you need to call the apis and then in your application if you need to access a windows 10 api you just reference the nuget package and then you use the code in that one and it feels like c sharp in c sharp and it feels like c plus plus nc plus plus so it really feels like the platform that you are using all right so when we wrap this up we have these three parts between those desktop apps with net we have win ui that supports uwp and win32 and we have wpf and windows forms on the other side now let's take a quick look at the win ui desktop application so that you get an impression if you haven't created one on your own i have a visual studio instance open here and in visual studio [Music] let me minimize this a bit wait i need to hide my sharing thing yeah it seems to be impossible to write this i move it a bit down so i can see the extension menu here when you go to manage extensions um you can search in visual studio for reunion and then you find that project reunion visual studio extension that adds the project templates for wind ui projects before we had that wind ui 3 project templates extension but as you can see it's now marked as deprecated because this one is the new one it has just one vote um so maybe you can vote then we have two votes or a bit more um but i noticed i think more people voted but they don't show up so quick but as you can see this extension is installed on my machine this means when i go to file new project on my machine and i have here on the right side in the drop down i have win ui and this brings up here the glass library win ui 3 and desktop and a blank app win ui 3 in desktop win ui 3 in uwp is not available yet for production so it was available with the win ui 3 project templates extension you could create a win ui 3 in uwp app but with this latest extension that is that you can use to build production ready applications the in uwp option is not available and maybe we will hear something about that at build and then maybe not i don't know but now i select this one packaged means that an msix package project is created that you can use to deploy your application in the microsoft store or also to deploy it to your windows 10 machines this is a modern packaging format of windows 10 that allows a clean installation and uninstallation of an application so that you don't leave registered registry clutter and stuff like that on the machine you can also use msix for wpf applications so it's nothing special for win ui but specialists that currently you don't have an option without msix but the discussions on github they say that an option without msix should come soon so maybe at build we will see something like that i go to my favorite directory dtmp.net win ui app and i just create this one now comes a pop-up with a uwp specific thing this is just for the packaging project keep here the default values and click ok and now that when ui3 project will come up and you will see if you are familiar with wpf it's nothing special compared to wpf so now we have two projects the application project that contains a main windows semi file with code behind file app semifi with code behind file so if you have worked with any semi framework in the past like silverlight or wpf and or windows phone then you will know this is where you are at home then there is the packaging project and under applications you see it is referencing that application project and it is packaging it as an msix package which means you get a dot msix file when you right click you can click here on publish and select here create packages then you get such an msix file but this project is not special to to win ui when you go to file new project you can search here also in this dialog for packaging and then you see here this windows application packaging project that creates msi msix packages you could use that one also for your windows forms or wpf applications to play around with it now when i try to to build this um i get an error and you see it says this version of project reunion requires win rt runtime dll version 1.2 or greater and what microsoft did they have now also as part of project reunion a project that is called c-sharp win-rt the c-sharp windows runtime api and win ui depends on that api and it needs a specific version and microsoft delivers that c-sharp windows runtime api with the net sdk this means this error will go away if you install a later.net sdk you see please update the dotnet sdk 5.0.6 um i don't know which one i have on my machine let's check dotnet list sdks yeah if you have 5.0.3 preview well the current one is this one 5.0.2 so i should install that that newer one maybe and then set that preview as the case i used for this without the sdk you need to do a workaround and i copy this they write here that i need to add this item group to the cs project file so i do this as i cannot build this new application unfortunately the copy copies also the whole text so i remove the text here and all i want is this item group that was visible in the error and now um it should just build so let me try to build the solution and now this should work bit succeeded so let's run the application i need to minimize my window a bit because i don't know how i can hide the zoom control here that's the application yeah not much there is a button that you can click so exactly what we need for our business to to to manage their processes but now you can start developing the application so let's do a little mvvm thing to get a feeling and i will also do something i will let's create a new project a class library project dot let's call it dot net win ui app dot view models and i reference a library that i have created in the last weeks and you will see much of this but now you get also a little impression how to build view models with c-sharp source generators which is a new way to do things the library is called mvvmgen this will allow us to write our view models very quickly so let's do a little master detail screen with employees in a list and in a detail so i create here a main viewmodel class and on that class i set the viewmodel attribute and i need to use mvvmgen and now we get here an error the class should have the partial modifier now what happens behind the scenes with this mvvm chain hooks itself up as a source generator so you see it here and it generates here this main viewmodel class that inherits from the viewmodelbase class but right now there is not much inside now let's just develop here something so that we have a little detail view model let's create here partial class employee view model and i say an employee should have a first name so i use here the property attribute from mbvmgen and i create here the first name fields i copy this let's create another one let's say bool is developer and let's save this and now you see also for this employee view model there is a generated file and when you look at this side by side i scroll down you see here is the first name property that raises on property changed in the setter when i scroll down you see this developer property so all you have to do is just copy these things and i could say here last name string and you see how it's created on the right side so it's generated on the fly and you can use it immediately but you actually don't have to look at the generated code now in this menu model i create like i would do in wpf and windows forms so all of this is dotnet standard so it would work the same way in wpf and windows forms i create an employees property we can use here target type new expression i want to write a getter here so now i did it right okay and i create also a selected employee property employee view model selected employee and now again i just need to mark this one with the property attribute to generate the property behind the scenes in addition normally we would pass a data provider to this viewmodel and i just hard coded here there is an uninitialized method that is called from the generated constructor and here i just add to the employees property i add a few employee view models okay now i have a few that's good the view model is ready and we can use it in our wind ui app so i just reference here that view models project also interesting when i double click the win ui app and i scroll up in this one you can also see here this is a net five so net core5 application so it's the latest framework and now let's go to the main windows semi-file and let's just use that view model that we have created main view model it should come up here i remove the rest and i generate that read-only property um the traditional binding if you are familiar with wpf you would do something like this this doesn't exist on that wind ui window right now but it exists on all the controls so theoretically i could um define here let's do this a grid if i would have here i crit i could set on that grid the data context property and then you can bind with the traditional binding but in wind ui and also in uwp you usually use compiled data bindings with the x bind markup extension and this is what we do now in our code here in semi so let's quickly define here on that grid two column definitions let's give this one a width of 250 and the other one just a width of star which is the default value and i put into this grid a list view item source not item spanner sometimes i wish intellisense would know what i think but we are still not there but maybe right one day now you see here x bind x bind is different it doesn't use the data context instead you see here all the members of the main window and so you find here the viewmodel property that we have created in the code behind file and i can bind here to the employees and i set the mode to one way i also find here selected item to view model selected employee modes two-way and let's set the display member path to show the first name in this list box now let's create a stack panel in the second column and i put a text box into this one let's give it a little margin and let's set the text on this one to x bind view model selected employee dot first name mode two-way update source trigger property changed and there is a header property which is something that does not exist in wpf and i really like it because it means i don't have to create the label in addition i can just use the tether and then i have a label for the text box and now i'm good at copy pasting so i copy paste it and i bind another one to the last name property and we can also add the checkbox is checked x binds and you see the nice thing we get here really intellisense and we can bind to that stuff and it's just a bit of typing hitting enter to select intellisense to get all of this and now i don't know if i've if i've coded everything right but let's see now we should see this little user interface where we have a little master detail screen available and yeah it's building yeah now we see on the left side the list view is filled with a few items when i select a few yeah you see here we have the only developer i forgot to label the checkbox but this is the is developer checkbox uh let's make nitro in law and mark developers too so now yeah i'm not a developer no checkbox and and now you can navigate through this yeah um i don't know um let's see if editing works yes you see it updates on the left side so pretty much the same as we have with them with wpf in saml so it works the same way it feels similar but what you get is the modern look of windows 10 so you get the controls that look like windows 10 and you get an application that really has the latest features of win ui so nothing much different from the developer perspective you see everything looks the same grid list view stack panel text box if you are used to wpf there is nothing much different maybe you wouldn't use xbind you could use binding as well it also exists then you have to set the data context and you can bind to this one you can mix and match actually you can use binding and expand in one project if you want um but i'm a fan of xbind once you get used to it it has also the advantage look if i misspell here for example first name i write just for a name then this is underlined and when i try to run it everything gets compiled and this should actually show me an error yeah it gives me an error the property fair name was not found in type employee view model so you see you get with x bind these compile time errors and not the the binding errors at runtime okay this was a very little demo of win ui 3 in desktop so try it out install the project reunion extension and then just play around with it thomas we have another question yes at this time from martin and the question is if there is a supported path to convert a wpf application to win ui latest and greatest or we need to rewrite the whole ui yeah that's a good question and there is no no path to to rewrite to migrate the existing application but look what i already did in this project is and this is what i recommend if it's possible i moved here the view models into a separate project which means i could now go in this solution and i could say okay i create a new wpf project and i just reuse the viewmodels also in that one yeah it's it takes a while to search but but you could now reuse that library in the existing application but for the ui project there is nothing like that well technically there is uh some of iceland this should might have to protect the wpf and then everything should work even exactly technically there is the way to host to host wind ui controls in wpf with saml islands and this would mean you can you can use new features or maybe you can just migrate parts of it but there is as far as i understand it and as far as i think microsoft wants it they don't want um that you have to port your whole wpf application to win ui they think because you know look at the big applications i don't know if you if you work on applications that where you spent more than one year working on them they grow and grow and then you reach the point where you think okay it will be a lot of work if we move that one to a new technology and and so they don't expect that you move your wpf or also your windows forms applications to win ui but win win ui saml islands allows you to modernize wpf applications with the latest controls if you want to do that unfortunately it doesn't work in the other direction so you can't create a blank wind ui app and host your wpf your wpf controls in wind ui but this is something that was requested and maybe we will see this also in the future but i don't know if if there are any plans to support this but i know for example a few wpf applications where you have a quite a complex wpf control which is the limiting factor why you can't migrate to win ui and if you could host that wpf control in win ui you could migrate that application to the new platform if you want but yeah right now to migrate the full application to get something like try convert there is nothing like that but let's try quickly something look in this simple application if i reference here view models and i go to the code behind file and i say here data context equals new main view model and yeah now i have even a little trick that i show you let's keep it like this but let's go to the win ui app you will see that many things are very similar so i can copy this and i can go over to the wpf app and paste it here paste it in what does not exist is x bind so now i should replace x bind viewmodel with employees but what i what you can do what allows you a bit mix and match is that you say you create like in win ui a viewmodel property and you set into the data context your own control which means then you can just say instead of x binds binding you bind to the viewmodel property of your control and you grab the employee and if you don't do this if you assign the view model directly to the data context you have in addition get rid here of this viewmodel property and do it like you would do it traditional but if you mix when ui and wpf you can go it this way create a viewmodel property like in wind ui and assign your whole window to the data context then you can use exactly the same binding path for the binding and now look i just changed x bind to binding i should have used ctrl h to do this the header property does not exist if i remove that one the rest should be the same so now i should be able to set this as a startup project and run this one then we should see the wpf application yes and now we have everything in the wpf application and yeah the ui looks not so nice here we have to do a bit of styling but but it works so by structuring your application like this this works but now you also see already that ah maybe it would be great if we could define user controls with saml that work in the different platforms because they are quite the same so with net we have something that is called if your.net 5 but is we could make this a net standard library we could use dotnet standard to share c sharp code between different frameworks but with saml we don't have something like this and this is something that was on the list which was called samuel standart there is even a repository on github but this one i think this one is really dead because this one out i i see glenn smiling uh that's what is really that's the service standard it's quite hard you know because on the other side there are more frameworks that use semi for example say marine forms and to align all of this it just slows down all the different frameworks because think about the meetings the wpf team and the win ui team and the sam reforms team they have to make meetings to align all of this and and we all know if you don't have to do meetings and you just say let's decide this and let's go that direction is much faster than if you have to coordinate all those things of course for us developers it would be nice i could move the main window to a library and then i could reuse it but yeah but interesting is the other way around if i would copy this one the wpf part into wind ui let's try this one this will just work so in win ui you see there is no error so the binding is just there so in win ui we could now say on this grid we give this the name grid as the window does not have the data context and now we just say here grid data context and we assign that new main view model and now we use the binding markup extension like traditionally and i think this should work too and so now we have copied from wind ui to wpf we saw x-bind doesn't work in wpf but the other way around binding in win ui this one works not okay i did something wrong the item source view more ah yeah now here i should do it the same way let me press ctrl set i should do it like this because i i kept the viewmodel property um in the wpf project so now let's see yes now it's here again this was my fault but actually there is also at runtime i don't know if it exists for win ui already there is a new window in visual studio that is called semi binding failures i don't know if you have seen that one yeah i don't i can't see it here in the wind ui project let's see with the wpf project and maybe let's let's do something wrong let's find here to fit name yeah here is it here is this new semi binding failures window it doesn't have an error yet because the binding didn't appear we need to select something and now you see here in this era you see there is a data error binding path fit name on the text box and you'll see also here fitness fit name property not found on object of type employee viewmodel so this is also something new that you can use at runtime in wpf to find out semi-binding failures i don't know if this will come to the binding markup extension in wind ui 2 maybe but normally you would use x point there ok semi controls are win ui controls gallery we have seen that one i showed it already before check it out in the in the microsoft store so this was uwp and win ui now let's continue with the last part cross platform development uh what's going on there before.net 6 we had summary in ios xamarin android and uwp and on top of that sits samreen forms which is an abstraction layer that allows you to build user interfaces with saml and c-sharp but it has a different syntax and some different class names for example the stack panel in xamarin forms is called stack layout and the data context is called binding context so a few differences but it's pretty much the same now synth.net six which is a look into the future because dotnet six will come out in november this year since dot net six we have win ui instead of uwp microsoft renames xamarin android to dotnet for android and microsoft renames xamarin.ios2.net for ios and microsoft renames samreen forms to.net multi-platform app ui or schwarz.net maui but this is more than just a renaming uh dotnet maui tries to achieve everything for the different platforms with a single project this means with sam reforms you had for example separate projects for ios and for android and then a common one with with your user interface with net maui you will have a single project in visual studio that you can use to target the different platforms this has the advantage is that if you add for example an image to your project you don't have to think about how to add that image on android how to do it on ios and how to do it on windows you just edit in your project and now we will find out behind the scenes how to do it on the different platforms but now also a question that comes up quite often is what should we use dot net maui or win ui now you see they are on different levels win ui is a native platform like android and ios when ui is the native framework for building windows applications and dotnet maui is an abstraction layer that allows you to build cross-platform applications so if you don't have a cross-platform scenario then you could directly use win ui if you have a cross-platform scenario you might want to take a look at dotnet maui to see how this works and maybe if it's super great you could also use it just with wind ui as a target and then you are open to support other platforms in the future with dotnet maui microsoft also brought in mac os as a native platform and this was possible with xamarin forms as part of a community project but now it's officially supported and this shows that dotnet maui has also a focus on desktop applications before it was more mobile applications for android and ios but now with wind ui and mac os as targets it has a clear focus on desktop applications which is really interesting and i look forward to it and to see how this evolves beside dotnet maui there is also a interesting open source project that is called uno platform if you haven't heard about that one you should also check this out because this one is not in preview it is available today and what uno platform does is it allows you to write saml and c-sharp like you do it in win ui actually you are building a win-ui application so you can compile to win ui but they use also xamarin under the hood to compile to ios and android and mac os and what they also have and this is the most interesting part they also allow you to compile your application to the web and then your application runs natively in the browser with atm html css and the code is compiled to webassembly they do a full translation of your saml code to html and css code and what they promise is pixel perfect layout this means you get exactly the layout and the look like in your native wind ui application on all these different platforms so it's something to check out i find it very interesting uno platform and it has also a big community already and they also work closely together with the win ui team at microsoft to really bring win ui on all the different platforms which is great for us semi developers because uno has has the concept they say they don't want that you have to decide if you build a web application or a windows desktop application or a mac desktop application they just want you to build an application and they care about the different platforms so that it will run everywhere this means these two options exist today for cross-platform applications with saml there are also some more open source projects besides uno platform like this avalonia projects so research for this one from the open source part uno platform is not the only one but i put it here because related to win ui it is the platform that brings win ui on all the different targets all right so that was it with cross platform development now we are through and i think my hour is over and let's wrap this up you have saw you have seen in this in this session that win ui 3 is the modern framework for windows 10 apps you can check it out on github look at the issues there and you see the community calls and i think i'm not totally sure they are always on the third wednesday every month and they are live streamed on youtube but you will see issues there and you also learned it's part of project reunion that's the also the name of the project head of the visual studio extension that you have to install and the current version can be used to build production apps so they they say this is no more a preview everything you find there is production ready and you can use it to start to build your applications but it's still not a 1.0 release so that one will come in the future i also mentioned uno platform that brings wind ui everywhere including the web wpf and winforms if you have applications on these they are supported in the future modernization we talked about it there is no real migration guide but you can also think a bit about like when wpf came out we also have interop between windows forms and wpf and we thought about how to migrate windows forms applications to wpf and to be honest i haven't seen many windows forms applications be ported to wpf many people stayed on windows forms and they started new projects with wpf and i think it will be similar to to win ui so i think we will see the same thing but important for you is microsoft wants that if you have a winforms or wpf application that you can use the latest features that come with when ui with the help of saml islands so if you see something in windui and you see and you say hey that is something we really would need in our application then you don't have to port your application you can just use it in your existing existing application with saml islands the last part dotnet maui is microsoft's cross-platform solution we will see that one um this year with dot net six so the final release or the first release is with dot net six and uh originally sometimes i think about it if the pandemic wouldn't have been here the original plan was to release all of this with net five so this was last year in november but now we are one year behind and so with dot net six we see all the stuff that should have been here already with dotnet five but it's quite interesting okay so we are through i hope you like the session and now we have a little q a you can ask stuff we can look at different things if you want and if later a question comes to your mind also feel free to ping me here is my email that you can use we can't hear you i think you're still muted oh yes thank you so i repeat again and thanks thomas it is a great session i think some hands-on some interesting well explained topics and now i guess everybody here understands what is project reunion what is ui and windows maui and also we explore it a bit hands-on and we have one more question pending it's uh from horst huffle the current productive reunion version is 0.5 of wind ui it lacks the hot reload function when will it be also be available for a production that's a good question that one is uh that one is not related to the project reunion thing is related to the visual studio version and i think they have somewhere in the docs uh written that they have the hot reload in the preview but i haven't tried it so let's try it with my project um to open it i think here i'm on 1695 here which is the current one i think you should have it with a with a preview edition so let me copy the folder path and let's close this one and let's open this one in in the preview so i think there it is ah yeah i am already here yeah so i think as soon as as.net 6 and visual studio 2022 comes out then the tooling might be aligned a bit better to see all of this going well and now let me also check which preview version ah now and now after the session i found out that i can move this zoom thing that was always in my way um let's check what version this is 1610 preview three i think this is the latest preview i think i updated yesterday but i am not totally sure if it was on this machine or on my laptop um but i guess so now let's uh let's run the package project oops sorry i clicked on a context menu let's set this one as a startup project and let's run it and let's try to change something on the fly let's also see if we see the tools there now visual tree pointing faders here we see the live visual tree but i don't see the tools there i'm not sure and what reload but let's just try it what could we do maybe let's move this one to the right visual studio to the left and well let's just add a text box here yeah and you see it appears so yeah so with the latest visual studio preview version this hot reload should come so it's it's not a win ui project reunion issue it's more an issue of the of the tooling that also gets updated so i think it's aligned of course the win ui team might be the team who does the tooling there so that it works but if you switch to the preview you you will get this hot reload thing and i think in the current visual studio version it does not work yes we have one more question from martin is the performance of wind ui better than wpf yeah it definitely should be because it is built directly on the metal so the vfc plus plus under the hood so performance should definitely be better in wind ui than with wpf but right now you know it's something i say you know you hear it already with the words shoot at must um i think so it will be better but i haven't built really big applications right now with wind ui and with wpf you also don't notice a difference but we all know with wpf you have to take care to keep the the visual trees small so that the application is performant and two weeks ago i was at the customer they have used win huge windows forms application and i looked at the code and i run it and i thought wow this is really fast compared to all the wpf stuff i usually do and win ui i think it should definitely be faster and you also have to keep in mind you could do theoretically an application with c plus plus and the interesting part there is the semi code for a c plus plus application would be exactly the same and i recommend i really recommend you to try the c plus plus application if you need a performance intensive application because writing c plus plus today is not like writing c plus plus 10 years ago it looks pretty much like c sharp and it's not so much difference there is still these weird syntax contracts constructs at some points but as a c sharp developer i think you can manage to do this but overall answering the question we should definitely see more performant applications because all the stuff the framework the controls they are built with native technology with c plus so i hope to see again there in performance but we don't know today we will see in the future did you already tried this you know stuff yes i tried uno stuff already and um i have created before the session a little uno project just here and and i think it's really powerful it's really powerful so if you haven't tried it i recommend you to give you a go the company who has created uno um they had many wpf and also silverlight applications and customers with many wpf and silverlight applications i think around 200 applications and some of them needed to go to the web and so instead of porting all the applications to a new technology they decided to build something to compile saml to web stuff and i'm not sure if this one is running but let's try it now it runs completely in web assembly we had a session on you know in february or who did it check i posted the link to the to the chat oh okay yeah i will take a look at it it was one of the members of the you know platform yeah then it was david david oliver david oliver okay yeah he's one of the current engineers yeah yeah yeah that's nice so now i switched to the wrong project but now interesting is look here i have this uno solution i've unloaded a few platforms you have usually projects for different platforms you see here the win ui projects you see here web assembly project android ios and so on and then there is the shared project and in this case i have here a view model folder where i have a main view model employee view model quite similar like we did it now but in this case i programmed it fully without using the code generation like we did and in the main page when i go to this one the same view model assigned and in the semi code it looks pretty much similar i have to select here windows desktop so that the sample looks good so you see i use xbind and so on with the selected employee and then i can run it in the browser and this works natively you see the master detail stuff it just selec it just works and it looks exactly like the native application so it's definitely something if you say hey i want to build an application and maybe i want to bring it to the web or to another to another platform if you have already a win ui application or even a wpf application then you could try how easy is it to bring the wpf application with the semi code to win ui and from there you can directly compile it to the web and and then it will work but depending on the controls you know you they need to support the controls the custom rendering answers so if you use third-party controls and stuff like that it might get more difficult but it's definitely something to check out the questions also what i have here is what is about dot and maui where they bring out a web assembly target and i don't know today if they have any plans about this but it would be strange if they wouldn't have any plans about this so so there is the question hey maybe.net maui brings out something to target webassembly could also be possible but personally i think uno is a nice project and it might allow you to bring your application very easily to the web yep and to me it makes it strange because with these you can run your code and your ui everywhere even the web so yeah why why haven't project maui announced it that they will support web that looks like a smart move otherwise it's like okay we support everything but the web so okay everybody jumping to the uno platform right yeah exactly yeah exactly and i think you know when you think about internal stuff we saw win ui is a native platform and from dotnet maui perspective it's just a single target and when you think you are in the win ui team that you think okay for maui we are just the targets and for udo we are the core thing that is going to other platforms so yeah i think this is also one reason why they really like uno in the win ui team because it centers when ui when ui is they are the core part and when ui goes cross platform and with with dot net maui when ui is just a target of your application yeah so but we will see what if what the future will bring there i think it also depends a bit many companies they only want to use technology from microsoft and so i think if you build for desktop mac os and windows then dotnet maui might be the way to go but if you want to bring a an application to the web this could be a totally valid and great approach and it is also working because they ported already many many applications to the web but on the other side if you start from scratch and you know already that you have to build for the web then you might go with blazer or another technology depends how much html and css you want to learn right it's getting complicated yeah so i guess we will have to wait until when is the release in november end of year december yeah in november so everything in november yeah november will be the big month every everyone is vaccinated we go out to restaurants eating and we have dotnet six it will be great yeah let's come for that so do we have any more questions so if not i will stop the stream

Channel: dotNETZurich

Views: 92,333

Keywords:

Id: 8NdJaztrNk8

Length: 94min 51sec (5691 seconds)

Published: Wed May 19 2021