Andrej Tozon's blog

In the Attic

NAVIGATION - SEARCH

Decimal separators in Silverlight

I run English Windows with regional settings set to Slovenian, which means I’m also using a comma (,) for my decimal separator character, not a dot (.), which is mostly used in English-speaking countries.

Silverlight sees my configuration as:

CultureInfo.CurrentCulture: sl-SI
CultureInfo.CurrentUICulture: en-US

And with my current setup I still have to use a dot for my decimal separator. To test this, I created a business object with numeric (decimal) property and use a TwoWay-bound TextBox on it.

Typing a comma-separated value into the box
 
and tabbing out of it, gets me

whereas entering a dot-separated value

leaves me with
 

Silverlight is clearly ignoring my regional settings so what can I do to make this work?

Rather than catching keystrokes and convert dots into commas etc., one simple solution comes in a form of a value converter, which would use a CurrentCulture when converting a number between string and decimal:

public class CultureNumberConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return ((decimal)value).ToString(CultureInfo.CurrentCulture);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
decimal returnValue;
if (decimal.TryParse(value.ToString(), NumberStyles.Any, CultureInfo.CurrentCulture, out returnValue))
{
return returnValue;
}
return value;
}
}

 
Here’s a full solution sample:

ICEing the Nativity Scene

In my previous post I briefly described the process of creating a large Deep Zoom image with Microsoft Image Composite Editor. This post is going to present the steps I took with ICE in a little bit more detail, just to show its power.

As I mentioned in that post, I shot the scene with 24 (6x4) - kind of - detailed photos, which gave me the following set (arranged with the Deep Zoom Composer):

It doesn’t take a very detailed examination to notice how partial set photos are not distributed evenly, bear different lighting and some of them even being way out of focus. Now let’s see how ICE works it’s magic…

The ICE UI is simple as it is with Deep Zoom Composer. One thing I don’t get though is that I have to start it twice before the app actually appears on my desktop. Anyway, here’s how it looks when started:

image

The instructions couldn’t be simpler – I just had to drop all part photos onto editor’s main space and let it process them. After a minute or so, I got this:

image

Notice the perspective corrections? Camera motion setting was set to Rotating motion, which obviously hinted the processor that the scene was set from one single spot (like panorama). There is an option to adjust perspective and projection, which I simply didn’t need to do in this case.

Next were the crop settings – Automatic crop selects the optimal rectangle to exclude empty spaces:
 image

The Export sections offers a couple of options: your creation is exportable in a number formats, which selection varies depending on a scale setting. With the largest scale (100%), available formats are: TIFF Image, HD View Tileset and Deep Zoom Tileset. Smaller thumbnail creation is optional. Deep Zoom Tileset was the one I wanted, but before hitting the Export button, I took some more time to adjust the selection rectangle on the left to exclude an unimportant part of the scene:
 image

After clicking the Export Button, I was asked for a target directory and the project name. After that, the processor took over for a few minutes to render the output, which resulted in a ready-to-publish Deep Zoom folder.

Talking about publishing Deep Zoom/Silverlight content, here’s a little trick: if your hosting provider doesn’t have MIME types for Silverlight apps set up correctly, you can rename your XAP file to ZIP (including any references to it in accompanying files) and your app should still work.

The final result can be seen in the original post.

Deep Zoom Christmas Nativity Scene 2008

Setting up the nativity scene for the Christmas holidays has been my family tradition going back way before I was born. Most figures are dated back to my grandparents era, while the others (mostly sheep) were gathered over the years.

Each year, the scene setup is determined by a couple of factors, like the current inspiration/mood, the place to set it up and starting this this year – accessibility; we really don’t want our little munchkin do some redecoration on her own :) So this year I set it up on the less accessible place and made it a little bit smaller than usual.

At the same time, I wanted to try out the Microsoft ICE (Image Composite Editor), an amazing (free) piece of software, coming from Microsoft Research, which is doing a brilliant job at stitching your partial photos of the same subject into one really big photo, preserving the original resolution. The latest version has an option to export the final scene as a Silverlight Deep Zoom image, and this was the one that I was interested in trying out.

First, I tried to shoot a large number of really small and detailed photos (like 20 photos in one row by 10 rows), but soon realized that the place wasn’t getting enough light and/or my lenses were not up for the job. Also, this was an experiment rather than a professional job, so instead of bringing in more light, I decided to go smaller (6x4 photos only). Much less time consuming, I tell you… Anyway, I was very doubtful about the final result, because the exposure settings were not consistent throughout all photos and I left the autofocus on. I did try to keep the aperture small and constant for a decent DoF, but the shutter speed value kept going through the roof :)

