C++ GUI: Modern UI/UX with WinUI3 + C++/WinRT | Sciber
Вставка
- Опубліковано 22 гру 2021
- Today I will show you how to make a Modern Native Windows 10 (Windows 11 even) style Desktop App, not a UWP App!
Note: Please check the pinned comment for any updates!
For this, we are going to use the WinUI 3 Framework and C++/WinRT language projection. We will set up our environment by installing Visual Studio 2022 and installing the correct workloads. Create a new project and start coding!
I will also show you how to package your app to deploy by sideloading to other computers. Currently, you cannot deploy WinUI 3 apps without packaging, because the feature is under development and not ready for production use.
We will generate an MSIX file that can be sideloaded to a Windows 10 or 11 PC.
This video is aimed at beginners, if I'm too slow, feel free to watch at your own pace by increasing playback speed.
We will use XAML to build the UI. If you are coming from a C# WPF background this will be very familiar to you and you can build WinUI 3 apps with C# too.
We will make a simple Calculator that can add/subtract/multiply/divide 2 given numbers and display the result.
The project file and compiled application package is available on our Telegram Group to download for Free! Find information here: t.me/wearesciber_chat/290
Download Project File: t.me/wearesciber_chat/291
Download the finished app: t.me/wearesciber_chat/293
------------------------------------------------------
Other links for further research on C++/WinRT and WinUI:
Introduction to C++/WinRT: docs.microsoft.com/en-us/wind...
Create a WinUI3 App: docs.microsoft.com/en-us/wind...
UA-cam Vids:
• Effective C++/WinRT fo...
• CppCon 2017: Scott Jon...
• Everything you need to...
------------------------------------------------------
Feel free to leave any suggestions or corrections in the comments section. Constructive criticism is always accepted.
Download Visual Studio 2022 Community: visualstudio.microsoft.com
Facebook: (PAGE) sciber.web.app/fb
(GROUP) / programmingsrilanka
Instagram: sciber.web.app/ig
Telegram Community: t.me/wearesciber
Visit Us : sciber.web.app - Наука та технологія
The new visual studio 2022 installer does not have "Individual Components" on the right and when you use the top menu, windows SDK App is o longer there. So I presume this video is now obsolete? Can somebody supply a workaround?
There is a workaround, you can download the packages from the documentation I have provided in the description.
Its under the "Desktop development with C++ >> Optional" category, Under the "Installation Details" sidebar in visual studio installer.
@@pixper can confirm this.
thanks@@pixper
Please make this a full series alongside winforms you motivated me to start making GUI programs and not just CLI. Honestly the best programming channel on YT right now imo
Great video and narrative. Listened and enjoyed the video. Thank you for your contribution! Hope to see more of your videos. Cheers!
Thanks man! Great Video! All I need to get going!
thank you bro it was very helpful for me, keep it up
This was such an amazing video. Please make more videos on WinUI and C++/WinRT native app development on Windows. I really liked your explanation about all the h_strings and all. And seriously the last part of packaging the app and generating MSIX bundle that you just showed so clearly was way much helpful as most people will just code and don't explain you the packaging part. This was really a complete tutorial on desktop app development using C++/WinRT. Really looking forward for more such videos on this channel. Keep up the great work. ☺👍
This means a lot ♥. I will continue this series ☺️
@@wearesciber Pleaseeeeeeeeeee dooo
@@wearesciber and please continue with c++ . We have so many doing c# already.
Thanks a lot, this is what I was expecting
Glad I could help!
This video is so good, I would like to see more video like this. We really need more example and tutorial of C++/WinRT because it is hard to find related information on internet.
Thanks, will do!
Thank you for tutorials !
No worries! ❤
The best guide to begin with. Thanks
Glad it was helpful!
Helped Much Bro
Nice 👍🏻 please do more video c++ I love it
Very well this tutorial on native programming WinUI3 + C++/WinRT.
We are waiting for other videos from the same playlist with the use of other controls.
Just one observation: correct the frame, zooming more on the code to improve readability .
Thank you ♥
Also, code readability, noted!
👊
I just want Microsoft to make their win32 GUI API look from this century...
This was amazing! Could you please make a complete series showing how to make some intermediate-level applications with help of topics like MVVM architecture, and Dependency Injection, how to make API calls, and things like that? 🌟
It would be amazing since there are not many straightforward resources for the beginners to learn about Windows app development with WinUI3 from scratch.
I agree! I'll try my best. Thanks.
Do they even exists in C++/WinRT? Sorry, I left C++ desktop programming in 2006. :)
Thanks, i bookmarked it. Not enough C++/WinUI3 videos or blog posts out there.
Yeah, even the documentation is not precise. It took me a while to stitch various parts together to create and deploy the complete app. Hope you'll enjoy the video
I am Glad To See You Creating New Contents in your Channel.
Would you prefer C++/CLI or WinRT ?
Have You Key For VS 2022? 2019 keys doesn't work now... (
I prefer winrt, I don't use c++/cli, I use c# instead. I use c# winforms a lot when I have to quickly come up with an application.
What do you mean by keys, vs community is free.
Thank you so much. I learned C++ in school and I wanted to write some windows desktop programs, but I didn't want to learn QT and I didn't want to switch to C#, so this came along at the perfect time. Please make this a series.
One question: when I was naming the textboxes, I accidentally left the x: off of the Name property, and it still worked. Is this something that will mess up a larger program, or is the x: optional?
Thanks.
Im not sure about the x thing though.
Depends on what you mean by work. In short, no, x: isn't optional if you want to refer to the element in code behind. Try to clean and rebuild and your variable should now disappear and there should be compile error.
`x:Name` tells the compiler to generate a variable with the name that points to your element, whereas `Name` assigns the name to the `FrameworkProperty.Name` property of the element. And `a:B` is a notation saying "Find B in namespace a", thus with or without the x: part is effectively asking for different things. Hope it helps!
👍👍
Thank you for the informative video. I had high hopes for WinUI 3 when I first learned about this project. I expected that this would be a serious rival to Qt. But this seems more like a replacement for WPF. The most disappointing thing about this are mandatory certificates. I am not going to fall into the traps of Microsoft's greed.
Can you cover the navigation view and menu items...?
NumberBox with AllowExpression >>>
Please do a one in C# as WinUI 3
I'm new to C++ and this is a fantastic tutorial, thank you for taking the time!
One thing I'd like to be able to do is to capture the input/result then drop it into a .txt file once it has been submitted. I've tried the following method in the console, which works, but I'm clearly not experienced enough for this environment. Any pointers?
string filename("tmp.txt");
ofstream file_out;
file_out.open(filename, std::ios_base::app);
file_out
Hi, it should still probably work. I'm sure there are much better methods with async because unlike cli, GUI should not wait. it should be able to save the file in the background and user should be able to work in the app.
There are also file pickers and such. So you can use one of those to choose the file and handle the related events through that. If all this seems kinda complicated, don't worry. I just have some critical work (might even take months) and after that I will make more videos on this topic.
But for now, checkout the documentation and watch more advanced videos. When you start watching advanced videos, you might not understand them at first but then eventually you will get used to it. Watch those videos in the pages I have linked in the description.
Also if you want to play with the GUI stuff, you can download WinUI 3 Controls Gallery, just search for it and download it from their Github repo->releases page. (I'm not sure whether its available in the store, but look in it first)
Also have you done anything with Winforms, I recommend you to look into that a little bit and perhaps even WPF just so you get an idea about how GUI stuff are done.
Im trying to figure out how to change the window size for the past 3 hours, plase help.
You have explained things perfectly, no offense at all and thank you very much. I've been developing for 15+ years for a living and GUI things become more and more stupid every year. WHY ON EARTH the desktop app. development has become so cumbersome. I mean we had quite powerful RAD tools at almost stone age such as VCL C++, Delphi, even VB . Than we had to move on with uncompiled C# dotnet, Java, python etc. Sorry but the only viable option today as a desktop development is QT. That's it... Use it for machine vision, audio processing, or for whatever you are doing. I wish QT group grasp RUST in the future. CONCLUSION: People want to have a free compiled Rad tool.
I agree. I've heard about how easy it was to create GUIs back in the day though I don't have any experience. It's a shame because nowadays companies are so focused on Electron since "any computer can run it nowadays". Qt is what I also use, it is the only thing that can play the role correctly at the moment.
i can't find C++/WinRT in the installation setup !! , did they remove it or what ?
Sir please make a video to adjust brightness and contrast in picturebox in visual studio using c++
Please sir make it.....
How to make XAML live preview work?
Great video!
But, is there any way to create a single .exe file instead of an msix package?
I mean, can I use WinUI in a very oldschool Win32 application, or is it impossible because of the library dependencies?
You can,using Xaml Islands. Look into that.
@@wearesciber Thanks!
Hello, for my thesis I decided to do an C++ (with UI) but I am not really decided if to go with WinForms or a more recent framework like this one. From what I can see on your video, this WinUI3 is basically like WPF, right? You write the whole UI code inside the .xamp.cpp file.
Yeah, it is like WPF.
What are your intentions because I feel like none of these will fit your expectations.
I am making a video on the Qt framework now, you can decide after I publish it. I think you should probably use that.
If you can give more details about your project, we can figure it out.
@@wearesciber Sure thing, do you have a Discord server or something where I can contact you?
You can contact me through telegram.
t.me/wearesciber
Or Instagram, instagram.com/thisismalindu
Dude i see you selected xamarin. If you use xamarin. Can you make a video about it please because your tutorials are much clear that other people's tutorials.
Hi, actually I am not that fluent in Xamarin, I just started learning it. Once I learn enough, I will teach you guys, no problem 😊
Also, your comment got deleted right? Is there anyway to report this to youtube, a lot of comments are deleted without me noticing. They are not in the spam folder either. So confusing.
@@wearesciber😊 Thanks for amazing tutorials and clear explanations.😊
in the Visual Studio Installer I am using, no "window app SDK C++ VS2022template" exists. Confused
please visit the links in the description for official documentation. they have provided links to download SDKs and templates externally. :)
Can you please how to make *Modern* Notepad app in Winform
*You got a new subscriber in advanced*
I'm sorry for not uploading those. I'm kinda busy with some exams. Wish I had more time. But I try my best to help you guys. Stay tuned. :)
@@wearesciber okay no problem :)
Sticks and stones may break my bones, Indian people do save my life
btw I'm Sri Lankan 🥲
Чувак продолжай свою работу по изучению WinUI3,очень помогло твое видео, продолжи пожалуйста работу по WinUI3
Thank you, I will continue very soon.
@@wearesciber Буду ждать!!!
Bro c++ වලට තියෙන most famous framework එක මොකක්ද?
Questions is ambiguous, please provide more details.
Is it necessary to know the coding for that desing? Ui ux
Yes, there are some rumors that a Visual Designer is coming, but I believe it's a must to know how to build the UI through code as well. Because, then you can easily tweak your design accurately and do Bindings and stuff like that.
For example in C# WPF, we mostly design the UI through code like 90% of the time, and only for a few specific use cases we use the designer. But we use VS Blend for making slick animations and stuff because that is way harder and time consuming to do via code.
Once the designer is out, you can use it to quickly make your UIs, but for now you have to write XAML manually (or perhaps copy code from something like XAML Controls Gallery)
i had some hope for WinUI3 with c++, but thanks to your video, i can see that it's pretty much unusable.
😂💔 why so
@@wearesciber the whole thing is an obfuscated way of writing C# code for a dying platform. You can't generate standalone C++ windows native executables, which is the whole point of using c++. just generating an empty project produces dozens of files and all of it has to be collected into a package with a forced installer with everything hooking into dotnet. there is no way i would inflict myself to all that using C++.
you might as well use C#.
or better yet, use dart with flutter. at least with that you can produce cross platform apps, with less friction and no nonsense with xaml files.
Yeah, I have also been looking into flutter recently and I found it really impressive. Just cant get my head around why C++ doesn't have something like that. Is it because it doesnt have a proper big company to backup?
Frustrated.
VS 2022 17.10.4 doesn't have Universal Windows development option it has Windows Application dev option. I'm assuming it's the same just renamed. Also, no WinRT. Your VS 2022 is more like 2019 then latest 2022. MS changed it a lot
Smanyen software development walata honda combination eka java, c++ and python da
C++ and python, ok.
But java? I dont think so.
@@wearesciber ehenam mona language ekada suitable
How to put our design in coding ?
This is not possible for now afaik. But there will be third-party tools to do this in the future.
Like, the Uno platform has an extension for Figma to export our designs to XAML directly. Something like that will evolve someday. But for now, you can't.
It’s work in Linux
No, this is Windows only.
i'm stunned just how horrible WinUI3 is
haha, I guess you prefer the good old ways with Win32/MFC/WTL? To be honest, what WinUI offers for me right now is just the out of the box good looking UI and otherwise I'd just use WPF or Winforms. Since WinUI3 is still under development, it doesn't look like an elegant solution or replacement to any of the existing frameworks out there.
@@wearesciber Win32 was much better than WinUI3 and even C#/WPF. Just today i heared that the text editor view in WinUI got horizontal scrolling capability. Halleluja, in 2023.
u doing good man?
Hi, I will start uploading in about 2 months 🥹