In the course of my building our ROI app, I was trying to figure out how to wrap the legends of charts when the text gets too long.

This is what I get with the default chart.

You’ll see here, there’s a lot of waste of space for the legend when what I really want to see is more of the chart.  So first thing we’ll do is fix the width of the chart. To do that, Right Click on the chart, Edit Template then depending on whether you’ve already been fiddling with your chart template, either Edit Current or Edit a Copy

When you expand the template, you’ll see a grid within the grid that contains both the chart and the legend.

You’ll notice that the grid is split into two, a star sized column and an auto sized one. Since autosizing will adapt the column size to the content, we’ll need to change this to star sized as well. You can do that by clicking on the icon and change it to the unlocked lock symbol.

Now, you should be able to click on the triangle and resize the columns to your desired width ratios.

You’ll notice that when you do this, your legend area won’t have as much space as before and since the legend items aren’t formatted to wrap by default, the text gets cropped if you have long lines of text.

Return to the scope of the user control by clicking on this icon in your Objects and Timeline panel

Find one of your ColumnSeries (or whatever data series your chart is using) Right-click->Edit Additional Templates –> Edit LegendItemStyle –> Edit a Copy

Give your style a name, and choose where to define this style. This depends on where you will be using this style, if it’s only in this page, then you can choose document. If there are other pages, you think you’ll be using this style in, choose Application. If you want to be able to reuse this style in other applications ,choose Resource Dictionary, choose an existing one or create a new one if you don’t have one yet. This stores the style in a separate file which you can then later on import to your other projects.

Clicking on OK should then bring your designer to to the LegendItem template designer. If you expand the StackPanel, you’ll see that we have the Rectangle and Title elements. If you look into the xaml code, you’ll see that the Title element is template-bound to a property called Content.

In my case, since I know that the legend will only represent text content, I can simple delete the title element, replace it with a Textblock object and apply the same bindings. I can do that by first selecting the textbox, search for the text property in the search box of the Properties panel, then clicking on the small square beside the property to access advanced options.

We select Template Binding –> Content

One last thing to do is set the width of the TextBox since it’s currently auto sized and we can’t currently set the width to take up the rest of the unoccupied horizontal stackpanel space. If you want your legend to scale dynamically, you’ll need to change the stackpanel into a grid. To do this, right-click on the StackPanel in your Objects and Timeline panel –> Change Layout Type –> and select Grid

After this step, check on your Rectangle, most likely, the Width and Height properties will be reset to auto so you’ll want to give this a size.

-

For the grid itself, it’s Height and Width gets fixed so we’ll want to reset this to auto so the grid is free to resize as it’s content or container feels necessary.

Now we can add a grid line by clicking on the top portion of our grid, and right after where the Rectangle ends:

then toggle the grid property (by clicking on the lock icon) until we get Pixel sized.

We can leave the other column at star sized so it’ll take up the rest of the available space.

With the TextBox selected, make sure the Width and Height  is set to auto (if there is a value, you can use the button on the right of the field to set to auto), the HorizontalAlignment and VerticalAlignment are set to Justified and the margins are set to the distance you want.

Now when you go back up to the UserControl scope, you’ll see the TextWrap in effect. Looking at this though, I might want to change the alignment/margins so that the rectangle is aligned to top instead of in the middle just to make it look nicer.

To go back to editing the template, right click on the ColumnSeries –> Edit Additional Templates –> Edit Current –> Edit LegendItemStyle

In my case, I chose top aligned with a bit of a top margin.

Going back out to the UserControl scope, we’ll be able to see the effect.

You can play around with how you want your legend to look and once your satisfied, it’s time to apply the style to the other series’. No you don’t to do that whole set of steps for each of them so don’t worry. Right click on the other column series-> Edit Additional Templates –> Edit LegendItemStyle –> and this time select ApplyResource and you should see the style you created in the previous steps and click on that. In my case, I named the style LegendItemStyle.

You’ll notice your legend automatically format itself the same way the previous column series did.

And that’s it!

I saw this video going around and obviously it piqued my interest. Also, my left jaw is acting up again so I don’t really feel like going out and about, so I found something else to amuse myself with.

I didn’t want to waste paper and my printer was unplugged so I decided to create a silverlight simulation instead. Try it out in fullscreen below:

You’ll discover that when you re-arrange the pieces as in the video, the blue and green pieces go beyond the boundary at the bottom. This is probably why even when you make the paper cut-out version and try out yourself, the illusion holds because you’ll have no reference to the original square.

At least now I have that out of my system. My jaw still hurts though

Just a quick note:  I’m sure MS will be providing controls to this interface in the future so we don’t have to spend too much time building these controls ourselves This post, as with the previous one, was meant more as an Expression Blend Exercise for myself to be explore the features of Silverlight / Windows Phone 7 and Expression Blend to see how much can be done with what we have today.

There’s one annoying thing that I can’t figure out though: on the first scroll, you’ll notice from the video that the screen flickers. There’s probably something I’m doing wrong here but I just can’t figure it out yet

So I had set out to accomplish two things: Simulate the looping background and sections in the panoramic interface on windows phone and instead of flicking, let the user touch and drag the controls from left to right before switching. I was able to accomplish the two, but like I mentioned, there’s an annoying thing that happens on the first transition from state one to state two. Another thing that’s wrong with this sample is that, I shouldn’t be switching states right away on a drag to left or drag to right. You should be able to pan a bit and the screen holds to that position till you pan to a certain threshold before the interface snaps to the next section. But yeah, maybe next time.

The first challenge was implementing the drag to next state instead of the flick. I couldn’t really isolate this into either a trigger or an action as it’s actually a combination of both, therefore a behavior. Basically, depending on the sum of the left and right value of the users drag motion, I trigger either GoToNextState() or GoToPreviousState(). Code for these two were modified from http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack.

So I built a PanoramicPanningBehavior that has a few properties I can set.

First there are  the BackgroundElement, SectionsElement, TitleElement. I want them to be grouped so when it’s time for me to handle the drags, they don’t necessarily have to move at the same pace. That’s when the BackgroundMovementFactor and TitleMovementFactor come to play. Intstead of translating the background and title according to the value of the drag, I multiply it by the specified factor first. I’ve also let myself specify the StateGroup that has the states of our sections as described in my previous post, just in case you have other stategroups in the scene (though I haven’t tested this yet ^_^)

Now that I have the essential parts of my UI identified, I can now define what I want to do with them in my behavior when I start handling the events ManipulationDelta and ManipulationCompleted.

First for ManipulationDelta, I first check to see whether the parts are not null, and then based on the input factors, I apply them to the Translation.X property of the DeltaManipulation, or basically the change in the touch points and assign the value to the TranslateX properties of the CompositeTransform of the elements that have been identified through the properties. I think it’s better to read the code  

void RootVisual_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
     {
         if (!e.IsInertial)
         {
             if (BackgroundElement != null) {
                 var BG = getElement(BackgroundElement).RenderTransform as CompositeTransform;
                 BG.TranslateX += e.DeltaManipulation.Translation.X * BackgroundMovementFactor;

             }
             if (SectionsElement != null) {
                 var SE = getElement(SectionsElement).RenderTransform as CompositeTransform;
                 SE.TranslateX += e.DeltaManipulation.Translation.X;

             }
             if (TitleElement != null) {
                 var TE = getElement(TitleElement).RenderTransform as CompositeTransform;
                 TE.TranslateX += e.DeltaManipulation.Translation.X* TitleMovementFactor;
             }

         };
     }

If I wanted to run the project at this point, I’ll have to create a stateGroup and the section states in order for this not to go haywire. When I recreated the project, I actually added the panning behavior last. Next we’ll see the reason why I say this is meant more as an exercise for myself (and maybe for building demo apps) than production code. I think from this screenshot you can more or less figure out what I did.

Okay, so seeing as how you’re able to, from the leftmost part of your UI, be able to pan even more to the left to peek and even transit into the rightmost section, there had to be something there. And since I didn’t want to duplicate all the controls, I wanted to use WPF’s VisualBrush. Sadly, this isn’t available for Silverlight, however, I did find this: http://dotneteers.net/blogs/vbandi/archive/2009/03/26/discovering-silverlight-3-poor-man-s-visualbrush-behavior.aspx When I tested it out, it wasn’t as performant as WPF’s visual brush, but since I only needed to draw the UI once, I thought this would do.If we had the PathListBox in WP7, that would have been a better option too.

If you look at my visual tree, I basically created a brush for the background image(image), the TitleGrid and the ContentGrid (which you won’t see since I collapsed it because there were more stuff inside. Next, you’ll notice that these elements are inside a stack and before and after each of them is a Rectangle. Basically, I created identically sized rectangles that use as brushes the PoorMansVisualBrush.

To do this, after adding a reference to the PoorMansVisualBrush (which I’ve made a WP version of ), I select the Rectangle and temporarily choose, TileBrush, click on Advanced Options in the Fill property and select Convert to New Resource… This will prompt me with a dialog to create a new brush resource and I’ll name it accordingly. In this Case, I have BackgroundBrush.

Next, with the behavior selected, I set the properties accordingly. Most important to note is to set the UpdateIntervalDuration to 00:00:00 so that the behavior doesn’t waste resources by repainting the brush. Next, you’ll want to go to each of the rectangles and assign their fill properties to the BrushResources you created. Also remember to set the Stroke to No brush especially if you have background images that are supposed to seamlessly merge the leftmost and rightmost portions. Now the tedious part is doing this for all the rectangles.  

The last, and yet another tricky part is setting up the states. What you’re seeing here is pretty much the same as the last post where I have 3 states, to show my 3 sections. Note that when you position the states, you’ll want to position the actual to the middle/actual objects. It’ll probably be too difficult to set up using the rectangles with the brushes anyway since they don’t render at design time ^_^. Here, you’ll notice I’ve added custom transitions for when Section1State goes to Section3State and vice versa.

To do this, I’ll click on add transition button and select Section1State –> Section3State

In order to see what I’m doing better, I’ll switch to the Animation Workspace by pressing the function key [F6]. I’ve also minimized the stacks back so it’s easier to manage. With the transition to Section3State selected I’ll record a keyframe at the start, and end of the .5s transition.

When I record a key frame at the end, it’ll actually default to moving to the right most part of the actual controls which I changed to the one below. I’ve highlighted the outlines of the rectangles that mimic the actual controls.

Do the same for transitioning Section3State->Section1State. What will happen here is the application will play this custom transition animation to showing the visual brushes and when the transition is done, it’ll switch to the destination state where the real controls are visible.

Run the app to test and that’s it!

Again, not an ideal solution for production but at least I got to learn a few more useful things in Blend that might be useful in the future.

I’ve uploaded the code here so if you want to test it out, download the zip file, rightclick –> properties –> Unblock to avoid getting those dll not found / inaccessible errors.

To make things easier, I’ve made a behavior library for everyone to use that will handle flick gestures. I’ve also included a “GoToNextState” behavior which I based on http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack. If you want to follow along, you’ll need to download my behavior library. Also, if you don’t know where to get the Blend bits, check out this post: http://electricbeach.org/?p=460

So, let’s start by creating a new Windows Phone Application project in Blend 4.

You’ll be presented with a default layout. Obviously, your panoramic screen design will go outside the bounds of the “phone”. Layout your screen accordingly. This is what I did with mine.

Now that I have all my elements on screen, I’ll create 3 visual states, one for each active session. Let’s go into our States tab and add a state group called Sections. To do that, click on the icon with a green plus sign.

In the Sections state group, let’s add the 3 states and name them accordingly. For each state, let’s also move the Grid along the  x-axis.

We can also set the default transition to some built in easing functions to smooth out the user experience.

In my case, I used the back easing function but you can play around with the different functions to see what suits you. You can preview what the transitions look like by clicking on the Turn on transition preview button.

Okay, now we’re all set. The only thing left to do is enable state changing when a user flicks the screen either to the left or to the right. This is where we will be making use of the my WPBehaviorsLibrary. We’ll go into our asset library –> behaviors tab and you’ll find a behavior called GoToNextState and GoToPreviousState:

Drag and drop these two behaviors one by one to the LayoutRoot so that it looks like this:

With one of the behaviors selected, go into the property inspector. You have a few options you can set (Loop & UseTransitions) which are pretty self explanatory.

. You’ll notice there is also a trigger property. The default trigger type is an event trigger. Let’s go ahead and click New to select the FlickGestureTrigger.

When you click ok, you’ll find that the Gesture has a Direction property that you can set. Basically, we’re saying that the GoToPreviousState action gets fired when the user triggers a flick to the Right. Do the same for the GoToNextState behavior but with a flick to the Left.

And that’s it! Press f5 and select Windows Phone 7 Emulator, unless you’re lucky enough to have a Windows Phone 7 Device.

You’ll get something like this:

After reading some more on the UI Guidelines, they’ve mentioned a few things about the title like moving at a different speed from the sections, etc. so I’ve tweaked the animations a bit,and now I have the title outside the overall grid, animating it separately. I also have different easing functions on the first and last page from the middle one. The result is this:

You can get the code for this project as well as the library here. Also, although I’ve only managed to port  (i.e. copy paste) the States behavior from the Mix Behavior Pack to a Windows Phone behavior,  I’ve recompiled the pack to work with Silverlight 4. It’s in this folder as well.

First a quick intro about Project Nimbus: as Chewy would put it, it’s basically a supermarket for data here in Singapore. The team is hard at work at securing data from all sorts of providers. They currently have Hungry Go Where, Land Transport Authority, National Environment Agency, and National Library Board onboard as data providers, and i know they have quite a few more coming. What this means for developers is that if they have a great idea, they don’t have to go out by themselves with these big agencies and possibly spend tons of money on acquiring the data. If you want to find out more, check out http://projectnimbus.org/about/ for more information. They also very keen on getting input from developers as to what types of data they think would be useful, as well as feedback on the project as well. If you’re interested, the about page has a link to contact them

So back to my application. Right now, I’m figuring out how to actually get the data from the service. Looking at this entry, they actually provide a link to the data that’s returned when you make a call to the service. Check out the post, and towards the end, you’ll find a few links that shows how the data looks like.

First we create a webrequest to the URL that gives me the dataset we want. In this case, we want to get access to the NowcastSet i.e. current weather. The service actually gets authentication from the headers so we add these two keys & values. We then make the request and read it into a string for parsing later on.

Next, if we look at the dataset that’s returned, we see that it makes use of a few namespaces. To make things WHOLE lot easier for us, we’ll use one of the cool features of the .NET Framework which I LOVE called LinqToXML. If you want to find out more, check out http://msdn.microsoft.com/en-us/library/bb387098.aspx.

Let’s first add the System.Xml.Linq namespace in order to use it’s classes.

We can now add a our XNamespaces:

The following stuff is just magic. With just one statement using LinqToXML, we’re able to parse the xml string without having to use xpath or regex, etc. And, if you read the statement, it’s actually pretty descriptive of what it is trying to accomplish.

Given the structure of our sample data, we see that we’re essentially getting elements from entry.content.properties.

Note that the following line is just to make things a bit easier to read.

You can also just do the following and remove the let line, though I find it a bit more confusing to understand at first glance.

This is the full code:

    public List<WeatherEntry> GetWeatherFromNimbusNEA(string AccountKey, string UniqueUserID)
    {

        System.Net.WebRequest wr=
          HttpWebRequest.Create(
            "http://api.projectnimbus.org/neaodataservice.svc/NowcastSet");

        wr.Headers.Add("AccountKey",AccountKey);
        wr.Headers.Add("UniqueUserID",UniqueUserID);
        wr.Method = "GET";
        WebResponse res = wr.GetResponse();
        string resStr
         = new System.IO.StreamReader(res.GetResponseStream()).ReadToEnd();

        XNamespace atomNS
          = "http://www.w3.org/2005/Atom";

        XNamespace dNS 
          = "http://schemas.microsoft.com/ado/2007/08/dataservices";

        XNamespace mNS
          = "http://schemas.microsoft.com/ado/2007/08/dataservices/metadata";

        List<WeatherEntry> results
          = (from item in XElement.Parse(resStr).Descendants(atomNS + "entry")
            let weather = item.Element(atomNS + "content").Element(mNS +"properties")
                select new WeatherEntry() {
                Area = weather.Element(dNS +"Area").Value,
                Condition = weather.Element(dNS +"Condition").Value,
                Lat = weather.Element(dNS + "Latitude").Value,
                Lon = weather.Element(dNS + "Longitude").Value
            }).ToList();

        return results;
    }

}

//Blogging using a trial version of MacJournal. Windows Live Writer is still my favorite blogging software, and it’s not just because it’s free.

// Update @ 3.40 on my Win7 partition.. I missed you Windows Live Writer!

// and the vspaste add-in!!

It’s an hour after the end of the Mix Keynote. I started watching the video on my Mac partition so I couldn’t download the tools straight away. After it was over, I rebooted, uninstalled my pre-RC bits and installed the tools for Windows Phone 7 Series (which you can find here), fired it up and created a new Windows Phone List Application:

Since this is mainly a ProjectNimbus post, I won’t dive into how to build the WP7 app but there’s a new training kit up on channel 9 http://channel9.msdn.com/learn/courses/WP7TrainingKit/ if you want to learn more.

I did make a few tweaks in my code since the original code wasn’t doing downloads asynchronously (which it should, to improve your apps performance and not lock the UI). So how does my code look now?

public void  GetWeatherFromNimbusNEA(string AccountKey, string UniqueUserID)
 {

     WebClient wc = new WebClient();

     wc.Headers["AccountKey"] = AccountKey;
     wc.Headers["UniqueUserID"] = UniqueUserID;
     wc.DownloadStringCompleted
      +=new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
     wc.DownloadStringAsync(
      new Uri("http://api.projectnimbus.org/neaodataservice.svc/NowcastSet"));

 }

 void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
 {
     string resStr = e.Result;

     XNamespace atomNS
      = "http://www.w3.org/2005/Atom";
     XNamespace dNS
      = "http://schemas.microsoft.com/ado/2007/08/dataservices";
     XNamespace mNS
      = "http://schemas.microsoft.com/ado/2007/08/dataservices/metadata";

     var results
     = (from item in XElement.Parse(resStr)
         .Descendants(atomNS + "entry")
          let weather = item.Element(atomNS + "content")
                        .Element(mNS + "properties")

                 select new WeatherEntryViewModel()
                  {
                   Area = weather.Element(dNS + "Area").Value,
                   Condition = weather
                               .Element(dNS + "Condition").Value,
                   Lat = weather.Element(dNS + "Latitude").Value,
                   Lon = weather.Element(dNS + "Longitude").Value
                  });
     foreach (var r in results) {
         Items.Add(r);
     }
 }

