Make XAML style writing more like CSS

[JHeLiu]

Make XAML style writing more like CSS

1. Less code
2. Be more logical
3. Easier to read

I don't know if future versions have that design in mind
Let's say I want a button with rounded corners

// version now

<Window.Resources>
      <Style x:Key="Btn" TargetType="Button">
          <Setter Property="Template">
              <Setter.Value>
                  <ControlTemplate TargetType="Button">
                      <Border BorderThickness="1" Width="60" Height="32" CornerRadius="3" Background="#4C5EE9">
                          <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                      </Border>
                  </ControlTemplate>
              </Setter.Value>
          </Setter>
          <Setter Property="Foreground" Value="#fff"></Setter>
      </Style>
  </Window.Resources>

  <Button Style="{StaticResource Btn}" Content="Button"></Button>

// expect version 1

   <Style x:Key="Btn" TargetType="Button">
         Width=60,
         Height=32,
         Background="#4C5EE9",
         Foreground="#FFF",
         BorderRadius=3
   </Style>
   <Button Style="{StaticResource Btn}" Content="Button"></Button>

// expect version 2

   <Style>
       Btn {
         Width:60,
         Height:32,
         Background:"#4C5EE9",
         Color:"#FFF",
         BorderRadius: 3
       }
   </Style>
   <Button Style="{StaticResource Btn}" Content="Button"></Button>
    OR
   <Button Class="{Btn}" Content="Button"></Button>

[VladislavAntonyuk]

You already can use css to customize your controls. Also xaml is based on xml, so it should have xml syntax

[mandalorianbob]

You're kind of comparing apples to oranges here. Based on your "Expect version 1" your first style should look like this:

<Style x:Key="Btn" TargetType="Button">
    <Setter Property="Width" Value="60" />
    <Setter Property="Height" Value="32" />
    <Setter Property="Background" Value="#4C5EE9" />
    <Setter Property="Foreground" Value="#FFF" />
    <Setter Property="BorderRadius" Value="3" />
</Style>
<Button Style="{StaticResource Btn}" Content="Button" />

Now that's not really that bad.

(For what it's worth, it would be great if <Setter Property="Width" Value="60" /> could instead be <Width>60</Width> but I understand that XAML doesn't work that way at all at the moment. However, I think that's an interesting notion - could an object (like Setter) be instead replaced by a tag that isn't itself an object but is instead just parameters? That'd be neat.)

Of course, BorderRadius isn't a property of Button. But what I suspect you're doing is you're trying to say "Look at all the stuff you have to do to change a template" but then what you show as "expected" does not look like it could result in a changed template.

So kind of not really comparing fairly. Again, apples to oranges.

But for sure, when you do have to create a new Template, it gets very verbose. If you wanna propose something that would make it less so, I think you would need to show something that looks like it could actually create a template.

Also, I don't wanna exactly, you know, go all "language wars" or anything, but in my opinion:
CSS is verbose.
CSS is illogical.
CSS is hard to read.
But I'm not talking about "Color: Red" - I'm talking about when you have to write multiple nearly identical classes for lack of inheritance with -vendor-specific-tags whose values are like "split-inline-float" and you've got "clear: both" and !important randomly sprinkled throughout. I feel like CSS is an absolute nightmare once you move at all past the basics.
So ... you know, there's that haha.
I mean if you like CSS good on ya, but not everyone necessarily thinks it's awesome.

[JHeLiu]

Maybe you're right, but it would be nice if XAML opened up more property Settings, like rounded corners

[mandalorianbob]

Oh for sure. As of 17763, I should note, "CornerRadius" is a property that's available on all Controls, and can be used for rounding corners.

I think there's definitely room for improvement in what Styles can do as well. I think a big pain point is that it's extraordinarily hard to style just one part of a template. Like either the control author creates a bunch of "Inner" style properties, or you have to remake the whole template. Also, just XML verbosity is a thing in general.

So here's to hoping that at least some verbosity can be mitigated a little.

[JHeLiu]

XAML just has too few properties available, hopefully more and more in the future, and I'm eager to give this UI framework a try

[VladislavAntonyuk]

What do yo mean “too few properties”?

[JHeLiu]

Some components have too few styles @VladislavAntonyuk

[VladislavAntonyuk]

But it is not an issue of XAML and adding CSS as you suggested, won't add more. As for corner radius there were a discussion to create ICorner interface which will be applied to all controls that support rounded corners

[jamesmcmenamin]

I think you might need to go back and go over a few of the finer points on MAUI and Xamarin... One of the amazing parts about it is that nearly everything is extensible.... soooo if it doesn't have enough or the right bindings for you, boom add more and sub a pr on it... If it's solid and doesn't cause issue's then it will get incorporated into the base...

And or I would take a look at css / xaml integrations and how they interact with each other... because there has been a long-standing prop on this that just never gained major traction in the community to make them a more linear feel. Furthermore, this MIGHT be the right time to revisit that or soon™ because of the roadmap of incorporation of bBlazor as a project type.

But I will say that personally as a long-time Xamarin guy and it is the language of choice... If you are finding yourself doing ALOT of this stuff all over the place... you might need to think over a few things on page structure because unfortunately, the verbosity will not go away. I can think of a half dozen things that would go fubar lowering it, just due to the ways data binding's work..

[JHeLiu]

Yes, I wanted XAML to open up more styles to components to reduce the amount of code

[jamesmcmenamin]

And @JHeLiu rounded corners are suuuper cake... James Montemagno has a blog some were on them.

And or you could just have elements x/y/z have rounded corners if you put together a layout/parody pack.

See Visual = Material for some solid examples of layout/parody pack

[VladislavAntonyuk]

Yes, I wanted XAML to open up more styles to components to reduce the amount of code

You incorrectly understand what xaml does. It is just a markup language. All component properties created in behind as BindableProperty which than used to setup native components in Renderers

[xzbaijj]

css and html are very Bad language！Because they are not rigorous

[JHeLiu]

@xzbaijj Yes.