SlickThought - Channel 9

Building Multiscreen Applications - Part 1

Jeff Brand — Tue, 01 Mar 2011 19:19:47 GMT

This multi-part screencast series will look at the fundamentals involved in building multiscreen applications using Microsoft Silverlight and Visual Studio 2010. Starting with an overview of the Microsoft ecosystem, Part 1 lays the foundation for future episodes, introducing key concepts that will be developed throughout the series. This includes a basic review of MVVM and project setup, as well as other items developers should concern themselves with as they get ready to build a multiscreen solution.

Project code can be downloaded here.

Simple Dependency Injection with XAML

Jeff Brand — Tue, 18 Jan 2011 21:25:39 GMT

Have you ever wanted the flexibility of dependency injection without having to implement a full-blown IoC solution? Maybe you just want an easy way to pass concrete services to your ViewModel? This short video will show you you can use XAML to configure your ViewModels to provide a property-based dependency injection solution. You can also read a full write up and download demo code on my blog.

Three Reasons Developers Should Use Expression Blend

Jeff Brand — Fri, 15 Oct 2010 18:35:16 GMT

Lots of developers are building XAML-based applications today. Be it WPF, Silverlight or Windows Phone 7, I have seen a lot of people struggle with certain tasks in Visual Studio that would be much easier if undertaken in Expression Blend. Blend seems to be somewhat intimidating to developers, especially those that are already wrestling with learning XAML. Having spent time in both tools, I can tell you that Blend can make three things dramatically easier, and you should learn how to do these three things with Blend, even if you never use it for anything else.

Demo code

Managing Windows Phone 7 Trial Applications

Jeff Brand — Mon, 30 Aug 2010 18:29:00 GMT

Windows Phone 7 provides the LicenseInformation class that includes the IsTrial() method. IsTrial() allows you to check, at runtime, if the running application has been installed from the Marketplace as a trial application, or if the user has purchased the application. Developers are able to use IsTrial() to change the behavior of their application based on whether or not the user is running a trial version or a paid for version. Unfortunately for WP7 devs, there is no easy way to control the IsTrial() results when developing and debugging their applications. IsTrial() will always return False when developing an application. Even more disappointing, LicenseInformation is a sealed class and there is no ILicenseInfo interface that you could use to mock out your own implementation while developing.

In addition, each developer is left to his or her own devices to come up with a system for controlling how their trial software behaves. Simple things like turning off features in the trial version is pretty straightforward, but if you want to have more complex behavior, things get trickier. What if you want someone to be able to use your application for 30 days before you disable features? How about 10 uses of the application before they need to buy the full version? You are on your own.

TrialManager is a simple piece of code that you can add to any WP7 project to help manage the behavior of your trial apps. TrialManager will also make it easier to simulate you application running in Trial mode when creating your apps. You can get the source to TrialManager here. Feel free to use it, modify, etc. The only licensing restriction is that I ask you send me an email, letting me know you are using the code in some form or fashion.

Get more details at http://slickthought.net/post/2010/08/30/Managing-Trial-Applications-for-Windows-Phone-7.aspx

Source code download

Custom Per-Page Transitions for Windows Phone 7

Jeff Brand — Tue, 08 Jun 2010 09:00:00 GMT

Continuing our previous explorations of the TransitioningContentControl (here and here – all WinPhone content here), we will now take a look at how we can extend the TCC to allow transitions to be defined on a per-page basis. Simply put, we would like to have a default transition for all pages, and to provide a list of custom transitions to use on a page-by-page basis. In addition to this article, you can watch a screencast of making these changes, and source is linked at the end of the article.

Our first step is creating a simple class that will be used to hold Page-to-Transition mappings. That class is shown below:

namespace System.Windows.Controls
{
public class PageTransitionMapping
{
public string Page { get; set; }
public string Transition { get; set; }
}
}

I added this class to the TCC folder from the previous screencast (download here). Notice that I changed the namespace to match the TCC’s namespace.

Next, the TCC is modified, allowing us to provide Page-To-Transition mappings via the App.xaml file. See below:

public class TransitioningContentControl : ContentControl
{
 
        private List<PageTransitionMapping> _mappings = new List<PageTransitionMapping>();
        public List<PageTransitionMapping> PageTransitionMappings { get { return _mappings; } }
  …

The _mappings field stores a List<> of PageTransitionMapping objects. These mapping objects are created by accessing the PageTransitionMappings property via App.xaml as shown below

 x:Name="RootFrame" Source="/MainPage.xaml">
            >
                >
                     Content="{TemplateBinding Content}" Style="{StaticResource TransitioningStyle}">
                        >
                             Page="AprilCTP.Views.Favorites.Default" Transition="SwingTransition" />
                        >
                    >    
                >
            >

In this example, the Default.xaml page in the Views/Favorites folder has been mapped to use the SwingTransition. Just like before, all of the transitions used by the TCCC must be in the TCC’s Style definition (specifically, in the ControlTemplate’s VisualStateManager).

The next to last step is to update the way the TCC applies transitions to pages as they are displayed. To do this, we update the TCC’s StartTransition() method as shown below:

 private void StartTransition(object oldContent, object newContent)
        {
            // both presenters must be available, otherwise a transition is useless.
            if (CurrentContentPresentationSite != null && PreviousContentPresentationSite != null)
            {
                PageTransitionMapping transitionMapping = null;
                var newPage = newContent as PhoneApplicationPage;
 
                if (newPage != null)
                {
                    string pageType = newPage.GetType().ToString();
                    transitionMapping = (from m in this.PageTransitionMappings where m.Page == pageType select m).SingleOrDefault();
                }
 
 
 
                // and start a new transition
                if (!IsTransitioning || RestartTransitionOnContentChange)
                {
                    IsTransitioning = true;
 
                    if (transitionMapping != null)
                    {
                        Transition = transitionMapping.Transition;
                    }
                    else
                        Transition = _standardTransition;
 
                    CurrentContentPresentationSite.Content = newContent;
                    PreviousContentPresentationSite.Content = oldContent;
                    VisualStateManager.GoToState(this, NormalState, false);
                    VisualStateManager.GoToState(this, Transition, true);
                }
            }
        }

There are a couple of important points. First, the CurrentContextPresentionSite.Content = and the PreviousContentPresentationState.Content = lines of code have been moved a bit from where they appeared in the original code. Second, there is no real error handling for cases where you enter the wrong name for your custom transition inside the App.xaml mapping. This is more “proof of concept” code than production ready code. The TCC has a GetStoryboard method that you can use to make sure the transition is available – it is just a matter of where you want to detect that and how you want to handle it in the case that a transition does not exist (falling back to the default transition is probably easiest).

The last thing we have to do is set the value for _standardTransition. We will set its value in the OnApplyTemplate() method inside the TCC. This method gets called one time when the TCC is first created and the template is applied. We will add the declaration for _standardTransition immediately before the method (stick it where ever you like):

        private string _standardTransition;
        /// 
        /// Builds the visual tree for the TransitioningContentControl control 
        /// when a new template is applied.
        /// 
        public override void OnApplyTemplate()

The OnApplyTemplate discovers the value of the TCC Transition property that was set in the Style in the App.xaml file. Setting _standardTransition to this value lets us use it whenever there is not a custom page transition defined. Update the OnApplyTemplate() method as shown:

            ^^^^ REST OF METHOD ^^^^
            _standardTransition = Transition;
            VisualStateManager.GoToState(this, NormalState, false);
        }

I have included the source for a working solution here.

Windows Phone 7 April CTP and TransitioningContentControl

Jeff Brand — Thu, 20 May 2010 20:36:00 GMT

In my original screencast (my blog or on here on Channel 9), I showed you how to use the Silverlight Toolkit’s TransitioningContentControl to add automatic transitions between pages of your Windows Phone 7 Silverlight application. A few days after recording and posting that screencast, Microsoft released an updated version of the tools and the emulator. Soon after, I started to get reports from folks watching my screencast that the TransitioningContentControl not only didn’t work with the April CTP release, but it prevented their entire application from running.

Bummer! I started to dig into it, and it “appears” that the TransitioningContentControl is suffering from the bug talked about here. I say it “appears” to be related to that because the symptoms are the same, but unfortunately, the provided fix does not work on the System.Windows.Controls.Layout.Toolkit assembly that is created by building the Silverlight Toolkit. I think it has something to do with the fact that the System.Windows.Controls.Layout.Toolkit project uses the output of several other projects, which are probably signed as well. I am not sure how that propagates into the final assembly, but the Powershell script does not fix things.