It’s practically the same code except I switched to the WebClient which Silverlight developers are already familiar with to download the string asynchronously. Once the results are returned, I add them to an observable collection which I have data-bound my UI Elements to.

Items = new ObservableCollection<WeatherEntryViewModel>();

The result is a basic list like application that displays weather information:

I’m excited about the WP7 platform and it’s definitely going to be a focus in my upcoming TechFriday posts! Next thing on my learning list is to share code between my two application platforms, iPhone and WP7. One thing is for sure though, I’m very happy with Project Nimbus as well because it provides a lot of data that I can already start playing around with. Kudos to the team!

Yes, it’s as easy as it looks. I’m actually just creating this post so that I can test the app I just built. The Silverlight Toolkit has actually been in release since December but I haven’t had the time to play around with it yet. In the toolkit are some really cool components that you can start using in your Silverlight applications. I’m going to need to work with some charts in an upcoming project so I decided to test it out.

Installing the toolkit is easy. All you need to do is download the binaries from the site (or you can download the package with the source files if you want to do a bit of tweaking of your own). Once you’ve downloaded and unzipped it onto your drive, you can add a reference to the dll’s in your project.

Right click on references and select add reference:

In my case I wanted to make use of the PieCharts so I added the DataVisualization dlls:

Also, to make things easier, you can add these new controls to the toolbox by right-clicking on it and selecting Choose Items..

