Build .NET MAUI UI with XAML [4 of 8] | .NET MAUI for Beginners

Learn more ➡️ learn.microsoft.com/training/...
Welcome to the .NET MAUI for Beginners Series where you will learn the basics of building multi-platform apps with .NET MAUI for iOS, Android, macOS, and Windows from a shared C# code base. In this video, James shows how to start to build user interfaces for .NET MAUI with XAML, and xml based mark up language. He walks through building a full task application user interface with data entry, buttons, lists of data, and even swipe to delete all with XAML hot reload.
.NET MAUI for Beginners series playlist: aka.ms/dotnet/beginnervideos/...
Follow along: aka.ms/dotnet/beginnervideos/...
4 Hour .NET MAUI Workshop: • Learn .NET MAUI - Full...
Follow James:
- James on KZbin: / jamesmontemagno
- James on Twitter: / jamesmontemagno
Links:
- .NET MAUI Self-guided Learning on Microsoft Learn: aka.ms/dotnetmaui-beginner/ms...
- .NET MAUI Website: aka.ms/dotnetmaui-beginner/we...
- Install .NET MAUI: aka.ms/dotnetmaui-beginner/in...
- My Tasks Sample: aka.ms/dotnetmaui-beginner/my...
- .NET MAUI Documentation: aka.ms/dotnetmaui-beginner/docs
- .NET MAUI on GitHub: aka.ms/dotnetmaui-beginner/gi...
- .NET MAUI Workshop: aka.ms/maui-workshop
- .NET Community Toolkit Docs: aka.ms/dotnetmaui-beginner/to...
- .NET Community Toolkit GitHub: aka.ms/dotnetmaui-beginner/to...
- More .NET Beginner Series Videos: dot.net/videos
- .NET KZbin - / dotnet
- .NET on Twitter - / dotnet
#dotnet #dotnetmaui #ios #android #windows #macos #csharp
🙋‍♀️🙋‍♂️ Get your questions answered on the Microsoft Q&A for .NET: aka.ms/dotnet-qa
🏫 Learn C#, F#, and .NET with free self-guided learning from Microsoft Learn: aka.ms/learndotnet

[@Coffeecupdev]

If you are following along on a Windows machine, at 9:30 James introduces the SwipeView. It is currently "broken" for windows, so you will need to deploy it to an emulator or physical device to see it in action. Happy learning!!

[@Cloude1983]

Thx for the Info, i was wondering, what I did wrong.

[@kombosabinho]

Thanks for letting us know man. I was also wondering what I did wrong LOL :)

[@Paul-uo9sv]

When will this be fixed? Is there a Ms support ticket out for this issue?

[@HappyBirthdayGreetings]

Almost thought i did something wrong

[@aaronhastings873]

Yes the presenter cleverly avoids using those features in the windows version. Almost as if he KNEW that they did not work. Not super helpful for the presenter IMO.

[@skfalpink123]

Many thanks for this James! Having just updated to the latest version of Visual Studio, I've been blown away by just how nice MAUI is and REALLY wish I had spent the time when you first released these videos to watch them.

[@thecacademy5376]

Great stuff man! Maui is fantastic and learning from you is a pleasure. You're a great teacher. 🤓

[@PaulHollyer]

Just started learning C# & Maui, wish I'd done this long a long time ago. Great videos, thanks.

[@czr1278]

Great series, thanks for making these!

[@ScaerieTale]

has a bug in .NET 7 (Known isue) where it maintains a white background in Dark mode. The easiest solution is to set BackGroundColor="#00FFFFFF" which sets BGC to transparent (0 Alpha) :) This video has been great so far. I thinhk I enjoy writing XAML more than I ever did CSS or Flutter markup

[@TheLapinoob]

Thank you very much, 30 minutes to ask me why it did not work

[@mariusroman8086]

The swipe doesn't work on Windows. Do we need a different implementation for Windows?

[@ndamulelosbg8887]

Brilliantly done👏👏

[@alevinciius]

Muito obrigado. Deus te abençoe! Thanks. God bless you!

[@samda7109]

I am very happy that Visual Studio 2022 has made .Net MAUI very usable. Unfortunately, I am missing the preview view for the XAML files. Am I really forced to develop the UI always with Hot Reload? For me, this feels like a big step backwards, compared to editing WPF and Forms surfaces.

[@fitsumkefyalew3454]

Thanks bro that was really helpful

[@tobiaspflug2170]

For those who are wondering about the "broken" SwipeView. I followed this tutorial on a windows tablet and can swipe (thx to touchscreen). So it's not broken, but it failed to implement a fallback with mouse.

[@alfredmichael8345]

The entry's bottom line doesn't show up, is there a workaround for this, for example using a BoxView for the bottom line?

[@DJone4one]

I must waiting little bit for open the program on a windows device, because the android Device Manager is loading a typ of Pixel to run on it. But it work.

[@user-tv5pg3pv7k]

merci beaucoup a toi :))

[@rhysmuir]

When I’m debug more I get errors for the grid row and column descriptions saying the typeconverter can’t accept a string and the ui doesn’t auto update - I need to restart debit mode to see the change and error is gone until and change

[@joebabb504]

Looks like there are many many XAML elements to learn. How does one learn them? Things like Swipe?? Is there a book?

[@bikashghosh7738]

Hi James, I was trying to define like below and checked it on Android phone , it seems to be working. But it didn't work for Android Tablet & Windows desktop. Any idea?

[@joebabb504]

