davidpoll.com
Posts Tagged Silverlight 3
Silverlight Toolkit November 2009: Activity Control –> BusyIndicator (a.k.a. Update 3: Displaying background activity in a Silverlight RIA application)
Posted by david.poll in Silverlight on November 19, 2009
Wow! What a week! PDC, the Silverlight 4 Beta, and now the November 2009 release of the Silverlight Toolkit! There’s been a ton of great news and exciting announcements, and now I can share with you that the Activity control, first blogged here, is now a part of the Silverlight Toolkit!
Awesome! What does that mean for the Activity control?
During this transition, the Activity control underwent a few changes (thanks to my colleagues working on the Toolkit – David Anson and Jeff Wilcox) to make it more generally palatable:
- The control has been renamed from “Activity” to “BusyIndicator” in order to avoid confusion with the concept of an Activity (sounds a lot like “Task”)
- Similarly, “IsActive” is now “IsBusy”, and the visual states have been renamed appropriately as well.
- AutoBind and related properties have been removed once and for all. They were a performance hog in the original versions, and they really only hit a very, very narrow scenario. Instead, bind to a property that represents your busyness.
- MinDisplayTime has gone away. If you’re looking to change the minimum display time, you can re-template the control and add a duration to the transition from visible back to hidden.
- OverlayBrush and OverlayOpacity have been replaced with a single OverlayStyle property where you can set the color/opacity of the overlay easily.
- DisplayAfter now defaults to 0.1s instead of 0.05s
Otherwise, the control is basically the same! Give it a shot!
With this transition, the BusyIndicator control truly becomes accessible to anyone who’s using the Silverlight Toolkit. You can report bugs through that project on codeplex, and we’ll make sure to keep an eye on any feedback we get from you on the control.
Great… So where can I find it?
It’s simple! Just download the November 2009 Silverlight Toolkit for either Silverlight 3 or Silverlight 4. There are a few ways to get it:
The BusyIndicatorControl can be found in the System.Windows.Controls namespace in the System.Windows.Controls.Toolkit.dll assembly in the toolkit.
And… can I see it in action?
Yep! David Anson created some awesome samples in the Toolkit Sample Browser for the BusyIndicator. I’m a big fan of his work!
I hope you all enjoy using the BusyIndicator control in your applications! Let me know what you think!
P.S. Thanks to Jeff Wilcox, who beat me to explaining this change
I’ve been super-busy with PDC, so it was good to have someone start getting the word out early. Jeff gives a great overview of what the control is meant to do and has lots of resources regarding the Silverlight Toolkit. Check out his blog!
Activity Control, BusyIndicator, Silverlight, Silverlight 3, Silverlight 4 Beta, Silverlight Toolkit
Relative hyperlinks with Silverlight navigation
Posted by david.poll in Silverlight on September 20, 2009
If you haven’t noticed already, I happen to like the Navigation feature in Silverlight quite a bit (I wonder why?
). In my other posts on Navigation, I’ve spent some time exploring how you can navigate to Pages in assemblies other than the main application assembly and how those assemblies can be loaded on-demand (granted, it uses some workarounds, but it gets us where we want to go!).
This is all well and good, but it presents an annoying problem that impacts the maintainability of such code. Specifically, it forces every hyperlink within each of the external assemblies to know how to refer to its assembly by name (this is akin to the problem with absolute URLs in hyperlinks on web pages – those links become tightly coupled to the page for which they were created, and can’t be copied into other projects).
Technically, almost all Uris used by the navigation framework today are relative Uris (unless UriMappings are used to turn absolute ones into relative ones), but they are application-relative and never Page-relative. This means that if you have a page at “/Views/Page1.xaml” and want to link to another page at “/Views/Page2.xaml” from within Page1, you must refer to the entire path (“/Views/Page2.xaml”) rather than just the relative path to the other page (e.g. “Page2.xaml” or “./Page2.xaml”).
In this post, we’ll look at a way to allow Page-relative navigation within your Silverlight Pages. The approach I’ll use will take advantage of the INavigate interface that was added in Silverlight 3 and the HyperlinkButton control that uses this interface to perform navigation when clicked.
The INavigate interface looks like this:
public interface INavigate { // Methods bool Navigate(Uri source); }
It’s a simple interface with a simple purpose: allow a component to provide a way to handle navigation to a Uri. Right now, the only component built into Silverlight that actually takes advantage of it is the HyperlinkButton control. We use this control quite often in Navigation-enabled applications, since it allows us to target a particular Frame control to navigate to a Page by Uri. In the Silverlight Navigation Application project template, you’ll see XAML like this:
<navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed"> </navigation:Frame>
<HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}" NavigateUri="/About" TargetName="ContentFrame" Content="about"/>
This all works because the Frame control implements INavigate. In other words, there’s no magic there – you can use it too! Here’s the way the HyperlinkButton works when you’re trying to target an INavigate (approximately
):
- For each parent FrameworkElement going up the visual tree from the HyperlinkButton…
- Check to see if the FrameworkElement is an INavigate and that its name matches TargetName (ignored if TargetName is null or empty)
- If so, call INavigate.Navigate() on the FrameworkElement
- Otherwise, recursively search for an INavigate that’s properly named within each of the children of the FrameworkElement
- If no properly named INavigate was found, keep moving up the visual tree
- Check to see if the FrameworkElement is an INavigate and that its name matches TargetName (ignored if TargetName is null or empty)
In other words, the HyperlinkButton will search its way up and down the visual tree (technically doing a pre-order breadth-first search from each parent of the HyperlinkButton, working its way up the visual tree) for an appropriate INavigate to call.
So, what does all this INavigate stuff mean to me?
With that technical detail out of the way, the question that arises is: how can we use this to enable Page-relative navigation? Well, the reason navigation of a Frame works within Pages today is because the Frame control implements INavigate, and the HyperlinkButton works its way up the visual tree until it finds this.
For our purposes, this is great, since it means we can intercept the call to INavigate.Navigate() by implementing the interface somewhere between the HyperlinkButton and the Frame. There’s a convenient place for this, since applications that use Page/Frame and HyperlinkButtons within those pages have a visual tree like this:
- Application
- Layout
- Frame
- Page
- HyperlinkButton
- Other controls
- Page
- Other Controls
- Frame
- Layout
What I’m suggesting is that the Page we navigate to implement INavigate and turn page-relative Uri’s into application-relative Uri’s before handing them off the NavigationService (or the Frame) to actually perform the navigation.
I’ve gone ahead and extended my DynamicNavigation library to make DynamicPage implement INavigate to do what we want, but you could do the same on any subclass of Page (including every one of your Pages if you didn’t want a common base class). Here’s my simple implementation (with a switch to turn off this feature on DynamicPages):
public bool RelativeLinks { get { return (bool)GetValue(RelativeLinksProperty); } set { SetValue(RelativeLinksProperty, value); } } public static readonly DependencyProperty RelativeLinksProperty = DependencyProperty.Register("RelativeLinks", typeof(bool), typeof(DynamicPage), new PropertyMetadata(true)); private static readonly Uri basePlaceHolderUri = new Uri("none:///", UriKind.Absolute); #region INavigate Members public bool Navigate(Uri navigateUri) { string original = navigateUri.OriginalString; if (RelativeLinks && !navigateUri.IsAbsoluteUri && !original.StartsWith("/")) { Uri result; if (NavigationService.CurrentSource.IsAbsoluteUri) { result = new Uri(NavigationService.CurrentSource, navigateUri); } else { Uri baseUri = new Uri(basePlaceHolderUri, NavigationService.CurrentSource); result = new Uri("/" + basePlaceHolderUri.MakeRelativeUri(new Uri(baseUri, navigateUri)).OriginalString, UriKind.Relative); } return NavigationService.Navigate(result); } else { return NavigationService.Navigate(navigateUri); } } #endregion
Now, within the page, you can use Page-relative Uri’s on HyperlinkButtons. All you need to do is avoid setting a TargetName (either through a style or directly on the HyperlinkButton), and the Page will handle the navigation!
Page-relative Uri’s can take a variety of forms. Assuming the Page you’re currently on is “/MyLibrary;component/Views/Main/Page1.xaml”, the following transformations will occur (as an example):
- “Page2.xaml” –> “/MyLibrary;component/Views/Main/Page2.xaml”
- “./Page2.xaml” –> “/MyLibrary;component/Views/Main/Page2.xaml”
- “../Page3.xaml” –> “/MyLibrary;component/Views/Page3.xaml”
- “../Secondary/Page3.xaml” –> “/MyLibrary;component/Views/Secondary/Page3.xaml”
- “../../BasePage.xaml” –> “/MyLibrary;component/BasePage.xaml”
- “SubMain/Page4.xaml” –> “/MyLibrary;component/Views/Main/SubMain/Page4.xaml”
- “SubMain/Page4.xaml?a=b&c=d” –> “/MyLibrary;component/Views/Main/SubMain/Page4.xaml?a=b&c=d”
- “/MyLibrary;component/Views/Main/Page5.xaml” –> “/MyLibrary;component/Views/Main/Page5.xaml” (no change)
Cool! Can I see it in action?
Of course!
As always, you can play around with a running app that does this here:
Click the link at the bottom of that page to peform a relative navigation that should take you on a journey between a number of pages – all of which navigate using relative navigation.
For reference, here is the file structure for the sample application.
So, what’s your point?
Well, to sum it up – being able to do page-relative navigation increases the portability of your Pages. It’s especially useful if you use it in conjunction with UriMapping. With the technique above, the “relative-ness” refers to the user-facing Uri. This means that you can create UriMappings in order to create a “virtual” file structure, and all of your relative links should continue to work (and new ones might be possible!). Give it a shot and let me know what you think! I’m continuing to experiment with Navigation, always on the lookout for things that might improve the experience when working with it.
Enough already! Give me the goods!
Patience! You didn’t really think I’d leave you hanging, did you? Here you go:
- DynamicNavigation libraries (see my other posts for an introduction to what it provides and how to use it – 1, 2)
- Sample Source
Stop talking to yourself!
Okay.
Dynamic Navigation, Navigation, Relative Links, Silverlight, Silverlight 3
Update 2: Displaying background activity in a Silverlight RIA application
Posted by david.poll in Silverlight on September 14, 2009
Hi folks! It’s been a little while since I’ve blogged, but fear not, I’m still watching and hoping to blog more in the coming weeks.
In the meantime, it’s been brought to my attention by a few people now that there are a few issues with the Activity control, and I wanted to address them.
- Performance – A bit of a mea culpa on my part. I included a feature for the control that I’ve called “AutoBind”, whereby it would watch for changes to the visual tree of its contents and subscribe to any control that has a property whose name matches “ActivityPropertyName”. By default, this is great when working with .NET RIA Service’s DomainDataSource, since ActivityPropertyName is “IsBusy” by default, but it also turns out to be a hefty amount of work, constantly searching the visual tree and registering/unregistering event handlers. This wouldn’t be so bad, except that AutoBind defaults to true, meaning even if you’re not using this functionality, the Activity control is doing the work. Below, you’ll find a new version of the Activity control that amends the situation, making AutoBind default to false. This is the only change to the control since my last post on the matter, but I’d love to hear if you have thoughts about the control, this feature, or other requests!
- .NET RIA Services’ Business Application Template – So, the .NET RIA Services guys included with their July Preview a project template to help you get started with a RIA Services application. In this template, they included a dll with the Activity control in it. A few people have noted that it has a slightly different API than they’re used to seeing with the control, which is due to their use of the original version of the control that I posted (its API has changed a bit since then, and a number of bugs were fixed, including some layout issues). Anyhoo, feel free to pick up the latest version below!
So there you have it – just a few changes and things to note. You can find the control here:
Thanks for all the great feedback since I first posted this control. As usual, let me know if you have questions or issues!
.NET RIA Services, Activity Control, BusyIndicator, Silverlight, Silverlight 3, WCF RIA Services
On-demand loading of assemblies with Silverlight Navigation
Posted by david.poll in Silverlight on July 20, 2009
As those of you who’ve been reading my blog may know, I’ve been spending a bit of time with some enhancements to navigation in Silverlight surrounding the use of dynamically-loaded assemblies. I’ve still got a bunch of things I’d like to try to implement, but in the meantime I thought I’d share what I’ve got so far.
Now that I have a mechanism for navigating to Pages in dynamically-loaded assemblies in Silverlight, the question arises: how can I improve the user and developer experience around partitioning applications in this way?
In particular, this is the flow I’d like to be able to create:
- Developer knows the set of Pages his user will be able to navigate to, and partitions them into assemblies that he will load at runtime
- Furthermore, the developer knows the dependencies those assemblies have on other dynamically-loaded assemblies (e.g. multiple assemblies contain Pages that use DataGrid, but System.Windows.Controls.Data should be shared/downloaded when the first of those assemblies is downloaded)
- The user is presented with some sort of navigation UI (e.g. HyperlinkButtons, buttons that call Frame.Navigate(), etc.)
- When the user requests a page in an assembly that has not yet been downloaded, it should be automatically downloaded, and navigation with the Frame should only complete once the Page can be loaded.
With this on-demand loading behavior, deep-linking into applications with dynamically-loaded assemblies can be re-enabled (you’ll notice if you try to deep-link into my sample from my previous post about dynamically-loaded assemblies, you get an exception, since the assembly hasn’t been loaded yet).
I’m developing some utilities that will make this flow easier to accomplish. Please note that at this point all of the API, etc. is subject to change, and I’m definitely not making any assurances around bugs, quality, or anything of the sort, but I thought I’d share what I’ve been working on and start getting some feedback from you folks!
Anyhoo, let’s take this step by step:
Dividing an application into multiple assemblies
This is fairly straightforward, and something I’m sure most of you have been doing for a long time. For our purposes, there are a number of things to consider:
- Pages in these assemblies that will be dynamically loaded should use the DynamicPage and DynamicPageShim (or some other workaround you may have come up with) described in my earlier post
- Any dynamically-loaded assemblies need to be in a place accessibly using the WebRequest APIs in Silverlight. I usually put them in my ClientBin folder, and I used a post-build task to copy any dlls for those assemblies into the correct folder (feel free to see my Sample project for an example of this)
- The libraries I’ve built support loading DLLs as well as XAP and ZIP files with dlls in them. Just using DLLs is probably the easiest way to go, but using ZIP or XAP files will keep the transfer time/size small.
- Remember to take careful note of any dependencies between the libraries. You’ll need to make sure they’re all loaded into your application before attempting to use the assemblies.
One thing I might do in the future is (attempt to) make a project template that will create a XAP class library that places the XAP in the ClientBin folder for you. I’m still experimenting with how to do this, but it’s still worth noting that using XAPs can be problematic if you’re sharing libraries (VS will automatically package shared assemblies into your XAP, so you might end up with copies of System.Windows.Controls.Navigation.dll in 3 or 4 XAPs, and since they’re all packaged up with the rest of the assemblies, you’ll end up downloading the same DLL multiple times.
Describing how to load assemblies dynamically
I’ve created a little utility that I call “DynamicLoader,” which allows you to declare, in XAML, where your dynamic DLLs can be downloaded from and their interdependencies. In my App.xaml, I specify the various libraries that may be loaded dynamically (incidentally, some of these libraries are also in my XAP, and the loader will use the ones built into the XAP rather than re-downloading them automatically). I also describe the various interdependencies between my libraries. Some are unnecessary (because the dependencies are already in the XAP), but I chose to be explicit for some of the more complex ones to remove all doubt. An example (from my sample project) can be seen below.
<load:DynamicLoader x:Key="loader"> <load:AssemblyDescription AssemblyName="DynamicallyLoadedLibrary" Location="./DynamicallyLoadedLibrary.dll" /> <load:AssemblyDescription AssemblyName="DynamicallyLoadedLibraryVB" Location="./DynamicallyLoadedLibraryVB.dll" /> <load:AssemblyDescription AssemblyName="LargeDynamicallyLoadedLibrary" Location="./LargeDynamicallyLoadedLibrary.dll"> <load:Dependency AssemblyName="System.Windows.Controls" /> <load:Dependency AssemblyName="System.Windows.Controls.Data" /> <load:Dependency AssemblyName="System.Windows.Controls.Data.DataForm.Toolkit" /> <load:Dependency AssemblyName="System.Windows.Controls.Data.Input" /> <load:Dependency AssemblyName="System.Windows.Controls.DataVisualization.Toolkit" /> <load:Dependency AssemblyName="System.Windows.Controls.Navigation" /> <load:Dependency AssemblyName="System.Windows.Data" /> <load:Dependency AssemblyName="System.ComponentModel.DataAnnotations" /> </load:AssemblyDescription> <load:AssemblyDescription AssemblyName="System.Windows.Controls" Location="./System.Windows.Controls.dll" /> <load:AssemblyDescription AssemblyName="System.Windows.Controls.Data" Location="./System.Windows.Controls.Data.dll"> <load:Dependency AssemblyName="System.ComponentModel.DataAnnotations" /> <load:Dependency AssemblyName="System.Windows.Controls.Data.Input" /> <load:Dependency AssemblyName="System.Windows.Data" /> </load:AssemblyDescription> <load:AssemblyDescription AssemblyName="System.Windows.Controls.Data.DataForm.Toolkit" Location="./System.Windows.Controls.Data.DataForm.Toolkit.dll"> <load:Dependency AssemblyName="System.ComponentModel.DataAnnotations" /> <load:Dependency AssemblyName="System.Windows.Data" /> </load:AssemblyDescription> <load:AssemblyDescription AssemblyName="System.Windows.Controls.Data.Input" Location="./System.Windows.Controls.Data.Input.dll"> <load:Dependency AssemblyName="System.ComponentModel.DataAnnotations" /> </load:AssemblyDescription> <load:AssemblyDescription AssemblyName="System.Windows.Controls.DataVisualization.Toolkit" Location="./System.Windows.Controls.DataVisualization.Toolkit.dll" /> <load:AssemblyDescription AssemblyName="System.Windows.Controls.Navigation" Location="./System.Windows.Controls.Navigation.dll" /> <load:AssemblyDescription AssemblyName="System.Windows.Data" Location="./System.Windows.Data.dll" /> <load:AssemblyDescription AssemblyName="System.ComponentModel.DataAnnotations" Location="System.ComponentModel.DataAnnotations.dll" /> </load:DynamicLoader>
The Location specified in each AssemblyDescription is a URI. In this case, all of my dlls are in my ClientBin directory, so they all begin with “./”, but these could be any URI that can be reached by the Silverlight application. Furthermore, if you wish to use the new ClientHttp networking stack to do the downloading, you can choose to do so (as part of the AssemblyDescription).
The loader will asynchronously load any requested library (by name), and will only fire Loaded events once all of each assembly’s dependencies have been loaded. This allows us to know when it’s safe to try to navigate to a Page in a dynamically-loaded assembly.
Creating Navigation UI
Nothing too special to share here. HyperlinkButtons use the exact same URI scheme as before (for navigating to pages in referenced/dynamically-loaded assemblies). Here’s what my XAML for my navigation bar looks like:
<Border x:Name="LinksBorder" Style="{StaticResource LinksBorderStyle}"> <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}"> <HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}" NavigateUri="/Home" TargetName="ContentFrame" Content="home"/> <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/> <HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}" NavigateUri="/About" TargetName="ContentFrame" Content="about"/> <Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/> <HyperlinkButton x:Name="csharp" Style="{StaticResource LinkStyle}" IsEnabled="True" NavigateUri="/DynamicallyLoadedLibrary;component/CSDynamicPage.dyn.xaml" TargetName="ContentFrame" Content="C# Class Library"/> <Rectangle x:Name="Divider3" Style="{StaticResource DividerStyle}"/> <HyperlinkButton x:Name="vb" Style="{StaticResource LinkStyle}" IsEnabled="True" NavigateUri="/DynamicallyLoadedLibraryVB;component/VBDynamicPage.dyn.xaml" TargetName="ContentFrame" Content="VB Class Library"/> <Rectangle x:Name="Divider4" Style="{StaticResource DividerStyle}"/> <HyperlinkButton x:Name="large" Style="{StaticResource LinkStyle}" IsEnabled="True" NavigateUri="/LargeDynamicallyLoadedLibrary;component/LargeDynamicPage.dyn.xaml" TargetName="ContentFrame" Content="Large Class Library"/> </StackPanel> </Border>
Again, nothing too scary here – the XAML remains identical to its form without the dynamically-loaded libraries.
Adding on-demand navigation
The other important piece of this puzzle is a Frame control that uses the loader to ensure that dynamically-loaded libraries are loaded into the AppDomain before attempting to navigate to pages within those libraries. I’ve provided a derived Frame class (DynamicNavigation.Utilities.Controls.Frame) that does precisely this. As with my DynamicPage class, you should expect a few quirks, since the Frame class from which it derives doesn’t have any virtual methods. Don’t cast my Frame to a System.Windows.Controls.Frame if you don’t want to get a bunch of extra events for Loading, Loaded, etc. Also, since I couldn’t replace the NavigationService, if you subscribe to events on that service, you’ll see a large number of extra events being raised. Neither of these eccentricities should hamper functionality, but you may see some unexpected activity if you watch those events!
My Frame class takes an DynamicLoader and delegates all loading of dynamic libraries to it. Here’s what my XAML declaration of the Frame looks like (plus or minus some extraneous attributes):
<dnav:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" DynamicLoader="{StaticResource loader}" Source="/Home"> <dnav:Frame.UriMapper> <uriMapper:UriMapper> <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/> <uriMapper:UriMapping Uri="/{a};component/{p}" MappedUri="/{a};component/{p}" /> <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/> </uriMapper:UriMapper> </dnav:Frame.UriMapper> </dnav:Frame>
And that’s it! With my custom Frame class, it take *zero* code to get dynamic loading up and running – only XAML is necessary. Attach an Activity control to the loader, and you’re hot to trot!
In Conclusion
Well, there you have it! I’d like to remind folks that none of the APIs here are intended to be concrete, and I make no guarantees of quality – I’m just trying to demonstrate how it can be done, and if the interest is there, I’ll keep investing some time in exploring this. I’ve got a bunch of ideas for where I can go from here, things I’d like to change/improve, and I look forward to playing some more with these prototypes.
Without further ado, here are the links I’m sure you’re all waiting for:
- DynamicNavigation libraries (for your consumption)
- Live Sample
- Sample Source
What’s next?
Well, I’ve got a lot of ideas, and I’d love to hear some from you all. Here are some of mine (not making any promises – I’m just experimenting with these):
- Cache to IsoStore – downloaded libraries could be stored in Isolated Storage and loaded from there if they’re already on the machine
- Install – When the application is taken out of browser, automatically download the assemblies to Isolated Storage and load from there, allowing the entire application to be run offline
- URI scheme/custom loading – I’d love to be able to just specify the whole deal in a URI to a page, such as “pack://http:,,www.davidpoll.com,Samples,ClientBin,MyLibrary.dll;component/Page2.dyn.xaml” and not need the big manifest with assembly name/location mappings and dependencies.
- Dependencies for particular URIs – allows the Frame control to pre-load assemblies before a particular page is loaded, even if the page is a local one (thanks, Austin, for this idea!)
Anyway, I’ve got a thousand other ideas racing through my mind right now, but those are just a few. What do you think? Is there anything you dislike about my approach or anything you particularly like? Speak up!
BusyIndicator, Dynamic Navigation, Navigation, Silverlight, Silverlight 3
Silverlight 3 Navigation: Adding transitions to the Frame control
Posted by david.poll in Silverlight on July 19, 2009
Continuing with my recent theme of enhancing the built-in support for Navigation in Silverlight 3, I thought I’d use this post to look briefly at enhancing user experience during navigation. On the surface, the Frame control is pretty unexciting from a UX perspective – its job is really just to display pages as a result of requests to navigate (either through the browser’s address bar, responding to HyperlinkButton clicks, or direct calls to Frame.Navigate()). It has barely any UI of its own, and can usually be thought of as an enhanced ContentControl (incidentally, it is one!).
Most of the time, all the Frame is doing is displaying a Page, and this (in my opinion at least) is an appropriate presentation – the Frame shouldn’t get in the way of displaying my Pages. Where I do want the Frame to intervene now and then is during page changes, allowing me to provide rich transitions when navigating from Page to Page. The Frame control provided in the Silverlight 3 SDK doesn’t do anything for us as far as transitions go out of the box, but with a little templating magic and the Silverlight Toolkit’s TransitioningContentControl (which Jesse Liberty has a great blog post on), I think we can get the desired effect!
Let’s begin by taking a peek at the ControlTemplate for the Frame control:
<ControlTemplate TargetType="navigation:Frame"> <Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}"/> </Border> </ControlTemplate>
As you can see, there’s very little to it: a Border and a ContentPresenter – with all the appropriate TemplateBindings.
All we have to do to get transitions on the Frame control is replace that ContentPresenter with the TransitioningContentControl:
<ControlTemplate x:Key="TransitioningFrame" TargetType="navigation:Frame"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> <toolkit:TransitioningContentControl Content="{TemplateBinding Content}" Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Transition="<Transition Name>" /> </Border> </ControlTemplate>
The “toolkit:” xml namespace uses the following definition (since you can find the TransitioningContentControl in the System.Windows.Controls namespace and the System.Windows.Controls.Layout.Toolkit assembly): xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
To change the type of transition the Frame will use, just change the value of the Transition property on the TransitioningContentControl.
There’s not much more to it! Short, sweet, and to the point
.
Check out the live sample and source if you’re curious:
Caveats and Questions
I know you’d be disappointed if I really left it at that, so here’s the one caveat I’ve observed with this technique:
My dynamically-loaded libraries with navigation workaround will cause a few problems with this technique, since it sets the Frame’s Content property twice (once to load the DynamicPageShim, the other to load the DynamicPage itself). The result is that you will see the Frame transition to a blank page and then to the DynamicPage with your content. So here’s the question: how important is this transitioning behavior to you? There are two options for how I proceed here, neither of which are truly ideal:
- Leave DynamicPage and DynamicPageShim as-is and live with the slight wonkiness during transitions.
- Make DynamicPageShim avoid changing the content of the Frame twice (making transitions work just fine
). This will mean that you won’t be able to use the DynamicPageexactly as you would the standard Page (e.g. binding to "Frame.Content.MyCustomPropertyOnMyPage” won’t be possible… instead you’d have to bind to “Frame.Content.Content.MyCustomPropertyOnMyPage”).
Neither of these options significantly hampers functionality – just impacts either user experience or developer experience, but I’d love to hear your thoughts! Do you prefer option 1 or option 2?
In the meantime, I’m working on some fun little utilities that will make dynamically loading assemblies with navigation much simpler and more declarative, and am looking forward to blogging it when it’s ready!
Update: Credit where credit is due
About 10 minutes after I posted this, I came across someone (Koen Zwikstra) who posted almost the exact same thing before me, and I want to make sure he gets fair mention for getting there before me
You can find his post here: http://firstfloorsoftware.com/blog/animated-page-navigation-in-sl3/
Sorry for duplicating! Great stuff!
Recent Posts
- To XAML, with love (an experiment with XAML Serialization in Silverlight)
- Taking Microsoft Silverlight 4 Applications Beyond the Browser (TechEd WEB313)
- Common Navigation UI and Authorization-driven Sitemaps
- Samples updated and code in comments
- A “refreshing” Authentication/Authorization experience with Silverlight 4
- Making printing easier in Silverlight 4
- Silverlight 4 Released!
- New in the Silverlight 4 RC: XAML Features
Tags
.NET RIA Services Activity Control Authorization Blend BusyIndicator CollectionView ContentLoader Controls Data Binding Dynamic Navigation Fun Konami Code logging MIX '10 Navigation Off-Topic Out-of-browser PDC PDC09 Personal Printing Projects Relative Links Server Silverlight Silverlight 3 Silverlight 3 Beta Silverlight 4 Silverlight 4 Beta Silverlight 4 RC Silverlight and Beyond (SLaB) Silverlight Toolkit Sitemap TechEd TechEd North America 2010 Trusted Applications Validation Visual Studio 2010 WCF RIA Services XAML XamlSerializerTwitter: @depoll
- @ShawnWildermuth @jlfergus @erik_mork ;) sorry -- just repeated info. Thanks for beating me to it, Shawn ;)September 1, 2010 7:12
- @jlfergus @erik_mork @shawnwildermuth it's in the toolkit as the BusyIndicator controlSeptember 1, 2010 7:11
- @JeffHandley consider yourself globalized. ;)August 13, 2010 8:30
Other Silverlight Blog Posts- Silverlight, HTML5 and the future September 2, 2010
- Guidance on Making Silverlight Apps Accessible September 1, 2010
- The Future of Silverlight September 1, 2010
Disclaimer
The content on this site represents my own personal opinions and thoughts at the time of posting, and does not reflect those of my employer in any way.












