Xamarin: Pixate demo

Here is my demo for getting started using Pixate for MonoTouch.

Pixate is designed to allow you to style iOS components using CSS stylesheets.

Most of the guide is very similar to their getting started guide for MonoTouch-Pixate however I have expanded on some areas which caused me issues.

1. Grab library.

Firstly download the Pixate.dll from here.

And add it to your project as a reference.

If when building you get the following error:

The type ‘MonoTouch.Foundation.NSObject’ is defined in an assembly that is not referenced. You must add a reference to assembly ‘monotouch, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null’.

Which i did get you need to use the following tool iOSReferenceUpdater to upgrade the library. Discussion about the issue can be found here.

2. Sign Up for a licence.

Go to Pixate and sign up for a licence.  They will email you out a licence key.  Its free!

3. Code it up

Add a default.css file to your project.  Set its build action to ‘Content’.

Add in the CSS you want to test.  I recommend something simple like:

 #button1 {
      color            : #ff0000;
      background-color : #008ed4;
    }
 #button2 {
      color            : #446620
      background-color : linear-gradient(#87c44a, #b4da77);
    }

And in your Main.cs file add:

using PixateLib;

namespace Namespace123
{
    public class Application
    {
        // This is the main entry point of the application.
        static void Main (string[] args)
        {
        PXEngine.LicenseKeyForUser("12345-6789-YOUR-KEY-HERE-FROM-PIXATE", "name@email.provider");

        // Specify your CSS sheet here
        PXStylesheet.StyleSheetFromFilePathWithOrigin ("default.css", PXStylesheetOrigin.kStylesheetOriginApplication);
        PXStylesheet.ApplyStylesheets();

        // if you want to use a different Application Delegate class from "AppDelegate"
        // you can specify it here.
        UIApplication.Main (args, null, "AppDelegate");
        }
    }
}

The main items above are to add the Pixate link and your licence information that Pixate emailed out to you.  You can also see where i have specified to stylesheet to use.  This allows you to ship multiple style sheets with an application and select the one you want at run time to give you the ‘skinning’ ability mentioned in my previous post.

4. Test with some buttons

Add two buttons to an empty view.

ButtonsWithoutCSS

Then in XCode Interface designer click on a button, go to Identity Inspector.

We want to add a ‘User Defined Runtime Attribute’.  Click the + button to add a new value which should be:

  • keypath: styleId
  • type: string
  • Value: button1

UserDefinedRuntimeAttribute

The value is the CSS element you are referencing.  So for button 2 do the same but change the value to ‘button2’.

Now the results should look like:

ButtonsWithCSS

This is just the tip of the iceberg of what you can do.  Attributes can also be assigned at run time in code and many CSS features are supported.

Share: