×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

With the announcement of the Windows 8 Release Preview and matching Visual Studio 2012 RC I’m pleased to share some work that has been a result of my own personal app building, collaborating with some friends during their app building as well as porting some helpful projects that I’ve found helpful in my development.

Disclosure: At the time of this writing I do work for Microsoft, but this has been a personal effort from my own app development and during my own time (late nights and weekends).  I am not able to upload apps to the store at this time to share apps that I’ve written and receive no preferential treatment as a Microsoft employee.

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.

Kitchen Sink?

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

Menu flyout example

sample menu flyout from an AppBar

And more to come as I have time.  I’ve had the help of some folks in the community as well as being able to draw off things like the Silverlight Toolkit for some inspiration and some code as well! 

Settings flyout sample

sample settings flyout

The source project comes with a little crappy sample app that I’ve been using as my UI test harness. 

I fully plan to clean this up to a better sample app, but it serves a simple purpose for now.  You can see specific uses in that sample app for some of the controls.  Otherwise feel free to email me directly for some help and I’ll try to point you in the right direction.

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.

Live tile sample

sample live tile (as best you can show in a static screenshot – imagine animation :-))

I plan on submitting regular updates as I refine things, fix bugs and add new controls.  Using the NuGet or VSIX approach for installing will help you keep updated as you’ll receive notifications of updates as long as you are using Visual Studio.

I found an issue/have an idea

Great, I’m sure there are some.  Again, it has been a few folks on our spare time working on this.  Please feel free to log a bug so that we can track the request.  The only place to log a bug is the Issues link on the project page.  No other mechanism will be a good feedback mechanism.

Alternatively, it is Open Source, so feel free to fork and fix.  Ideally you’d contribute your fix back to the project…we’d appreciate it.

Summary

At present the toolkit is for managed code Metro style apps only.  This isn’t because I don’t like C++ developers, but rather that this has been an extraction from my own app building and not designed from the start as any WinRT toolkit.

NOTE: There are a lot of things out there calling themselves WinRT toolkits for XAML.  So far I’ve actually seen none of them that are WinRT, but all are just regular .NET class libraries…just like Callisto.  These are all going to be restricted to use within a managed code XAML app.  If I can get assistance translating this all to WinRT native code, then I could easily see this being more valuable to others.

There are a lot of great APIs in WinRT available to developers.  The SDK samples also provide some helpful code for app developers as well you should ensure you look at (if you are doing ANYTHING with tiles, you should look at the Tiles SDK sample and pay attention to NotificationExtensions).  I hope that Callisto helps you as well in some small areas.

Hope this helps!


This work is licensed under a Creative Commons Attribution By license.


6/6/2012 9:25 PM | # re: Callisto: A toolkit for XAML Metro style apps
This is really cool, Tim. People ask about a Metro XAML toolkit all the time; glad to be able to say that you've started one :)
7/12/2012 3:15 PM | # re: Callisto: A toolkit for XAML Metro style apps
Hello Tim,

Thank you very much for this toolkit! The SettingsFlyout is especially helpful! I have one concern about it, however. How can I put child controls within it so that I can create a real UI? I've installed it via the Visual Studio gallery and have referenced it in my project but can't seem to use it in my XAML. Whenever I try to use it anywhere in my XAML code, I get an error that says "Value does not fall within expected range."

I can use it in the C# code, but I cannot add child controls to it. Do you have any tips? Thanks!
7/12/2012 5:39 PM | # re: Callisto: A toolkit for XAML Metro style apps
@Alex - SettingsFlyout is a ContentControl, so you would set it's Content property to whatever UIElement tree you want. Unfortunately right now it isn't ideally set up for using in markup. But if you put your controls in a UserControl, then you can set the Content to be an instance of your UserControl.
Gravatar
7/16/2012 5:36 PM | # re: Callisto: A toolkit for XAML Metro style apps
Hi Tim,

Callisto is great toolkit, and I'm trying to port it into WinRT with C++. But I've encountered some problems so far. Can you take a look?

social.msdn.microsoft.com/...
7/18/2012 9:52 AM | # re: Callisto: A toolkit for XAML Metro style apps
Tim, this is an incredibly useful toolkit. Thank you very much!

Dealing with some new Windows 8 features is a piece of cake now.
7/24/2012 12:23 PM | # re: Callisto: A toolkit for XAML Metro style apps
Tim,