Now, given the fact that I wasn’t really trying that hard, the final result looks very good for convincing me to give some more time and effort into my next panoramic photo projects.

And here it is – our Deep Zoom-ed Christmas Nativity Scene 2008:

Side note 1: with SeaDragon technology (the one behind Deep Zoom) coming to iPhone [Seadragon Mobile], I can now carry this image with me in my pocket :)

Side note 2: and how’s that for an original nativity scene? :)

Weight Watching

If you followed me on Twitter you’d know about my latest little “problem”. I decided not to wait another month for my New Year’s resolutions, but start losing that extra weight right away. To help me keep my score, I created a little Silverlight app, showing my progress visually, through a line chart. Since charts were introduced in recently released Silverlight Toolkit, this was a very simple task.

All I had to do was:

1. Create a SQL 2008 database to keep my weight history in. The key idea here ware daily updates…
2. Expose data as a service (WCF, what else)
3. Build a Silverlight front end, which would consume this data service and present the data using the Chart bits from Silverlight Toolkit.

After browsing through some of the enclosed samples, it all boiled down to just these few lines of Xaml:

<UserControl 
    x:Class="WeightWatch.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:WeightWatch"
    xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;
                    assembly=Microsoft.Windows.Controls.DataVisualization"
    Width="600" Height="300">
    <UserControl.DataContext>
        <local:ViewModel />
    </UserControl.DataContext>
    <Grid x:Name="LayoutRoot">
        <charting:Chart Title="Andrej's Weight Watch" LegendTitle="Legend">
            <charting:Chart.Series>
                <charting:LineSeries
                        Title="Running Weight"
                        ItemsSource="{Binding RunningWeight}"
                        IndependentValueBinding="{Binding Date}"
                        DependentValueBinding="{Binding Weight}" />
                <charting:LineSeries
                        Title="Target Weight"
                        ItemsSource="{Binding TargetWeight}"
                        IndependentValueBinding="{Binding Date}"
                        DependentValueBinding="{Binding Weight}" />
            </charting:Chart.Series>
        </charting:Chart>
    </Grid>
</UserControl>

With the exception of the ViewModel, which is responsible of fetching the data from the service, there was absolutely no additional code required for this to work. Simplicity at its best. There’s of course much more to this than just displaying static data lines in a box; I have a long way to lose those 10+ kilos, which will give me plenty of time to update this sample with some new features.

And here's my progress:

Integrating Silverlight with Community Server 2008.5

I’m sure Telligent will fully enable Silverlight parts into future Community Server releases, but until then, a couple of tricks are needed to make Silverlight play well with CS. The following points were made with Community Server 2008.5 release.

Include Silverlight apps in posts

The common way to include Silverlight in CS posts is by using HTML iframes. CS is blocking this tag by default so you have to edit communityserver.config file and enable it. Look for the <Markup> tag and go to the <Html> section within it. Add the iframe line somewhere to that section:

<iframe src = "true" frameborder = "true" width = "true" height = "true" />

Only attributes with values set to “true” will be allowed so don’t forget to add the attributes you plan to set on an iframe.

Next, upload the Silverlight app to a web site folder. The files to upload are usually the application’s [app].html (host page), [app].xap (application) and Silverlight.js (JavaScript helper library). Make sure that the uploaded .html file is accessible through the web and the app is working.

The last step is an easy one. Insert the iframe in your post wherever you want to put your Silverlight application. You’ll most commonly do that when editing posts in Html view. I usually put another div tag around an iframe:

<div style="width:100%;height:200px">
  <iframe src="/silverlight/app.html" frameborder="0" width="100%" height="200" />
</div>

Putting Silverlight into CS master page

This one requires some more manual work, but you can use CS’s master page’s system to control where you want to include Silverlight. As I needed to have Silverlight-enabled on all pages, I picked the Master.master file. I also used a different approach for embedding Silverlight – instead of iframe, I used a new Silverlight ASP.NET control, which makes things much easier. You’ll get this control in your toolbox once you install Silverlight SDK. This approach, however, will require you to “upgrade” your web.config to target .NET Framework 3.5. You can either do this manually by copying all the missing sections and other entries into it or by opening the site with Visual Studio 2008 – Visual Studio usually prompts for this kind of upgrade when opening ASP.NET 2.0 projects. You should also add the following reference line into the pages/controls section to make Silverlight possible on every page:

<add assembly="System.Web.Silverlight" namespace="System.Web.UI.SilverlightControls" tagPrefix="asp" />

My edit of Master.master file now looks like this:

... <div id="CommonHeader"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Silverlight ID="sl" runat="server" Source="/Silverlight/banner.xap"
Height="100%" Width="100%" Windowless="true" />
<div class="Common"> ...

[inserted lines bold]

Because of the inserted Silverlight control, all existing header contents were pushed further down. To fix this, override affected elements’ CSS style. You’ll do this on the Control Panel | System Administration | Site Administration | Site Theme | Custom Styles (Advanced) page. Just enter the overrides:

#CommonHeaderTitleArea
{
    position: relative;
    top: -113px;
}
#CommonHeaderUserArea
{
    position: relative;
    top: -113px;
}

[Note: my header has its height set to default – 113px, so I had to push it (-)113px up. Change this value according to your header height.

These were just very quick (and dirty) fixes to enable Silverlight in your CS2008.5 site until Silverlight gets native support in Community Site. I’ll most likely be putting even more Silverlight into my CS so I may update this post with even more tips.

Developing for ASP.NET mobile

Visual Studio 2008 introduced a lot of new features to support new technologies, adding some cool new designers to developer’s tool belt. On the other hand, support for some technologies was simply left out, leaving a some developers very unhappy. One of those was support for SQL Server 2005 BI projects (including 2005 Reporting Services).

A (long) year after its release, I learned that there was another feature dropped in VS2008 – support for designing ASP.NET mobile web forms. This doesn’t mean you can’t develop, compile and publish ASP.NET mobile forms; it simply means they pulled out the designer and mobile forms item templates out of Visual Studio 2008. Getting item templates back is the easy part, you can get them here. For the design view support, I’m not currently aware of any plans to put it back in the future.  But really – with mobile browsers getting more powerful each day, capable of rendering rich(er) (x)html, do we still need the simplicity and extendibility of ASP.NET mobile forms? For the time being, the answer may still be yes, if you’re planning to support a wide range of mobile devices. Whatever the future, the current (un)support for ASP.NET mobile in Visual Studio works for me. It’s true that I’m unable to design mobile forms in design view, but I do that rarely even with their bigger brother - ASP.NET web forms.

ASP.NET? Mobile?

Strangely enough, I’m doing more web than client development lately. Go figure.

Speaking of webby/clienty things… Silverlight 2.0 RC0 was just made available. Downloads include Microsoft Silverlight Tools for Visual Studio 2008 SP1 and Microsoft Expression Blend 2 Service Pack 1 Preview. Note that Microsoft Expression Blend 2 SP1 is a replacement for Expression 2.5, which is no more.

VSM4WPF

While next release of WPF (3.5 SP1) won't yet align with Silverlight's "Parts & States Model"  by not introducing VisualStateManager into its API, it's good to know that VSM is definitely coming to WPF. Even more, John Gossman has just released a prototype of his VisualStateManager for desktop WPF, which is compatible with Silverlight Beta 2 VSM implementation.

Before VSM is built into the core of WPF, this prototype lets us explore and play with this "new way" of controls' state transitioning in WPF applications. Sweet.

Silverlight Olympics

Want to tune into 2008 Beijing Summer Olympic Games with Silverlight?

Not in the United States, you say?

Well, tough luck ;)

NBC Olympics

This IP restriction thing is getting sillier by the day... Isn't Internet supposed to be global? What happened to World Wide Web? :)

Experience new Silverlight skins

Corrina Barber posted a cool looking new skin for Silverlight controls, which indeed looks perfect for giving your application a sketchy appearance when in early stages of development.

However, if you don't find the green color she used sketchy enough, it doesn't get any easier to adjust it to your likings. When we're talking about control skins in WPF/Silverlight, we're talking about styles, right? So...

with a simple Search & Replace in the App.Xaml file she posted along with her sample, I changed some of the colors in her skins to get a bit more of a Black & White / Gray appearance:

Silverlight skin 

Now imagine, how much "damage" you could do to this skin with Expression Blend...

Anyway, this is the fourth Silverlight skin she posted and she's not stopping. If not anything else, this is a great inspiration to start creating your own Silverlight skins!