Then navigating to where you unzipped the dlls and of course selecting. Your toolbox should then be populated with the controls when this is done. Note that you won’t be able to drag and drop any of the controls to the design view, but you should be able to do it on the XAML code. When you do that, Visual Studio will automatically add a reference to the namespace and you can start using the control in your code. You’ll get something like:

For the sample, I followed what was stated in the guided tour, but I moved the title attribute to the Chart element. The title didn’t seem to show when I placed it on the PieSeries element:

As for what the application does, it simply reads the latest 10 posts from my feed and counts the number of posts tagged as personal, media, tech, and the posts whose title starts with “Tweets” which are basically posts that aggregate my twitter posts in supposedly a day. I wanted to have a visual of how much I’m actually leaving this blog to the hands of my twitter aggregator :-S.

I was doing some research on Silverlight 2 & Dynamics CRM integration and found this post by Humberto Lezama Guadarrama where he posts a sample project that demonstrates how to consume Dynamics CRM Services directly from Silverlight 2. I was getting an initialize error when I tried to run the code though. This post helped me fix that. Turns out, there were some inconsistencies in the namespace declarations in the project properties. I’ve modified the code and uploaded them here for those of you who want to straight away run it without having to do the MODs yourself.

Note: to run the project, you should have Dynamics CRM installed and you’ll need to modify the server name and org name in the code to get it to work.

There’s so much content on http://www.microsoftpdc.com and I’m trying to watch at least once a day. So my PDC Session of the Day is this Building a Graphics-Intensive Application in Silverlight by Seema Ramchandani

She highlights quite a number of things to bear in mind when you’re doing lots of animations, image & video rendering in your application. She also talks about a tool called XPerf which allows to “dissect” your CPU processes in order to analyze the performance of your applications. You can read more about this tool here

With the goal of stressing out my new adopted baby, Brownie (yes I know it makes her sound like a dog but hey, what can I do, it’s brown and I wasn’t feeling very creative when I got her), I installed Visual Web Developer 2008 Express Edition, because I figured that one day while sitting at a cafe, I would probably have the urge to code and will need to have some form of VS on this little one. (I’m already thinking about how I can possible expand this girl’s memory just a little bit). I was pleasantly surprised, when I started creating a new Silverlight project, to see that it actually now supported solutions! I remember before, that was probably the most evident limitation of the express editions from the non-free ones (:p). I also tried out opening a solution that was built through the Pro edition and it seemed to work fine too! I think this is great news for all the hobbyist developers out there who would just like to try their hand out or start learning how to build all sorts of cool .NET applications. What I’d really love to see though is allowing Express Editions build for WinMo hrmmm..

For those of you who have been working on the Silverlight RC0 bits getting yourself ready for the release, check out this blog post from Laurence Moroney where he talks about how to get your RC0 and Beta 2 bits deployed side by side so you don’t have to worry about when the clock strikes 12 and your users start upgrading their plugins to the RTW version. Party on!

I tried out the fix myself on http://www.technoeuphoria.com/pissoff and it seems to work for me!

I was browsing http://www.liveside.net  last night and saw this article on a really killer Windows Mobile application called Live Media GPS. If some of you have heard of Qik, it’s the same concept. It has a software component that runs on your GPS enabled Windows Mobile phone and allows you to stream videos on the web. The portal is not as rich as Qik’s portal yet. What happens is when you choose to broadcast a video, it won’t allow you to select off the bat that you want to publish your video right away. The mobile client has SMS notification though I haven’t tried it out yet. I’ll update this post when I get to try it out. The output is streamed via a Silverlight player, and on the right hand side, you’ll find the GPS location plotted on Virtual Earth. COOLNESS!!

Live Media GPS is an addition to their already existing Live Media application (which gets installed when you install the client) that allows much more functionality like making the video public, viewing your “buddy cams”, viewing the public broadcasts. Apparently, aside from videos, you can also stream other media such as images, presentations etc. Will have to find a buddy to test this out with.

Live Media also comes with a desktop client which I unfortunately have not been able to try because they don’t currently have a version that supports 64-bit *sob*. I’ll probably try it out on one of the other machines here once I have the time.

“This is a test of the emergency broadcast system…”

If ever I get kidnapped, I’ll have a piece of software to help people find me.. provided they don’t keep me where the GPS & 3G don’t show

I had the great opportunity to help Crayon Digital get enabled on Silverlight for one of the projects they had to deliver for the SingTel Singapore Grand Prix and I have to say, they’ve come up with some pretty sleek stuff and I’m sure you GUYS will agree Check out the Heart Race Test which the team has very impressively built in less than a month, including time taken to build the concept, assets as well as honing Silverlight development skills!

Loads of videos on the Grid Girls but my favorite is how they used Deep Zoom. Check the site out!

Came across another really awesome Silverlight Application that makes use of Deep Zoom done by Kelly Blue Book which I believe they call The Perfect Car Finder. Tim Heuer talks about it more in his blog post. Building deep zoom applications can actually be pretty straightforward. All you need to do is make use of the Deep Zoom Composer to stitch and compose your source image, and it will automatically generate the .xap (Silverlight package) as well as a default html test page for you. Now if you want to take Deep Zoom a step further, here’s a post by KIRUPA.CHINNATHAMBI that shows how you can implement a deep zoom application that allows you to filter by tag (code included). Cool stuff!

I did a session on facebook development using the facebook developer toolkit where I also showed how I integrated my Piss Off Silverlight application into a facebook app, which I now call PissBook. I’ve registered the pissbook url but have yet to point it to my app as it seems that facebook isn’t allowing me to save it as “addable” on facebook   I forgot to put in the post add URL ^_^

What I did was take this silverlight app:

And showed how you can make it work with data from facebook (or any other datasource for that matter). If you are using the default page generated by the Silverlight project, you would have something like:

on the Page_Load event, you should then be able to add values from your Request variable, in this case the logged in user name, and the friend’s name which i picked up from facebook’s friend-selector component, and pass these as InitParameters to my Silverlight Application.

I then needed to do a bit of tweaking in my App.xaml file on the Application_Startup method where I parsed the initialization Parameters and passed it to the constructor on my Page user control, which is basically my Silverlight application.

I then created a new constructor for my Page.xaml, which is more or less the same as the original one, except this accepts some parameters and assigns them to the textboxes in my application:

A simple application but it basically shows you how you can integrate your Silverlight applications with dynamic datasources through its InitParams property.

Code and slides are here:

* NOTE: for some reason, when you’re not logged in, facebook gives a 404 when i try to access the app directly from http://apps.facebook.com/facebooksession I’ll update this as soon as I find out a resolution.

this is apparently a 6-month old bug http://bugs.developers.facebook.com/show_bug.cgi?id=1406 still unresolved.

If you want to embed a font into your Silverlight applications, add the font into your project:

Set the Build Action file property to embedded resource:

Use the following code snippet to use the font as a font source for your components:

Assembly ass = Assembly.GetExecutingAssembly();
Stream stream =

ass.GetManifestResourceStream("EmbeddedResource.Font.pricedow.ttf");
this.test.FontSource = new FontSource(stream);
this.test.FontFamily = new FontFamily("Pricedown");

XAML looking something like:

<Grid x:Name="LayoutRoot" Background="White">
    <Canvas>
        <TextBlock x:Name="test" FontFamily="annifont.ttf#Annifont" 

         Text="grand theft auto IV" FontSize="30"/>
    </Canvas>
</Grid>

And the result:

Source:

I thought it was a simple enough concept to implement so I figured I’d give it a try. I had some time to kill before my 11:00pm conference call. So I came up with “Piss Off!”.

// I have a feeling this won’t be up here for long as it might offend some people