This is the great toolkit been looking for. thank you very much.
I'm new to XAML controls, and currently working on a DirectX + XAML Metro App. WHile using your toolkit, I have two questions and would like your favor to shed me some lights:

1. I download the toolkit from VS Gallery, however, I can not reference it in my C++ Metro App project. Then, I find you have a C++ WinRT porting. I include it in my solution file and it is fine to add it as one of the reference. Does that mean, customized controller in VSIX package is only for C#/VB project?

2. While using Flyout control, my first try is to add a menu, then add more slider/button as menu items. That worked pretty well, just hard to control the layout. Then, I tried to add a Grid to it, and add more slider/button controls to this Grid control. However, the flyout is working (I can see the flyout), but I can not see the slider/button inside. Do you think it is fine to use Grid with Flyout?

Thanks for your time.

Alex
7/24/2012 12:36 PM | # re: Callisto: A toolkit for XAML Metro style apps
@Alex - correct, the main project is for .NET apps at this time. The C++ port is underway as you have seen. As to the Flyout, it is just a content control so a Grid should be fine within there.
7/28/2012 3:19 AM | # re: Callisto: A toolkit for XAML Metro style apps
Hi Tim,
I like the flyout control, and i'm waiting your personnal datepicker control (trying to create one, but i don't have the background to do it nicely). Your sqlite article rocks too.
Have a nice day
8/17/2012 8:30 AM | # re: Callisto: A toolkit for XAML Metro style apps
Hi Tim

This looks great - is it compatible with the RTM release?

Carl
8/17/2012 8:41 AM | # re: Callisto: A toolkit for XAML Metro style apps
@Carl - yes the latest version is compatible
8/17/2012 4:41 PM | # re: Callisto: A toolkit for XAML Metro style apps
Tim, this is great stuff thank you. We have a CI build that runs on TFS agents - is there any way to include the Callisto .dll in source control, so the agent can simply pull down the assembly, without us having to manually install the .vsix on each agent machine?
8/17/2012 4:56 PM | # re: Callisto: A toolkit for XAML Metro style apps
@Emmanuel - it is available as a NuGet package as well -- that typically is what folks use in CI environments. You can't use just only the DLL though because you need the supplemental loose asset (generic.xaml)
8/25/2012 12:05 AM | # re: Callisto: A toolkit for XAML Metro style apps
Tim, this is great Tool kit saves me tons of code, I installed Callisto 1.0.12. visx installer everything went right, But when i removed Callisto 1.0.12 and installed Callisto 1.1.0.0 it fires me an exception at runtime saying that
"Missing Method was unhandled by user code" Method not found: 'Windows.UI.ApplicationSettings.SettingsEdgeLocation Windows.UI.ApplicationSettings.SettingsPane.get_Edge()'.

SettingsFlyout sf = new SettingsFlyout();
sf.FlyoutWidth = 300;
sf.HeaderText = "Test";
sf.HeaderBrush = new SolidColorBrush(Colors.Black);
sf.Background = new SolidColorBrush(Colors.Black);
sf.Foreground = new SolidColorBrush(Colors.White);
sf.Tag = Command.Id;

At this line it fires exception
SettingsFlyout sf = new SettingsFlyout();

Any ideas, Please help me
8/26/2012 9:13 PM | # re: Callisto: A toolkit for XAML Metro style apps
@Nish, versions greater than 1.0.12 require RTM bits of Windows.
8/29/2012 11:44 PM | # re: Callisto: A toolkit for XAML Metro style apps
Hi Tim,
Excellent toolkit, I was just wondering if you could help me out.
I am using the Tilt effect on my grid objects but the before animation is complete the function whisks me away to the next page, I want to know if there is any way that i can wait until the animation for tilt is complete and then move on to the next page.

Thanks
Ronak
9/11/2012 12:52 PM | # re: Callisto: A toolkit for XAML Metro style apps
The LiveTile will not stretch Horizontally.
I added it to a ItemTemplate of a GridView and it just centers and no matter what I do it will not stretch.
10/16/2012 10:49 AM | # re: Callisto: A toolkit for XAML Metro style apps
This looks like a great toolkit to have but I'm having installation issues. I installed the .visx and looked for it in references but it's not there. I then used NewGet and get the following error when installing Install-Package Callisto:
Install failed. Rolling back...
Install-Package : Could not install package 'Callisto 1.2.3'. You are trying to install this package into a project that targets '.NETFramework,Version=v4.0', but the package does not contain any assembly references or content files that are compatible w
ith that framework. For more information, contact the package author.
At line:1 char:16
+ Install-Package <<<< Callisto
+ CategoryInfo : NotSpecified: (:) [Install-Package], InvalidOperationException
+ FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand

I'm running a 64bit PC but my projects compile to x86. Two projects I tried. A WPF C# with framework 4.5 and one framework 4.0. Any help would be appreciated. :-)
10/31/2012 7:40 AM | # Callisto: Method not found: 'Windows.UI.ApplicationSettings.SettingsEdgeL
Hello Tim
Great tool indeed! I used it for my settings pane and used to be perfect! I don't know what happened, with the update when I press to open any form on the pane (specifically on the "new SettingsFlyout() method" I am getting this message "Method not found: 'Windows.UI.ApplicationSettings.SettingsEdgeLocation Windows.UI.ApplicationSettings.SettingsPane.get_Edge()'."

any ideas?
11/11/2012 9:59 PM | # re: Callisto: A toolkit for XAML Metro style apps
hi tim,
when date and time picker controls will be available?
11/16/2012 6:14 AM | # re: Callisto: A toolkit for XAML Metro style apps
Hi Tim,
Excellent toolkit but I have a problem,

when you position an ads on the right of the screen, the setting panel is visualized behind the ad control.

I tried to change z-index property of canvas, but without success, how can I fix it?
Gravatar
12/5/2012 11:54 PM | # re: Callisto: A toolkit for XAML Metro style apps
I'm trying this toolkit in one of my windows store app projects. I'm using the Menu control within a Flyout. When i disable one of my MenuItems, the visual state of the item doesnt change by default. Is there any thing I can do to change the foreground of the item?
12/7/2012 2:42 AM | # re: Callisto: A toolkit for XAML Metro style apps
Hi, I am working with toggleSwitches (following the 'camp in a box' labs). for some reason the latest version will not show the switches, however when I use version 1.1.0 (specified in the labs) it appears to be working. Is there something I can do to get it working with the most recent version? (I know the switch is added, a textbox control reserves the space above it, but it is invisible).
2/14/2013 8:23 AM | # re: Callisto: A toolkit for XAML Metro style apps
I have a flyout that is being evoked from the Bottom AppBar. The flyout contains a TextBox but the onscreen keyboard is covering up the flyout. Is there any way to make the flyout placement higher or to have it scroll up with the keyboard is displayed? I'm currently using flyOut.Placement = PlacementMode.Top.

Thanks for you help...btw, I love Callisto.
2/25/2013 1:23 AM | # re: Callisto: A toolkit for XAML Metro style apps
It crashes all the time even in the offical "Lab 6" example with a unhandled win 32 exeption.
6/29/2013 8:49 AM | # re: Callisto: A toolkit for XAML Metro style apps
Hi,

I am developing a WPF application using .net 4.5 framework. I tried installing Callisto 1.3.1 using Nuget but I received the following error

Install-Package : Could not install package 'Callisto 1.3.1'. You are trying to install this package into a project that targets '.NETFra
mework,Version=v4.5', but the package does not contain any assembly references that are compatible with that framework. For more informat
ion, contact the package author.
At line:1 char:16
+ Install-Package <<<< Callisto
+ CategoryInfo : NotSpecified: (:) [Install-Package], InvalidOperationException
+ FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand

How can I use Callisto with .net 4.5 ?
7/20/2013 1:33 AM | # re: Callisto: A toolkit for XAML Metro style apps
I installed Callisto via NuGet. The description of the package says it's version 1.3.1, but when installed the properties window says the version is 1.2.7.

I removed the NuGet package and installed the VSIX instead. The properties window shows the version as 1.3.1.
7/14/2014 9:07 AM | # re: Callisto: A toolkit for XAML Metro style apps
Hello, I really like the callisto control and would like to use it in our app. However, I would like to instantiate the control at run time. E.g., at runtime, on click or on update of certain fields, I would like to create the callisto dialogbox, add buttons, change background, set title and text. Do you have a sample for this?

 
Please add 3 and 4 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.