Creating .NET MAUI UIs in C# Markup
Vložit
- čas přidán 18. 06. 2024
- Have you ever wanted to create your UI in .NET MAUI using C# instead of XAML? You can, using the .NET MAUI Community Toolkit C# Markup Extensions! Learn how to use the official open-source .NET MAUI C# Markup Extensions library to streamline your UI building process.
00:00 - Intro, Shaun, & Brandon
02:30 - What is C# markup and why use it?
05:45 - C# vs XAML
12:05 - C# markup overview
17:30 - C# markup demo side-by-side
24:00 - Wrap-up
Links:
Markup on GitHub: github.com/CommunityToolkit/M...
Toolkit on GitHub: github.com/communitytoolkit/m...
Toolkit on Docs: docs.microsoft.com/en-us/dotn...
#dotnetmaui #dotnet #communitytoolkit #csharpmarkup #codedui - Věda a technologie
regardless of which method used, there should be a visual GUI system like visual basic etc. to work with the UI side instead of just c# or xaml
This is awesome - great work Sean, James and Brandon
Awesome! Psyched that we can use C# to write UI. So much better than having to try and encode / decode XAML and as mentioned avoids all the crazy out of sync nonsense. Having an additional layer like XAML never made much sense to me. We can do so much more directly in code. No need to reinterpret XML constructs. Just pure C# Hooray! Thanks Brandon, Shaun and the community for making a toolkit to simplify the code and make it slick! Love this!
Thanks!!! There's still a bunch more we can add to CommunityToolkit.Maui.Markup and we'd love your help to contribute more features! github.com/communitytoolkit/maui.markup
thank you guys for what you are doing. I've never got well with XAML and this might help me continue to use plain MAUI and not choosing Blazor because plain MAUI is faster and has more possibliites than Blazor
But can you use DevExpress controls (and potentially any custom controls) with this C# markup or do C# helpers have to be created first in the community toolkit for every control?
You can do some amazingly complex multi-bindings very easily with C# markup.
for hi performance commercial desktop apps I will always default to C# compiled Bindings; I know it requires more code, but I want to get every optimization at the UI layer because a lot of more expensive work is done in the app.
I am really happy to see this. I have never gotten my head around XAML. I have been looking at this since Brandon presented on various dotnet/MAUI youtube.
🙌
Nice. James, could you invite James Clancey to talk about C# MVU UI -Comet?
What's the difference between C# markup and comet? Is comet similar to C# markup, but use MVU?
@@damaomiX Yes, they both use C#. But Comet is more immutable and uses MVU app model, while C# markup uses mvvm app model. Comet has powerful model binding etc.
@@obinnaokafor6252 screw Comet. What kind of .net tool can't be used in Visual Studio
How do you set up Hot Reloading for C# maekup pages?
Can we use 3rd-party xamarin component in MAUI? Migrate xamarin project to MAUI?
Love it!
Looks awesome!
I like XAML, but part of the reason might be because the alternative of writing the UI in C# has been a painful experience and didn’t provide anywhere near the same overview of hierarchy that XAML does, because you couldn’t properly nest the elements if you wanted to apply styling.
The extensions from this library seems to fix that problem though, so I might give it a try!
I would love to also develop my user interfaces in C# but I am really hesitant to use XAML. I developed a basic user interface with WPF for my IoT project and XAML looks scary to me. The thing that you showed looks cool.
Hi does hot reload work with c# markup
Can C# and Xaml be used on the same page? It would be interesting to dynamically add content or adjust layout based on some criteria.
Yeah it can.
What benefit does a Fluent API provide over Object and Collection initializers. For example, in the NumericValidationBehaviour you show:
Content = new Entry {
Keyboard = Keyboard.Numeric,
}.Behaviours( new NumericValidationBehaviour {
// ...
});
I must be missing something, because the existing method looks better to me:
Content = new Entry {
Keyboard = Keyboard.Numeric,
Behaviours = { new NumericValidationBehaviour {
// ...
} }
};
Fluent API really shines when you need to set attached properies such as row and column numbers
What's the difference between 'CommunityToolkit.Maui.Markup' and 'Comet' coding style wise?
They're both trying to bring C# markup, right? If that's the case, shouldn't those efforts be consolidated?
Isn't this still mvvm and comet mvu
I already started the switchover to C# in some areas where I found it easier to use compiler switches for different cases.
where can I find training on that?
All of the documentation is available online: docs.microsoft.com/dotnet/communitytoolkit/maui/markup/markup?WT.mc_id=dotnet-0000-bramin
Isn't compiled bindings with XAML faster than bindings in c# because of reflection? As it was mentioned in the docs compiled bindings are resolved at compile time so it doesn't use reflection.
Why did MS ever invent XAML and did not use plain HTML5?
So no visual designer for Maui. Very interesting
XAML has always seemed convoluted to me. This looks like a cleaner way to write UI. That being said, I wish we could use HTML or Razor markup for our UI so that we can just drop variables in without having to deal with bindings at all.
Blazor Hybrid doesn't work for you?
@@marklnz Blazor Hybrid is still Blazor components.
You could now with Blazor Hybrid
@@dotnetspark Blazor Hybrid just renders Razor components within a WebView window.
Checkout Mobile Blazor Bindings
Is there a tool to convert from XAML to the C# markup?
There is not! But it sounds like a cool idea! Open a New Feature Discussion on the Maui.Markup repo and let's chat more about it! github.com/communitytoolkit/maui.markup/discussions/new
Awesome! I rather deal with C# than learn and write XAML with its weird binding syntax :(
Please make C# Markup the first-class support of .NET MAUI (also deprecated XAML if possible). It's OK to write JSX in React apps.
So, is it good practice to make a UI and app logic both in C#? I've always heard of separating the UI from the application logic...
You can have separate classes for UI and logic. Just that the UI is also written in C# .
Yeah, this looks like the wrong direction to take the UI in. I've always found UIs written in code without markup hard to reason about. It's also prone to turn into spaghetti. I think a simple markup with bindings like (html) would be a better direction. So maybe a more streamlined lightweight xaml?
What is happening here is they are defining UI in C#, they are not implementing app logic. They are just using one tool to do two separate jobs.
It's OK to separate two layers but why would you need to develop two different technologies for that and then force people to learn both of them to be able to create even the simplest application?
@@electrocatalyst
I'm not sure what you mean when you say two separate techs.
More Gold - Cha-Ching
I much prefer coding in C# rather than XML and wrote similar extension methods. As a parallel, there has been a gradual move away from config being done in XML over the years and we no longer have to deal with web.config. Would anyone really want to go back?
The main challenge with this approach at the moment is the lack of hot reload, unless there's a way to do that I haven't found yet? Comet looks really promising in that area but it's still experimental.
I see quite a lot of similarities with swiftUI in ios programming
"it's so much easier" hahahaha, only a button, maybe. But Build a Page with two grids and stackpanles xD
Hoping comet to get some attention now.
Same! I can't wait for the C# community to fully embrace MVU 💯
@@brandonminnick exactly, already using MAUI Blazor in my company, can't wait to work with ☄️
This looks a lot like Flutter's syntax.
Or swift ui, which is great
@@oleggavrilov7083 Yup, that's kinda our goal: bring more fluent UI syntax to C#!
my brain ..... just struggles with this... what about separation of concerns?
It's funny how they replaced ReSharper in the subtitles @6:24 with [inaudible] lmao
These captions are autogenerated. He said it like he has a dick in his mouth, As a human being I couldn't even understand what he was trying to say.
C# is late to the party, other frameworks (Flutter, Flet) already do that. But good to see dotnet joining us at last 🙂.
great now put some examples in documents so people can actually use this.
YOU NEED TO MAKE
I understand that these guys from Microsoft have to play it cool and say that both, MAUI and XAML are equally "fun" but let's admit it. Everyone hated XAML. The simplest thing always took 10x more code than it should have and it still didn't work the way you wanted.
I've been waying for the WinForms and Qt kind of simplicity in modern .NET GUIs for many years! I hope MAUI will turn out to be this kind of solution.
It's one of those things that Xamarin team decided to support just because they saw Flutter and Swift UI works for their own technology stack, rather than working on faster XAML parser/rendering engine... Showing here the basics won't make anyone to code their UI in C#, specially in big projects like where you need to maintain over 30 pages with an advanced UI.
Of course it is always nice to have alternatives, but promoting this and spending team time/effort for something that has no future in Xamarin world is always frustrating unfortunately. I wish team could focus more on making XAML faster and more secure like they did with with XAMLC compilation and compiled bindings few years ago.
Admit it. Apps have complex UI has no future with code UI. Make XAML faster, design better controls and make them work properly across platforms. That's what most Xamarin developers expect from MAUI. Comet is there and maintained very nicely. Use Comet if you are a fan. But just don't compare yourself to Flutter just because they handled it well. Both Flutter and XF are different platforms and tech stack, targeting different set of users...
I would never use C# code to build UI (unless it happens in the background and there's WYSIWYG Visual UI Designer), like what we get for Windows Forms in VS), I just don't get any reason of doing things the hard and dirty way! #XAML is the best thing ever I get to develop UI.
Calling it "c# markup" seems weird to me. I think of _xaml_ as "markup", i.e. mixing some code elements into content in a declarative way just like html and razor and
c# as imperative code. So its either "markup" i.e xaml _or_ its c#..
"c# markup" just seems like an oxymoron to me :)
"Fluent Maui" would have made more sense and better reflect what it does imo..
Markup refers to the process of laying out the UI elements, not the language or syntax used to perform that process.
Not really, a "markup language" is a language where code fragments is added to regular free text content to add information about layout and such, (the text is "marked up"), that's not the case here, with this you write strict c# possibly with some literals in it, but still c#. That's fine, but calling this "markup" is giving the wrong impression of what it does imo
The library isn't called markup language though is it
@@frogger3d that's hardly the point :) feel free to call it whatever you like though, but given the target demographic for this library doesn't want to write "markup", they want to write imperative code (witch is what the library _actually_ does), its poorly named.