[Enhancement] Please innovate XAML with DotNetFoundation.Xaml

[John0King]

Summary

Xaml was born in 2006 , it tool old , it's most powerful UI describe language in the past , but as time goes by we saw new UI template language born , jquery template, vue template, angular lvy , razor/Blazor.
from jquery tempalte we see the if and for been used in HTML UI,
from vue angular, the data driven UI was used .
and blazor is leaning from vue/angular/react

I know that the Html as defferent than native UI contorls, but with Vue and Angular , it's actually not that different any more.
blazor is great , but like razor, it require full csharp Roslyn complier, and we saw that without a full language and only template can be competent the UI work too, and it can be interprete without full aot , so it will work great fo designer too, and if you look at Angular's lvy , it is strong type too.

the original issue is in xamarin/Xamarin.Forms#10127 (comment) （and some roslyn magic also can be considered 😁 ）

the new tempalte should can be both AOT Compile ( not template concept, just like you direct write C# ) and interprete .

Features already thought of

• lambda support, it's not the C# language , it's the Xaml feature, property accessor, index accessor, function call ect. for example : <Label Text="{dto?.Title}" Click="()=>labelClick(dto?.Title)" />
• x:if if statement
• x:foreach foreach statement (notic: index should be considered)
• x:init for example: <MyControl x:init="[arg1, arg2,arg3 ]" />
• string init `<Label Text=" 'this is a string instead of char, use this can avoid " be used' " />
• x:Container
• formater eg, Text="{ date | Date: 'yyyy/mm/dd' }"

example

<Grid>
    <TexBox  x:Name="box1" />
    <Label  Text="{box1?.Text}" /> binding
    <CollectionView  >
         <x:Container  x:Foreach="(item,index) in list" >
             <Label Text="{item?.Title + '(' + index + ')' }" />
        </x:Container>
    </CollectionView>

</Grid>

[Happypig375]

Can we just adopt the Razor syntax instead of reinventing the wheel?

[John0King]

@Happypig375 As I mention , Razor is best for AOT only, like today you will use scriban template engine for dynamic template, but you will never store the razor into database , because for dynamic scenario even we can use Roslyn on the server, it will have very slow performance for first compile and run. razor is a great language for AOT compile, that's also inspired me to suggest component language (just see my comment here).

just a note: I think write <Label x:If="" /> is much simple than @if(){ <Label /> } , I'm also send a pr to MVC rozor, but the asp.net core team seem not happy to see this.

but the interprete is only useful for designer time, because when come to dynaimc template , people will use "html + css + js" 🤣 （saidly）

and blazor has it's own problem,

1. must understand at least 2 languages (Xaml + ( cs,vb,fs))
2. no designer
3. AOT only
4. old xaml will still exists

[Joebeazelman]

The advantage of razor and XAML is that it can be compiled into a static binary object that can be displayed without any additional processing or compilation, making very fast. It can also be interpreted dynamically too to support design time development. All of the markup or template languages you mentioned can support either depending on how they're implemented. It's a matter of creating a template binding. Blazor doesn't use XAML, although there's an experimental Mobile Blazor Bindings for it.

[John0King]

@Joebeazelman blazor is a good tech too, but like I said ,to compile it we need a roslyn engine in behind( I dotn't think it can be interpreted, it always have a full compile process razor->C#->il -> run , and it's a good thing too ), for designer, I think the designer can not understand what if for and what is if , unless it try to understand C# , because if and for have at least two form 1） @if (){} 2） @{ ..... if(){} } and 3) @{.... @if(){} }

this feature request is about make xaml2(the new xaml) to AOT compile like razor, there are no any template there after comple, and possible an interpreter engine( for designer , and an use case of Xaml2 Editor )

and the worst case is that there won't be a new xaml , but inspire that be blazor to have full template instead of mixed the C# and markup together eg. like Vue .

<template method="InitComponent">
   <Grid >
        <TexBox  x:Name="box1" Text="{valueString}" />
        <Label  Text="{box1?.Text}" x:If="{string.IsNullOrEmpty(box1?.Text)}" />
          <CollectionView  >
             <x:Container  x:Foreach="(item,index) in list" >
                 <Label Text="{item?.Title + '(' + index + ')' }" />
            </x:Container>
    </CollectionView>
   </Grid>
</template>
<style lang="css">
Grid{
  BackgroundColor: red
}
</style>
<script lang="C#">
   public partial  class MyControl : View
{
    public MyControl()
    {
        initComponent();
    }
    public string ValueString = "Hello world";
    public List<News> list = new List<News>{  new News{  Title = "Hello News" } };

}
</script>

with this, the designer can still work since there is a full template instead of mixed the C#

[GiampaoloGabba]

i would really LIKE to see some XAML goodies that can help with reducing the use of triggers, converters or specific viewmodel properties that we need to use for everything....

Plus it would be good to have some short syntax for VisualStateManager... That thing is a monster....

[AhmedAbuelnour]

I really hope to see, some ways for reducing the usage of converters like checking a value if it is true show something if not show something else, so if there is a way in XAML to do so, it will be so awesome

[John0King]

and the good of x:ForEach and x:If or (<x:ForEach /> , <x:If />) is that, it doen't means that is the foeach and if keyword, we can add more login inside that, for example : subscript the change event and choose when to re-render it.

[John0King]

an better idea of this new Xaml

• use Vue's top level Xml Element for separate the language
• use Angular's lvy View Engine syntax for View
• use SourceGenerator or System.Proxys provide a set of api for AOP  runtime#28029 to support obserable on data change

compare to Vue, Angular is much like C# (IOC, strong type, Aot .ect)

<template>
    <Grid >
        <TexBox Text="this is raw string" />
        <TexBox Text="{{ Time | Date:'yyyy-MM-dd' }}" />
        <TexBox  #box1  [(Text)]="ValueString" />
        <Label  [Text]="box1?.Text" *x:if="string.IsNullOrEmpty(box1?.Text)" />
          <CollectionView  >
             <x:Container  *x:Foreach="item in list;;let index" >
                 <Label [Text]="item?.Title + '(' + index + ')' " />
            </x:Container>
    </CollectionView>
   </Grid>
</template>
<script lang="c#">

public class MyComponent : UIElement
{
    public string ValueString = "hello";
    public DatetimeOffset Time {get;set;} = DateTimeOffset.Now;

    [Input()]
    public string World{get;set;}
    [Output]
    public event Func<string> WorldChange;  // two way binding

    [Output]
   public event Func<MyComponent,int> Click;


}
</script>
<style>

</style>

---

why not use razor/blazor

• there are no foreach and if as Directive and it's just C# ,that's mains we can not observer the change . in lvy , the *ngFor *ngIf is Directive and we can do more logic (such as observer change) inside that.
• two way binding is forced in blazor, and in Angular : [prop] means bind input (event) means bind ouput, and [(prop)] means bind input to prop and bind output to propChange
• blazor only have 2 language in switch , defaults language is template , and use @ to switch to C# , and the swtich logic is way too complex and slow performance (you can try to open a 200+lines of cshtml to see the IDE speed)

why not use vue template

• there are only one "two way" binding property per component
• no extension property support (angular use Directive can attach to existing Component)