With last week's release of Windows 8 Release Preview and Visual Studio 2012 RC, the Metro style app building cycle is going to pick up serious steam. To help you all with that, in the coming week's I'm going to focus the Metro Monday posts on frameworks, toolkits and tools that will help you build those apps...
Introducing Callisto, a toolkit of sorts for XAML Metro style apps. When starting my own app building for the Consumer Preview, I realized there were some experiences and common things that I wanted to implement that weren’t existing controls in a way that I could easily re-use my efforts across app to app that I was building. The foundation building blocks in the platform were there of course, as was a few existing Open Source projects that I could leverage (yay Open Source!). I refactored the combination of these things into a single toolkit that I’ve been using for my apps.
My approach has been mostly pragmatic for me. This was extracted out of app needs versus being designed as a toolkit from the beginning. As such, it might feel like a ‘kitchen sink’ approach as there are things that you may never use. For me, I wanted one thing I could add to my project and get all the goodness that I desired. This is what led to a single project/toolkit rather than any modular approach. For example, I originally had included the sqlite-net project in mine because I didn’t want to keep adding it to each project I was using the SQLite database engine. This is one that I’ve removed since the changes I needed were contributed back to the project and I’ve wrapped them up in a nice easy NuGet package for that portion.
What is it?
Well, it is a toolkit! It is a combination of some helper libraries as well as some controls. Some original, some contributed, some ports from existing toolkits. If you look at the project page you’ll see that it currently has:
- Helpers: some attached property helpers for web content bindings, converters (i.e., for time relativeness)
- Extensions: Tilt effect and some helpers for doing some things like OAuth 1.0 (adapted from RestSharp)
- Controls: Flyout, SettingsFlyout, Menu, LiveTile
How do I get it?
In addition to the source for those who would want that, you can get it in 2 ways: via NuGet or via the Visual Studio Gallery. Incidentally you can install it both of these ways from within Visual Studio 2012 Express itself! If using the gallery VSIX installer, then the toolkit will be available for you to use across multiple projects. The NuGet approach is per-project (as it is with any NuGet package). After installing the VSIX – if you use that approach – simply choose Add Reference in your project and navigate to the Windows…Extensions section and you’ll see it there. It is implemented as an Extension SDK for Visual Studio.
What Is It?
Callisto is a library for use in Windows 8 XAML applications (aka Metro style apps). The XAML framework in Windows.UI.Xaml is great, but has some functionality that isn't provided in-the-box in a few controls and APIs. Callisto serves to provided added functionality on top of the XAML UI framework for Windows.
What's In It?
So far Callisto includes:
Flyout- a primitive that includes positioning and 'light dismiss' logic
Menu- primarily to be used from AppBar, contains the base for providing, well, a Menu
MenuItem- an item for a menu, including separators and contains the command point for the menu item
SettingsFlyout- an item to create a custom settings pane UI
LiveTile- an in-app tile experience to give you animated or 'live' tiles
Tilt- an effect to provide the tilt experience when clicked on edges/corners
- OAuth helpers - a set of helpers to create OAuth 1.0 signatures/headers for those sites that hate OAuth 2.0
BooleanToVisibilityConverter- a converter to well, convert boolean to visibility, very common use
LengthToBooleanConverter- a converter to examine a string length to convert to boolean (simple validation helper)
RelativeTimeConverter- a converter to show time as relative string, i.e., 'about an hour ago'
- Extensions - some extension method helpers (i.e., bind html content to a WebView)
Visual Studio Extension SDK
Install as an Extension SDK via the Visual Studio Gallery - available within VS as well as downloading from the gallery directly
How To Use It?
To use the controls you simply create an instance of them (we will use an example here) like
Flyoutand tell it what content goes in it and where it should go:
Here's a few snaps of the demo app;
Here's some snaps of the test app code;
And finally a quick snap of the Callisto;
Here’s a few more links you might find interesting: