XamlCSS - Styling Xaml-Applications with CSS

David.RettenbacherDavid.Rettenbacher ATMember ✭✭
edited May 2016 in Xamarin.Forms

Hi there!

I recently released a new library: XamlCSS.
It enables you to style your Xaml-applications with CSS.

For Xamarin.Forms: https://www.nuget.org/packages/XamlCSS.XamarinForms/0.9.0-alpha
For WPF: https://www.nuget.org/packages/XamlCSS.WPF/0.9.0-alpha
For UWP: https://www.nuget.org/packages/XamlCSS.UWP/0.9.0-alpha

Example:

Grid Grid Label:nth-of-type(2)
{
    Grid.Row: 1;
    Grid.Column: 0;
    Text: {StaticResource resourceKey};
}

It comes in 3 flavors:

  • for Xamarin.Forms
  • for UWP
  • for WPF

Unfortunately the only documentation at the moment is the sourcecode of the sample-apps in the github-project (https://github.com/warappa/XamlCSS).

I would appreciate if you would provide me with feedback.

Tagged:

Posts

  • winston_gubanteswinston_gubantes USMember ✭✭
    edited December 2016

    Hi David,

    I have issue with XamlCss Version1.0.3 with Xamarin.Forms Version 2.3.3.175, The style doesnt reflect on UI even though i already called Css.Initialize.

    public App()
    {
    InitializeComponent();
    Css.Initialize(this);
    MainPage = new CarouselTestPage();
    }

      <xamlCss:StyleSheet x:Key="LocalStyle">
        <xamlCss:StyleSheet.Content>
          .thebutton
          {
          BackgroundColor : Aqua;
          FontSize : 30;
          }
        </xamlCss:StyleSheet.Content>
      </xamlCss:StyleSheet>
    

    The Code in Page:

    added xamarinForms:Css.StyleSheet="{DynamicResource LocalStyle}" in StackLayout

    Button Text="Test"
    x:Name="newbutton"
    xamarinForms:Css.Class="thebutton"

  • Hi winston_gubantes,

    I was able to reproduce your issue.
    It has do with XamlCSS being not able to understand how to access the children of CarouselPage.

    I'm going to add support for that in 1.0.4.

    Meanwhile there is a hack:

    Change the constructor of App to this code:

    InitializeComponent(); Css.Initialize(this); MainPage = new CarouselTestPage(); var pageController = MainPage as IPageController; var first = pageController.InternalChildren.First(); VisualTreeHelper.Include(first);

    This works as a workaround until 1.0.4 arrives.

  • Just released XamlCSS 1.0.4 - please try it!

  • Just released XamlCSS 1.0.6

    Improvements

    • Performance: Selectors are parsed too often

    Bugs

    • Decimal Number is not parsed correctly
    • Class not properly parsed in grouped selectors
    • CSS-Parser: Broken String-Literal Handling
    • Xamarin.Forms: Style disappears when resuming Android app
    • WPF: Resource FontFamily doesn't work in Css
    • [XamarinForms] ListView Cells broken again in 1.0.5
    • [XamarinForms] UI Timer can overtake itself
  • XamlCSS 2.0.0 Preview

    Recently I released a new pre-release version on nuget: XamlCSS 2.0.0-pre1:

    New Features

    Version 2.0.0 comes with some very big improvements:

    More Information

    For more information have a look at the XamlCSS-wiki.

    There you find more examples of how you use css with Xaml applications.

    Feedback

    As you might expect, I would greatly appreciate your feedback on your experience - whether good or bad - of using XamlCSS!
    If you find bugs or want to suggest features, please use the XamlCSS issue page to report them back to me.

    *) Only supported on WPF and Xamarin.Forms

  • @GaryMcGhee
    I saw you proposed built-in css - which I would love to see too.

    After reading your proposed API, I think the most-often-used features of the features you requested are in 2.0.0 (variable arithmetic, color functions are not there yet)

    I would love to hear what you think of it!

  • GaryMcGheeGaryMcGhee AUMember ✭✭
    edited March 2017

    Thanks for your efforts @David.Rettenbacher - I will check it out one day, but I'm overloaded at present. It seems to me that .Net/XAML/WPF people just don't get what is so obvious to advanced SASS/CSS devs about semantic HTML, separating style from content etc. It'll probably happen one day in some big release and everyone will be excited ;)

  • pawanyapawanya INMember ✭✭

    How it is work in Xamarin Forms (Portable)? And How to impliment

  • David.RettenbacherDavid.Rettenbacher ATMember ✭✭

    @pawanya Xamarin.Forms with portable class libraries are supported.

    1. Add XamlCSS.XamarinForms nuget-package to your project (prerelease version 2.0.0-pre1 recommended)
      https://www.nuget.org/packages/XamlCSS.xamarinforms/2.0.0-pre1
    2. Call Css.Initialize(this) in the App-contructor or MainPage-constructor (I recommend App-constructor)
    3. Parse a css-string into a stylesheet with XamlCSS.CssParsing.CssParser.Parse(...)
    4. Use Css.SetStyleSheet(...) to apply the parsed stylesheet to your controls

    Add css-classes to your controls:

    1. In xaml add the **namespace **for XamlCSS.XamarinForms, i.e. xmlns:cssXF="clr-namespace:XamlCSS.XamarinForms;assembly=XamlCSS.XamarinForms"
    2. There add css-class with cssXF:Css.Class="your-classname"

    Here you get a more detailed intro to XamlCSS and how it is applied:
    https://github.com/warappa/XamlCSS/wiki/Getting-started

    To see a working example, clone the repository and take a look at the XamlCSS.XamarinForms.TestApp:
    https://github.com/warappa/XamlCSS/tree/master/XamlCSS.XamarinForms.TestApp

  • MarcioOrdonezMarcioOrdonez USMember ✭✭

    I wanna use support for embedded (s)css files but I'm getting the following error:

    The type or namespace name 'TypeOfAssemblyContainingEmbeddedCssFiles' could not be found (are you missing a using directive or an assembly reference?)

    I've been added the XamlCSS only in Xamarin.Forms projeto (not in Android Project)

  • @MarcioOrdonez
    By default, embedded-resources are searched in the assembly where your Xamarin Forms App class is. The path in the import statement then just has to be the relative path to your embedded resource, i.e. @import "MyStyles/style.scss";.

    If you want it to search another assembly you can inform XamlCSS about it by supplying an assembly-array in the XamlCSS initialize method:
    XamlCSS.XamarinForms.Css.Init(<app-instance>, new []{ typeof(TypeInEmbeddingAssembly).GetTypeInfo().Assembly});

  • @MarcioOrdonez
    Another point: Please ensure, that the assembly-name and the default-namespace of this project are the same.
    I.e. if project is called "MyApp.Core", the default-namespace must be "MyApp.Core"

    Otherwise it's not possible to determine the embedded-resource-key the compiler generated when compiling the project.

  • MarcioOrdonezMarcioOrdonez USMember ✭✭

    What I have to put rather then "TypeOfAssemblyContainingEmbeddedCssFiles" or "TypeInEmbeddingAssembly" ?

  • @MarcioOrdonez
    TypeOfAssemblyContainingEmbeddedCssFiles is any type in the assembly that contains your embedded (s)css-file, as the important part of this statement is .Assembly.

    I guess you have a "core" assembly containing your views, your app's App.cs and your embedded (s)css-file. If that's so, then you can simply write

    XamlCSS.XamarinForms.Css(this, new []{ typeof(App).GetTypeInfo().Assembly }); // this is instance of App class

    A word on embedded resource resolution

    When your project gets compiled, your embedded resource gets a name like MyApp.Core.MyStyles.style.scss.
    XamlCSS enumerates all provided assemblies, generates the first part from the assembly-name (i.e. MyApp.Core) and appends your provided import-url (but replacing slashes with dots, i.e. "MyStyles/style.scss" gets "MyStyles.style.scss"). The resulting path should be exactly the resource-name in your assembly.

    Checking Embedded Resources

    You can check what your resources are named in your assembly by using tools like ILSpy. In it you just need to expand the "Resources" node to see how the compiler named your resource.
    If you see no resources ensure that you selected Build Action "Embedded Resource" on your (s)css-file.

  • MarcioOrdonezMarcioOrdonez USMember ✭✭

    Great! Thanks a lot! :)

    I found a small error in the documentation (Getting started). Extension "GetTypeInfo ()" is missing.

    public App()
    {
    XamlCSS.XamarinForms.Css.Initialize(this, new[]{ typeof(TypeOfAssemblyContainingEmbeddedCssFiles).Assembly});
    ...
    }

  • MarcioOrdonezMarcioOrdonez USMember ✭✭

    By the way, the (s)css file must be placed into Xamarin.Forms project.

Sign In or Register to comment.