I am a beginner to .net maui and I appreciate your videos very much. I have installed VS 2022 and got my first new .net maui project up and running both on Windows and an Android emulator. But... Where I am having trouble is that I am an old Win32 programmer and haven't come up to speed on all these XAML things. Is there a good resource for learning about these other than jumping in and using the examples you show? I feel like I need a XAML reference library or some such.

[@danil1906]

Why its not completing or offering any code when i type in the XAML file?

[@sbortizp]

trying to follow your examples application wont even load the android debug Pixel 5 API 31.... The image is also an .svg and not .png. Attempting to boot up the debugger - stays loading doesn't even start up. Anyone else having these issues? I am using v17.3.2

[@muluman88]

I understand MAUI is supposed to be one project for all platforms, but from a UX POV I think a SwipeView is terrible in a desktop environement, so one would have to do some kind of platform dependend decisions anyway.

[@rachel-tc1dy]

I think it is disabled in desktop

[@nbaua3454]

Hi James 👋, I Knew you since early xamarin days through the forums (nbaua username on there) but never got to see you in any videos or profile image etc.. you're looking like a Jesus Christ and indeed with Maui that is perfectly matching 😍

[@ganeshjoshi4426]

Does SwipeView works on windows?

[@DJone4one]

I have problems starting the Android emulator. VS says that I need an Intel processor to run an Android emulator. I have an AMD Ryzen 5 processor. Can I also connect VS to it via the smartphone link?

[@DJone4one]

Ok I have found the problem. Hyper-V was not activated. Although I had activated it before. Must have been deactivated during the last update. Now it also accelerates.

[@cielruby8762]

I get an error with SwipeView.RightItems on Visual Studio for Mac. An attribute name is missing.  public Microsoft.Maui.Controls.SwipeItems Microsoft.Maui.Controls.SwipeView.RightItems { get; set; } Location: Microsoft.Maui.Controls

[@Mikoaj-rp5xe]

Great material! You should consider changing the background music, it's quite disturbing.

[@pasauliite]

I got an error : The attachable property 'ItemsSource' was not found in type 'CollectionView'

[@nicePiccolo]

Check if its written correctly. It's not ItemSource, it's ItemsSource.

[@Taki7o7]

Hey, i found someweird problem with that. When you use dark mode on android, the containers stay white, but the textt also switches to white, making it unreadable. On PC this does only happen if you change from dark mode to light mode and back again while the application is running. Any clue on how to properly fix this?

[@Taki7o7]

nvm found the solution: AppThemeBinding in the frames background color. And for sure define them in Colors.xaml

[@mendoxei]

haha i was wondering why my fruit texts didn't show up, turns out the text was white on the white label. glad i figured that out fast

[@StingBear]

Are we seriously going to back to using tables for layout? Is this a common thing to do?

[@sajanpatel6751]

swipe gesture does not work on windows machine.

[@SKIDDOW]

I need a Floating Action Button

[@PaulHahn-ci1xs]

Thanks, but this background music is not okay in a 13 minute loop

[@yousseffjomaa]

if you want the items to appear in android

[@roadrageman1210]

and BOOM! I'm lost!

[@hexadec]

LOL 😁

[@ArturoBrionesOrtega]

Doesn't work 🤕

[@gaggleweed]

Kill the music please

[@anlKaynarr]

Swipe View didn't work on Windows Build.

[@CeryxTech]

It works with touch screen...

[@anlKaynarr]

@@CeryxTech Is this Works on Windows device with Touchscreen?

[@CeryxTech]

​@@anlKaynarr Yes, I meant that.

[@anlKaynarr]

@@CeryxTech thanks.

[@jcookie9448]

Same issue here. Tried to swipe with a digitizer/touchscreen with no luck.

[@t3hPoundcake]

I cannot get any anroid emulation to work. I have a 5800x3D AMD CPU and even though it doesn't support the hyper V acceleration it should function right? It just sits on the loading part of the Android screen forever.

[@Bee4Brendan]

Why is there always one small thing that doesn't work... Makes me want to scrap the whole thing.. The emulators are garbage and why would I have an Android lol

[@dangerosa01]

una bosta

[@technoscout]

Coming from Jetbrains, the VS IDE is so bad. You really need to take a look at their IDEs because if people will, they'll flee like hunted deer

[@RichM-vc9on]

1:34 "The first thing is head into the code". - UH no. You haven't even opened VS yet. Open VS, create new project, find maui template, create, then head to mainPage.xaml which is arguably not code.

[@raptagames]

"mainPage.xaml which is arguably not code" it is code and i don't think that's controversial

[@Paul-uo9sv]

Is the APP in the videos available in GITHUB for download? URL ?

[@abrahimzaman360]

@dotNET Onwards After Nothing Working

[@fitvaks]

If anyone else is as OCD as me... for the "My Tasks" logo png file go to description: My Tasks Sample Link -> maui-samples/6.0/Beginners-Series/MauiApp2/Resources/Images/logo.png

[@bonkers_dave]

it seems to be gone, there is no maui-samples/6.0 any more, only maui-samples/8.0 and it does not have My Tasks app

[@nolppo]

It didn't work for me🤔 (version 17.3.0 Preview 1.1)

[@julandealb1857]

Dont work for me either, if it is in a grid then i cant write. (Version 17.3.0 Preview 3.0)

[@julandealb1857]

Found a why, if you are using it wont work but if you use It works for me

[@abrahimzaman360]

@dotNET Onwards After Nothing Working