microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.33k stars 676 forks source link

suggest: script Language support #1920

Open snikeguo opened 4 years ago

snikeguo commented 4 years ago

Suggest: Many people think that XAML is too verbose and inflexible (http://paulstovell.com/blog/six-years-of-wpf china web site :https://www.zhihu.com/question/44666716 ). Can you add a new "UI language" like QML (or TypeScript)? E.g: Now has a textblock, name = tb1

  1. His text propertyis: "abcdegf:" + scrollBar1.Value.toString ()
  2. His width property is: if tb1.text == "abcdegf: 53", his width is 30 else his width is 100.

XAML: <TextBlock x:Name="tb1" Text="{Binding ElementName=scrollBar1, Path=Value,Convert=......}" width={Binding .......}/>

QML or other script:

TextBlock
{
   name:tb1
   text: “abcdegf :”+scrollBar1.Value.toString()
   width:
   {
      if(tb1.Text=="abcdegf: 53")
        return 30;
      else
        return 100;
    }
}

---------------end--------

qml:
text: “abcdegf :”+scrollBar1.Value.toString()
It will generate C # code:  create a Binding instance that contains an anonymous method.like:

tb1.SetValue ( TextBlock.TextProperty,   Binding(()=>
{
  “abcdegf :”+scrollBar1.Value.toString()
});

/////////
qml:
 width:
   {
      if(tb1.Text=="abcdegf: 53")
        return 30;
      else
        return 100;
    }
====>
  tb1.SetValue ( TextBlock.WidthProperty,   Binding(()=>
{
   if(tb1.Text=="abcdegf: 53")
        return 30;
      else
        return 100;
});

like this.......

qml doc: https://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html

related issues : https://github.com/microsoft/microsoft-ui-xaml/issues/728

snikeguo commented 4 years ago

804

robloo commented 4 years ago

Avalonia has talked about doing this in the past: https://github.com/AvaloniaUI/Avalonia/issues/2502

Any syntax ideally would be coordinated with other XAML-based UI framework implementations.

snikeguo commented 4 years ago

@robloo They don't plan to add a script language, they just want to change XAML to another expression. like: <textblock x:name="tb1"/> change to: textblock { name:tb1 } just only.

but I want to add some simple logic code: TextBlock { name:tb1 text: “abcdegf :”+scrollBar1.Value.toString() width: { if(tb1.Text=="abcdegf: 53") return 30; else return 100; } }

ranjeshj commented 4 years ago

@chrisglein as FYI

chrisglein commented 4 years ago

Definitely an area where I have some passion :)

I've done some explorations into using XAML without markup and leaning into language features and utilities to get a mix of structure (which markup does well) and logic/binding (which script does well). Not with script though, just with plain old code (either C# or C++). I was inspired by JSX, which is how React mixes HTML markup and JavaScript into a single document. I think there's something interesting here about the overlap of XAML and alternate coding patterns, but it would benefit from some slight API changes (to make a couple things code-friendly) and language utilities.

One of the challenges is not inventing something too new (thus creating a larger learning barrier for the platform), but instead combining pre-existing familiar concepts. Asking developers to learn a new markup language is actually a tall order. I think JSX succeeds because it's a blend of two of the most well known technologies in the world: HTML and JavaScript.

I'd love to see how others are experimenting in this space, because it feels like there's a lot of room for innovation.

robloo commented 4 years ago

Check out this idea: https://github.com/microsoft/microsoft-ui-xaml/issues/2499 "Proposal: Support Blazor Syntax"