What is the recommended way to conditionally render views/controls?

[lanyusan]

Hi, we have an electron based desktop app built with react. We hit some performance issues and are thinking of rebuilding it with closer to native cross platform UI solutions.

I have been reading and experimenting MAUI. Not goanna lie that I think xaml/data binding is REALLY verbose compared to jsx and react's props + state to view model. But that is a price we are willing to pay if we choose maui.

Our react codebase uses conditional rendering of different components based on different conditions extensively, which is really easy and performant with jsx in react.

<div>
{  a > b ? <A {{...props}}/> : b > c ? <B {{...props}} /> : <C {{...props}} />
</div>

I have gone through xmal documentation and found no explicit discussion of this.

Can someone point to the right direction?

Many thanks.

[Vroomer]

XAML is indeed a bit limited in this regard. You can however use either code-behind of your views or go straight for MVU pattern. This way you can use c# code to apply whatever logic you need.

[Sebosek]

Conditional rendering is possible, but it's a little bit awkward. Let's say, you would like to render a list if you have any item, otherwise, render an empty state.
In past I've done it this way: for a ListView bind the Visible property to a collection with items using by custom value convertor (IEnumerable to bool) which just checks if there are any items.
Similarly, the empty state control binds the Visible property to a list of items using by value convertor with twisted logic.
I guess you can see where I'm heading...

[danielftz]

I would recommend not using xaml entirely, and go with writing UI in c# and community toolkit markup. Binding then becomes a breeze, conditional rendering can then be achieved with databinding

[lanyusan]

This sounds right to me. I have actually looked at swiftui as well, which isn't cross platform of course but it builds ui entirely by native code with no scripting language at all.

Is this https://github.com/CommunityToolkit/Maui.Markup the toolkit markup you are talking about?

[danielftz]

Yes. The documentation can be found here. I think the .Bind() extension method will be very useful for your purpose

[mphill]

@lanyusan check out https://xamgirl.com/stop-doing-isvisibletrue-false-to-show-hide-views-in-runtime-in-xamarin-forms/

[Sebosek]

Cool, definitely more verbose than {!true ? <ComponentA /> : <ComponentB />}, but still better than IsVisible as I've already mentioned... 😄
Just a question, looking at that example and I've noticed; why there is no alternate branch for PositionSelected == 1?
There is a trigger, expressing something like: when PositionSelected == 2, then use Tab2View as ControlTemplate.
Is it because, when the already mentioned condition PositionSelected == 2 is false, then it will "fallback" back to the original ControlTemplate="{DynamicResource Tab1View}" set on the ContentPage?
cc @Char0394

[mphill]

Basically yes. Xaml lacks lot of expression capability available in React Native. You’ll never see a ternary operator in Xaml.

[birbilis]

This is useful: https://m.youtube.com/watch?v=BOYySROGooM

[gabsamples6]

really really useful!

[elsaulio]

Razor syntax allows to conditionally render with @if, support is experimental for MAUI: https://github.com/dotnet/MobileBlazorBindings

[albyrock87]

You can use ToggleTemplate from Nalu.Maui.Layouts:

https://nalu-development.github.io/nalu/layouts.html#toggletemplate