To solve the problem, I just went “brute force” and added the necessary source files from the TransitioningContentControl project to my own project and called it good. A better step would have been to break that source out into its own project and create an unsigned assembly containing just the TCC that I could then reuse between Windows Phone projects, but I am assuming at this point that whatever the bug is (signed assembly or other), will be fixed in a future release. In the interim, this get the job done.

Watch the short video (5 minutes) to see how to get things set up. Skip to the 2:30 mark if you want to get right to the step required to add TCC directly to your project.

Download source here

Simplify Page Transitions in Windows Phone 7 Silverlight Applications

Jeff Brand — Fri, 30 Apr 2010 15:37:00 GMT

Update: To see how to extend this solution for custom per-page transitions, see my follow-on article.

If you have played around with Silverlight on Windows Phone 7, one thing you may have tried to figure out is how to add nice transitions between different pages of your application. By default, Windows Phone page transitions aren’t really transitions at all. The new PhoneNavigationPage is just popped into the root PhoneNavigationFrame. Effective, yes. Cool? Certainly not. Face it, modern mobile applications need to not only be functional, but also stylish. Simple “snap” transitions just don’t cut it.

The most common solution to this problem is to use brute force and manage the transitions yourself. You commonly see a “pattern” used in WP7 apps where events in your current page launch a Storyboard animation. When that animation is complete, the actual navigation to the new page is invoked and the new page then runs its own Storyboard once it is loaded. It looks something like this…

// CURRENT PAGE private void CurrentPage_Click(object sender, EventArgs e) 
{ 
    SomeStoryboard.Completed += new EventHandler(SomeStoryboard_Completed);     
    SomeStoryboard.Begin(); 
}
 





void SomeStoryboard_Completed(object sender, EventArgs e) 
{ 
    NavigationService.Navigate(new Uri("/Favorites", UriKind.Relative)); 
}

// NEWPAGE 
protected override void OnNavigatedTo(Microsoft.Phone.Navigation.PhoneNavigationEventArgs e) 
{ 
    base.OnNavigatedTo(e);  
    SomeNewStoryboard.Begin(); 
}

It’s a straightforward solution, and it works just fine if your app has only a few pages. If you have lots of pages in your application, however, it becomes quite tedious and hard to maintain.

A better solution can be found by turning to the Silverlight Toolkit. The great thing about having Silverlight on WP7 is that you can leverage many existing Silverlight assets. In this case, we leverage the TransitioningContentControl from the Toolkit. The TransitioningContentControl was created for the traditional navigation-based Silverlight application to solve the same problem we are currently facing.

To get started, download the Silverlight Toolkit from CodePlex. Once installed, you will need to add the System.Windows.Controls.Layout.Toolkit assembly to your WP7 project.

If you are not familiar with the TransitioningContentControl, it's a fairly simple control. The TCC is comprised of two ContentPresenters – current and previous. When you update the Content property of the TCC, it will take the content of the CurrentContentPresenter (if present) and move it to the PreviousContentPresenter. The new content is loaded into the CurrentContentPresenter. The TCC, however, manages the visibility of the previous and current ContentPresenters so that the “old” content is visible and the “new” content is hidden. It then uses a Storyboard, which is defined as part of the TCC’s VisualStateManager, to transition from the “old” content to the “new” content. If you are not familiar with Storyboards, the Visual State Manager, or other designer-type topics, have no fear. The TCC comes with a set of standard transitions, which you can use out of the box.

Getting the TCC to work with our WP7 app is a simple process. First, we need to modify the ControlTemplate for our PhoneNavigationFrame to use the TCC. By doing so, we automatically enable transitions between any PhoneNavigationPages we add to our app. To change the PhoneNavigationFrame, open the App.xaml file. Then, add a couple of namespaces to the xaml:

xmlns:layout="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

Now, modify the PhoneNavigationFrame as shown below:

The TCC has its Style property set to a StaticResource. This Style provides the default transitions and is also where you would add your own VisualStates and Storyboards if you would like to add custom transitions. This Style can be found in the Silverlight Toolkit in the TCC Sample Application, or you can get it from the sample WP7 application linked to at the end this article. The Style is long, so I won’t show the entire thing here, but the first parts of the Style are included below to give you an idea of what the Style contains and how it is used by the TCC.