Andrej Tozon's blog

In the Attic

NAVIGATION - SEARCH

Countdown to Silverlight 3 #8: Style inheritance

Silverlight 3 supports style inheritance through setting the BasedOn property. Although not as powerful as that in WPF, using this feature can significantly improve the maintainability of application styles – instead of duplicating several properties when creating similar styles, you can define one base style, set some common properties, then create a a derived style, inheriting those properties and adding new ones.

When defining a new style, the BasedOn property an be used to reference a base style, thus extending it with new properties. All you have to be careful about is to target the same type (or its derivate) as the base style. For example, you can’t create a new style, targeting a Button, if the base style targets a TextBox. You can, however, target a Button, if the base style targets a Button, ButtonBase, ContentControl, etc (ascendants of a Button). You can also overwrite property values, set in a base style – either in a derived style, or by setting it directly on a control.

The example below covers some of the mentioned scenarios.

Style inheritance

Run the application online

Source code below:

Countdown to Silverlight 3 #7: Navigation

Another powerful Silverlight 3 feature is navigation. The concept is very simple: provide a space on your main page, which you’ll later fill with custom content – pages. You’ll be able to navigate through these pages (by using browser’s Forward/Back buttons, directly access them and even provide custom parameters.

There’s a special project template in Visual Studio 2008 to create a Silverlight Navigation application and it provides a good start if you’re new with this feature – you’ll get a nice template to get you going, which you’ll be able to customize as you go forward.

There is one core control that you’ll need to enable this feature – System.Windows.Controls.Frame, which will host your pages by navigating to them. A Page is a special control, derived from UserControl, adding navigation capabilities.

I refactored my Silverlight 3 features application to a Navigation application, each sample being a separate page, accessible from a list of samples. I’ll continue to add new samples to this application in the future. I’ll try to maintain the main application (as well as the examples pages) to be as much MVVM-ish as possible, but without having to resort to any external dependencies.

A couple of things to note in the new, refactored application:

1. By using Element binding feature to bind the Frame Source to selected Url in the samples list, calls to Navigate() method aren’t required – binding does all the magic.

...
<ListBox x:Name="views"
           ItemsSource="{Binding Links, Source={StaticResource viewModel}}" ... />
...
<navigation:Frame Source="{Binding SelectedItem.Value, ElementName=views}" ... />
...

2. Passing custom parameters to a page. MergedResourceDictionaries page has been modified so it accepts a parameter of a theme to be applied to the sample form.
Example: http://tozon.info/sl3/#/Views/MergedResourceDictionaries.Xaml?style=Red

3. Uri mapping. Parameters for MergedResourceDictionaries can be passed in to the paged in a shorter form, thanks to the Uri mapper.
Examples: http://tozon.info/sl3/#Form/Red| http://tozon.info/sl3/#Form/Blue

4. To prevent any mis-addressing of navigation pages, attach a handler to frame’s NavigationFailed event and handle those cases to spare your users from seeing some nasty popup windows, telling them they misspelled the url.

private void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
{
e.Handled = true;
views.SelectedIndex = 0;
}

Silverlight 3 navigation feature greatly simplifies creation of modern, interactive web sites with multiple pages, where previous to SL3, ASP.NET was in lots of cases the first choice.

Additional reading
http://timheuer.com/blog/archive/2009/03/22/silverlight-navigation-framework-and-uri-routing.aspx

http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2009/04/02/
silverlight-3-quick-tip-6-navigation-framework-and-uri-routing.aspx

Run the sample online

Source code below:

Countdown to Silverlight 3 #6: System colors

With Silverlight 3, we now have access to system colors. If you need your new application to visually fit into the operating system it’s running on, simply inspect one of the static properties, provided by the new SystemColors class – System.HighlightColor for example, will tell you what color is used for highlighting the selection in ListBoxes.

The provided example (below) will enumerate all available system colors and display them on the screen. To test it, go to your Control Panel and change the color scheme, then restart the application.

image image
Windows Aero vs. High Contrast Black

Additional reading
http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2009/04/29/
silverlight-3-system-colours.aspx

Run the sample online

Source code below:

Countdown to Silverlight 3 #5: ChildWindow (Modal, Non-modal, Templated)

There are many controls being introduced in Silverlight 3; a lot of them were pulled from the Silverlight Toolkit (the idea is that for every new Silverlight version, Toolkit controls marked as stable are moved to the Silverlight core. I’m not sure how many new controls I’m going to cover in this series, but the ChildWindow definitely deserves a separate post and sample.

ChildWindow is a special control, which behaves like a dialog. By default, it is set up to display itself as a modal dialog and can be easily re-templated to give it a new look (included in the sample below).

There are three steps required to make the ChildWindow display as a non-modal (floating) window:

1. Create a copy of the default template and get rid of all animations, referencing the Overlay element. The overlay covers all area “behind” the child window and makes it look disabled. If you remove the Overlay element itself, the window will not be centered on the screen when invoked, so it’s best to keep it in, but somehow hide it.

<Grid x:Name="Overlay" Width="0" Height="0" />

2. This is a hack. ChildWindow disables the root element when invoked so you have to re-enable it when window is shown:

Control root = Application.Current.RootVisual as Control;
if (root != null)
{
root.IsEnabled = true;
}

3. This is a hack. ChildWindow also takes control of re-focusing the window when the root control gains the focus so we have to hack into the ChildWindow’s LostFocus event to take care of this:

protected override void OnLostFocus(RoutedEventArgs e)
{
LostFocus -= Delegate.CreateDelegate(typeof(RoutedEventHandler), this,
    "ChildWindow_LostFocus") as RoutedEventHandler;
}

Additional reading:
http://timheuer.com/blog/archive/2009/05/10/silverlight-childwindow-non-modal-refactor.aspx (a better approach to non-modal window, also read the comments)

Run the sample below

Source code below:

Countdown to Silverlight 3 #4: Element binding

Binding to elements is yet another feature, known to WPF-ers since v1. Silverlight 3 now allows bindings between UI elements and their properties, without having to use other classes as a workaround. There are numerous cases of when to use such binding, mostly to automate user interface, starting from the basic example of connecting a TextBox to a Slider (also included in the sample below). The interesting point to this binding is that it also works two-way: the TextBox not only displays the current value of the Slider, entering a new value also updates the Slider.

To make the sample a bit more interesting, I included a new kind of panel, which stores the current mouse coordinates when moving it over the panel. I added two TextBoxes and bound them to the panel to display these coordinates. There’s also an ellipse, which… well, see for yourself ;)

Additional Reading
http://community.irritatedvowel.com/blogs/pete_browns_blog/archive/2009/06/24/
From-Silverlight-in-Action-2nd-Edition_3A00_-UI-Element-Binding.aspx

Run the sample online

Source code below:

Countdown to Silverlight 3 #3: Merged resource dictionaries

Coming from the WPF world, finding out that Silverlight lacked the feature of distributing application resources among separate files was one of those kick in a head moments. Well, not anymore. Silverlight 3, like its big brother WPF, now supports partitioning resources through merged dictionaries.

Merged resource dictionaries can be included as external files (build action = Content), as included resources (build action = Resource), or as referenced assembly resources (e.g. theming).

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Themes/Theme1.xaml" />
<ResourceDictionary Source="Themes/Theme2.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

Merged resource dictionaries come in useful when:

  • providing different themes for the application (like in the sample below)
  • providing a new style/template for existing control
  • providing a style/template for a custom control

Run the sample online

Source code below:

Countdown to Silverlight 3 #2: Setting styles

Silverlight 3 is introducing a small, but very powerful feature: styles in Silverlight 3 can be set multiple times! For example, executing the following code in Silverlight 2 will throw a “catastrophic failure” exception on the second line:

textBox.Style = Application.Current.Resources["TextBoxStyle"] as Style;
textBox.Style = Application.Current.Resources["TextBoxStyle"] as Style;

Silverlight 3, on the other hand, won’t have any problems with setting control’s style the second, third or n-th time, if required.

To reset a control’s style, one can simply set it to null:

textBox.Style = null;

… or assign an empty style to it:

<Style x:Key="EmptyTextBoxStyle" TargetType="TextBox" />
 

Source code below:

Countdown to Silverlight 3 #1: Out of Browser applications

With Silverlight 3 knocking on the door (July 10?) it’s time to offload my Silverlight 3 examples. Not that they would show anything new (since SL3 Beta got out, new features had been demoed by various people to the death), it’s just another perspective or a way to go public with a sample code that’s been piling up on my desktop since the Beta was released. Anyway, this will be in a form of short posts with provided test page and sample code.

I’ll begin with probably the most talked about new feature – Out of Browser applications, which could also be referred to as installed applications.

First of – not every Silverlight application can be installed on the client machine. The developer must enable this by adding a <Deployment.Application> section to the application manifest (AppManifest.xml). This section provides more information about the application (name, title, description), along with optional icons in a few different sizes, which are used for branding your application and are displayed on various places on the desktop (install dialog, application shortcut, title bar, …)

Alternative way to installing the application (a common way is to install it through the Silverlight application right-click context menu) is to provide the user with a button of some sort, which would call the new Application.Current.Detach() method when clicked. Note that the method requires an explicit user action to succeed; calling it on the application load or perhaps inside a timer tick event should fail with the exception.

There’s the Application.Current.ExecutionState property telling the installation state of the application. Possible values include RunningOnline (not installed, the default), Detaching, Detached, DetachedUpdatesAvailable and DetachFailed (for describing various installed/ing states).

When installed, the application can be run as before, inside the browser, or, by calling it through a created shortcut (start menu, desktop), outside the browser. Inspecting the Application.Current.RunningOffline property will tell you how the application was run.

To check if application is connected to the network, there’s the NetworkInterface.GetIsNetworkAvailable() method, returning a simple true or false. Remember that being connected to the network doesn’t mean application has access to the internet, and certainly doesn’t imply that a network resource or a service application wants to call is accessible at all.

One last thing to mention is that Out of Browser application still run in a partial trust, the same security context as it would when run inside the browser. The isolated storage quota, however, increases to 25MB when application gets installed.

Additional reading
http://timheuer.com/blog/archive/2009/03/18/silverlight-3-offline-update-framework.aspx
http://msdn.microsoft.com/en-us/magazine/dd882515.aspx

Run the sample online

Source code below:

NTK09 – Slide decks from my talks

Had 2 talks at this year’s NT Konferenca.

The first one was about building LOB application with Silverlight, starting from what can we do today with v2 (ran a short, 2 min video of a Silverlight 2 LOB app we’re going to be releasing within few weeks) and what’s coming with v3. The last part was about .NET RIA Services.

The second talk was about Presentation Model (MVVM / Model-View-ViewModel) – from basics to actual working application – starting from a WPF version of an app, then porting the same ViewModel over to Silverlight to build a better UX and thorough testing, to finish with (again, with exactly the same ViewModel) a working version for Windows Forms (yes, that’s WinForms built with MVVM).

Fun.

Update: slides are in Slovenian language…

Dynamic Data Forms for Silverlight, revisited

A couple of weeks ago, I wrote a post about handling dynamic forms in Silverlight. With this continuation post, I’m going to make a few changes to the original project:

1. Implement a new, custom, field type and provide a template for it (I’ll write about it later), and
2. Make a few changes to the FormFieldTemplateSelector to make it more generic. So instead of writing templates like this:

A new TemplateSelectorDataTemplate…

<local:FormFieldTemplateSelector.StringTemplate>
    <DataTemplate>
        <TextBox Text="{Binding Value, Mode=TwoWay}" Width="100"/>
    </DataTemplate>
</local:FormFieldTemplateSelector.StringTemplate>
<local:FormFieldTemplateSelector.DateTimeTemplate>
    <DataTemplate>
        <basics:DatePicker SelectedDate="{Binding Value, Mode=TwoWay}" Width="100" />
    </DataTemplate>
</local:FormFieldTemplateSelector.DateTimeTemplate>

You could simply write:

<local:TemplateSelectorDataTemplate DataType="System.String">
    <TextBox Text="{Binding Value, Mode=TwoWay}" Width="100"/>
</local:TemplateSelectorDataTemplate>
<local:TemplateSelectorDataTemplate DataType="System.DateTime">
    <basics:DatePicker SelectedDate="{Binding Value, Mode=TwoWay}" Width="100" />
</local:TemplateSelectorDataTemplate>

You can see the DataType property on the TemplateSelectorDataTemplate used instead of using concrete templates like FormFieldTemplateSelecot.StringTemplate. This way, the FormFieldTemplateSelector’s DataType property can be matched with TemplateSelectorDataTemplate’s DataType property [long names confusion, I know] and you don’t have to factor a new template for each new field type you come with, making it feel a bit more like the DataTemplate implementation in WPF. Strings are used here instead of types. One reason for this is that Silverlight doesn’t support x:Type markup, and the second is the fact you can use any string to identify your field type: for example, you can use “#Signature#” string as a custom field type to insert a signature control into your form.

A written signature form field…

To demonstrate a support for custom field types, I created a special control, which will allow the user to sign herself on a special panel and the signature will be submitted to the server together with the other field values.

The control, which will allow us to write on it with the mouse, is of course InkPresenter. I’ve encapsulated it in another control, called SignaturePanel, which adds required mouse event handler which enables the user to write on the InkPresenter with a mouse. Here’s this control, contained within a new TemplateSelectorDataTemplate:

<local:TemplateSelectorDataTemplate DataType="#Signature#"> <local:SignaturePanel Width="100" Height="50"
Strokes="{Binding Value, Mode=TwoWay, Converter={StaticResource strokesConverter}}" /> </local:TemplateSelectorDataTemplate>

The template looks nothing special, except that strokesConverter, specified with the binding. What that does is serialize the Strokes collection from the InkPresenter when being written to the underlying ViewModel, where we need it when sending all submitted data over to the server side. This means that signature actually gets sent over the wire in a form of strokes collection, which you can store in a database. Alternatively, you could convert that strokes into the bitmap on the server and store the signature as an image [And I’ve yet to check how Silverlight 3 WritableBitmap can help doing this on the client]. Anyway, I’ve found StrokeCollection (de)serialization code in Julia Lerman’s Create Web Apps You Can Draw On with Silverlight 2 MSDN article and is included in the code sample attached to this post.

Here’s how the current form looks like:

image

Source code is now available. Please note that this is a Silverlight 3 project. It doesn’t contain any SL3 code, it’s just the project files were converted to SL3 when opened in Visual Studio.

All comments welcome. Enjoy.