Skip to content
This repository has been archived by the owner on Mar 8, 2024. It is now read-only.

Add CSS Styling #214

Open
kyle-seongwoo-jun opened this issue Oct 1, 2017 · 6 comments
Open

Add CSS Styling #214

kyle-seongwoo-jun opened this issue Oct 1, 2017 · 6 comments

Comments

@kyle-seongwoo-jun
Copy link

<Style x:Key="On"
       TargetType="Label">
    <Setter Property="TextColor"
            Value="Red" />
    <Setter Property="FontSize"
            Value="Large" />
</Style>
...
<Label Text="1" Style="{StaticResources On}" />
<Label Text="2" Style="{StaticResources On}" />
<Label Text="3" Style="{StaticResources On}" />
<Label Text="4" Style="{StaticResources On}" />

vs

label {
    textColor: red;
    fontSize: large;
}
<Label Text="1" />
<Label Text="2" />
<Label Text="3" />
<Label Text="4" />

What seems to be a better way? References

@insinfo
Copy link

insinfo commented Oct 1, 2017

I already made this request, #99

@ghost
Copy link

ghost commented Oct 5, 2017

but can you use CSS to apply the style to just , as the label has no id or name.

@mdtauk
Copy link

mdtauk commented Oct 5, 2017

You would need to be able to assign styles to types, as well as ID'd elements, and reused Style/Class names.

To include TypeTargeting as is the case with current XAML resource dictionaries - it would have to be CSS+

@adebiyial
Copy link

Nice. But by CSS styling, I guess you mean "easy syntax"? This is fairly a game of compromise. We should try as much as possible not to stray from the syntax of XAML we have now - just improve upon them. Using your CSS styling seems pretty cool but remember, XAML is a variant of XML so XML must show. And when styling gets really complex, that CSS styling could even be more complex than the XAML equivalent.

@warappa
Copy link

warappa commented Dec 4, 2017

@Kyle-John , @mdtauk , @adebiyial
If you want to see this proposal in action, try XamlCSS, also available on nuget for WPF, UWP and Xamarin Forms.
It generates native Style instances on the fly and applies them to matched elements, where native styling takes over. You can even use markup-extensions like StaticResource and triggers. For complex objects like Storyboards that can't be expressed as css, you can put it in a ResourceDictionary as usual and reference it in your css.
It also supports a subset of scss like variables and selector-nesting.

Have a try!

Disclaimer:
I'm the author of XamlCSS

@insinfo
Copy link

insinfo commented Dec 5, 2017

@warappa your work is incredible, congratulations for your effort and contribution to the open source community.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants