Using async and await in Silverlight 5 and .NET 4 in Visual Studio 11 with the async targeting pack

Pete Brown — Tue, 22 May 2012 21:13:39 GMT

Last September, I introduced the idea of Tasks in Silverlight.One of the things I really like about .NET 4.5, and the C# compilerthat comes with it, is the ability to simplify asynchronous code byusing the async modifier and await operator. Just yesterday, I posted a bit on how these two keywords are used bythe compiler to take care of all the heavy lifting of asynchronouscode.

The key thing to note here is that the work is done bythe compiler, not the runtime. That means that if you canuse the latest C# compiler, you can take advantage of this newfeature. A grasp of the async pattern and these two keywords willalso help prepare you for Windows Metro development. Notethat Silverlight doesn't have the same "asynchronous everywhere"set of APIs that you'll find in WinRT or .NET 4.5 so async andawait won't be quite as useful here as they are there, but there'ssome help for that too (read on). You can still createyour own async methods, however, which is especially useful if youplan to share code with a WinRT XAML application.

I'll focus on Silverlight 5 here, but understand that this workswith .NET 4 in VS11 as well. Note also that I'm using Visual Studio11 beta for this post, so final details may change when VS11 isreleased. Also, Visual Studio 11 and the compiler which supportsasync/await requires Windows 7 or Windows 8. This will not work onWindows XP or a Commodore 128.

In Visual Studio, create a new Silverlight application.

Choose all the normal options in the project creation dialog(yes, create a new site, no on RIA)

For the MainPage.xaml, add a single button and wire up an eventhandler.

<UserControl x:Class="SilverlightAsyncDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="TestAsync"
                Content="Press Me!"
                FontSize="25"
                Width="200"
                Height="75"
                Click="TestAsync_Click" />
    </Grid>
</UserControl>

The next step is to add the Async Targeting Pack. I'll use NuGet to grabit.

Pick your favorite way to use NuGet. Some prefer the console.I'm going to use the project's context menu and select "ManageNuGet Packages". From there, I'll search forAsyncTargetingPack.

Once you see it, click "Install", accept the terms (maybe evenread them first), then close the NuGet package manager. You'llnotice that the Silverlight project now includes a reference to theMicrosoft.CompilerServices.AsyncTargetingPack Silverlight 5library.

A simple example using await

If you have a call which uses the async callback pattern, suchas with a WebClient in Silverlight, using await is pretty easy, dueto the built-in extension methods:

private async void TestAsync_Click(object sender, RoutedEventArgs e)
{
    var uri = new Uri("http://localhost:10697/SilverlightAsyncDemoTestPage.html");
       
    var client = new WebClient();

    var results = await client.DownloadStringTaskAsync(uri);

    Debug.WriteLine(results);
}

Note that the event handler must be marked as async in order touse the await keyword.

These extension methods, DownloadStringTaskAsync in thisexample, are included in the AsyncCompatLibExtensions installedwith the async targeting pack.

The extension methods mimic many of the same async functionsalready available in .NET 4.5. That's great for compatibility andto help reduce how many different approaches you need to learn.

Give me something to wait on

"Hey teacher! I've got my pencil! Now give me something to writeon." - Pre-geriatric David Lee Roth

Let's do something a little more typical. In this case, I'mgoing to create a web service that we'll use asynchronously.

In the web project, create a "Services" folder and in that,create a new Silverlight-Enabled Web Service namedCustomerService.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;

namespace SilverlightAsyncDemo.Web.Services
{
    [ServiceContract(Namespace = "uri:demo.silverlight.async")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class CustomerService
    {
        [OperationContract]
        public List<Customer> GetCustomers()
        {
            string[] firstNames = new string [] {"Pete", "Joe", "Ima", "John", "Jim", "Scott", "George", "Frank", "Al", "Jeremy", "Jason", "Alex", "Bob", "Bill", "William", "Severus", "Johnny", "Albus", "Han", "Harry", "Chris", "Christine", "Kristen", "Amy", "Leia", "Erin", "Heather", "Melissa", "Abby", "Ben", "Alice", "Morgan", "Chip"};
            string[] lastNames = new string [] {"Brown", "Jones", "Braxton", "Huxley", "Solo", "Organa", "Vader", "Skywalker", "Potter", "Dumbledore", "Snape", "Avatar", "Cranks", "Bravo", "Grime", "Gee", "A.", "B.", "C.", "D.", "E.", "Z.", "X.", "Walker", "Franklin", "Moore", "Less"};

            Random rnd = new Random();
            const int CustomerCount = 200;

            var customers = new List<Customer>();

            // generate a bunch of dummy customer data
            for (int i = 0; i < CustomerCount; i ++)
            {
                int firstIndex = rnd.Next(0, firstNames.Length-1);
                int lastIndex = rnd.Next(0, lastNames.Length-1);

                customers.Add(
                    new Customer()
                        {
                            FirstName = firstNames[firstIndex],
                            LastName = lastNames[lastIndex]
                        });
            }

            return customers;

        }
    }

    public class Customer
    {
        public string LastName { get; set; }
        public string FirstName { get; set; }
    }
}

Build the solution, and then add a service reference from theSilverlight client. When creating the service reference, name thenamespace "Services". But before you leave this dialog, we have oneVERY important thing to check. Click the "Advanced" button

Foiled! We can't generate task-based service references. Why?Well, Silverlight didn't have the necessary support until the asynctargeting pack. So, we'll have to do this manually. If you wereusing .NET 4, you could simply generate Task-based operations andbe done with it.

NOTE
If we were using RESTful calls, the "add service reference"stuff doesn't come into play at all - it's all justPOST/GET/DELETE/PUT/PATCH with a URL. SOAP, which is what manyfolks use behind the firewall, is more difficult to work with, sothe service reference helps. I'm a big fan of the ASP.NET Web APIand RESTful services. You should check them out.

Creating an async-friendly wrapper for the servicereference

Making your service method awaitable certainly makes it easierto consume by other developers, and easier to work into your ownapplication workflow (especially if you have service calls thatrely on the results of other service calls). The code to make itawaitable is not very complicated at all. However, I like to putthis type of code into a separate service proxy or client class inthe Silverlight project.

I created a new project folder named "Services" in theSilverlight project. In that, I added a new class named"CustomerServiceProxy". The code for the proxy is as follows:

using System.Collections.ObjectModel;
using System.Threading.Tasks;

namespace SilverlightAsyncDemo.Services
{
    public class CustomerServiceProxy
    {
        public static Task<ObservableCollection<Customer>> GetCustomers()
        {
            var tcs = new TaskCompletionSource<ObservableCollection<Customer>>();

            var client = new CustomerServiceClient();

            client.GetCustomersCompleted += (s,e) =>
                {
                    if (e.Error != null)
                        tcs.TrySetException(e.Error);
                    else if (e.Cancelled)
                        tcs.TrySetCanceled();
                    else
                        tcs.TrySetResult(e.Result);
                };

            client.GetCustomersAsync();

            return tcs.Task;
        }
    }
}

The code for this was adapted from the Task-based AsynchronousPattern whitepaper listed under "Additional Information" below. Thetask is set up to return an ObservableCollection of Customers,which is (by default) what the service reference code generationcreated for me in the CustomerServiceClient class. (I also love howwe managed to get both spellings of Canceled into the same methodO_o.)

Once you have the proxy created, it may be used from theViewModel, or any other code. Here it is in the button-click codeon MainPage. As before, the event handler has been marked with theasync modifier in order to support using the await operator.

private async void TestAsync_Click(object sender, RoutedEventArgs e)
{
    var customers = await CustomerServiceProxy.GetCustomers();

    foreach (Customer c in customers)
    {
        Debug.WriteLine(c.FirstName + " " + c.LastName);
    }
}

This can serve as a good starting point for your own code. Notonly will it make your async code easier to work with when usingVisual Studio 11, but it will also help you bridge towardsand share code with .NET 4.5 WPF, and to Metro style XAMLapplications.

Additional Information

Download: Task-based Asynchronous Pattern
Simplifying Async Networking with Tasks in Silverlight 5
Under the covers of the async modifier and await operator in .NET4.5 and C# Metro style applications

Yet Another Podcast #65–Windows 8 with Michael Crump

Tue, 22 May 2012 21:03:21 +0000

My new role at Microsoft

Pete Brown — Tue, 22 May 2012 18:27:40 GMT

This past Monday (May 14th), I officially started a new role atMicrosoft. I like to be as transparent as possible, so I thoughtI'd share with you all the details of this role as well as where Iwas before I moved to it.

TL;DR:
XAML. Windows. Developers. 'nuf said.

A little (optional) history

I've been working for Microsoft for a bit over two and a halfyears now. In that time, I've learned that the old cliché about theonly constant being change is more true for Microsoft than justabout any other place I've seen. Mixing up teams, offices etc. fromtime to time helps make the orgs more efficient, and injects newideas into groups.

When I was hired by Scott Hanselman in fall 2009, my primaryfocus was to create a lot of content for WindowsClient.net and Silverlight.net,as well as my blog. In addition to Scott, the team I joinedincluded Tim Heuer, Rey Bango, Joe Stagner, Jesse Liberty and JonGalloway. A few months later, Tim Heuer fulfilled a personal dreamand moved to the one of the product teams. Ten months after Ijoined, Scott moved to the Web team, and Rey Bango moved to anotherorg to focus on some initiatives that he had been leading. Some ofthis was due to the reorg that created the brand new organization(with all brand new leadership) my team was moved to.

The people I worked with and for in that org were awesome. I'veenjoyed that role, and particularly enjoyed working closely withpatterns & practices, MSDN, and more.

When Scott moved to the web team, I was given the lead of theCommunity Team which by then included me, Jesse Liberty, JonGalloway, and Joe Stagner. We accomplished some really greatthings, but at the same time, found ourselves focusing on tasks andpriorities which didn't quite fit the emerging mission, or in somecases the capabilities, of our new org. Joe and Jesse moved on fortheir own reasons, and are both now doing awesome stuff. Jon and Istayed in the org, but a team of two is hard to keep effective andimpactful, despite excellent management support and an org full ofpassionate and interesting people.

Jon and I agreed that he should pursue his interests and move to the Azure/Web evangelism team,a move that really fit what he wanted to do, and does best.Jon is an awesome guy, and I really enjoyed having him workfor me. We continue to work together of course; the onlybig change for us with his move is that I no longer need to approvehis expense reports (yay!). I was certainly able to stay where Iwas, but once I was sure Jon was well-settled, and I no longer hadany direct reports, I was free to pursue something I was trulyexcited about.

My interests and passions

I love working with XAML. Most of you have probably figured thatout. It's not my only interest by far, but it is a strong one. Mytechnical passions, in no particular order are:

Client application development, primarily on Windows (I don'town a Mac, and it's been around 12 years since I last ran a Linuxbox)
Open source hardware (and general maker / electronics / CNC /3d Printing and more)
Open source software
User experience and (to my limited ability) graphicsdesign

I especially enjoy writing and speaking about C# + XAML,although I'm starting to dabble in C++ + XAML (say that out loud)as well. I've always liked working with Silverlight and WPF, andthe communities of people building awesome stuff using them.Lately, I've been working a lot more with Windows 8 as well. I'mreally excited about what I see coming for Windows, and for Windows8 devices like tablets/slates. In fact, some time ago, Icommitted to creating a Windows 8 XAML book with Manning (the firstMEAP chapters will be out very soon - promise!).

I enjoy building applications and gadgets. I also lovespeaking to developers, and wanted to speak moreat larger events. I like helping to represent the productteams at Microsoft, as I've done for Silverlight and WPF. I wantedto join an org where I can work with the technologies I love, thecommunities I know and respect, and one which would allow me tocontinue the personal policies of honesty, openness,transparency, clarity, and authenticity that were soimportant when working in Hanselman's (and later my) team.

The new role

To that end, I've taken a very cool role working for GiorgioSardo as a corporate Technical Evangelist on the WindowsPlatform Evangelism team, focusing on XAML. (This is thecurrent incarnation of the team John Papa was on and that BrianKeller, Jaime Rodriguez, and Giorgio Sardo, among others, arecurrently on.) I will continue to be a remote employee, working outof my house near Annapolis, MD (between Baltimore, Washington andthe Chesapeake Bay). I will also continue working with theSilverlight and WPF community, but will add to that a much largerfocus on Windows 8 XAML going forward, and possibly some phone worktoo. Metro style apps have huge potential both short termand long term in all areas of client development from consumers toline of business. I want to be a part of their success, part ofyour success.

Among the many things I'm going to try to accomplish are to helpfind ways, for those who want to, to make it easier fortoday's XAML developers to prepare for and migrate apps to WinRTXAML if appropriate for their application. No forcing.You use the technology that best meets your business andapplication goals and requirements. I'll continue to do thisin a wide-reaching way through events, articles, toolkits, samples,books, twitter, blogs and much more, and also add to that workingmuch more closely with people in the field, folks in the community,and with some individual customers.

During my interviews, I made it very clear that I am ahorrible sales person. Gladly, that's not this role. Somecommunity folks I speak with consider evangelism synonymous withsales, but like so many roles at Microsoft, the role is really whatyou make of it as an individual. The team I'm part of is full ofhigh-integrity individuals who all believe in the same things I do.During the day of interviews, the ideas I proposed, ideas that Ibelieve many of you will find match with or support your own goals,were received with enthusiasm and excitement.

I'm really happy to continue with XAML, and to continue workingwith the community, now with more Metro. My first task? Helping tobuild a cool and relevant keynote demo. EXACTLY the type of thingI've wanted to do for a long time :)

In addition to that, last week I had VSLive NYC where I hadthree sessions covering Silverlight, WPF, and Windows8, a Saturday code camp session in Philly onWindows 8 XAML, and coming up in June, a TechEd session on WPF 4.5. Oh, and in August I'll be speaking at thatConference onWindows 8 for Silverlight and WPF devs, and alsoon open source hardware, and again at VSLive onWPF and Windows 8 XAML. You can see that I havequite a mix there, with good representation from all the clientmembers of the XAML family.

And, of course, I will continue with my NETMF and gadgetwork. That's always been as much a personal passion asanything. I often find a way to work it in with my primary focus,and will be doing that here for sure.

FAQ (or at least the Qs I think will be F)

Forgive me if any of these are pretentious. I've jut made a bestguess as to the questions you may have.

Q: Are you abandoning Silverlight / WPF?

A: Nope. Those technologies are just as important now as ever.Silverlight 5 was an exciting and huge release. WPF 4.5 is anequally interesting release. I will focus more on XAML ingeneral and Windows 8 in particular, but I'm keeping myfingers in all the pots. My Silverlight 5 book should beback from the printers any day now, so you can enjoy all1000 printed pages (and 200-300 downloadable pages) as well. I alsohave Silverlight and WPF sessions at upcoming conferences, and aslong as folks keep showing up to learn, and I have something new toteach, I'll keep teaching.

Q: Are you going to focus exclusively on Windows 8 XAML

A: Not exclusively, but I will certainly focus more time andenergy in that area. It's new. It's exciting, and I thinkit's going to be a big deal for every developer.See my list of events above for the current mix of sessions I'mdoing, for example.

Q: What about your NETMF/Gadgeteer Stuff?

A: I'll still work on that, as I really enjoy it. It was alwaysa hobby and will continue to be one. Also, I'm always looking forways to sneak it into other technology demos. :)

Q: What happened to your Silverlight 5 book?

A: I wrote WAY too much, so it took forever to edit and print.It's out any day now. The delay is completely my fault.

Q: What is your next book?

A: Windows 8 XAML, of course. I've had this one in progress forquite some time, but the burden of editing 1300 pages of my SL5book caused a bit of a delay :). Expect to see the MEAP soon,hopefully in time for our June Windows release. The next book willbe, by Manning's insistence, much shorter but equally asuseful :)

Q: Are you moving to Redmond?

A: Nope. I am very proud to be the first remote worker in thisteam at Microsoft. Working remotely sometimes limits the things youcan do at Microsoft, but I'm really glad this org not only lookedpast that, but embraced it as a strength. Besides, workingon the east coast lets me be a nightowl at home, but still appearto be a morning person to those in Redmond ;)

Q: Why Windows 8 XAML as a primary focus?

A: I'm a super ADD person, just ask my wife. (Squirrel!!) I neednew and exciting things to keep me going. They also need to be newthings that I'm genuinely excited about, and whichI think will be a benefit to the community ofdevelopers. Metro and WinRT + XAML + .NET 4.5 definitelyfits that criteria. I'm even excited about the HTML/JS sideof Windows 8 Metro, but I have close to zero skills therecurrently.

Q: Why the corporate/platform evangelism team?

A: This is the team that builds the customer connections,creates the keynote demos, generally has earliest and best accessto cool stuff, and has a bunch of very cool people Irespect. It also helps that they wanted me to join :)

Q: Will you continue to help run the Silverlight and WPF/ClientApp Dev MVP programs

A: Yes, in the same capacity as today.

Q: Metro all the things?

YES :)

(Robot minifig photo source.)

The correct AdventureWorks database to use for Silverlight 5 in Action (and Silverlight 4 in Action) book examples

Pete Brown — Tue, 22 May 2012 01:33:45 GMT

A reader tipped me off that the AdventureWorks schema haschanged since I (and my tech reviewers) last downloaded a copy.Some of the schema changes make the database unworkable with thein-book examples for Silverlight 4 in Action and Silverlight 5 inAction. In particular, the Person table is no longer there inrecent versions.

A version of the database that is compatible with the examplesin my Silverlight book can be found on this page:

http://msftdbprodsamples.codeplex.com/releases/view/4004

The top download, AdventureWorksDB.msi is what you want. It'sdated May 7, 2007. It's maked as SQL Server 2005, but it works withmore recent version. A later version of the database may work(pretty sure the one I used was dated 2009 or 2010), but this oneis the only currently available compatible version we can find.

Windows 8 Metro: Something about application life-cycle

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 21 May 2012 01:46:38 GMT

Also if currently you are probably running Windows 8 on a virtual machine or luckily on a computer, there is not any doubt that this new operating system and especially the metro-style interface is dedicated to touch enabled devices like tablets. The plans of Microsoft infact include the new WOA keywork where the acronym stands for Windows On ARM that is the aim of making available this interface on a wide set of mobile devices that currently embrace this successful processor architecture.

Running on a tablet does not only imply a different input interface like the touch screen, but also it requires a careful use of system resources that are not always large on this kind of device. This is the reason why metro-style applications have an application lifecycle that is mostly similar to the Windows Phone than of classical desktop apps.

Don't miss...

All SilverlightShow Ebooks

It is matter of life or suspension

As a user, when you start a desktop application, you are exactly aware of the boundaries of its life. You click the icon and the application starts, then you use it and finally you hit the close button and the application closes. There are nothing behind this common process but you, as the final user, are responsible to decide how many applications runs at the same time so the management of system resources is completely up to you. Also if the previous sentence oversimplifies the matter, since behind the scenes the operating system manages system resources in an optimal way, if you continue to open a number of apps, at a given point you reach the maximum of resources available and you get an error.

From the metro point of view, this scenario completely changes. The only thing you are exactly aware is the time when you start your application the very first time after you switched on your device, and from this point the lifetime of the application is completely up to the operating system. You can still choose to close a metro-style app but this is not exactly required nor favored. In metro guidelines is strongly stated that your application must not have a "close button" or such a way to close the application, under the penalty of failure of the certification for the marketplace. If the user choose to close the app he has to use a combination of ALT+F4 or the close gesture (swipe the screen from the top to the bottom). The most common way to go away from the current app is by pressing the start button that brings you to the start screen but this not really close the app.

The rule is really simple: you can always have only one application running. You can hit the maximum of two apps running at the same time, only in a few cases, when one is snapped and the other runs as filled. In all the other states Windows only allows a single application to run, so probably this is the most common scenario. What it happens behind the scenes is that when you start an application it get its own space in terms of system resources and becomes the current running application, but when you hit start and move to another one, the application you are leaving is "suspended". This means the OS saves the current execution state and prevent the processor from continue to execute it; in this state the application resides in memory and continue to allocate the space assigned to it but it does not currently run.

To become aware of this process you can do a simple exercise using the Task Manager. First of all go to desktop and open the new Task Manager. Then activate the "Show suspended status" item in the View menu. This let you see when an application enters the suspended state. Now return to the start screen and activate some applications. Finally you have to return to desktop by pressing the WindowsKey+D and watch at the task manager. The situation you will see is almost similar to the one in the figure on the side where you have a number of apps in suspended state and a single that results to be running. But waiting 10 seconds also last application enters the suspended state. Windows works in a smart way. When the user leave an application it waits a few before to switch it to suspended because there is a chance the user returns to the application immediately. After 10 seconds passed, the operating system move the app to the suspended state but does not remove it from the memory. This enable the user to switch rapidly from an app to another since Windows only need to activate and deactivate the app without loading it from the disk.

This works fine until the systems has lot of resources. But obviously if you continue to run new apps, you reach a moment when the system needs to free some space to ensure a good feedback to the user. In this case Windows can decide to terminate some of the applications that are currently suspended. After the app has been terminated all the resources are freed and Windows can only starts it again from scratch.

The developer point of view

Since the process I described above may seems completely automatic, there are some points that a developer must know to improve the feedback of the application. After you created your application, it works also if you do anything about the lifetime management. The problem is that, especially in the case of termination, you have to take a decision about the experience you want for your user. If you do not handle this situation what the user will see it that randomly the application suddenly is reset and he loses the work he is doing. Windows is really careful in handling termination of the apps but when it finally goes on this way only the intervention of your code can save a situation that differently is like a complete shutdown.

To handle termination you have to act subtly. When Windows decide for the termination, it immediately releases all the resources without waiting nor notifying the application. As a developer the termination is completely transparent and when it happens it is too late to do anything. Differently you may assume that the termination happens only when the application has been suspended so the best it to act during suspension to save the state of the work as if the application is being terminated.

Starting to speak about code, the Application type is all what you need to handle this situation. As you know the App class defined in App.xaml.cs directly inherits from Application. So in this class you can attach some events to detect state changes:

OnLaunched: it is called every time the application is activated. This event, only available as override, happens when the application start from scratch on the first run or after being terminated. Remember that from the point of view of the operating system both these scenario are identical. The difference comes from the value of PreviousExecutionState you get in the arguments. This may be "NotRunning" or "Terminated".

Suspending: This event may be subscribed to get notified about the suspension of the application. You have to be aware that, when this even has been called you only have a few seconds to act to preserve the current state of the application. If you take long than 5 seconds Windows will assume that the application has crashed so terminate it.

Resuming: The resuming event is raised only when the application is reactivated after being suspended. Pay attention that resuming does not happen if the application is terminated.

OnActivated: This event is raised when the application is not activated normally. Since the normal activation raises OnLaunched, in other cases (a search, share, etc...) this event is called and you can user the ActivationKind enumeration to understand the reason. Also be aware of a number of methods that are specific to a single activation reason: OnSearchActivated, OnShareTargetActivatedm etc...

Reading carefully the events meaning, it becomes clear that there is two points where you have to handle the suspension. The first is the Suspending event. In this event you have to save the current state (loaded documents, fields, position of elements and so on...) to a persistent storage. The ApplicationData store is perfect for this purpose:

   1: public App()   2: {   3:     InitializeComponent();   4:     this.Suspending += new SuspendingEventHandler(OnSuspending);   5: }   6:     7: protected void OnSuspending(object sender, SuspendingEventArgs args)   8: {   9:     SuspendingDeferral deferral = null;  10:    11:     try  12:     {  13:         deferral = args.SuspendingOperation.GetDeferral();  14:    15:         // save here the application state  16:     }  17:     finally  18:     {  19:         deferral.Complete();  20:     }  21: }

Thanks to the SuspendingDeferral instance, returned by the call to SuspendingOperation.GetDeferral, you can inform the runtime that the application is saving its data. Then the call to the Completed method confirm that the application is ready to be suspended. The use of the deferral does not give you additional time. The limit of 5 seconds is still valid.

When the application is resumed without being terminated you have nothing to do. In this case the situation is completely handled by Windows. So you have only the responsibility of handle the OnLaunched event an check if the app has been restored by a terminations instead fo begin started from scratch:

   1: protected override void OnLaunched(LaunchActivatedEventArgs args)   2: {   3:     var rootFrame = new Frame();   4:     this.EnsureInitialized(rootFrame, args);   5:     rootFrame.Navigate(typeof(MainPageView));   6: }   7:     8: private void EnsureInitialized(Frame rootFrame, IActivatedEventArgs args)   9: {  10:     if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)  11:     {  12:         // restore the state here  13:     }  14:    15:     Window.Current.Content = rootFrame;  16:     Window.Current.Activate();  17: }

Thanks to the IActivatedEventArgs interface the EnsureInitialized method can be used also in case of different activations. As an example, if th app is started by a Search request, you need to threat the application state like in the case it starts normally. You can write the following code:

   1: protected override void OnSearchActivated(SearchActivatedEventArgs args)   2: {   3:     var rootFrame = new Frame();   4:     this.EnsureInitialized(rootFrame, args);   5:     rootFrame.Navigate(typeof(SearchGridPageView), args.QueryText);   6: }

Now the point is: how can I persist the state? The right place is the application data store. This store is mostly known as IsolatedStorage in Silverlight and Windows Phone. For metro-style apps this storage has a number of additional features but for now it suffice you know that it can receive your files as a normal filesystem restricted to your app only. For this purpose the best is searching the SDK examples. In most of the XAML examples there is a SuspensionManager class that already implements all you need to save the application state. The important part using this class is to ensure the data you need do store is serializable using the DataContractSerializer. This means to decorate the classes with DataContractAttribute and DataMemberAttribute.

   1: [DataContract]   2: public class ApplicationState   3: {   4:     [DataMember]   5:     public int Number { get; set; }   6:     [DataMember]   7:     public string Name { get; set; }   8: }

Then you have to add the types to the KnownTypes collection:

   1: public App()   2: {   3:     this.InitializeComponent();   4:     this.Suspending += OnSuspending;   5:     6:     SuspensionManager.KnownTypes.Add(typeof(ApplicationState));   7: }

At this point you have to manage to save the state to the SuspensionManager and reload these information when it is required. It is important you avoid to restore the state if you are in the case of a fresh start because the guidelines express indicate it as a worst practice. Instead you have to handle the start from a termination:

   1: private void BlankPage_Loaded(object sender, RoutedEventArgs e)   2: {   3:     if (SuspensionManager.SessionState.ContainsKey("State"))   4:     {   5:         ApplicationState state = SuspensionManager.SessionState["State"] as ApplicationState;   6:     7:         if (state != null)   8:         {   9:             this.theName.Text = state.Name;  10:             this.theNumber.Text = state.Number.ToString();  11:         }  12:     }  13: }  14:    15: private void OkButton_Click(object sender, RoutedEventArgs e)  16: {  17:     SuspensionManager.SessionState["State"] = new ApplicationState  18:     {  19:         Name = this.theName.Text,  20:         Number = int.Parse(this.theNumber.Text)  21:     };  22: }

Finally you have to add the SaveAsync and LoadAsync method calls to the Suspending and OnLaunched events. This methods use the DataContractSerializer to serialize and deserialize the SuspensionManager content and use the Aplication data store to persist it as a file.

Debugging suspension

If you try to observe the lifecycle of an application that is running in debug mode, you will understand that under these conditions there is something different. When an application is debugged it is never suspended, so it is hard to debug the suspension and resume phases. For this purpose in Visual Studio 11 there is a small toolbar useful for this purpose. These buttons can simulate suspension and termination of the application and in this case your breakpoins are honored.

The suspension and resume in Windows 8 is important to give a better experience to the user, thaks to the optimization of the system resources. In the next article in the series I will write about another arpect that has the same direction: the asyncronicity and how to deal with it.

Using SQLite in a Metro style app

Sun, 20 May 2012 23:10:51 GMT

At the “Developing Windows 8 Metro style apps with C++” event that happened on 18-May-2012, we saw and heard some very interesting things. If you were watching live then hopefully you didn’t see how I tried to work through my presentation while my disk was suspiciously guzzling every last byte until it eventually ran out of space! But I digress…

During the keynote presentation by Herb Sutter, we brought up several customers that are well-known in the native code world to talk about their experiences with Metro style apps and C++/Cx. In particular hopefully this one caught your eye:

That’s right, the team for SQLite was there to discuss how they were able to take their existing Win32 codebase and ensure that it worked well on Windows 8 as well as for Metro style apps.

SQLite is a in-process library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine. The code for SQLite is in the public domain and is thus free for use for any purpose, commercial or private. SQLite is currently found in more applications than we can count, including several high-profile projects.
SQLite is an embedded SQL database engine. Unlike most other SQL databases, SQLite does not have a separate server process. SQLite reads and writes directly to ordinary disk files. A complete SQL database with multiple tables, indices, triggers, and views, is contained in a single disk file. The database file format is cross-platform - you can freely copy a database between 32-bit and 64-bit systems or between big-endian and little-endian architectures. These features make SQLite a popular choice as an Application File Format. Think of SQLite not as a replacement for Oracle but as a replacement for fopen().– Source: http://www.sqlite.org/about.html

Dr. Richard Hipp, the founder of SQLite, was on hand to announce the availability of the experimental branch they’ve been working on as well as that when the Release Preview of Windows 8 is made public that he will merge this code to the main trunk for SQLite, making it supported by them. This is a really great thing for developers as SQLite has been a proven embedded database for numerous platforms and many, many customers. The team prides themselves on testing and has millions of test cases that are validated each release.

As a Windows (and perhaps more specifically .NET) developer, you may not have had to build any lib from Open Source before of this type (i.e., native code) and since a binary is not being provided yet until Release Preview for Windows 8, I thought I’d share my tips on building the experimental bits, adding them to your projects and then using them with a client library.

Building SQLite from source

If you are looking for the sqlite3.dll with this WinRT support anywhere on the sqlite.org site, you won’t find it. You will have to build the source yourself. I highly recommend you get the code from the source rather than from any third party site. Microsoft has worked with the team at SQLite to ensure compatibility and store certification. For most .NET developers who have never grabbed native code source from an Open Source project and had to build it before, the maze of knowing what you should do can be confusing. I’ve put together a cheat sheet on building SQLite from source for a Windows (and .NET developer) and put it on my SkyDrive: Building SQLite from source. The OneNote I have has the details you need for the tools that will be required.

In a nutshell you’ll need:

Visual Studio (easiest way to get the C++ compiler)
ActiveTcl
Update for gawk.exe
Fossil (the source control system used by SQLite)

Once you have these, you are ready to build SQLite. Again, I’ll defer to my instructions on the details of setup. Once your setup is complete, from a developer command prompt you’d run:

   1: nmake -f Makefile.msc sqlite3.dll FOR_WINRT=1

The result of this will give you basically 4 files that are of likely most importance to you: sqlite3.c, sqlite3.h, sqlite3.dll, sqlite3.pdb.

NOTE: The resulting pdb/dll that is built will be architecture specific. If you used an x86 command prompt then that is what you have. Be aware of this (as noted later in this post).

At a minimum you’ll want sqlite3.dll if you are a .NET developer, but as a native code developer you will likely be more interested in the others as well. After this step, you now have a Windows Store compliant version of SQLite to include in your applications.

Runtime versus client access

Now at this point is where I’ve seen some confusion. Folks are asking How do I include this, don’t I need a WinMD file to reference? Let me diverge a bit and explain a few things.

The result of compiling the binary above produces primarily one thing…which I will call the “Engine” in this post. This is the SQLite runtime and logic required to create/interact with SQLite database files. This is NOT, however, an access library, which I will call the “Client” in this post. If you are a managed code or JavaScript developer, at this point, all you have is the Engine, the database runtime. You have no Client to access it.

Now, if you are a C++ developer you are probably okay at this point and don’t care much about what I have to say. You have the header and are likely saying I’ve got the header, get out of my way. And that is okay. For C++ developers I think you’ll likely be accessing the database more directly through the SQLite APIs provided in the header.

I call out this distinction because this step provides you with the database engine you need to create a database and have it be store-compliant. So if you are a JavaScript or .NET developer, what are you to do? Stay tuned…let’s first get the Engine included in our app package.

Including SQLite in your app package

As I noted above, as a native code developer, having the header, lib and c file you may be okay and don’t care to read this. I personally think, however that I’d always just want the binary from my vendor rather than always include source in my files. That said, the SQLite build process does product the amalgamation (sqlite3.c) you can just include in your native code app.

If you choose to go the binary file route (sqlite3.dll) then you need to simply follow a few principles to ensure that it is included in your package when you build your app/package. These principles are simple:

include the architecture-specific binary
ensure the sqlite3.dll is marked as Content in your project
ensure you note that you now have a native code dependency (not needed if you are already a C++ Metro style app)

These two items will ensure that when you build (even for debug via F5) or when you package for the store, that the Engine is included in your package. Marking as content is simply ensuring that after you add the file to your project, ensure the file properties note that it is content. In .NET apps this is making the Build Action property Content. In JavaScript applications ensure the Package Action is marked Content.

Declaring the native code dependency means you simply add a reference to the Microsoft C++ Runtime Library via the Add Reference mechanisms in .NET and JavaScript applications. By doing this (and again, this is a requirement of including SQLite in your app) you now cannot be architecture-neutral. This means no more AnyCPU for .NET. When producing a package you’ll have to produce architecture-specific packages before uploading to the store. Not to worry though as Visual Studio makes this incredibly easy. The one thing you’ll have to remember though is that you’ll have to change the sqlite3.dll before building the packages as the DLL is architecture-specific itself.

Now this all should be easier right? Wouldn’t it be nice if you could just Add Reference to the Engine? I personally think so. I’ll be working with the SQLite team to see if they will adopt this method to make it as easy as this:

In doing so, you as a developer would just add a reference to the Engine and then during build time Visual Studio (well MSBuild actually) will do all the right things in picking up the architecture-specific binary for your app. No fiddling on your part. This method also makes it easier for C++ developers as well as a props file would automatically be merged to include the .lib for linking and the header file for development. This method uses the Visual Studio Extension SDK mechanism that was introduced in Visual Studio 11.

NOTE: Again note that as a managed (.NET) app I’d also have to ensure that my package includes the Microsoft C++ Runtime package in order for this to work and pass store certification.

Native code developers may scoff at this approach, but I could get started in 2 steps: Add Reference, #include. No tweaking of my project files at all because the Extension SDK mechanism in VS does all this for me behind the scenes.

So why don’t I just give you the VSIX to install and accomplish the above? Well simply, because SQLite is not my product and we’ve had a good relationship with their team and I want to make sure they understand the benefits of this method before jumping right in. I hope that they will like it as I think it makes it *really* simple for developers.

Accessing the Engine from your app

Great, you’ve compiled the bits, you’ve understood how to ensure sqlite3.dll gets packaged in your application…now how do you use it!!! Here’s the assessment of where we are at for Metro style apps as of the writing of this post.

C++ app developers: I think most C++ developers will get the header file (sqlite3.h) and be okay on their own with SQLite. At this stage for them there doesn’t appear to be a real huge benefit of a WinRT wrapper to use the Engine.

.NET developers: I’ve messed around with a few libraries and believe the sqlite-net project to be the most favorable for what I believe most use cases will be for SQLite and Metro style apps. This is a .NET-only library (not WinRT) but is basically a “LINQ to SQLite” approach. The Mono team uses this one as well. The necessary .NET 4.5 Core changes are already included in the project on github. So you just need to get the SQLite.cs file and include it in your project. Using this library allows you to write code like this:

   1: public sealed partial class BlankPage : Page   2: {   3:     public BlankPage()   4:     {   5:         this.InitializeComponent();   6:     7:         string dbRootPath = Windows.Storage.ApplicationData.Current.LocalFolder.Path;   8:         using (SQLiteConnection db = new SQLiteConnection(Path.Combine(dbRootPath, "mypeople.sqlite")))   9:         {  10:             db.CreateTable<Person>();  11:    12:             db.RunInTransaction(() =>  13:                 {  14:                     for (int i = 0; i < 10; i++)  15:                     {  16:                         db.Insert(new Person() { FullName = "Person " + i.ToString() });  17:                     }  18:                 });  19:         }  20:     }  21: }  22:    23: public class Person  24: {  25:     [AutoIncrement, PrimaryKey]  26:     public int ID { get; set; }  27:     public string FullName { get; set; }  28:     public string EmailAddress { get; set; }  29:     public double Salary { get; set; }  30: }

This is clearly just a sample, but demonstrates the simplicity of the library.

NOTE: In the snippet above you do want to make sure you are creating your database in a path that is accessible from the AppContainer. The best place is in the app’s ApplicationData location. When specifying a path to SQLite in Open() for creation, give an explicit path always to ensure you aren’t relying on a temp file creation.

Some may ask about System.Data.Sqlite and this cannot be used because of the dependency of ADO.NET which is not a part of the .NET Framework Core profile.

Now this leads us to JavaScript developers. Currently, there is not easy way for you to access this. The Developer and Platform Evangelism team are working on some samples that are not quite complete yet. JavaScript developers will need a WinRT library in order to access/create/query the Engine. There are some out there (I haven’t played around with any of these) that would be good to see if they meet your needs. Here are some pointers:

At the C++ event we talked with the SQLite team about a WinRT client library and will continue to talk with them to see if this is something of interest. SQLite has a great history of working with the community and have a desire to continue this. In the meantime, there are options for you to get started. Also note, that since these are WinRT libraries they could also be used from C++ and .NET in Metro style apps. At this point though it is my personal opinion that existing .NET libraries for .NET offer more value (i.e. LINQ) than how these WinRT ones exist.

Summary

This was a great announcement that the SQLite team made for Metro style app developers. WinRT provides some existing local storage mechanisms which you should explore as well, however none that have structured storage with a query processor on top of it. I’m really glad that the SQLite team was able to make a few diff’s to their code to accommodate a few store compliance areas and continue to offer their great product to this new class of applications. It is very simple to get started by ensuring you have the Engine and picking your Client of your choice and write your app using SQLite for some local/structured storage!

Hope this helps and stay tuned for the release preview of Windows 8!

tags: metro, sqlite, sql, sqlce, winrt, xaml, windows, windows 8

This work is licensed under a Creative Commons Attribution By license.

Mimic the Game Hub Application Bar with a Behavior on the BindableApplicationBar

Sun, 20 May 2012 14:40:29 +0200

A couple of days ago Sébastien Lachance wrote an excellent article about mimicking the application bar of the game hub. Really interesting for one of my applications which makes use of a minimal applicationbar that’s also transparant. However quite often the texts of the menu are difficult to read when they don’t have a solid backgroud. That’s exactly what is solved in the game hub: a transparant applicationbar, but when expanded to view the menu it has a solid background. And Sébastien also found a solution how to fix this in our own applications.

However Sébastien is using the ApplicationBar, I’m using the wrapper around the ApplicationBar, called BindableApplicationBar that’s part of the Phone7.Fx project. So how to solve this?

The ApplicationBar and BindableApplicationBar both implement the IApplicationBar interface which prescribes the StateChanged event that is used by Sébastien in his solution. So it looks like we can use the same event, let’s look a little bit closer…

Seems that the code inside the BindableApplicationBar never fires the StateChanged event, so let’s fix this with a little bit of code in the BindableApplicationBar. Please be aware that you need to use the source version of the BindableApplicationBar to be able to fix this. So let’s subscribe the underlying ApplicationBar first, we do this in t he constructor of the BindableApplicationBar by adding one line.

public BindableApplicationBar(){    _applicationBar = new Microsoft.Phone.Shell.ApplicationBar();    _applicationBar.StateChanged += HandleStateChanged;    Loaded += BindableApplicationBarLoaded;}

Now we still need to implement the HandleStateChanged method, which is a pretty straight forward implementation you’ve probably seen thousands of times.

private void HandleStateChanged(object sender, ApplicationBarStateChangedEventArgs e){    if (StateChanged != null)    {        StateChanged(this, e);    }}

So we now have a BindableApplicationBar that has all the features we need to mimic the ApplicationBar of the game hub. The rest of the implementation could be similar to Sébastien’s code. However I thought this is a typical thing that you can easily implement and reuse in a Behavior. I’m not writing behaviors daily, so I thought giving a look at the blog of the Behavior Master himself, Joost van Schaik. About a year ago he wrote a pattern for safe event detachment in behaviors.

So I started with this pattern as a basis. However my eagerness to make this Behavior perfect by immediately using this pattern caused me a lot of trouble. The pattern also tries to safely remove the events when the AssociatedObject aka Control is unloaded. The control I use is of a special type, the BindableApplicationBar, which immediately calls the unloaded event, don’t know why, but it took me almost an hour to find this out. In the end I did a step back and removed the Safe Pattern, and came to the following behavior. The essence is in the highlighted line where I set the BarOpacity property.

public class TransparantToFillApplicationBarBehavior : Behavior<BindableApplicationBar>{    private double? _originalBarOpacity;    protected override void OnAttached()    {        base.OnAttached();        AssociatedObject.StateChanged += StateChanged;    }    private void StateChanged(object sender, ApplicationBarStateChangedEventArgs e)    {        if (!_originalBarOpacity.HasValue)            _originalBarOpacity = AssociatedObject.BarOpacity;        AssociatedObject.BarOpacity = e.IsMenuVisible ? 1 : _originalBarOpacity.Value;    }    protected override void OnDetaching()    {        AssociatedObject.StateChanged -= StateChanged;        base.OnDetaching();    }}

And now you want to use it in your BindableApplicationBar, of course.

<ApplicationBar:BindableApplicationBar Mode="Minimized"                                        BarOpacity="0.6"                                        IsVisible="{Binding LoggedIn}" BackgroundColor="{StaticResource PhoneBackgroundColor}">    <i:Interaction.Behaviors>        <ApplicationBar:TransparantToFillApplicationBarBehavior />    </i:Interaction.Behaviors>    <ApplicationBar:BindableApplicationBarMenuItem Text="about+settings"                                                    Command="{Binding AboutCommand}" /></ApplicationBar:BindableApplicationBar>

And the end result is like this. Transparent when the menu is collapsed.

And non-transparent when the menu is visible.

Google Analytics on your Windows Phone App in 1 minute

Wed, 16 May 2012 22:33:49 +0200

Yes 1 minute. So let’s start immediately.

1 - Open the NuGet Package Manager Console and type:

Install-Package MSAF.GoogleAnalytics

2 - Next, register a new application / web property inside Google Analytics.

Then copy the Property ID that starts with UA-.

3 - Past that Property ID inside the App.xaml at this place.

<analytics:GoogleAnalyticsService WebPropertyId="UA-12345-6" />

That’s it. Yes, totally. And? Did you do it under the minute?

Background information

I’ve been in contact with Michael Scherotter for some time about NuGet and MSAF, thanks for the support Michael. Basically the MSAF project is really powerful and can be applied to your Windows Phone project quite easily when you know how to do this. I’ve written about it a couple of times. However when we upgraded to Mango all dlls were upgraded except the Google.WebAnalytics dll. The mismatch in versions was causing a lot of problems because some libraries were asking for a 7.0 version of System.Windows.Interactivity and some were asking for the 7.1 version. I fixed that for the NuGet release, everything is 7.1 based.

Advanced tracking

I also added the code to track a little bit of basic information. You can find that in the GoogleAnalyticsService class in the Analytics folder after applying the NuGet package. There is support for up to 5 Custom Variables. Yes I removed the AppId/ProductId that’s included by default leaving only 4 Custom Variables. You can still add the AppId Custom Variable by your own choice, but I removed it because I have one Google Analytics Web Property per App, so it was useless.

When you want to track your analytics from for example your ViewModel you do something like this.

IAnalyticsTracker tracker = new AnalyticsTracker();tracker.Track("EventCategory","EventName","EventValue optional");

Creating the SilverlightShow Windows Phone App: part 4

editorial@silverlightshow.net (Peter Kuhn ) — Mon, 14 May 2012 18:30:00 GMT

When you create an app like the SilverlightShow app, that accesses remote data frequently, thinking about a suitable strategy for local storage and caching is vital to provide a great user experience. In the previous parts of this series, we have already seen how several optimizations are used to improve the networking performance of the app. Overall, the costs to pull data from the portal could be reduced to far less than 1/10th of the original traffic by applying some relatively simple changes. However, this is only half the story. What we also wanted to achieve is that content that has been retrieved once should not be fetched again – we needed a solution for storing those items locally.

Local Storage Options

When you think about persisting and restoring data locally on the phone, you have a variety of features at your disposal. With the first versions of Windows Phone, you could either use the ApplicationSettings for trivial situations, or you had to pretty much do all the work manually, as in writing to and reading from Isolated Storage files.

With the platform maturing more and more, additional options are established. In particular, Microsoft added local database support in Windows Phone 7.1, built on SQL Server of course. This gives you the comfort of working with relational data and the well known features of LinqToSql for queries. If you want to learn more about local database support, take a look at Andrea Boschin's article about it.

The option we decided to use is a community project originally designed and developed by Jeremy Likness: The Sterling Database. The project has been around for two years, is now maintained and contributed to by various community members, and has proven its power in several apps on the Marketplace that are using it today.

What Sterling is

Let me quote from the Sterling project page on CodePlex to give you a basic understanding of its nature:

"Sterling is a lightweight NoSQL object-oriented database for .Net 4.0, Silverlight 4 and 5, and Windows Phone 7 that works with your existing class structures. Sterling supports full LINQ to Object queries over keys and indexes for fast retrieval of information from large data sets."

What exactly does this mean? For starters, instead of mapping your classes to a relational database model, you can simply use your existing data structures right away. In situations like ours, where a data structure has already been established or is determined by some external factors, this can result in less work. It may also give you a more natural and easier way of working with your data, as you don't have to deal with that extra layer and conversion logic between your application objects and data storage.

Although Sterling is a very lightweight project (the core assembly is only ~80 kilobytes big), it still is very flexible. For example, in addition to well-known features like triggers you can also register so-called interceptors that let you change the way Sterling works on a low level, which enables interesting options for example regarding transparent data encryption or optimization (more on that later).

Behind the scenes, Sterling of course also uses Isolated Storage for persistence, but it uses binary serialization, which results in very compact file sizes compared to the built-in serialization options:

(Image taken from the Sterling project page)

The way Sterling performs queries on its keys and indexes (explained below) gives a massive performance benefit, as shown by the following comparison:

(Image taken from the Sterling project page)

So in certain situations, for example when disk memory consumption or query speeds are crucial and your data is suitable to be stored and handled by Sterling, using that database can be a huge improvement over alternative methods, and/or save you a considerable amount of time compared to custom implementations.

Setup

Setting up a Sterling database is easy to do. After pulling in the required references (you can use the available NuGet package for that) simply derive from the built-in database instance base class. You can then provide so-called table definitions that determine what types you want to store in your database, and what indexes should be created for them. For example, the following piece of code creates a table definition for "Article" items, uses the "Guid" property as key, and adds an index for the "PublishDate" property:

public class SterlingDatabase : BaseDatabaseInstance

  protected override List<ITableDefinition> RegisterTables()

    return new List<ITableDefinition>

        CreateTableDefinition<Article, string>(article => article.Guid)

          .WithIndex<Article, DateTime, string>("ArticleDateIndex", article => article.PublishDate)

};

All that's left to do is initialize the database. A good pattern is to do that when your application starts or gets activated, and to execute the corresponding clean-up when the user leaves your application. The following shows the required code that can then be called in the respective lifetime events of the PhoneApplicationService:

private SterlingEngine _engine;

private ISterlingDatabaseInstance _sterlingDatabaseInstance;

private void ActivateSterling()

  _engine = new SterlingEngine();

  _engine.Activate();

  _sterlingDatabaseInstance = _engine.SterlingDatabase.RegisterDatabase<SterlingDatabase>(new IsolatedStorageDriver());

private void DeactivateSterling()

  _sterlingDatabaseInstance.Flush();

  _engine.Dispose();

  _sterlingDatabaseInstance = null;

  _engine = null;

Do not forget to clean-up in the "Deactivated" event too, as there is no guarantee that the user will return to your app, resulting in tombstoning and silent removal of your app, with the potential to leave your database corrupted.

Basic Operations

From the moment of activation on, you can use the database instance to save and load items very easily:

// save an article

_sterlingDatabaseInstance.Save(article);

_sterlingDatabaseInstance.Flush();

// load back

var loadedArticle = Load<Article>(article.Guid);

As you can see, the snippet uses both "Save" as well as an additional "Flush" method to save the object. Since Sterling is optimized for performance, it keeps its current keys and indexes in-memory only, until you call "Flush" explicitly. This allows you to do multiple successive "Save" operations without the performance hit of persisting keys and indexes between each of these operations. The drawback is that for single operations, you have to call "Flush" explicitly to keep the database consistent on disk.

One important thing that often causes confusion with inexperienced users, is that the "Load" operation does not cache items in memory. This means that every time you use the "Load" operation, a new instance is returned, i.e. two successive invokes of "Load" with the same "article.Guid" value will return two different objects (for the same article though). To benefit from caching, you have to use queries (see below).

Loading and saving an object will treat the whole object graph connected to that object through properties. Depending on how you set up your database the behavior will be slightly different. To learn more about the details of loading and saving, I recommend reading the excellent documentation of Sterling: Saving Instances and Loading Instances

Deletion of objects is performed using either the object itself, or by passing in the key for that object (which eliminates the need to explicitly load an object just for deletion):

// delete by reference

var article = _sterlingDatabaseInstance.Load<Article>(guid);

_sterlingDatabaseInstance.Delete(article);

// or delete by key

_sterlingDatabaseInstance.Delete(typeof(Article), key);

Sterling of course also supports deleting all objects of a certain type (truncating a table) and even purging the whole database. You can learn more about this here.

Queries

The power of Sterling comes with queries. In the above sample, we had added an index for the publish date of articles. This allows us to access stored article instances by their publish dates extremely fast because Sterling holds that data in memory. It uses a lazy load mechanism that only needs to access the disk once you actually need to retrieve the object content. Let me give you an example:

public DateTime DetermineNewestArticle()

  var result = _sterlingDatabaseInstance.Query<Article, DateTime, string>("ArticleDateIndex")

                 .OrderByDescending(o => o.Index)

                 .Select(o => o.Index)

                 .FirstOrDefault();

  return result;

This retrieves the date of the newest available article using the respective index, without loading the actual article from disk. Because the index is available in memory, this is a Linq to Objects operation that is really fast. You can have multiple indexes for each type, to enable different of these query scenarios at the same time.

If you need to actually access the content of the newest article, then the code could look like this:

public Article GetNewestArticle()

  var result = _sterlingDatabaseInstance.Query<Article, DateTime, string>("ArticleDateIndex")

                 .OrderByDescending(o => o.Index)

                 .Select(o => o.LazyValue.Value)

                 .FirstOrDefault();

  return result;

Only when you access the "LazyValue.Value" property does Sterling load the data from Isolated Storage. Queries of course are much more powerful than simply loading single objects. You can also combine them and make use of joins, projections and all the other available features. To learn more about complex queries, the documentation is a good starting point.

Caching

As mentioned above, as soon as you use queries the retrieved values are cached. This means that only the first access of a certain (lazy) value in the key or an index collection results in an actual load operation. Successive queries return the previously loaded object and hence will execute much faster. Don't worry: as soon as you change the object and save it back to Sterling, the cache is cleared for that object, and the next query operation will reload your changed values from disk again (with the result being cached again). Sterling keeps track of save operations internally.

While caching can improve performance of your app tremendously, it also can have some unexpected side effects when you use the same data in different parts of your app at the same time. To learn more about these edge cases, take a look at the docs here.

Interceptors

The data of the SilverlightShow app is easily compressible, because it's mostly text. One of the nice hooks Sterling allows you to use therefore came in handy, to apply a general compression to all the data that is written and read – without the need to explicitly take care of this manually during each and every save and load operation. The way this works is to add a custom interceptor implementation during the initialization phase of the database:

public void ActivateSterling()

  _engine = new SterlingEngine();

  _engine.Activate();

  _sterlingDatabaseInstance = _engine.SterlingDatabase.RegisterDatabase<SterlingDatabase>(new IsolatedStorageDriver());

  // register a custom interceptor

  _sterlingDatabaseInstance.RegisterInterceptor<CompressionInterceptor>();

To create such an interceptor, you can conveniently derive from the existing "BaseSterlingByteInterceptor" base class and override the required methods:

public class CompressionInterceptor : BaseSterlingByteInterceptor

  override public byte[] Save(byte[] sourceStream)

    // do anything you want with the incoming bytes

  override public byte[] Load(byte[] sourceStream)

    // reverse whatever you did to the bytes in the Save method here

Your interceptor is used behind the scenes in all the operations, you don't have to change anything in the way you work with Sterling. So this is the perfect place to apply things like on-the-fly compression or encryption.

Conclusion

Sterling is an interesting alternative for local storage of data in Windows Phone apps. We were able to reuse our existing data structures without the need to introduce any storage-related changes to them, and the way Sterling handles key and indexes is perfect for our requirements of searching and sorting available items without the need to deserialize their (heavy) content from disk. The possibility to implement a generic data compression easily was the icing on the cake that helped create a great user experience.

Interview with Gill Cleeren and Kevin Dockx on their new book 'Microsoft Silverlight 5 Data and Services Cookbook' (by Packt Publishing)

editorial@silverlightshow.net (Silverlight Show ) — Wed, 09 May 2012 11:35:58 GMT

NOTE: Until May 31st all Microsoft ebooks by Packt Publishing may be purchased with 30% discount, and all Microsoft print books – with 20% discount. Learn more on this offer here!

In this interview we talk to Gill Cleeren and Kevin Dockx about their just-released book ‘Microsoft Silverlight 5 Data and Services Cookbook’ by Packt Publishing. An overview of this book and sample chapter 8 ‘Talking to WCF and ASMX Services’ may be downloaded from Packt website.

SilverlightShow: Hi Gill and Kevin! Your new book ‘Microsoft Silverlight 5 Data and Services Cookbook’ has just been released. This is an updated version of Microsoft Silverlight 4 Data and Services Cookbook, published two years ago. What’s new in this version, and why should someone who already got your Silverlight 4 ebook upgrade to this one?

Gill: It’s correct to say that it’s an updated version for the fifth release of Silverlight. That means that all of the content we had in the original book has been reviewed, corrected where needed and updated to reflect all that’s new in Silverlight 5. Of course, Silverlight 5 brought quite a few new features with it in the area that we cover in our book. So we wrote recipes for all these new features. Things like implicit data binding, custom markup extension and so on are deeply covered.

We could have stopped there but we didn’t think that we were bringing enough extra value. That’s why we included several new chapters on things like MVVM, WCF RIA Services (which was covered in the first edition but has now received much more attention) and local storage. Also, since there are a lot of similarities between Silverlight development and Windows Phone development, we included around 10 recipes to leverage what you’ve learned there as well!

SilverlightShow: Gill, Kevin - which parts of the book have each of you authored, and what would you name as the top/most interesting concepts covered in those?

Gill: The process of writing a book isn’t very linear. In the very first stage, we build up the outline. When that’s ready, we start dividing who’s going to write what, mostly based on what we are personally most comfortable with, experience-wise. We try to stick to that as much as possible, since we want our books to be based on issues or common problems we’ve experienced and figured out ourselves.

In this new edition, the WCF RIA Services and MVVM parts is mostly Kevin’s while I’ve been covering services, data-binding and the WP7 topics.

Kevin: Well, as Gill said: we’ve tried to write the parts we’re most comfortable with, from real-life experience on projects. At the time we started writing, Gill already had quite a bit of experience with Windows Phone, while I had been working on various projects in which the MVVM pattern and RIA Services were used extensively – so it felt like a natural dividing the chapters and recipes to write as such.

In the end, what I’m most proud of is the Advanced WCF RIA Services chapter, as it contains a few recipes on topics that aren’t very easy to find information on (ValidationContext comes to mind), and the recipes that cover Windows Identity Foundation integration with Silverlight.

SilverlightShow: Could you share one or two topics from the book that have not been covered extensively anywhere else, including in web resources?

Gill: It’s hard to write things today that aren’t covered anywhere else. There are many great resources out there. The value of our book - at least we hope - is bringing a lot of practical problems together that we’ve both come across in our daily development work. I’ve seen people struggle getting their heads around MVVM. That’s a typical one. There are a whole lot of blog posts and articles on the topic. We have chosen to include that anyhow since we wanted to give our readers a clean and easy approach to this pattern. Since our book is aimed at LOB developers and the MVVM pattern really shines in that area, we couldn’t release a new version without covering that.

Kevin: The recipes concerning Windows Identity Foundation integration immediately come to mind. Everything concerning security is very important for business applications, and federation scenarios are often considered when you’re writing large LOB applications for (government) companies that have a multitude of applications on-site. Windows Identity Foundation really shines in this area, but it takes a bit of work to “get your head around it” and understand what’s really happening underneath the covers. In these recipes, we’ve tried covering that, and of course: explained how exactly the integration with Silverlight works.

SilverlightShow: Several chapters from the book are focused on WCF RIA Services. What’s the reason behind this broad coverage?

Kevin: The fact that we’ve included a lot more recipes on WCF RIA Services comes from real-life experience: we’ve noticed a lot of Silverlight LOB applications use this framework – after all, it’s really powerful and extensible, but you do need a good understanding of what’s really going on if you want to use it to its full extent. It’s very easy to get started with WCF RIA Services, but it’s not so easy to keep doing it “right”. In the previous book, we had one chapter covering this, but we felt this wasn’t enough and didn’t really do the framework justice. Splitting the topic up in two chapters allowed for more advanced scenarios and recipes, and allowed us to include some best practices.

SilverlightShow: In this book you’ve also included recipes related to building Windows Phone 7 business applications. In which aspect of Windows Phone development do developers struggle most, and how does your book help them?

Gill: Silverlight and Windows Phone 7 development are very closely related. I know it’s been said before, but it’s true: you can easily leverage your Silverlight knowledge on the phone. However, it’s not a plain one-on-one copy, each platform has its particularities. That’s what we are focusing on in the WP7 part in our book. We don’t include the basics - there’s other great books and resources available for that. Instead, like with the rest of the book, we focus on the data and service access which tends to have some things you need to keep in mind.

SilverlightShow: How about Silverlight 5? Where do Silverlight 5 developers fail mostly, and why? How does the book help them?

Kevin: Well, it’s not that different today than how it was last year, or the year before: it’s the basics of Silverlight development that are still unclear to a lot of people: data binding & async communication. Our book covers this, and in addition we’ve added the MVVM chapter, more or less a de facto standard for XAML applications, which heavily relies on data binding.

SilverlightShow: Does Silverlight 5 lack something to become a perfect technology for LOB?

Kevin: I was really disappointed when Silverlight 5 was released without WS-Trust support. This was the one big missing feature for LOB applications in Silverlight 4, and it’s still missing in Silverlight 5. Through the code provided in the WIF Training Kit we did get some parts of this, but it’s still far from perfect – truly a shame, and I’m afraid it won’t get fixed.

SilverlightShow: A lot’s been written about Silverlight and its impending “death” – does the world actually need a new Silverlight book?

Kevin: Still a hot topic, this one ;-) The focus on HTML5 as the technology for the future is a good one, in my opinion – but there’s a huge gap in the Microsoft stack for businesses that need applications that need to be developed today (or at least: there’s a gap in what is put forward as the technology of choice), and rolled out in the next 1-3 years. We’re talking about companies that need internal LOB applications – these are often restricted in browser usage and even OS. Silverlight is a mature technology today, has support for the next ten years, and it typically takes about 1/3 less time to develop the same app using XAML-based technology versus HTML/JavaScript based technology: this is why a lot of businesses choose for this technology today.

Next to that, Windows 8 is around the corner, and most of what is learned by developing XAML applications can be leveraged for building Windows 8 Metro applications. The future is centered around API building with multiple clients (intranet & extranet, phone, tablets) on top of that, and focusses more on skill reuse for the front-end than code reuse. HTML5 fits this bill if you’ve got the luxury to be able to work for modern browsers, XAML fits this bill even if you don’t – and if you’re working for large companies, often you don’t.

SilverlightShow: And finally, what does a cookbook format mean? How is it better than traditional book content?

Gill: The cookbook format is something people can relate with. When you’re developing an application and you’re stuck on a problem, you want an answer quickly. By opening up our book, developers can easily find a recipe that helps them with their problem at hand. It’s a practical approach, based on issues and problems we’ve faced ourselves in everyday application development. By using our own experience, we think we can closely match what problems other Silverlight developers are having.

While you can read the book cover-to-cover, it’s an easy format for a quick read or to find a solution for your problem!

Thanks Gill and Kevin for giving us an insider view on your book! We’ll keep updating SilverlightShow readers with news on the book, including reviews, discounts and availability of more sample chapters. Good luck, and look forward to more excellent content, including SilverlightShow ebooks, authored by you two!

Windows 8 Metro: Layout, view states and navigation

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 07 May 2012 00:21:25 GMT

Download the source code for this article

The target devices where it is expected Windows 8 to runs are something of really amazing, since it should run from tablet devices of the most various sizes to the the widest monitor.

Don't miss...

All SilverlightShow Ebooks

Dealing with various display sizes and with mobile devices requires new capabilities that go beyond the ones required to run on a simple smartphone. First of all you need to adapt the size of your app to the screen, probably reducing or increasing the amount of content you show to the user. Connected with the use of fingers instead of mouse, it is required you are able to use all available space on the screen, expecially with low resolutions. Finally you have to deal with orientation. It is easy and natural to rotate the screen to best fit the content you are using, as an example using a vertical orientation while reading a page.

All these constraints change the game and have been answered by metro-style application. From the point of view of screen size, you are able to deal with it in different ways, adapting the content or introducing additional elements. You are also able to detect changes in orientation and you can take advantage of the whole screen snapping applications on the side and using a navigation paradigm.

Navigate your apps...

Navigation applications are something you already know for sure. They exists in WPF and in Silverlight but probably you know the benefits of this paradigm from the web that has originally introduced it with the browser. A metro-style application is by default a navigation application, since in the very first rows of code they runs the Window content is injected with a Frame control. There isn't anything preventing you from using something of different from a Frame as main element but if you want to give the better experience to your user this is a one-way street.

   1: protected override void OnLaunched(LaunchActivatedEventArgs args)   2: {   3:     // Create a Frame to act navigation context and navigate to the first page   4:     var rootFrame = new Frame();   5:     rootFrame.Navigate(typeof(BlankPage));   6:        7:     // Place the frame in the current Window and ensure that it is active   8:     Window.Current.Content = rootFrame;   9:     Window.Current.Activate();  10: }

In these lines, from the default App.xaml.cs file you see how the frame is injected and then the Window activated. Having in you hands the code to initialize the frame is important just because you can wrap the fram itself with some application-wide service like, an example, a wait layer that appears when the application is busy with asynchronous activities.

Inside the Frame you can navigate Page instances. A page of your application directly of indirectly inherits from the Page class so it is a good candidate to be navigated to. Differently from Silverlight you didn't use an Uri to navigate to a page but its Type. This choice comes probably from the fact that metro-style applications does not need to have deep-linking from a web page, so there is not any reason of having a complete Uri.

The Frame control exposes all the methods and properties you may need to perform navigation and to detect navigation state. Here is the main:

Navigate(Type page): Perform navigation to a page. This have also an overload you can use to pass a parameter to the destination page. The parameter is of type object so you can pass complex objects.

GoBack(), GoForward(): There go along the navigation stack, back of forward. Side by side with these methods there are two properties, CanGoBack and CanGoForward used if you reached one end of the stack.

StopLoading(): Stop le loading of a page, e.g. if it is taking longer to load.

CurrentSourcePageType: The type of the page currently loaded.

Navigated, Navigating, NavigationFailed, NavigationStopped: These events, exposed also as overridable methods on the Page class let you know when something related to navigation happens.

Given that your application is subject to be freezed and/or terminated under particular circumstances, the Frame control provides a way to persist the navigation backstack, so it may be resumed when the application is loaded again. In the example project attached to this article, I wrote a simple code to persist and restore navigation across different sessions. No matter if the application is suspended or terminated, the navigation starts always from the last point where it was interrupted:

   1: private void GoToNext(object sender, RoutedEventArgs e)   2: {   3:     this.Frame.Navigate(typeof(FirstPage));   4:     this.SaveAsync();   5: }   6:     7: public async void SaveAsync()   8: {   9:     Dictionary<string, string> values = new Dictionary<string, string>();  10:    11:     values[Consts.NavigationKey] = this.Frame.GetNavigationState();  12:    13:     if (this.Frame.CurrentSourcePageType != null)  14:         values[Consts.CurrentKey] = this.Frame.CurrentSourcePageType.FullName;  15:    16:     await Utilities.SaveDictionaryAsync(Consts.FileName, values);  17: }

This code, inside a page persists the navigation state every time it changes. You have simply to call the SaveAsync methos every time you move across pages, just after the call to the navigation method. It saves the current page and the navigation state using the GetNavigationState() method. Then, in the App.xaml.cs you ar requested to restore the state:

   1: protected override void OnLaunched(LaunchActivatedEventArgs args)   2: {   3:     // Create a Frame to act navigation context and navigate to the first page   4:     var rootFrame = new Frame();   5:     6:     if (args.PreviousExecutionState != ApplicationExecutionState.Running)   7:         this.LoadAsync(rootFrame, typeof(FirstPage));   8:     9:     // Place the frame in the current Window and ensure that it is active  10:     Window.Current.Content = rootFrame;  11:     Window.Current.Activate();  12: }  13:    14: private async void LoadAsync(Frame frame, Type defaultPage = null)  15: {  16:     var values = await Utilities.LoadDictionaryAsync(Consts.FileName);  17:    18:     if (values.ContainsKey(Consts.NavigationKey))  19:     {  20:         frame.SetNavigationState((string)values[Consts.NavigationKey]);  21:    22:         if (values.ContainsKey(Consts.CurrentKey))  23:         {  24:             Type page = Type.GetType((string)values[Consts.CurrentKey]);  25:             frame.Navigate(page);  26:         }  27:     }  28:     else if (defaultPage != null)  29:         frame.Navigate(defaultPage);  30: }

To restore the navigation it reads the string representing the navigation from the filesystem and use the SetNavigationState method to load it in the frame. Then it navigates again to the last page hit by the user. The result is awesome since the application always remember the entire set of actions made by the user.

As for Silverlight, navigation implies caching. The Page class exposes a NavigationCacheMode property useful to define if your page have to be cached after it is loaded the first time. This means you have to handle your page slight differently. The first time your page ctor will be called and the load event raised. All the following calls omit to call ctor and Load so you have to handle the OnNavigated event to know when the page is loaded again.

Layout and ViewState

Once in front of your empty page, there are a number of options to dispose your content on the page. If you ever used layout controls in Silverlight and WPF, you already know the whole story. Grid, StackPanel and Canvas are still there and they works as you already know.

The real problem with layout in metro-style application comes from two points of view. First of all, applications are requested to go beyond the boundaries of the screen to maximize the space available, and for this aspect there are a set of controls available, but also to handle different size of the screen. The size of the screen can vary from the minimum of 1024x768 (10.6") to huge sizes like 2560x1440. The size of 1366x768 is considered a reference point.

If you try to start the simulator, on the right side you will find a button that opens a menu with a set of resolutions. Playing with this menu may be interesting to understand what it happens at different resolutions. When you are in start menu and change the value between the 10.6" resolutions, you will notice that the actual size of the tiles remains unchanged also if the pixel density drastically increases. What Windows does is to adapt the size of the elements to three steps: 100%, 140% and 180%. if you take 1366x768 corresponding to 100% you can easily calculate that 1920x1080 corresponds to 140% and 2560x1440 to 180%. The reason to operate this automatic scaling is to always have a size good for finger manipulation. If this scale would not applied the size of a tile at the maximum resolution will be too small to be hit accurately from a finger.

This automatic resize is good for vector-based graphics but may be drastically bad for bitmap images. It is the reason why you can use a trick to specify three sizes of every image. If you use a Image tag in XAML, since you specify a fixed name for the image you can create three versions and use a name pattern to let the system load the better for the current resolution:

   1: <Image Source="Assets/image.jpg" Width="100" Height="100" />

So after this create three versions of the image adding "scale-*" between the file name and the extension. Windows automatically loads the better image according with the selected resolution. Here is an example:

image.scale-100.jpg
image.scale-140.jpg
image.scale-180.jpg

While designing the layout of your application there are two strategies you can embrace. You can go for a fixed or adaptive layout. Every choose best fit a specific scenario:

Fixed: While in fixed layout your application will be scaled according with the screen resolution. The trick is to use a ViewBox control to wrap the entire content of the screen so when the resolution increases it is scaled automatically. This scenario is mostly choosed with games and dashboards where the screen does not go outside the screen boundaries.

Adaptive: In this layout, the size of items is fixed (according to pixel density rules) but when the screen il larger the number of items presented increases to fill the empty space left. Handling this layout is most difficult then the other but the common applications requires it.


23" - 1920x1080	10.6" - 1366x768

According with user actions, an application can assume 4 different state. FullScreenLandscape, Filled, Snapped and FullScreenPortrait. The figure behind shows the states:

The application have to support all the states to give an effective experience to the user. To detect the states changes you have to subscribe the ViewStateChanged event on the ApplicationView object. When the event raises the arguments let you know the new state so you have to switch on or off the parts of your application to best fit the available space. The best way to accomplish this task is using the LayoutAwarePage class, created by VisualStudio in the Common folder of the project. This class automatically handles states and map them to VisualStateManager states. Thanks to this mapping you can easily use Blend to edit the page like you are defining the states of a control.

An important argument

In this article I've scratched the surface of layout and navigation. Especially layout is something that needs to be deeply understand to create effective apps, able to give a good experience to the user. I suggesto to read some good MSDN articles:

In the next article I will go depth in the lifetime matter to understand suspension and how to handle this important task.

International Code Sharing

Fri, 04 May 2012 14:21:29 GMT

A Swede, and Italian/American, and a … Ward Bell walk into a bar …

OK, so I don’t exactly know what Ward Bell is (besides a great friend and brilliant colleague). And what’s he doing walking into a bar with a Swede? And how did they do that since Ward lives in San Francisco, CA and Hans Fjällemark lives in Sweden? And why did they invite me, the Italian/American, since I don’t drink? They went to the bar to share code ideas, of course!

I’ve always enjoyed working on side projects with friends so I could share ideas and bounce crazy ones off each other. The ultimate result is better code and a lot of fun. Ward and I have been friends for years and we often chat over the 3 hour time different from Florida to California via Skype while working out different patterns for building apps. One project Ward was instrumental in helping me work through was how I use a service locator (aka my ServiceProvider) for MVVM with XAML.

Hans is a new friend who I ran into on Twitter. he lives in Sweden, but thanks to Skype the 8 hour time difference is not a problem. I wanted a designer to help with my JsRender course’s demo layout and he was willing to help out (did a great job too). Together we came up with a nice layout for showing demos and key code concepts. What really helped is that Hans is a good designer and a good developer. Later, Hans and I worked out a bunch of small open source projects, one of which is the recently released toastr on github.

My point here is that all 3 of us have greatly benefited not only by creating better code, but also by motivating each other. Motivation is key so side projects don’t get left hanging (at least for me). And I find it directly helps me to build patterns that I can apply to my day job.

So how does this work? We use a few tools … Skype for IM and screen share, DropBox for instant sharing of ideas, and github for a a private repository and source control.

I highly recommend giving this type of collaboration a try. Find somebody that you know or who is on twitter, regardless if they are down the hall or on the other side of the world. With tools like Skype, DropBox and github there is no reason not to. And who knows, you might meet some great people like Hans and Ward

Yet Another Podcast #64–John Papa & Javascript

Thu, 03 May 2012 17:44:03 +0000

Create Games for Windows 8 using Physamajig!

andy@andybeaulieu.com — Thu, 03 May 2012 17:26:00 GMT

The next update of Physamajig will allow users to create their own "Mini-Games" - without writing code! This new version will be released after the June 2012 Windows 8 Release Preview. Like the current release of Physamajig, you just draw out elements on the screen to create physics objects - but in the new version, you can add Behaviors to your objects to add much more interactivity.

So what kind of games will Physamjig allow you to create without using code? This video shows a few examples:

My inspiration for the no-code approach came from Behaviors and Triggers inside Expression Blend, which I used for previous versions of the Physics Helper Library. Inside Expression Blend, you just drag/drop Behaviors onto elements to add runtime logic to them. It was a great way to encapsulate complex logic and allow designers to add interactivity to their creations without needing to write code.

Since Behaviors and Triggers are not (yet) present in WinRT Metro, I had to create my own custom implementation of them. A Trigger is generally an event, such as the user making a gesture on the screen, a collision, or an object being destroyed. A Behavior is what happens in response to the trigger, such as applying force to an object, playing a sound, or destroying an object. In Physamajig, the designer for adding Behaviors looks like this:

If this designer looks familiar to you, it might be because you've seen the cool Project Mayhem from Microsoft Research which was another source of inspiration for me. Project Mayhem calls them "Events" and "Reactions," but really these are the same as Triggers and Behaviors. In Mayhem, the designer looks like this:

So is there really such a thing as the "no code scenario?" Will it ever be possible to put together complex, custom solutions using a simple UI to snap together various logic? I am not a believer yet, but I am convinced that adding Behaviors/Triggers (aka Reactions/Events) in a solution can greatly increase productivity and customization in many solutions.

Let me know what you think, and I'll leave you with one last teaser video, this one with extra cheesiness!

Metro style applications – designing for the user

editorial@silverlightshow.net (Lazar Nikolov ) — Wed, 02 May 2012 12:21:00 GMT

It has been months since Windows 8 is available for developers and the need for new applications is growing in a fast pace.

Don't miss...

All SilverlightShow Ebooks

And nothing is more exacting than a computer user in 21^st century. It’s quite difficult to build the right application, moreover – it’s even more difficult to stay on top and not to be, metaphorically, stepped over by the big players. They always know what exactly the user wants and have the resources to provide it to him. But that’s not always what has to happen after all.

You have the power to build what the user wants and even build it so that s/he would feel it so natural to use your Metro application. That is to design the application in a way that using the fingers on the display seems to be a pleasure, but not a challenge.

Okay, let’s make our Metro applications look great!

Designing the Metro application is different from designing the common and straightforward desktop application. Obviously, using fingers on touch instead of mouse cursor is a big difference. And the Metro style applications will soon become the mainstream.

Here you can find design assets for creating great Metro application mock-ups. The download contains layered PhotoShop files representing common controls and components, project layouts and templates.

In the download you will find lots of .psd files that you can use to build a sketch or mocked prototype of your application. It seems that everything you would ever need is in:

Common controls. A variety of styles of all controls in dark and light Metro themes.
Common components. Tiles with the 1x1 and 2x1 ratio, contracts – the charms bar, search, share and settings side menus and more, and the keyboard.
Base layouts. For fill, full, portrait and snap views.
Project templates. For light and dark themes.

Microsoft provides you with all you could need, but you are, of course, not limited only to the list. All files are layered and fully editable to stick with your mock-up design needs.

User experience design patterns

Here come the UX design patterns. They encapsulate the most important principles in Windows 8 Metro applications and guide you to the ultimate design. Using the patterns helps you in finding answers to questions related to content organization in pages, placing buttons and commands and the touch gestures and interactions.

Navigation design

The navigation design patters guide developers in organizing application content in pages, subpages, sections and categories so the users feel it comfortable and intuitively to switch between application screens and navigate through different views. It focuses mainly on two types of navigation.

The Hub design pattern, or hierarchical system of navigation, is the most commonly used in the consumers preview. It is appropriate when the application consists of large amount of data that also varies a lot. The content is organized in levels and each level is responsible for a specific context. The top-most page – the Hub page, also referred as initial page, is where the content is presented in different sections with different contexts. The Hub page usually provides very different categories of content and less functionality. Its main focus is the content presentation. Each section of the Hub page is associated with a Section page that is more specific in its content presentation. It often contains a number of data items. Each item is then presented in details in the Details page – the third and last level of content.

The Flat design system is used mostly in applications that have a single purpose and clear interaction and process flow. Such an application is document creation tool that has small number of pages that have to be executed all in a specific order.

On the navigation design documentation page here you can also find guidelines and basic navigation concepts for Metro applications.

Commanding design

The commanding design guidelines that you can find here describe the best practices in Metro applications for placing and using command buttons in all possible ways. The focus is on what the user should be able to do and how this should happen. When possible you must allow manipulating items and executing commands directly from the canvas and not by the charms and the application bar. The command buttons have to be consistently used in all application views so it is the same and intuitively for users to execute commands from everywhere. To avoid complexity limit the number of commands and always consider the placement of the button – this could improve the speed a command can be acted upon.

Touch interaction design

On the Microsoft Build conference last year Jensen Harris of the Windows User Experience team announced the results from usability research conducted from Microsoft in their dedicated labs for the comfortable zones of interaction and behavior when using a touch screen device like the Metro tablet. Everyone uses the touch device in a slightly different way in different postures – on the knee, on tables, with two hands on the side, etc. The last turned to be the most common posture.

The touch interaction guidelines (that you can find in details here) describe how to provide good touch interaction experience with your application partly relying on researches among users.

Interaction comfortable area: Because the Windows 8 tablets are most often held along the side, the bottom corners and sides are ideal locations to put your interaction elements. To comfortably reach the center of the screen it takes you a posture change – put the important interaction interface close to the edges in the user’s comfortable zone.

Reading comfortable area: Content in the top half of the screen is easier to read than content in bottom half or the middle because it is often partly covered by your fingers.

Windows 8 has several standard touch interactions, which effects shouldn’t change when the display is touched with more fingers than expected.

Elements from your interface that could be moved around should follow the finger direction while the display is touched. Just like in real world – the pen is in your hand while you don’t put it on the desk. All interactions should be observed, i.e. user should feel or see a feedback from his actions. It’s not acceptable to press a button with your finger and don’t see any flash or any kind of feedback. You could be misled that your touch hasn’t been registered from the device. And last but definitely not least – always consider the size of the things. The error rate increases with the size getting smaller. The recommended minimum size for a touch target is 7x7 mm (40x40 pixels) with at least 2 mm padding. Of course, when the accuracy matters, the size gets bigger.

Touch interactions are important. Think if the interactions as the language that your application uses to communicate with the user. You need this language fluent!

Conclusion

Designing your application in a way that you put yourself in the user shoes is a key factor for the vitality of a future product. In a world where the user is ruling and defines the standards, the design and feel of your application is also the packaging. And the bad pack is even not considered as an option. This article is about attracting users with nice and intuitive user experience in Windows 8 Metro applications. To keep a user, though, you need also the content and value. Harnessing the power of the navigation, commands and touch interactions guidelines and patterns parallel with the content may be the key of your success!

New Course on JsRender Templating Fundamentals with JavaScript

Tue, 01 May 2012 21:23:46 GMT

Super fast rendering, code-less tag syntax, and no DOM nor jQuery dependency. That’s JsRender!

My latest course JsRender Fundamentals is now available at Pluralsight! Learn how to build fast, robust, and maintainable Web applications with JavaScript, jQuery and JsRender: the successor to jQuery Templates.

Free Preview:

Course Description:

JsRender (the successor to jQuery Templates) is a JavaScript library that allows you to define a boilerplate structure once and reuse it to generate content dynamically. Learn how JsRender brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string based rendering.

What are the modules?

0: Course Overview

> 1 minute teaser trailer on what the course covers

1: Getting Started with JsRender

This first module sets the foundations for the course by showing you everything you need to know to get started with JsRender and some helpful resources. You'll also learn a few tips on some tools and conventions that may help you along the way.

2: JsRender Core Tokens

This module introduces the core JsRender token syntax for HTML encoding, handling conditionals, expressions, and looping through data. Also covered are how to use JsRender without jQuery and the #data and #index tokens.

3: View Paths, Nesting and Context Changes

This module covers how to manage object hierarchies, changing context, view paths, and contextual parameters using the JsRender features.

4: Managing Templates

This module covers important management and performance tips for your templates using JsRender and jQuery. You will learn how and when to use strings to store templates, how to compile and name 1 or more templates, and how to use external templates.

5: Advanced JsRender Concepts and Tips

This module demonstrates how to create your own JsRender tags, converters and helper functions to create more powerful and cleaner templates through separation of behavior and structure. These tips can create powerful, resuable and more maintainable templates for web applications.

Demos:

The course includes 20+ demos that you can run (some within Visual Studio and others from JsFiddle)

Parting Thoughts:

I extend a sincere thank you to some great folks who helped influence this course through their contributions to open source, the plug in community, and some by helping me vet the content and ideas. They are, in no particular order:

Boris Moore – creative mind behind of JsRender and jQuery Templates
Hans Fjällemark – designed the responsive web design layout for the demos
Ward Bell – helped vet my ideas for the “code concepts” window in the demos

Windows 8 and the future of XAML Part 6: Tiles, toasts and badges

editorial@silverlightshow.net (Gill Cleeren ) — Tue, 01 May 2012 13:47:22 GMT

Download the source code for this article

Welcome to part 6 already in this Windows 8 series. Since the goal of this articles is bringing you in touch with all the important aspects of Windows 8 development, we need to dive into tiles.

Don't miss...

All SilverlightShow Ebooks

Tiles are therefore the main topic of this very article. If you’re coming from a Windows Phone 7 background, the concept of tiles is probably already familiar to you. However, Windows 8 brings quite a few new things to the table, including the concept of badges. Toasts are also covered here; conceptually, these already existed in Windows Phone 7 development as well but have been adapted for use in a Windows 8 environment.

The concepts of tiles

In Windows 8, due to the new way application lifetime management, only one application can be running at any point in time (except when the user has two applications side-by-side using snap view; in that case, two applications are running at the same time).

If not running, the application is suspended. We’ll cover the lifetime management in a coming article.

If an application wants to inform the user about an event or any update really, by default, it can only do so while it’s running in the foreground. Because this wouldn’t lead to a great user experience, Microsoft invented tiles. Tiles are the little blocks, pinned to the start screen. The image below shows some tiles.

While a tile is a way to launch an application, it can be much more. Users will pin applications they use most to their start screen. A tile can be made a live tile. A live tile is being updated with new information while the application is or isn’t running. Therefore, the tile can be seen as an extension of the application, allowing the developer to convey information while the application is not the foreground application (read: when it’s not running).

Like in Windows Phone 7, the start screen is a means of giving the user access to his most important info. Using a live tile, this becomes possible. The tile can be a way of engaging the user back in the application: imagine you’ve written an RSS application. Using a live tile, you can update the information shown in the start screen. When the user notices the article showing, it can result in a launch of the application.

Looking at the live tiles (and frankly, screenshots don’t do them justice), they may seem a bit complicated for developers to create at first sight. All the animations and different types that exist however, are all based on templates which are pure XML. Indeed, there’s no need to create tiles from scratch, Microsoft did the hard part. For developers, it’s just using these templates and Windows 8 will handle the rest. We’ll see these templates in a minute.

Tiles: basic ones and live ones

Let’s now look at how we can create these tiles. Up first, basic tiles.

Basic tiles

In Visual Studio, we can as a bare minimum, include the default tile, which is a square. When installing the application, the tile that’s shown by default is the square tile. It’s the user who can select that your application gets a wide tile. However, it’s up to the developer on the other hand to include a wide tile in Visual Studio as well. In the screenshot below, you can see the package manifest editor where we are selecting images. Notice that Visual Studio hints at what the sizes of these should be.

At this point, our application has a basic tile, which isn’t doing anything at all. It’s acting like an icon on the desktop basically. Below is the wide tile.

And here’s the square tile.

Both wide and square tiles can get updates. When receiving updates, tiles become live tiles.

Live tiles

Live tiles are where the fun begins. A live tile can display updates to the user. Below you can see a tile displaying different statuses.

It’s easy to understand that this way of displaying information extends the way the application works: in many apps, the information on the tile is some summary of the most important information of the application. Apart from text, tiles can also display images or a combination of the two.

To make a tile become a live tile, we need to send it a message. This message consists of XML in the form of a predefined template. Microsoft has included quite a few templates for both the square and the wide templates; below we can see a sample of this XML:

<tile>

  <visual version='1' lang='en-US'>

    <binding template='TileWideText03'>

      <text id='1'>Hello World! My very own tile notification

      </text>

    </binding>

    <binding template='TileSquareText04'>

      <text id='1'>Hello World! My very own tile notification

      </text>

    </binding>

  </visual>

</tile>

The template takes complete care of the display of the tile: rendering of the tile as well as all animations are done entirely based on the XML. We as developers don’t need to worry about these; the only thing we need to do is sending the tile updated XML. In a tile, we can include text (in some predefined fields in the XML) as well as images. Images can be *.png or *.jpg files (we’ve seen these in the above screenshots).

Let’s see how we can create a live tile. In this article, we are working with an application called “WorkingWithTiles”. The UI is very simple, it contains a few buttons which will trigger the execution of a tile update.

We can work with the raw XML (shown above) where we modify the XML and send that XML directly to the tile.

void UpdateTileWithText(string text)

    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);

    XmlNodeList textElements = tileXml.GetElementsByTagName("text");

    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));

    TileNotification tile = new TileNotification(tileXml);

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);

In the code above, we first retrieve the content using the TileUpdateManager.GetTemplateContent. TileTemplateType is an enumeration that contains all templates. In the following lines, we replace the contents of the text field. Finally, we create a TileNotification instance, which in the next line is sent to the TileUpdateManager.

Below you can see the updated tile.

Now we’ll take a look at updating both text and an image. The code is similar although a bit longer since we are adding an image and text. Notice that we are also including the contents of the square tile here, since we don’t know if the user has a wide tile or a square tile pinned from our app.

void UpdateTileWithImage(string text, string imageSrc)

    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

    XmlNodeList textElements = tileXml.GetElementsByTagName("text");

    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));

    XmlNodeList imageElements = tileXml.GetElementsByTagName("image");

    XmlElement imageElement = (XmlElement)imageElements.Item(0);

    imageElement.SetAttribute("src", imageSrc);

    imageElement.SetAttribute("alt", "Image description");

    XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);

    XmlNodeList squareImageElements = squareTileXml.GetElementsByTagName("image");

    XmlElement squareImageElement = (XmlElement)squareImageElements.Item(0);

    squareImageElement.SetAttribute("src", imageSrc);

    squareImageElement.SetAttribute("alt", "Image description");

    IXmlNode subnode = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true);

    tileXml.GetElementsByTagName("visual").Item(0).AppendChild(subnode);

    TileNotification tile = new TileNotification(tileXml);

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);

When we look at the start screen now, we’ll see the following tile.

Using the XML directly is maybe a bit cumbersome. In the SDK samples, a handy library is included called NotificationExtensions. This wraps the XML editing and gives us types to work with. The XML editing is abstracted away. Below you can see the code for the text -only tile update.

void UpdateTileWithTextExtensions(string text)

    ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();

    tileContent.TextHeadingWrap.Text = text;

    ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();

    squareContent.TextBodyWrap.Text = text;

    tileContent.SquareContent = squareContent;

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

And below is the tile update containing an image and text.

void UpdateTextAndImageExtensions(string text, string imageSrc)

    ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();

    tileContent.TextCaptionWrap.Text = text;

    tileContent.Image.Src = imageSrc;

    tileContent.Image.Alt = "Web image";

    ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();

    squareContent.Image.Src = imageSrc;

    squareContent.Image.Alt = "Web image";

    tileContent.SquareContent = squareContent;

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

As you can see, it’s much easier to work with these instead of directly editing the XML. The result is of course exactly the same.

Secondary tiles

By default, an app can only have a single tile. There are quite a few scenarios however where the user may want more than one tile of your application pinned to his start screen. Imagine you’re building a weather application. The user may want to pin to his start screen his current location but also the cities he’s to visit in the coming time. Or imagine you have again that RSS application. In such an app, a user may want to pin one or more RSS feeds so he gets notified about their updates on the start screen.

To cover this, we have secondary tiles. Such a tile works in the same way as a regular live tile, but it can be added to the start screen by the user from within the application. To be able to pin content, the developer however has to build in this option in the application (for example adding a Pin to Start button in the App Bar on the detail page of the weather for a city). Let’s look at this in some code.

private async void CreateSecondaryTile_Click_1(object sender, RoutedEventArgs e)

    Uri logo = new Uri("ms-appx:///assets/small.png");

    Uri smallLogo = new Uri("ms-appx:///assets/secondary.png");

    string tileActivationArguments = "timeTileWasPinned=" + DateTime.Now.ToLocalTime().ToString();

    // Create a 1x1 Secondary tile

    SecondaryTile secondaryTile = new SecondaryTile("AppSecondaryTile",

                                                    "Next webinar",

"",

                                                    tileActivationArguments,

                                                    TileOptions.ShowNameOnLogo,

                                                    smallLogo);

    secondaryTile.ForegroundText = ForegroundText.Light;

    bool isPinned = await secondaryTile.RequestCreateForSelectionAsync

        (GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Right);

Notice that it’s also possible to pass contextual information from the tile. It wouldn’t be a good experience if the user clicks the tile and arrives on the default landing page of the application. Creating a secondary tile is done by using asynchronous code, hence the use of the await/async pattern.

The user has to approve the secondary tile. This is done using the RequestCreateForSelectionAsync. The result of this is shown below.

If we run this code now, we get the following secondary tile.

Badges

Finally, as developers, we have the ability to display badges on the tile. A badge consists of a number between 0 and 99 or a glyph. The badge is an overlay on top of the tile. Adding a badge is done again using XML templates: by sending some XML to the tile (or to the secondary tile), the badge gets added to the tile. Let’s take a look at adding the badge from code. In here, we are updating the tile with a number.

void UpdateBadgeWithNumber(int number)

    BadgeNumericNotificationContent badgeContent = new BadgeNumericNotificationContent((uint)number);

    BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());

The tile now looks as follows.

Now that we’ve seen tiles and their options, let’s look at notifications.

Notifications

A tile update isn’t guaranteed to be seen by the user. If our application has an important update to convey to the user, it might not be a good idea to just update the tile. In this case, it might be better to send a notification that the user will see on top of the running application. If you’ve been doing Windows Phone 7 development, you’ll probably recognize this pattern.

Like a tile, notifications are also built using XML templates. Because of the fact they are displayed over the running application, they are bound to get the user’s attention more quickly. Notifications aren’t permanent (they disappear automatically) and only 4 are shown at the same time. Just like with secondary tiles, it’s possible to pass context so that the user is brought automatically to the correct location within the application.

Notifications shouldn’t be used to spam the user though. Ultimately, the user remains in control: he can decide to turn off notifications for your app or for the entire system altogether. Therefore, don’t count on the fact that the user has seen the update!

Let’s add a notification message to the code now.

private void CreateToast()

    IToastNotificationContent toastContent = null;

    IToastText01 templateContent = ToastContentFactory.CreateToastText01();

    templateContent.TextBodyWrap.Text = "SilverlightShow webinar starts now!";

    toastContent = templateContent;

    ToastNotification toast = toastContent.CreateNotification();

    ToastNotificationManager.CreateToastNotifier().Show(toast);

Below you can see the notification being shown to the user.

If your toasts aren’t displaying, check that in the manifest declaration, this has been set to enabled.

But what about non-running applications?

We’ve now seen how we can update the tiles as well as send notifications from the main code of the application? But what if the app isn’t running? That will be covered in the next part of this series!

Summary

In this article, we’ve looked at the different types of updates applications can send to the user. We haven’t looked at how to do so from the cloud. That will be covered in the next article. Stay tuned!

About the author

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill is the author of “Silverlight 4 Data and Services Cookbook”. In 2012, the second edition, “Silverlight 5 Data and Services Cookbook” is released.

You can find his blog at www.snowball.be.

Twitter: @gillcleeren

Simple JavaScript Notifications with toastr

Tue, 01 May 2012 13:46:32 GMT

My friend Hans Fjällemark and I have been collaborating on some JavaScript libraries lately and we decided it was time to release toastr, the first of them, on github. Our collaborative organization is under https://github.com/CodeSeven

toastr is a simple JavaScript toast notification library that is small, easy to use, and extendable. It allows you to create simple toasts with HTML5 and JavaScript like this:

Simply include the files in your HTML page and write a simple line of code like this:

toastr.success('Are you the six fingered man?', 'Inigo Montoya');

Hans is a great developer / designer and has recently helped me created some nice responsive designs in some demos and Pluralsight courses. You can see the layout he helped design and create in my latest course, JsRender Fundamentals on Pluralsight now.

The API

There are 4 methods to learn. info, warning, success and error. The each have a message and an optional title.

// Display a info toast, with no title
toastr.info('Are you the six fingered man?')

// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You Killed my father, prepare to die!')

// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')

// Display an error toast, with a title
toastr.error('I do not think that word means what you tink it means.', 'Inconceivable!')

After having it in alpha for a few weeks and accepting feedback on it, we decided today to take it to beta as the API has stabilized.

toastr is Responsive

Just include the viewport meta tag and the toastr-responsive.css, and toastr will adjust to different device sizes. See toastr and its responsive web design here on responsinator.com

Some important links:

see toastr in action at toastr’s demo page here
grab toastr from github at https://github.com/CodeSeven/toastr

What Else Can toastr Do?

Check out the demo for these and other examples of toastr in action.

Override the css classes to change the appearance
Set the fadeOut, fadeIn, and timeOut settings
Set timeOut to 0 to make the toast sticky
Position the toast in the top left, top right, bottom right, or bottom left
Set the message to HTML content and/or wire event handlers up to that content.
For debugging, set the debug info to true to show all of the options and setting in the browser’s console window

Unit Tests

Feel free to check out toastr’s unit tests, which you can run online here. We decided to go simple and use QUnit, which does the job quite nicely.

NuGet

I published a package on NuGet for toastr that you can find here. Be sure to allow searching for pre-release packages (NuGet disables that by default). We do not foresee any changes to the API so this beta should be pretty solid. If we receive no major issues, we’ll go RC very soon.

2 Months with the ASUS ZenBook UX31E

Mon, 30 Apr 2012 14:19:20 GMT

It’s been over 2 months since I’ve been using my ASUS ZenBook UX31E out and about for blogging, surfing, coding, and presentations. I wrote about the slick look of the UX31E and my (poor) opinion of the keyboard and the screen last month and frankly that has not changed. However, I have found the UX31E to be ideal for several situations over that time, so I’ll focus my wrap up on what this sub $1000 ultrabook is good for.

Speed

I give a lot of presentations with multiple instances of Visual Studio and heavy loads of software running on my computer. I won’t suffer a laptop that performs sluggishly in front of a room of developers because it needlessly detracts from the presentation. The good news is that the UX31E is really fast for a small lightweight laptop. I have been able to run multiple demos, powerpoint, presentation tools, and other apps during my presentations and the machine has not missed a beat. The best thing I can say about its performance is that I never once paused for concern over how it was performing on stage.

Projection

It frustrates me to no end when a laptop does not work well with projectors. Laptop is ready to go, you are on stage, you plug it into the projector, and the resolution you want to use is not available. Ugh. The UX31E worked great with many of the projectors I connected to it. Now, this is not often just on the laptop. The projector and video card in the laptop have a lot to do with this too. I bring multiple laptops to presentations (call me careful, call me prepared). The point is that when some of my laptops were not working with the resolution I wanted, the UX31E always came up aces. When giving a presentation the last things you want to worry about are the speed of your laptop and how it will project to the screen. Kudos go to the UX31E on both of these points.

Boot Up / Awake

It really is amazing at how fast this computer comes awake from sleep. Open the lid, count to 3 and before you can do that it’s ready to go. At first I did not appreciate this feature, but after using it for a few months I really grew to appreciate how fast it came awake. I’d be sitting chatting with some folks about code and they’d ask to see a demo. I could just whip out the UX31E, open the lid, and in seconds I was running my demo. Now that is sweet.

Summary

Due to the keyboard responsiveness issue I experienced I found the UX31E not to be good for me for everyday development, but I did find it to be very valuable for travel and presentations. However if you do a lot of presentations and/or travel, this could be an ideal laptop.

… And to be clear …

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Celebration! 120’000 downloads for #mvvmlight, 2 copies of Expression Studio to win

Sun, 29 Apr 2012 19:05:11 GMT

That is a symbolic milestone: Last week, MVVM Light reached the bar of 120’000 downloads on http://mvvmlight.codeplex.com, the site that has been hosting source and installers since the beginning of the project (100'000 downloads) and on Nuget, the popular package manager for .NET (20'000 downloads). More information about Nuget and MVVM Light.

Scroll down to have a chance to win a copy of
Expression Studio V4!

MVVM Light started its “career” on Codeplex in October 2009. Back then it was intended as a set of classes I could use when blogging about MVVM, to avoid having to repeat the same concepts over and over again. These ideas were born from discussions on the WPF disciples mailing list (now renamed to “XAML disciples”), a group of friends who talks about everything and anything and occasionally about coding. In fact in some cases some code was even ~~stolen~~ borrowed with appreciation from some of the individuals on this list. Since then of course, the code has evolved, driven by requests from the community. I have a lot of appreciation for everyone who helps, and for the many interesting discussions around MVVM and other coding concepts.

I remember one discussion (in a sauna in Seattle, of all places) with my friend Josh Smith about what I wanted to achieve with MVVM Light. Back then I told him that my goal was to have this side project, but that I didn’t intend to let it grow too big. I can say with confidence that I failed big time: MVVM Light is taking a lot of my free time, but what a reward!

Multiple platforms

MVVM Light is available these days for Silverlight 3, Silverlight 4, Silverlight 5, WPF3.5, WPF4, Windows Phone, WinRT (Windows 8). I know for a fact that it is running into many Windows Phone applications (MVVM Light for WP7 was released within a few days from every major version of Windows Phone).

Lesser known fact, MVVM Light is also running on XBOX: At the end of last year, a lot of new applications were released for this platform. The applications are XAML based, and MVVM Light was chosen as the framework of choice to build these applications. There is no obligation, but this is driving adoption of MVVM Light in the living room!

Of course Windows 8 is also supported. Here too, MVVM Light was available within a few days from the major releases (developer preview, customer preview) and that will continue. I have the chance to have people within Microsoft who are using MVVM Light and helping me with issues, again it is a great pleasure to have this collaboration.

An amazing community

If like me you follow the #mvvmlight tag on Twitter, you will see that many people worldwide are using it. I love to see tweets about it in all kinds of languages (in fact if I would love to travel to all the places where it is used :)

I also receive many more emails than I can handle. I really do my best to answer everything, sometimes with a delay, but I fail. If you have sent me an email and it was not answered, please accept my sincere apologies. It’s simply too much to handle. On the other hand, if you have technical questions, make sure to post the on StackOverflow with the tag "mvvm-light"!! Questions there are rarely left unanswered, and I am also checking them out from time to time. Crowdsourcing the tech support has probably been one of the best decisions I ever made in this project!

Things I would like to do (or to have done differently)

Not everything is perfect in this project, by far. There are a few things I really would like to do better, and some thing I would like to have done differently.

First, the documentation: This is an oft-heard comment and it is true, there isn’t a structure documentation concept. There are however many many articles by MVVM Light enthusiasts, but I agree that for a beginner it can be a daunting task to find their way through all the information. So yes, this is still a big project and a big plan, I want to have a solid documentation concept. When? Well that is the big question, because that takes a lot of time. The balance between coding and documenting is really not easy. That said, the whole source code is documented, so at least that is clean :)

Another thing I regret is that I took over too many new features and bug fixes in V4. Because of that the gap between V3 and V4 was much too long. I will change that in the next version, and release true RTM versions more often.

V4 and then?

These days I was busy releasing V4 release candidate (RC) to Codeplex (source), Nuget and to create an MSI installer. I will give a couple of weeks to the RC just to catch last minutes bugs (if available) and make a few minor adjustments. It means that V4 will definitely be released in the next few weeks.

And then… well then I want to tackle a few things: more documentation, and starting to work on V5. I also have a couple of applications for the phone and for Windows 8 that I would love to finalize. I guess that rest is for the dead, eh? ;)

Again, I want to thank everyone who sends me messages of support through the years. I could not have done all this without the moral help of the community.

Celebration

To celebrate this milestone, I am giving away two copies of Expression Studio 4 Ultimate (includes Expression Blend, Sketchflow, Expression Design, Expression Encoder Pro and Expression Web+Superpreview). This is a value of 599 USD each!

Not only you will have a chance to win this for as little as 10 USD, but in addition the whole proceeds of this auction will be sent to the humanitarian organization Calcutta Rescue. I have many ties with this organization and I was even president of the Swiss organization (in charge of gathering funds in Switzerland) for quite a few years. In 2007, I had the chance to visit the projects personally and I can attest that they are extremely well managed. You can see pictures of this visit on my Flickr page.

In order to participate, follow the easy step:

Go to this page on my website and make a donation of at least 10 USD. You are welcomed to give more of course!

On May 29th, I will block the counters and will randomly pick two winners for the Expression Studio copies. Winners will be notified per email and the prizes sent by standard mail. I will personally ensure that the funds are sent to Calcutta Rescue by the intermediary of the Swiss organization Calcutta Espoir, whose sole purpose is to gather funds in Switzerland for the Indian NGO.

I count on you, awesome MVVM Light community, to make this action a success! See you on May 29th to announce the winners!

Cheers
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Develop your app for everyone–localize your UI

Thu, 26 Apr 2012 18:47:48 GMT

Being more involved in the engineering process of a product I had the chance to participate in the design of various features instead of just the ones that I’m responsible for delivering. One of those areas was the way we would enable developers to produce localized applications. Before this process I have to be honest and as an app developer never really paid much attention to providing localized versions of any app that I wrote. I had absolutely no good reason for coming to that decision, just never bothered. In helping to design and understand localization a bit more I can say that it is easy to do this in your app and there shouldn’t be any excuse for any app developer to create their application in a way to make it localized at any given moment. Note I didn’t say localized immediately, but rather I mean to create your app in a way that would make it easy to provide a localized version in a fairly quick turnaround.

As I do some app development for Windows 8 I wanted to share my thoughts around localization and what it really means to me to provide a ‘world-ready’ application. The three areas of focus are 1) how the platforms support a localized app, 2) what technical tools you have to automate localization 3) getting culture-correct localization and 4) testing your localized app.

Platform support for localization

The first thing you have to understand is how the platform you are targeting enables support for your app to easily be localized. This may be in how you organize your content, how you name certain things, and how you write code. For most platforms there is a pretty predictable method of doing this. I would argue not all platforms make this extremely intuitive, but also state that inferring how (and what) you want to localize your app isn’t something a platform can predict well for every app. It is important for the app developer to plan for a global market and fully understand the models before writing a line of code to understand how to make the app localized more easily later in the process.

For Windows 8, a new resource model is introduced for WinRT that is common across the entire platform regardless of the UI framework choice. The areas you should understand are Windows.ApplicationModel.Resources and Windows.ApplicationModel.Resources.Core. These two areas are where most Windows 8 developers will spend most of their time with regard to localization of UI strings (and other content). For most, the GetString() method is probably where you’ll spend your time when using code. String values are indexed during the build process of your application. Your strings will either reside in a RESJSON (for HTML/JS) or RESW (for XAML) file. Both of these are essentially name/value collections for your strings. An example of the process of naming and managing your string resources can be found here: How to manage string resources.

NOTE: Yes the Consumer Preview version of that documentation shows only Javascript right now, but will be updated. The naming conventions are the same.

In XAML we created a new way to do XAML UI localization in your markup, by moving some functionality into the platform for you. Previously in platforms like Silverlight people used techniques like data binding to accomplish the mapping from the RESX-generated class to the UI. Because the indexing of the string resources changed a bit (i.e., currently no strongly-typed resource class representation), we wanted to have the platform do some more heavy lifting for you. We already load the index file (resources.pri) automatically during load of the app, so we’re aware of the resources and all the context the app may have (i.e., what locale, screen resolution, etc.). Because of this we enabled a markup mechanism in XAML for you to provide easy string localization. Let’s use a simple example of a TextBlock that you might have a static string:

        1: <TextBlock x:Uid="MyTextBlock" FontSize="24.667" Text="Design Placeholder" />

Notice the x:Uid value here. This now maps back to the key in your RESW file. Anything with that starting key will have properties merged into it. So we can have a key in our RESW for “Text” using the key name MyTextBlock.Text with a value of “Hello World” and the runtime will do the replacement for you. This applies to properties other than text (i.e. width) as well as attached properties. While we think this is a great new method, it may not work for everyone’s situations and you still have control over retrieving strings using the Windows.ApplicationModel.Resources WinRT APIs. You can read more about this method with some examples here: QuickStart: Make your Metro style app world ready and an SDK Sample here: Application Resources.

Tools to help with localizing content

Once you have understood what your platform provides and you have taken the effort to prepare your app for easy localization, the next step is to actually use tools/process to perform the localization. I’ve come across a few tools that I think are helpful for XAML developers who are ‘small shops’ and don’t have an existing process for app localization.

The easiest thing for a developer to do is to use machine translation using automated services. There are a few tools out there that I think can be helpful for this method. It is important to note we are talking about machine translation here…I will get to that point later on in the post.

RESX Translator with Bing

Since the RESW format is identical with RESW (restriction is that RESW only supports string values currently), you can use a lot of existing RESX tools. There is a RESX Translator with Bing project on CodePlex that was done by Microsoft UK Consulting Services. This allows you to select a file and source language and translate to any language that Microsoft Translator supports.

Since the current project supports (and only loads) .resx files, I had submitted some patch files to quickly make it support the .resw file extension. The contributor hasn’t accepted these patches, but you can find them on the patches section for the project.

Multilingual App Toolkit

Released with the Visual Studio 11 Beta, the Multilingual App Toolkit from Microsoft provides an integrated method for generating resources for your app. One of the benefits of this app is that it produces some standards-based files that are used to send to localizers and can be used in other tools. This includes the TPX and XLIFF file formats. Once installed the tool is integrated within visual studio and your flow would be something like the following.

First you’d have your app and an initial RESW file containing your default language (in my case en-US) resources. Once I have that I can right-click on the project and choose Add translation languages and when doing so, launches:

which I can select the languages I would prefer. Notice the translator icon next to some of them indicating that these could be machine-translated. Once you select the languages you want, you’ll see a folder within your app that contains the configuration information:

Now if you open the XLF files you’ll basically see some XML that contains configuration information but initially won’t see any of your string values. You need to do a build to populate those files. After building you’ll see the XLF files regenerated with the keys to be localized:

       1: <?xml version="1.0" encoding="utf-8"?>       2: <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:oasis:names:tc:xliff:document:1.2 xliff-core-1.2-transitional.xsd">       3:   <file datatype="xml" source-language="en-US" target-language="de-DE" original="LocTesting_Multilingual.prilog.xml" tool-id="MAT" product-name="LocTesting" product-version="Version 1" build-num="1.0.0.0">       4:     <header>       5:       <tool tool-id="MAT" tool-name="Multilingual App Toolkit" tool-version="1.0" tool-company="Microsoft" />       6:     </header>       7:     <body>       8:       <group id="Resources">       9:         <trans-unit id="Resources\SomeTextBlock\Text" translate="yes" xml:space="preserve">      10:           <source>Good morning!  Have a nice day!</source>      11:           <target state="new">Good morning!  Have a nice day!</target>      12:         </trans-unit>      13:         <trans-unit id="Resources\SomeButton\Content" translate="yes" xml:space="preserve">      14:           <source>Click to Save</source>      15:           <target state="new">Click to Save</target>      16:         </trans-unit>      17:       </group>      18:     </body>      19:   </file>      20: </xliff>

Now you send those off for translation by right-clicking on the XLF file and choosing Send for translation which will give you a dialog to choose if you want to mail them or save to a folder and which format (TPX/XLIFF). At this point your translation process can begin. If you don’t have a translation process where you would normally send the XLIFF files, you can use the MAT Localization Editor that is installed with the toolkit. Launching this tool and opening your XLIFF file will allow you (or the person doing translations) to edit the files with the correct value. The MAT editor also has the Microsoft Translator capability as well. Here’s an example of the above German file in the editor with one value translated by the Microsoft Translator:

Once you have the edited XLIFF file you import that back into your project. Notice there are some other workflow-related properties in the XLIFF (i.e., Signed off, ready for review, etc.) that you can enforce. Right-click on the XLF file in your project and choose Import translation and the XLIFF file that was modified. Once imported, when I build next the signed-off items will be indexed within my app’s resource lookup (resources.pri) and packaged. You will not see any new RESW files generated as using this process does the indexing during the build process with the XLF file and a build task.

Amanuens

Another tool that I’ve come across is Amanuens, which is more of a service/tool than anything that integrates into Visual Studio or runs on your machine. This service acts as a broker to translators. You basically create a project and then upload files to be localized. After you login and create a project (specifying the type as Metro as they now support Windows 8 application file types) then you upload your “master” RESW/RESJSON file. After doing that you can assign a translation and this is the core of their service. You can assign a file for translation to a person that is a user on the system as you may have a German speaking friend who might help you out. Or you can assign to an agency and get a quote:

This way you can send it off and wait. Either way when the translation comes back you just download the file, put it in your project in the appropriate folder and rebuild your app. Amanuens is a pay service with a free option, but if you have an app and want to manage the workflow of that process, it seems like a pretty cool service. They also have automatic source control synchronization that you can opt-in for so as your translations come in, they are automatically in your app via a repo sync.

Culture-correct localization

While all the above tools are awesome and fast to get you started, to build a really targeted localized app it is highly recommended you do more than machine translation, or at a minimum verify that machine translation. Many times, especially for east Asian languages, the machine translation can be grammatically incorrect or sometimes culturally insensitive as most do dictionary-based translation rather than really understanding any context.

I recall a time in high school where a classmate went to Germany for exchange. Having taken 6 semesters of German she felt pretty confident in her skills. Little did she know her hoch Deutsch would prove to be a problem. Upon arrival she went to a café with some friends and proclaimed she was hot. However, her dictionary translation was bad and she effectively said “I’m horny” which immediately caught the attention of all the men in the room. So it is key to understand context and culture when translating!

For this services like Amanuens really help out in both the flow and identifying a person to do the translation. If you don’t know anyone who speaks Swedish, but want to target that market, using a service could help you get more culturally-correct translations for your app over just machine translation. This, of course, does not come without a cost, but usually it is minimal and is a one-time translation.

One thing I’d love to see happen is somewhat of a co-op of software developers from around the world to offer translation help. Working at Microsoft I had the chance to get correct translations of my Sudoku app for German, Japanese, Korean and French. It was helpful to just send off the RESW file and get back the translation from a human who speaks the language and understands technology terms as well. A service like Amanuens can help facilitate that co-op having a bank of users that are willing to donate their translation services for your project. I think the struggle is that it is mostly English apps that need the help and hard for an English person to really reciprocate the value. But if you are willing to help out other software developers perhaps we can start this co-op idea?

Testing your localized app

[!!_Śò ẃĥâт đõ Уôú ďó įƒ ўôú đõи'ť ћãνê тŕáйşłâţêď ţę×т ýęţ áйď ẅàήт тó тęšť ÿòµѓ ãрρ?_!!!!!!!!!!!!!!!!!!!!!!!!]

Could you read that? Squint a little more. It is what we call Pseudo Language. Not a ‘real’ language but something that simulates a lot of different characteristics of localized language challenges. Using the Multilingual Toolkit you can have all your strings translated to this Pseudo Language (sometimes called “ploc” within the walls of Microsoft) to test your app before your real language translations come in. Using ploc helps you identify various artifacts that may exist in localizing an app. Let’s take a simple example from above. We had a button that said “Click to Save” in English and we translated it to German. When rendered it would look like this respectively:

Notice that the German translation didn’t fit within the Button MaxWidth we had set because the translation of the text was longer than our English version. Testing this is important for us to realize we need to change the constraint of the XAML sizes to accommodate our languages that we are targeting.

Historically testing localized versions of apps may have been challenging requiring you to install a language pack, try to navigate menus that you may not understand, or relying on others to verify for you. In Windows 8, this process has become easier using the language list preferences. The Building Windows 8 blog had a post called “Using the language you want” which talks about this concept in detail.

NOTE: If using the Pseudo Language option and you want to test, when in the Language panel search for “qps-ploc” and you’ll see it under English (qps-ploc) as an option and then you can really test the boundaries of your app with the ploc strings!

Effectively as a developer I can go into the Language panel, add German, set it as my first language and run my app. Now I’ll get my German resources first and I can visible verify things that need to be changed without installing any language pack on my machine…and I can quickly change back without any reboots.

Summary

Developing your application to be world-ready doesn’t have to be a huge undertaking and can turn out not to be difficult at all for your app. While not every app is going to be the same and how you choose to architect your code may dictate how you get your resources, the concepts are still the same and starting with the mindset that your app may be localized at some point is the right thing to do. Using RESW/RESJSON from the start and understanding the options you have for extracting those resources will make localization later very easy…in fact in some cases as easy as just putting in the updated RESW file and recompiling.

Start smart from the beginning and think global even if you aren’t ready for it just yet. You never know when your German friend might help out translating for you and then you can instantly expand to that market within a day!

Hope this helps!

tags: winrt, windows 8, xaml, localization, xliff, translator, globalization

This work is licensed under a Creative Commons Attribution By license.

GridView Control in Windows 8

Thu, 26 Apr 2012 18:09:26 +0000

SilverlightShow Interview with Ido Flatow - Presenter at 3 sessions at Visual Studio Live!New York 4-day Conference

editorial@silverlightshow.net (Silverlight Show ) — Tue, 24 Apr 2012 13:46:27 GMT

In this SilverlightShow interview, we talk with Ido Flatow –presenter of 3 WCF sessions at Visual Stuido Live!New York conference (May 14-17, 2012). The topics of the sessions are: Monitoring and Troubleshooting WCF Services, What's New in WCF 4 and What's New in WCF 4.5.
As we have announced, SilverlightShow is the Social Media Premiere Partner for this conference and we are sending one SilverlightShow member to this conference for free.

About Ido: Ido Flatow is a Microsoft MVP for Connected Systems Development, Microsoft Certified Trainer, senior architect, and trainer at SELA Group International. He has over 14 years of experience in developing, designing and managing information systems, and is currently consulting and lecturing on Entity Framework and web-related technologies, such as WCF, ASP.NET, IIS, Silverlight, and Windows Azure. Ido is the author of Microsoft's Official WCF 4 course (10263A).

SilverlightShow: Hi Ido! Nice to meet you online! You are presenting 3 sessions on WCF in VS Live! New York event, and all three are among the most-awaited sessions at the event. We also have a number of articles on WCF on SilverlightShow, and all of them are highly popular, with WCF RIA Services by Brian Noyes beating all records. Why is that? Why is WCF so important for developers?

IF: Today, a lot of the applications we develop are distributed applications with various front-ends (desktop, mobile, web) and back-ends, and these two parts need to communicate with each other. Windows Communication Foundation (WCF) is the framework that allows us to create that connection, by enabling us to create services that can be accessed from everywhere using various ways of communication, such as HTTP and TCP. WCF is all about connecting distributed systems, whether they are entirely written in .NET or have parts of them written in other platforms, such as Java, PHP, JavaScript, or even native C++ - WCF is interoperable and uses a lot of standards, such as the WS-* protocols, in order to provide that ability.

SilverlightShow: What the most challenging feature, or aspect of WCF, where do developers struggle most?

IF: I think that most WCF developers would agree with me when I say that the most challenging part of WCF is the pile of configuration you sometimes have to write in order to host your service. That is actually one of the issues that are well known about WCF, and in every version of WCF we see more and more improvements that are intended to reduce the amount of configuration we write. In two of my sessions, “what’s new in WCF 4” and “what’s new in WCF 4.5” I will show the configuration simplification that has been done over the years in WCF. In addition to configuration, there is another aspect of WCF that a lot of developers struggle with and that is troubleshooting services. When a WCF service fails the error can vary from a very detailed exception to a disconnected channel without any apparent reason. The problem is that many developers are not familiar with the troubleshooting tools offered by WCF, and on many occasions I find myself answering in forums “please use WCF tracing - that will show you exactly what the problem is”. In my “Monitoring and troubleshooting WCF services” session I plan to show some of these troubleshooting tools, so people can finally have confidence when having to troubleshoot their services.

SilverlightShow: What’s the most interesting or the best use of WCF you are aware of? Can you give an example with some application perhaps?

IF: Well, it’s hard to pinpoint the “best” use of WCF, but I’ve seen WCF taken to the extreme in various scenarios - from applications that load services dynamically according to different devices which are connected to the servers, through highly-secured WCF services that work smoothly with Java clients, to projects that wrote their own WCF transport channels and encoders in order to get the best performance out of WCF.

SilverlightShow: From the total list of 3 sessions, which one do you think would be most challenging for the attendees, and why?

IF: I think that would be the “Monitoring and troubleshooting WCF services”, because unlike the “what’s new” sessions where I show a set of new features, the monitoring session is all about the hidden gems of WCF - a lot of WCF developers are not aware to the variety of monitoring techniques that are given out-of-the-box with WCF, and to the various configurations that affect our service’s performance. The monitoring session is actually part of an advanced WCF workshop I often deliver, and I always hear people, even experienced WCF developers, saying “I didn’t know that, I’ll need to check it out”.

SilverlightShow: Could you disclose some interesting tip/trick/demo that attendees would see in any of your sessions in New York?

IF: For those of you who will miss my monitoring session, here’s a tip - we all know that WCF supports tracing and message logging, and that we need to configure in advance the logging setting. In fact, with WCF 4 you can use WMI (Windows Management Instrumentation) to change some of the logging settings in runtime, without stopping your service - this is most useful in production environments when you want to start tracking a problem and therefore need to adjust the service’s logging level. You can read about this feature on MSDN (http://msdn.microsoft.com/en-us/library/ms735120.aspx), or just come to my session and see how it works (my demos will also be available for download afterwards).

SilverlightShow: How and where may conference attendees meet you during the conference?

IF: You can probably track me down between sessions, during the birds-of-a-feather lunch, or at any of the other events during the conference - I will be the one wearing a speaker name tag that says “Ido Flatow”. You can also follow me on twitter (@IdoFlatow) to get updates on my sessions, and links to the slides and demos I will show in my sessions.

Thanks Ido for this interview! Wish you, as well as our free pass winner a great conference event!

Get $300 off the standard price of Visual Studio Live! New York Best Value package by using this code exclusive to SilverlightShow readers and members: VSNYTU

Making a Great Snapped View for your Web Site on IE10 on Windows 8

Tue, 24 Apr 2012 03:11:15 GMT

One of the great features of Windows 8 Metro Applications is the Snapped View where app developers create a 320px wide view of their app. When the user snaps their app to the left or the right of the screen they can continue using their primary app while still having the secondary app visible in a thinner view. The project templates in Visual Studio come with this capability built-in to make it easier to address this important part of the application experience. If you build your Metro application with HTML, you see that this is done with CSS Media Queries, a feature supported in all HTML5 modern browsers. This is also the way that you support snapped view for your website, with the @-ms-viewport rule (since it’s Microsoft-specific today, it has the –ms- prefix and can be safely ignored by other browsers.

@media screen and (max-width: 400px) {  @-ms-viewport { width: 320px; }  /* CSS for 320px width snapped view goes here */}

Since Mobile browsers like Windows Phone’s IE and the iPhone both report their width as 320 px, you may be able to reuse the media queries that you created for mobile for the snapped view by adding one line of css to your style sheet. If you are intrigued by CSS Media Queries, and want to see more examples of responsive design that use them, take a look at the Media Queries site which hosts a great collection of them.

You can also take a look at a site that I’ve been working on that uses media queries and implements the snapped mode media query at TimeLapseApp.com.

More details

#mvvmlight V4RC available on #nuget

Sun, 22 Apr 2012 19:13:56 GMT

I just published the MVVM Light V4 RC packages to Nuget. Note that this is still technically a preview, so the main package is still V3. The V4 packages are available here:

Package with libraries and content:
When you install this package into a “virgin” application (i.e. an application without ViewModelLocator, preferably a brand new application), it installs a new ViewModel folder with a MainViewModel, ViewModelLocator and adds an entry into the App.xaml file to intialize a the ViewModelLocator in the global resources.
Do not use this package if you want only the libraries, this will add content files!
Package with libraries only:
This installs and references only the libraries.

Both packages are available for Silverlight 3, Silverlight 4, Silverlight 5, .NET3.5SP1, .NET4, Windows Phone 7.0, Windows Phone 7.1 and Windows 8 (WinRT). That last one is brand new! :)

Nuget prerequisites

Follow the steps to install Nuget (if needed):

In Visual Studio 10 or 11, select the menu Tools, Extension Manager.
In the Extension manager, select Online Extensions, Visual Studio Gallery.
In the field marked “Search Installed Extensions:, enter “nuget”.
Select the Nuget entry and then press Install.
Restart Visual Studio.

Installing from VS directly

In Visual Studio, follow these steps to install the packages:

Open an application without MVVM Light installed.
Right click on the project and select Manage Nuget Packages.

In the Manage Nuget Packages dialog, select Online (on the left).
Enter “mvvmlight” in the Search Online field.
You will see four choices:
- MVVM Light: This is the stable release (V3RTM) with content files. Not available for Windows 8!
- MVVM Light libraries only: This is the stable release (V3RTM), only libraries. Not available for Windows 8!
- MVVM Light [Preview]: This is V4RC with content files.
- MVVM Light libraries only [Preview]: This is V4RC, only libraries.
Select the package you want to install and press Install.

That’s it.

Updating from VS directly

If you have a previous version already installed, you can look for the update with the following steps:

Right click on the project and select Manage Nuget Packages.
In the Manage Nuget Packages dialog, click on Updates.
If an update for the given package is available, you can install it from there,

As usual, please try it out and let me know if something does not work right!

Happy coding
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Declaring an ICommand in Windows 8 Consumer Preview

Fri, 20 Apr 2012 14:43:39 GMT

[Update 24/4/2012]

Well I'll be… after I posted this, a few people wrote to me and told me they are unable to repro the issue. I then tested again and indeed, it works. No idea why I couldn't get it to work in the first place.

More details here. Sorry about the confusion people!

SilverlightShow Interview with Brian Noyes - Presenter of 4 Sessions at Visual Studio Live!New York 4-day Conference

editorial@silverlightshow.net (Silverlight Show ) — Fri, 20 Apr 2012 12:18:37 GMT

In this SilverlightShow interview, we talk with Brian Noyes –presenter at a total of 4 sessions at Visual Stuido Live!New York conference (May 14-17, 2012). The topics of the sessions are: Building Portable XAML Client App Logic and Resources, Building Extensible XAML Client Apps, Learn to Behave - Extend Your XAML with Behaviors and Securing and Personalizing Silverlight 5 Client Apps.
As we have announced, SilverlightShow is the Social Media Premiere Partner for this conference and we are sending one SilverlightShow member to this conference for free.

About Brian: Brian Noyes is Chief Architect of IDesign Inc, a Microsoft Regional Director and Microsoft MVP. Brian is a frequent top rated speaker at conferences including VSLive, Microsoft TechEd US, EU, Africa, and Asia, DevConnections, DevTeach and others. Brian is author of Developers Guide to Microsoft Prism 4, Developing Applications with Windows Workflow Foundation, Data Binding in Windows Forms 2.0, and Smart Client Deployment with ClickOnce. Brian got started programming as a hobby while flying F-14 Tomcats in the US Navy, later turning his passion for code into his current career.

Brian is also a recognized article and ebook author at SilverlightShow, as well as one of our most appreciated webinar presenters (join his upcoming webinar on May 30: Prism and WCF: Two Great Toolkits that Work Great Together).

SilverlightShow: Hi Brian! Your 4 upcoming sessions in VS Live! New York event are currently among the ones attracting most interest, according to the organizers. Why do you think is that?

BN: A lot of people either have a deep investment in XAML client technologies already or are headed in that direction now that it is clear XAML has a long and vibrant future being one of the primary ways of building Windows 8 client applications. My topics target both those in the trenches using XAML today and are focused on topics that will help them write cleaner, more maintainable and well designed application, as well as helping them understand how to position those apps for moving to Windows 8 at the point where it makes sense to do so.

SilverlightShow : Your first session covers porting existing WPF / Silverlight apps to Win 8 / Metro. This seems to be a big concern for developers, judging by our recent webinar sessions on Win 8. What are the top difficulties developers face when porting an app to Win 8, and how will you address them in your session?

BN: The first and most important thing to is have a clear understand of what kinds of code can be reused, in some form, between the old and new XAML technologies. Just because both use XAML and C#/VB doesn’t mean it is a seamless transition. The good news is that developer skills transition pretty seamlessly. But I’ll got through a number of concrete examples to show specifically what kinds of code can be shared without modification, what requires little tweaks, and what is complete throw away – both in the XAML code and in the supporting C# or VB. I’ll show concrete examples of things like styles and templates from WPF and Silverlight that will or will not work on the new platform and show how to design code like view models to work on both platforms. The bottom line is that attendees should walk away with their expectations set correctly – not expecting that everything will just move over seamlessly, but also definitely not a complete rewrite if they start following certain patterns in their XAML and code today in Silverlight and WPF.

SilverlightShow : One of your sessions is on Securing and Personalizing Silverlight 5 Client Apps. Does Silverlight 5 lack something to become the perfect technology for LOB applications?

BN: OK, I have to admit a sarcastic answer pops to mind: “A clear future?” Certainly the biggest problem Silverlight 5 has today is the uncertainty over the future evolution of Silverlight and whether there will be future versions and what that means in terms of using it today. But that is something I can’t really address myself other than to say – Silverlight is a fantastic technology for building desktop client applications today and for at least a number of years to come. In terms of the talk, one thing Silverlight itself lacks a little out of the box are built in security features on the client side. That is a big part of what this talk is about – leveraging everything Silverlight has in the box, and then supplementing it with WCF RIA Services which provides some very rich security and personalization mechanisms for both the client and service side.

SilverlightShow : From the total list of 4 sessions, which one do you think would be most challenging for the attendees, and why?

BN: Definitely the Buidling Extensible XAML Client Applications talk, and the reason is sheer density of the material. In this talk I am jamming into a 75 minute session how to use the Model-View-ViewModel (MVVM) pattern, Managed Extensibility Framework (MEF) and the Prism toolkit to build highly extensible and loosely coupled applications. That means they have to jump on board and understand the fundamentals of three complex supporting technologies as well as seeing how they all fit together coherently in a very short period of time. Despite that I’ve given it a few times in other places and it has been very well received. There are lots of great talks on single technologies, but this one is pretty unique in showing how to combine the three very cleanly. And best of all a good part of the talk is walking through a sample application that shows how it all works that is based on several real world projects I have been the architect for where I have used these techniques with great success.

SilverlightShow : And which topic was most challenging for you to prepare? And why did you decide to go for it?

BN: It is a coin toss between the Building Portable XAML App Logic and Resources and the Building Extensible XAML Client Applications talks. The first because it is all new technology moving onto the WinRT platform and trying to figure out what works and what doesn’t without a lot of samples or documentation to go by, and the latter for just trying to figure out how to cover everything I need to convey the essence of three deep technologies and how they fit together in a single session. Bottom line I like picking challenging topics that I know the hard core developers will drink in. There are lots of choices for learning the mainstream topics, but I try to go for more niche but hard to answer on your own topics.

SilverlightShow : We currently have a contest running, giving one free pass to VS Live! New York. Contestants are asked to provide their top reason for wanting to join this event. What would you suggest them as a top reason for joining this conference?

BN: VSLive! is a great show with a dazzling line of the best speakers that I am honored to get to join into. It’s a great location, with well picked topics and speakers but not so big that the attendees get lost in the crowd – there are plenty of opportunities to track down the speakers and ask questions and learn a lot while having fun in just a few days time.

SilverlightShow: How and where may conference attendees meet you during the conference?

BN: The best bet is always to corner me right before or after one of my sessions, I always try to make point of sticking around outside the room to get all the questions answered that come up afterwards. I also encourage people to come up and talk to me before the talk as well – too often people come in and sit quietly, but that is a great time to get a discussion going that can influence what I cover in the talk. I’ll also be wandering around in the expo hall area and people can always find me on Twitter @briannoyes and try to arrange a meet up.

Thanks Brian for this interview! Wish you, as well as our free pass winner, a great conference event!

"If I have seen further, it is by standing on the shoulders of giants" [An alternate implementation of HTTP gzip decompression for Windows Phone]

Thu, 19 Apr 2012 16:56:00 GMT

The HTTP protocol supports data compression of network traffic via the Content-Encoding header. Compressing network traffic is beneficial because it reduces the amount of data that needs to be transmitted over the network - and sending fewer bytes obviously takes less time! The tradeoff is that it takes a bit of extra work to decompress the data, but because the bottleneck is nearly always network, HTTP compression should be a win pretty much every time. And when you're dealing with comparatively slow, unreliable networks like the ones used by cell phones, the advantages of compression are even more significant.

Aside: Because most networks are lossy and transfer data in packets, sending just one fewer byte can be meaningful if it reduces the number of packets.

You might reasonably expect that enabling compression for Windows Phone web requests is as simple as setting the HttpWebRequest.AutomaticDecompression property available since .NET 2.0. Unfortunately, this property is not supported by current versions of the Windows Phone platform, so it's up to application developers to add HTTP compression support themselves. Consequently, a number of home-grown solutions have cropped up.

One popular example is Morten Nielsen's GZipWebClient. Naturally, Morten didn't want to implement his own compression library, so he's using SharpZipLib to do the heavy lifting. This is a great example of reuse, but it's important to note that SharpZipLib is licensed under the GNU General Public License (GPL) and some developers won't be comfortable with the implications of using GPL code in their own project. (For more on what those implications are, the Wikipedia article for GPL has a fairly detailed overview which includes mention of ambiguities around the definition of "derivative works".)

Aside: Of course, there are other options. Another popular library is DotNetZip which claims to be under the MS-PL (Microsoft Public License), the same permissive "do pretty much whatever you want with the code" license I use for this blog. However, a brief look at the license files it comes with suggests maybe that's not the whole story because there are at least four other licenses called out there.

As you can probably tell, I'm not the biggest fan of lawyers, ambiguity, or unnecessary risk [ :) ], so I'm always happy to have a simple, "no restrictions" solution - even if that means I have to create one myself. In this case, what I wanted was a way to decompress gzip data on Windows Phone without needing a separate library. That's when I remembered another of Morten's posts, this one about unzipping files under Silverlight. I figured that maybe if I put the chocolate in the peanut butter, I could come up with a simple, dependency-free solution to the gzip problem on Windows Phone!

The basic idea is to create a bit of code that customizes the user's WebClient/HttpWebRequest to add the Accept-Encoding header. Once that's in place, servers that support gzip automatically compress their response bodies. To decompress the downloaded response on the phone, another bit of code is used to wrap the compressed response stream in a ZIP archive and hand it off to Application.GetResourceStream which does the heavy lifting and provides access to the decompressed response stream. What's nice about this technique is that the decompression implementation is part of the Silverlight framework - meaning applications don't need to pull in a bunch of external code or increase their size!

I wanted this to be easy, so I've created a WebClient subclass and all you have to do is change this:

client = new WebClient();

Into this:

client = new GzipWebClient();

After which your application's HTTP requests will automatically benefit from gzip compression!

Of course, some people like to work a little closer to the metal and I've done a similar thing for the HttpWebRequest/HttpWebResponse crowd. Change this:

request = WebRequest.CreateHttp(_uri);request.BeginGetResponse(callback, request);// ... response = (HttpWebResponse)request.EndGetResponse(result);stream = response.GetResponseStream();// ...

Into this:

request = WebRequest.CreateHttp(_uri);request.BeginGetCompressedResponse(callback, request);// ... response = (HttpWebResponse)request.EndGetResponse(result);stream = response.GetCompressedResponseStream();// ...

And you're set!

Great, that's all well and good, but does any of this really matter? Less is clearly more, but is there actually a noticeable difference when using gzip? I wanted to answer that question for myself, so the sample application for this post not only exercises the code I've written, it also acts as a simple, real-time performance report! The sample makes continuous requests for http://microsoft.com/ using WebClient, standard HttpWebRequest/HttpWebResponse, my custom GzipWebClient, my Compressed helpers for HttpWebRequest/HttpWebResponse, and (optionally) Morten's GZipWebClient (for comparison purposes). As the data is collected, it's charted via the Silverlight Toolkit's Data Visualization library (which I've previously shown running on Windows Phone).

Here's what it looks like running in the emulator using a wired connection:

In the chart above, you can clearly see which requests are using gzip and which aren't! Not only are the gzip-enabled requests noticeably faster on average, they're nearly always faster even in the worst case. What's more, while there's variability for both kinds of requests (that's part of how the internet works), the delta between best/worst times of gzip-compressed requests is smaller (i.e., they're more consistent).

That's pretty compelling data, but the real benefit comes when the phone's data connection is used. Here's the output from the same app using the cell network (via Excel this time):

All our previous observations remain true - and are even more pronounced in this scenario. Gzip-compressed HTTP requests are significantly faster (taking less than half the time) and more predictable than traditional requests for the same data.

Awesome!

Aside: Based on the chart above, it seems reasonable to claim all three gzip solutions are equivalent. That said, if you squint just right, it looks like using HttpWebRequest is - on average - marginally quicker than using WebClient (as you'd expect; WebClient calls HttpWebRequest under the covers). Additionally, SharpGIS.GZipWebClient appears to be - on average - very slightly quicker than Delay.GzipWebClient (which is also not surprising when you consider the hoops my code jumps through to avoid the external dependency). Bear in mind, though, that these differences only really show up at the millisecond level, and seem unlikely to be significant for most real-world scenarios.

[Click here to download the source code for the gzip helper classes and the sample application shown above]

[Click here to visit the NuGet gallery page for Delay.GzipWebClient which contains the code for both gzip helper classes]

Notes:

Using the code I've authored is quite easy:
- If you want to use GzipWebClient, simply add the GzipWebClient.cs and GzipExtensions.cs files to your project, reference the Delay namespace, and replace any instances of WebClient.
- If you're a HttpWebRequest/HttpWebResponse fan, you only need to add GzipExtensions.cs to your project, reference the Delay namespace, and invoke the extension methods HttpWebRequest.BeginGetCompressedResponse and HttpWebResponse.GetCompressedResponseStream (as shown above).
By default, the sample application does not include Morten's GZipWebClient because I don't want to get into the business of distributing someone else's code. However it's easy to include - the following comment in MainPage.xaml.cs tells you how:
```
// For an additional scenario, un-comment the following line and install the "SharpGIS.GZipWebClient" NuGet package//#define SHARPGIS
```
The code to use that assembly is already in the sample application; you just need to provide the bits if you want to try it out. :)
The implementation of the gzip-to-ZIP wrapper is fairly straightforward: it reads the gzip-compressed response from the server, wraps it in a stream that represents a valid ZIP archive with a single file compressed using the deflate algorithm which both specifications share, and hands that off to the Silverlight framework to return a decompressed stream for that file. To be clear, the compressed data isn't altered - it's simply re-packaged into a format that's more useful. :) If you're interested in the specifics, you'll probably want to familiarize yourself with the gzip specification and the ZIP file specification and then have a look at the code.
There are two minor inefficiencies in my code, one of which seems unavoidable and the other of which could be dealt with.
- The unavoidable one - and the reason I think SharpZipLib might be a smidge quicker - is that the size/checksum data for the gzip data is provided at the end of the download stream, but is needed at the beginning of the wrapper stream. If the correct values aren't used, the ZIP wrapper will be rejected - but those values are not known until the entire response has been downloaded. Therefore, it's not possible for my implementation to proactively process the data while it is being downloaded; the download must be buffered instead. A decompression library won't suffer from this limitation and ought to be quicker as a result.
- The avoidable inefficiency is that a single copy of the input data is made when creating the ZIP wrapper stream. To be clear, this is the only time data is copied (I've structured the code so there isn't any buffer resizing, etc.), but it's not technically necessary because the ZIP wrapper stream could operate directly from the download buffers. I may make this improvement in the future, but expect the performance difference to be negligible.

Compressing HTTP traffic is a pretty clear win for desktop applications - and an even bigger benefit for mobile apps communicating over slower, less reliable cellular networks. The Windows Phone platform doesn't make using gzip easy, but it's possible if you're sufficiently motivated. For people who aren't intimidated by licenses, there are already some good options for gzip - but for those who aren't comfortable with what's out there, I'm offering a new option under one of the most permissive licenses around.

I hope you find it useful!

Workaround for CA0055 Error with Silverlight Projects in Visual Studio 2010

Wed, 18 Apr 2012 18:33:00 GMT

This connect bug describes an issue with creating certain types of Silverlight projects in Visual Studio. If you're referencing Silverlight 4 DLLs from a Silverlight 5 project, you may run into this code analysis/FXCop issue yourself if code analysis is part of your process. The core of the problem is a versioning decision in Silverlight 5 which results in compile-time violation due to loading two different versions of mscorlib in the same project. It manifests as the following error:

Error 2 CA0055 : Could not unify the platforms (mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e, mscorlib, Version=5.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e) for 'MyProject.Silverlight\obj\Debug\MyProject.dll'.

More information on CA0055 may be found on MSDN.

How to Reproduce the Issue … in theory

In theory, all you need to do to reproduce the issue is reference a SL4-targeted DLL from an SL5 application. However, in practice, there are other factors in play. For example, it may matter which mscorlib version gets loaded first.

Windows 8 Metro: Starting your first App from scratch

editorial@silverlightshow.net (Andrea Boschin ) — Wed, 18 Apr 2012 01:18:00 GMT

Download the source code for this article

After the first article in this series, where I briefly discussed about design aspects of the new Metro interface, involving simplicity, flatness, emptiness and the pillars of this new beautiful paradigm, as promised, it is now time to start exploring the tools available to start create your applications.

Don't miss...

All SilverlightShow Ebooks

At the date of this article, you have to be aware that I'm discussing about the "Windows 8 Consumer Preview" bits so, when then next releases will be available, something I've written might become obsolete due to changes made by the team. However, being at the second public preview of Windows 8 means that it is sufficiently stable to write something of reliable.

To follow this article and probably the next ones, it is obviously required an installation of Windows 8 CP. You can download it from this page. After you installed the operating system, you have to install Visual Studio 11 Express beta and Blend. These tools are included in the SDK you can download from the same page. My suggestion is to use a Virtual Machine to host all this software because when it will be obsoleted by a new version you can easily delete the virtual machine and create another one from scratch. Finally, it is important to download the "design assets", a 48MB zip files that contains a number of templates and images to help designers and developer to work with Metro constraints. I will be back to some of these templates in following articles.

Meet the Visual Studio IDE

Give that you downloaded and installed all the requirements, I guess you have firstly opened Visual Studio 2011 and problably you have been doomed by the great difference between its IDE and the previous versions. Since Visual Studio 2010 has been a big step with its new user interface, the IDE you have just opened makes a triple jump forward and embraces a number of Metro UI pillars, first of all the one I posed at the first in my list, that says "Be Authentically Digital". The new Visual Studio IDE have lost any minimal skeuomorphism in favor of a more flat appearance.

At the moment I've suspended my judgement about this new look&feel. The reason for this suspension is that I'm too much accustomed to the older interface and I'm now too much confused to be objective in my judgment but I need to be in touch with it for sometime to understand if this interpretation of Metro pillars makes me happy. What I can say at the moment is that I do not have any nostalgia of the skeuomorphic UI of VS2010 but I think they should have to use a more wide palette to avoid to make interface flatness to be semantically flat.

From the functional point of view, the IDE has a number of advantages. As an example I've added a screenshoot of the new Solution Explorer. What immediately catches the eye is the new hierarchy that is able to show the structure of the classes, methods, properties and so on. Another new feature is the automatic preview of files. When you select a file in the explorer, it is automatically opened as an interactive preview and if you make a change in the code, the file is finally opened. Hard to explain but simple to try if you select *.cs files in the tree.

Create and understand the project structure

Once you gained the "New Project" window from the start screen or from the File menu, you choose between a number of templates. Metro applications can be created using two ways. If you like you can embrace HTML5 and Javascript or you can choose to use XAML coupled with C#, VB.NET or C++. The choose of the language to use currently is not matter of features because there are very few differences between what you can do in HTML or XAML. It is for sure matter of skills and development effort. Coupling XAML with C# is the most effective and fast way to develop a Metro application and it should be the primary choice when you are doing something more than an exercise. C# let you have real object orientation, compile time checking and other facilities. If you or your team have strong HTML skills, nothing prevent you from use it and Javascript but you have to plan for almost double or triple of the development time. It is for this reason in this series I will cover primary XAML and C#.

The templates in Visual Studio are modeled on this choice; you have templates for HTML+Javascript, XAML+C#, XAML+VB and XAML+C++. As the figure shows you have three templatates available:

Blank: is the most simple template and probably it will be always the better point to start from.
Grid: It creates an application the uses the new GridView control as the main Application Hub.
Split: It is an example of an application that splits contents in columns.

If Grid and Split templates are good for the first exercises, the Blank Application template is probably to most useful for real world purposes. After you create the project you will get the structure shown in the Solution Explorer screenshot in the previous paragraph. There is a number of items in the project, mostly of them are known to people that have already used Silverlight but other are specific to Metro applications. Here is the most important elements:

App.xaml/App.xaml.cs - Silverlight, Windows Phone and WPF developers already known this file. It handles the lifetime of the application. In Metro apps it handles events like Launched, Suspending, Activated and Resume. These can be used to manage the state of the application when it is suspended by the operating system. In the OnLaunched method, called when the application starts, it is initialized the main Frame. Metro applications are basically navigable applications; nothing prevents to inject directly a page instead of a Frame but you lose the entire navigation facilities.
BlankPage.xaml - This is the first page your application will show. If you want you can change it by editing the App.xaml.cs file and it does not have nothing different from every other page. Every page takes a reference to the main frame and can use it to navigate from one to another.

Application1_TemporaryKey.pfx - This file is a self generated certificate, required to sign the application package. To run in the metro AppContainer, an application needs to be signed so Visual Studio automatically generates a certificate and adds it to the project. The certificate is used for development purposes. It happened sometimes I've got errors caused by a not trusted certificate. In the case, you can manually regenerate the certificate or try to add it to the Windows Trust Root store of the machine where you work.
Package.appxmanifest - This represents the manifest of the application. The manifest contains all the informations required to run the application, define its capabilities, the way it communicate with other apps and how it is packaged. If you double click the file you get an editor that let you easily change its content. There is a number of things you can define: application logos, orientation, titles and notifications. You can also determine capabilities that is what the application can and can't do. Finally if you needs to manage the certificate this is the right place, going to the packaging tab.
Common (directory) - The content of this directory is someway strange. Inside it there are a number of classes that helps to manage layout, databinding and a bunch of converters. It contains also a ResourceDictionary (StandardStyles.xaml) with a series of styles. I think it is strange because I expect to have mosto of them compiled inside an assembly but have a look at this directory because i may contains something you really need.

The first time you compile or run an application, Visual Studio (but also Blend) asks you to create a developer account. To accomplish this task you have to enter a live id account and you will be granted of a 1 month long license that you can use for free. Every time you activate another instance of Visual Studio (e.g. creating another virtual machine) your license is renewed and the month starts again.

Create your first app

Now that the project has been created you can start to implement your application interface and logic. For the first touch I will avoid a simple Hallo World but I'll drive you to create a single page application that is able to download a rss feed and display the titles in a grid layout. Inside this very basic app (view a screenshot on the right side) I used some of the interesting features of XAML for Metro.

All the code of the application is inside the BlankPage.xaml and BlankPage.xaml.cs files. As usual the xaml file represents the user interface description and the cs file is the codebehind of the page. Here is the very basic XAML content of my application. You have simply to cut & paste it in the BankPage.xaml file (be aware I called it Application1):

   1: <Page   2:     x:Class="Application1.BlankPage"   3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   5:     xmlns:local="using:Application1"   6:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   7:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   8:     mc:Ignorable="d">   9:    10:     <Grid Background="White">  11:         <ItemsControl x:Name="items" VerticalAlignment="Center" HorizontalAlignment="Stretch">  12:             <ItemsControl.ItemContainerTransitions>  13:                 <TransitionCollection>  14:                     <EntranceThemeTransition />  15:                 </TransitionCollection>  16:             </ItemsControl.ItemContainerTransitions>  17:             <ItemsControl.ItemsPanel>  18:                 <ItemsPanelTemplate>  19:                     <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"   20:                                            ItemWidth="240" ItemHeight="120" HorizontalAlignment="Center" VerticalAlignment="Center" />  21:                 </ItemsPanelTemplate>  22:             </ItemsControl.ItemsPanel>  23:             <ItemsControl.ItemTemplate>  24:                 <DataTemplate>  25:                     <Border Padding="10" Margin="10" d:DesignWidth="387.5" d:DesignHeight="101.5"   26:                             PointerReleased="HandlePointerReleased"  27:                             BorderBrush="#FF666666" BorderThickness="1"   28:                             Background="#FFFF9900" Tag="{Binding}">  29:                         <TextBlock Text="{Binding Title.Text}" TextWrapping="Wrap" Foreground="White" FontSize="16" />  30:                     </Border>  31:                 </DataTemplate>  32:             </ItemsControl.ItemTemplate>  33:         </ItemsControl>  34:     </Grid>  35: </Page>

The main content of the screen is a simple ItemsControl. This control let you display a collection and apply a DataTemplate to define the elements used to visually represent each item in the collection. The ItemsControl usually have a stacked layout; to display elements in a grid I use a layout element called "VariableSizedWrapGrid". This element organizes the items in a grid using a layout similar to the Silverlight's WrapPanel.

In the ItemTemplate property I've created a DataTemplate with a simple Border and TextBlock. This will display the title of an item into a rectangle. Finally, to make the application a bit more pleasant, I've added a EntranceThemeTransition that gives a beautiful entrance effect hard to describe using words. Then go to the BlankPage.xaml.cs file and change the OnNavigatedTo method and enter the following code:

   1: protected async override void OnNavigatedTo(NavigationEventArgs e)   2: {   3:     this.items.ItemsSource = await GetFeed();   4: }   5:     6: private async Task<IEnumerable<SyndicationItem>> GetFeed()   7: {   8:     try   9:     {  10:         Uri uri = new Uri("http://www.xamlplayground.org/syndication.axd");  11:    12:         SyndicationClient client = new SyndicationClient();  13:    14:         var feed = await client.RetrieveFeedAsync(uri);  15:    16:         return feed.Items;  17:     }  18:     catch(Exception ex)  19:     {  20:         Windows.UI.Popups.MessageDialog dlg = new Windows.UI.Popups.MessageDialog(ex.Message);  21:         dlg.ShowAsync();  22:         throw ex;  23:     }  24: }  25:    26: private void HandlePointerReleased(object sender, PointerEventArgs e)  27: {  28:     FrameworkElement border = sender as FrameworkElement;  29:    30:     if (border != null)  31:     {  32:         SyndicationItem item = border.Tag as SyndicationItem;  33:         Windows.System.Launcher.LaunchUriAsync(new Uri(item.Id));  34:     }  35: }

The code here downloads the feed of my weblog at http://xamlplayground.org and then load it into the ItemsControl using the ItemsSource property. Pay attention to this code that use the awesome async and wait keywords. I will be back on asynchronous programming later in this series, but to full understand this code think at these keywords like your best friends to simplify the calling of asynchronous methods thanks to the integration of the Task Parallel Library. Take note also the that asynchronicity hightly pervades Metro applications and WinRT at a level you don't expect for sure.

After you completed the code in XAML and C# as I described you can run the application using F5 in Visual Studio. This task deployes the application to the AppContainer and runs it in debug mode like every other application you are habit to develop. Using the Metro UI of your operating system is probably good to appreciate the user interface aspects, but if you do not have a touch enabled monitor you can use the simulator. It allows to use the mouse like a finger on your touch device and includes the simulation of gestures like drag, hold, pinch and rotate but also a gps tool to inject locations in tested applications. It is not like having a true touch enabled device but you can spare a lot of money and start today your development.

Deploy and run

But, what it happens when the application is compiled and then deployed? Visual Studio is a good friend for the developer but it hides the details that are automatically accomplished when you hit F5. This is good for most of the times but annoying if you are curious to know the insides of Metro apps. I will start saying that your C# code is simply an abstraction created on top of WinRT, the core runtime that is shared between all the consumer languages (C#, Javascript, VB.NET and Managed C++). This abstraction is made to (luckily) hide the fact that under the hoods of WinRT there is still C++ and COM. These APIs are exposed to your C# code with a bunch of metadata files that "translates" them to the C# compiler like normal assembly references. These metadata containers are known as .winmd files.

So, when you hit F5 in Visual Studio the very first operation is to compile your C# code connecting all the referenced APIs and, the product of this compilation is a exe file paired with a AppManifest.xml file and all the resources (mostly are xaml and images). All these files are created in the bin directory related to the target configuration. See the image on the side for an example.

This is only the first stage. If you try to run the exe that is output of this stage you get an error stating that it can run only in the context of an AppContainer. This is because the compilation follows a new target output "appcontainerexe". So, after the compilation, the application needs to be packaged into a zip file (do you remember xap files?) called APPX before it is deployed. To create this package Visual Studio uses the MakeAppx.exe utility. You can manually pack or unpack appx using this executable from a command prompt targeting Visual Studio 2011.

The last step before the package is deployed is the signing process. For this purpose Visual Studio takes the certificate linked to the project and using the signtool.exe utility it signs the package then deployes it to the Metro AppContainer. To fully satisfy your curiosity you can manually accomplish this task using the Add-AppxPackage cmdlet included in powershell. Here is a reference to all the cmdlets available for common tasks: http://technet.microsoft.com/en-us/library/hh856045.aspx. For example running the Get-AppxPackage without parameters you will get the full listing of installed apps.

Moving forward to the next step

In this article I've introduced a numeber of features, some have been explained and other remains open for the next articles in this series. Now that that you have been introduced to the concepts of Metro an you wrote your first example it is time to take in serious consideration the programming aspects of a Metro application. In the next article I will introduce how to handle the layout and navigation. Layout is a very important aspect in Metro since it involves the orientation and the view states. Navigation let you expand your scope to multipage apps. For the moment enjoy yourself with attached code.

Slides and source code for my past talks this year

Tue, 17 Apr 2012 22:28:56 GMT

I had the chance to be invited to talk at various conferences this year already, and I promised to post the slides and source code, so here it is!

MVVM Applied: From Silverlight to Windows Phone to Windows 8

Belgium, Netherlands, Bulgaria

The Model-View-View Model pattern is a common denominator between applications using XAML to create the user interface. First applied in WPF, it was then easily ported to Silverlight and Windows Phone development. With WinRT and the Metro-style applications, XAML is now a first-class citizen for native Windows 8 development. Here too, the MVVM pattern is making developers' life easier, and proven components can be used to simplify and speed up application development. In this session, Laurent Bugnion, the creator of the acclaimed MVVM Light Toolkit, will present best practices around XAML-based Windows 8 application development, and how to leverage code and skills in Windows 8 too.

100% Fidelity: From Comps to Apps, Tips and Tricks for XAML Integration

Netherlands

Designers create a vision, and this vision becomes an application. With some technologies, the transition from the vision to the UI can be a painful and frustrating exercise. With XAML however, we have tools and techniques that make this transition much easier and allow for 100% fidelity to the comps. In this session, Laurent Bugnion (Director of UX Integration, IdentityMine) will show tips and tricks gathered over 6 years of experience. We will talk about design time data, exporting assets from Adobe design applications, measuring and adapting, animations... Together we will learn techniques that apply to multiple platforms, from Silverlight to Windows Phone 7 to WinRT, WPF, Microsoft Surface, Kinect and more.

Download the slides
Video (or see below)

Metro Design Principles

Switzerland (Tech Conference), Switzerland (Shape), Bulgaria, Dubai

The Metro design language is becoming an intrinsic part of the Microsoft user experience. Already, we can find it on Zune (where it all started), Windows Phone 7 (where it was refined and perfected), Xbox, Windows 8, as well as on the Microsoft.com website. In this session, we will dive into the history of this design language, study its characteristics and show tips and tricks to implement Metro user interfaces in Windows Phone and Windows 8.

Download the slides

Building The Apps of the Future on Windows 8!

Dubai

The future of application development is here! Attend this session to get a comprehensive view of app development on Microsoft's latest client platform - Windows 8!

Going mobile with Windows Phone

Dubai

This session is intended to introduce developers to Windows Phone. It isn’t your boring old level 100 intro session. This session assumes that you know how to develop applications and skips past the "hello world" stuff to talk about tools, navigation elements, the back stack, phone controls and the marketplace.

Video: MVVM Applied: From Silverlight to Windows Phone to Windows 8

Video: 100% fidelity: from comps to appl, tips and tricks for XAML integration

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Workaround for CA0055 Error with Silverlight Projects in Visual Studio 2010

Pete Brown — Tue, 17 Apr 2012 19:07:46 GMT

This connect bug describes an issue with creating certain typesof Silverlight projects in Visual Studio. If you're referencingSilverlight 4 DLLs from a Silverlight 5 project, you may run intothis code analysis/FXCop issue yourself if code analysis is part ofyour process. The core of the problem is a versioning decision inSilverlight 5 which results in compile-time violation due toloading two different versions of mscorlib in the same project. Itmanifests as the following error:

Error 2 CA0055 : Could not unify the platforms (mscorlib,Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e,mscorlib, Version=5.0.5.0, Culture=neutral,PublicKeyToken=7cec85d7bea7798e) for'MyProject.Silverlight\obj\Debug\MyProject.dll'.

More informationon CA0055 may be found on MSDN.

How to Reproduce the Issue … in theory

In theory, all you need to do to reproduce the issue isreference a SL4-targeted DLL from an SL5 application. However, inpractice, there are other factors in play. For example, it maymatter which mscorlib version gets loaded first.

These steps won't repro the problem on my installation,but I'm putting them out here in case they help you visualize theissue (and also because I had already written them up when Irealized they don't repro here -- I don't want all these bits to goto waste).

Create a Silverlight 4 class library. Make sure you targetSilverlight 4. I named mine SL4ClassLibrary. The actual code isunimportant, but I set it to the following:

namespace SL4ClassLibrary
{
    public class Class1
    {
        public string Foo = "Bar";
    }
}

Next, add a Silverlight 5 Application project. Make sure ittargets Silverlight 5. Here's what my solution looks like:

Build the solution.

Next, add a File Reference (not a project reference) from theSilverlight 5 client app to the Silverlight 4 DLL.

If you build it now, everything works fine. The key step here isto add code analysis. Many organizations have code analysis as arequired part of their build process, using the compilercommand-line arguments. If you don't, you can turn it on via themenu:

Then check the "Enable Code Analysis on Build" checkbox.

Now build the solution. In theory, you'll get a CA0055 error,but as I mentioned at the top, that doesn't happen on my install.Most of the people who have reported this issue on the connect bughave mentioned it in the context of the Business ApplicationTemplate or third party controls.

Remember, this is a code analysis compile/build issue,not a runtime issue, so if you get past compiling your application,you're good.

The Workaround

This is already planned to be fixed in Visual Studio 11 RC.However, we do have a manual workaround for this to help youcontinue working if you're running into this scenario today. Thiswill unblock using FxCop in Visual Studio 2010.

A high level walkthrough of how this works from the command lineis:

We will tell FxCop which version of the runtime it will beusing by pointing it to Silverlight 5's installed mscorlib.dllusing the /platform argument
Tell FxCop where to find all of the referenced assemblies using/d (short for /directory) arguments: Use as many /d:<folder>arguments as necessary for FxCop to find all of the referencedassemblies.
Use either /console to tell FxCop to output the results to theconsole window, or /out:<file> to tell FxCop to write theresults to an .xml file

To run FxCop from the command line for a default BusinessApplication:

Add the %Visual Studio Install Directory%\Team Tools\StaticAnalysis\FxCop folder to PATH
Run "fxcopcmd.exe /file:<SL Business Application binary>/platform:<SL5 Reference Assemblies Directory\mscorlib.dll>/d:<SL4 Reference Assemblies Directory> /d:<SL4 SDK ClientLibraries Directory>"

An example of what this looks like on an x64 operating systemwith all of the default install directories is:

SET PATH=%PATH%;C:\Program Files (x86)\Microsoft Visual Studio10.0\Team Tools\Static Analysis Tools\FxCop
fxcopcmd /file:BusinessApplication1.dll /platform:"C:\ProgramFiles (x86)\ReferenceAssemblies\Microsoft\Framework\Silverlight\v5.0\mscorlib.dll"/d:"C:\Program Files (x86)\ReferenceAssemblies\Microsoft\Framework\Silverlight\v4.0" /d:"C:\ProgramFiles (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client"/out:results.xml
NOTE: If you receive a CA0001 error: "The following error wasencountered while reading module 'XXXX.YYYYY' : Assembly referencecannot be resolved…" this means that you need to find where thatassembly is installed to on your machine and add an additional/d:<installed directory> argument pointing FxCop to wherethose assemblies are installed.

My thanks to the Silverlight Team and to Andrew Hall for theinformation on this workaround.

Of course, the easiest and best solution, if you can do it, isto use libraries that specifically target Silverlight 5, and makesure all references from your Silverlight 5 project are tolibraries targeting Silverlight 5. We know that's notpossible in all cases, including the specific reported businessapplication case, which is why we documented this workaround.

Windows 8 and the future of XAML: Part 5: More contracts in WinRT/Windows 8

editorial@silverlightshow.net (Gill Cleeren ) — Tue, 17 Apr 2012 09:04:00 GMT

In the previous article, we’ve introduced contracts in Windows 8. To quickly recapitulate, a contract allows Metro style applications in Windows 8 to communicate which each other or with Windows, without there being a hard reference between the participants of the communication. We’ve seen how the search contract allows applications to open themselves up to Windows so they can be search. There’s of course a contract that specifies how this searching is to be done: an application has to follow the rules specified in the contract so that Windows can communicate with the app in the way it needs to do.

In this article, we’ll dive some more in contracts, more specifically, the share contract.

The code for this article can be downloaded here.

Don't miss...

All SilverlightShow Ebooks

We love sharing

Sharing information has become something very trivial. Millions of sites out there have sharing options. “Share this on Twitter”, “Post on Facebook”, “Share via mail” and tons of other options have been popping up everywhere on the internet. Why? People love sharing. When they find something cool or they’ve just read the most interesting article, people want to share that with their contacts. Perhaps they want to broadcast it, using a social network. Or perhaps they want to target a specific contact and send the information via mail. Also, people sometimes want to share information related to something they have done or found inside an application. Perhaps they’ve achieved a high-score in some game and they want to brag with it. Or, they have found a great recipe in a cookbook application.

As you can see, sharing is all around us. One problem though is the fact that it’s sometimes still too hard for people to quickly share the information they want to share. As said, a lot of sites have embedded sharing icons. But are they always easy to find? Or what happens if you use a social network that the site you’re using isn’t listed? In that case you need to go and paste the link to the social networking site. Or as mentioned with the game high-scores: if the game doesn’t support sharing, how are you going to proof that you’ve really attained that high-score? Perhaps through a screenshot that you manually have to take, copy and paste to another site or application.

From a developer’s perspective as well, implementing the right sharing options can be hard. Sites offer often quite a few sharing options and maintaining all these external links can be a time-consuming task. What if tomorrow Twitter decides they want to implement that option differently? You as the developer need to go and change your implementation. And even then, perhaps the visitor of your site (or user from your application) uses some obscure social network (perhaps one that’s relevant in his home country) that you haven’t implemented…

Microsoft thought about offering an integrated sharing experience in Windows 8. It’s built into the system to offer both the end-user and the developer an easy and universal way of sharing information. This is the share contract.

The share contract

Through the share contract, Windows 8 makes it possible for 2 applications to share information with each other. The big plus for developers is that the 2 application don’t have to know each other. Sharing is always done between two applications: the share source and the share target. The share source will share information in a specific format defined by the contract; the share target will be getting that information through Windows. Since the information is in a specific format, the developer of the share target can anticipate on this and write his code based on this format.

Note that Windows is the mediator between the two apps. It handles the process of getting the information from the share source and getting it to the share target. It’s safe to say that we have some kind of pub/sub architecture.

Let’s take a look at the share contract in action. Below you can see the CookBook application. I’m not very much of a cook but I can image that people would love to share a recipe with someone via mail or perhaps on Facebook. From within the Cookbook application, we use the Charms (swipe in from the right or use Win + C) and select Share.

In most apps (at least from the list of apps currently available), it’s the developer who has chosen what we can share. In the CookBook app, it’s created this way as well. Of course, the developer of the application can also select to allow the user to specify the information he wants to share. After clicking/tapping on Share, the list of share targets appears. If you’ve read the previous article, it’s easy to see a similarity between this and the list of apps that registered for Search. Indeed, being a Share target is done through a declaration (as we’ll see later in this article). Based on the contents of the data being shared, this list is filtered automatically by Windows.

Now that the user made a selection, the share target app opens. In most cases, the app doesn’t open in its default view. Instead, it opens a specific view for handling the sharing operation. Below, we see the SDK Sample Target application accepting the share data.

Let’s now look at how we can create both an application that is a share source and an application that is a share target. We’ll start with the source.

Making your application a share source

Implementing the share contract as source in your application comes down to the following steps:

Via code, registering your application with the DataTransferManager.
Your application should register itself for the DataRequested event of the DataTransferManager.
Filling up the DataPackage when the above mentioned event is fired by Windows

Let’s look at these steps in a sample application. Create a new C# Metro style application and name it MyShareSource. The UI is nothing more than a basic Button that triggers the display of the Share UI. We are going to share basic text here. The UI of the app is shown below.

The registration with the DataTransferManager is done in a separate method named RegisterForSharing() which we’ve called from the constructor. We retrieve the DataTransferManager and then register for the DataRequested event. This event will be triggered when the user indicates he/she wants to share data from the application. This event is triggered by Windows; in fact, it is triggered by the Share Broker. The Share Broker is the component that sits between the source and the target applications. The first thing it does is handling the incoming sharing request (triggered by the user willing to share) and routing it to the source application. Below we see the RegisterForSharing() method.

public BlankPage()

    this.InitializeComponent();

    RegisterForSharing();

private void RegisterForSharing()

    DataTransferManager datatransferManager;

    datatransferManager = DataTransferManager.GetForCurrentView();

    datatransferManager.DataRequested += newTypedEventHandler<DataTransferManager,DataRequestedEventArgs>(this.DataRequested);

In the DataRequested event, we create the something called the Data Package. This can be seen as a container for data; it contains the data that the source application shares with the target. It can contain several formats, varying from simple text and URIs to images and even custom data formats. The latter should mostly be used if you want to target a specific share target app (for example, you’ve created 2 Metro style apps between which you want to exchange data). You can add more than one type of format (for example, an image, text, URI and a custom format all at once). Based on the contents, the Share Broker will filter the list of target applications. Below is the code for the DataRequested event where we build up the Data Package.

void DataRequested(DataTransferManager sender, DataRequestedEventArgs e)

    e.Request.Data.Properties.Title = "Sample sharing source";

    e.Request.Data.Properties.Description = "This is some Lorem ipsum text";

    e.Request.Data.SetText(ShareContent.Text);

Run the application now and notice that when clicking, you’ll see that the Share UI is shown. If you have any apps registered as target, you can go ahead and share the text.

Now that we can share data, let’s see what we need to do to accept data.

Making your application a share target

We’ve seen that the Share Broker has asked the source application to create the Data Package. Once ready, it will inspect it and look at the different data types included. Based on this, the long list of all registered target apps is filtered to only those that can handle at least one of the included types. This is something we don’t have to worry about, it’s done for us.

When the user selects an application, the Share Broker will start the target app. It gets activated (remember the search activation from the last article) and gets passed in the data package (the target app gets read-access). The target app can (but is not forced) to send a completion so that the source app knows it can continue its normal run.

Notice that the sharing experience is in-context, meaning that the user doesn’t leave the application to go and copy/paste some information in another application!

Let’s see how we can make this working. Create a new Metro style app and name it MyShareTarget.

First, add a new Share Target Contract from the Project template window and name it SimpleShareTarget.

Adding this template does a number of things. First, it adds a declaration to your manifest: the Share Target declaration. Based on this, Windows will know that your application can be the target of a share operation. We need to specify the types of content, shared via the Data Package, we want to receive. Since we are sharing text in the MyShareSource application, we specify that as the only type here.

Secondly, your App.xaml.cs is modified: it overrides the OnShareTargetActivated, accepting a ShareTargetActivatedEventArgs instance. The code is shown below.

protected override void OnShareTargetActivated(Windows.ApplicationModel.Activation.ShareTargetActivatedEventArgs args)

    var shareTargetPage = new MyShareTarget.SimpleShareTarget();

    shareTargetPage.Activate(args);

Notice what this code does: it doesn’t load the default start page, instead it activates a new page of type SimpleShareTarget. The code for this Activate() method is also generated. We need to make some changes to it so that the shared text will also appear. Below is the code for this method.

public async void Activate(ShareTargetActivatedEventArgs args)

    this._shareOperation = args.ShareOperation;

    // Communicate metadata about the shared content through the view model

    var shareProperties = this._shareOperation.Data.Properties;

    var thumbnailImage = new BitmapImage();

    this.DefaultViewModel["Title"] = shareProperties.Title;

    this.DefaultViewModel["Description"] = shareProperties.Description;

    this.DefaultViewModel["Image"] = thumbnailImage;

    this.DefaultViewModel["Sharing"] = false;

    this.DefaultViewModel["ShowImage"] = false;

    if (_shareOperation.Data.Contains(StandardDataFormats.Text))

        this.DefaultViewModel["MainText"] = await _shareOperation.Data.GetTextAsync();

    Window.Current.Content = this;

    Window.Current.Activate();

    // Update the shared content's thumbnail image in the background

    if (shareProperties.Thumbnail != null)

        var stream = await shareProperties.Thumbnail.OpenReadAsync();

        thumbnailImage.SetSource(stream);

        this.DefaultViewModel["ShowImage"] = true;

We also need to update the UI for the SimpleShareTarget.xaml view so that we see the text.

<Grid Grid.Row="1" Grid.ColumnSpan="2">

    <TextBlock

        Text="{Binding MainText}"

        Foreground="{StaticResource ApplicationSecondaryTextBrush}"

        Style="{StaticResource BodyTextStyle}"/>

</Grid>

Now run the MyShareTarget app. You won’t see anything, since now the BlankPage.xaml is running. Behind the scenes though, your app has registered itself to be a share target.

To see that in action, run the MyShareSource application again. Now when you click on Share, you’ll see your application listed. Select it and watch your content being shared with the target application!

Summary

In this article, we’ve taken a look at a second interesting contract in Windows 8: the sharing contract. It allows two applications to communicate with each other without there being a hard reference between the two.

In the next article, we’ll dive into the creation of tiles! Stay tuned!

About the author

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). His second book, Silverlight 5 Data and Services Cookbook will be released early 2012. You can find his blog at www.snowball.be.

Twitter: @gillcleeren

Win 8 Page Navigation

Mon, 16 Apr 2012 17:27:21 +0000

Part 5: Developing for a multitude of clients: strategies for code reuse and keeping costs in check.

editorial@silverlightshow.net (Kevin Dockx ) — Mon, 16 Apr 2012 13:18:00 GMT

Welcome to the fifth part of this article series on strategies for designing your application for a multitude of different clients. In the first part, we’ve looked into the business case & some general concerns, and in the second part, we made a choice for a service layer: WCF RIA Services. In the third part, we’ve seen how we can use MEF for on demand loading & code reuse across different clients, and in the fourth part, we’ve learned how to load a multitude of assemblies on demand, and we’ve learned how we can navigate to views in an on-demand loaded assembly by implementing a custom content loader in combination with a view factory.

More resources...

All SilverlightShow Ebooks

In this part, we’re going to add another client to equation: a Silverlight Out of Browser client. After all the work we’ve done on the previous articles, we’ll see just how easy it is to reuse most of the code we already have.

You can download the source code for this article here (you can log in to the demo application with pete.campbell@madmen.com / abc@123).

Getting started: adding a new, Silverlight Out of Browser client

To start, we’re going to have to add a new client to our solution. I’ve added a new Silverlight client, named SalesDashboard.Silverlight.DesktopClient, to the solution, and configured it to run as an Out of Browser application (project properties –> Silverlight).

As we’re aiming to reuse a lot of code, the Out of Browser application itself doesn’t really have to contain a lot of code: in essence, we’ll need to ensure the correct references are there, and the correct assemblies are loaded when we start the application – just like we did with the in-browser Silverlight client.

For the references, we can simply go down the same road as explained in the previous article: commonly used code, existing assemblies that contain classes used throughout the application, … are added as a reference. This includes the MVVM Light related assemblies, Toolkit assemblies, … On the other hand, code that belongs to a specific module is loaded on demand: we do add them as references, but we set the Copy Local flag to false, ensuring they’re not copied to the output directory (and thus not packaged in the resulting XAP file, keeping file size and initial load small).

For our new client application, this results in setting the Copy Local flag to false for SalesDashboard.Client.Model (the generated model), SalesDashboard.SL.Modules.EmpOpp.ViewModels (the ViewModels from the Employee Opportunity module) and SalesDashboard.SL.Modules.EmpOpp.Views (the Views from the Employee Opportunity module) : these will be loaded when we start the application.

For demo purposes, this should result in the same application running in the browser as out of the browser, but remember: as this series is about separating out your application in modules & reusable code, nothing stops us from loading different modules in the Out of Browser application.

But wait – if the resulting applications should be the same, and we’ve separated out as much as possible, shouldn’t we simply be able to copy/paste the code from the in-browser application? Well, let’s try that, shall we? Simply copy/paste the MainPage.xaml (and .cs) and App.xaml (and .cs) code into the Out of Browser application, and try to run the application.

It compiles. But it doesn’t run. Although we don’t really have to change a lot – two things, actually. Let’s look into those.

The first issue: errors when loading assemblies.

The first thing we will notice when we try to start our application is a “Type not found” error:

HeaderView is a view which is defined in an assembly we’re loading at startup: SalesDashboard.SL.Modules.EmpOpp.Views. An error like this suggests the assembly hasn’t been loaded, so therefore, an instance of HeaderView cannot be added to the MainPage.

If we look into what happens at application start, something immediately becomes obvious: we’re passing in a list of assemblies to load to our ParallelAsyncProcessor instance. Code like this will try to find these assemblies in its own startup directory – that worked fine for the in-browser application (as the assemblies are deployed to the Webhosts’ ClientBin folder), but for the Out of Browser application, this isn’t sufficient anymore. We need to pass in the exact Uri:

foreach (var dependency in lstDependencies){    // note:  pass in another variable instead of directly passing in the dependency string.     // This ensures this new value is used when executing the parallel processes instead     // of using the last passed-in string multiple times     var foo = dependency;    var catalogDep = new SuperDeploymentCatalog(        new Uri("http://localhost/SalesDashboard.WebHost/ClientBin/" + foo));    catalog.Catalogs.Add(catalogDep);    EventHandler<AsyncCompletedEventArgs> handler = null;    handler = (s, a) =>    {        parallelAsyncProcesser.ProcessComplete(foo);        catalogDep.DownloadCompleted -= handler;    };    catalogDep.DownloadCompleted += handler;    parallelAsyncProcesser.AddToParallelQueue(() => catalogDep.DownloadAsync(), foo);}

If we now build and run the application again, we’ll see we won’t get any errors anymore. The problem? We don’t get anything at all anymore: just a white page, nothing more. What’s going on?

The second issue: no more errors, but a white screen instead of an application.

To be honest, this issue actually left me quite puzzled for a while when I first ran into it. I started looking through my code, but couldn’t find anything out of the ordinary – after all, we’re executing the exact same code as in an in-browser application. What I did notice was that the callback handlers, used by the SuperDeploymentCatalog, didn’t return anymore: it seemed as though the requests for external assemblies were executed, but they never returned: a callback wasn’t received anymore. I started looking around on the internet, and finally found out how this issue can be resolved: by setting the RootVisual element before loading the assemblies on-demand (not sure anymore if it was Pete Browns’ blog or Jeremy Likness’ blog where I read about this first, but both are great resources to check out).

Apparently, setting the RootVisual ensures some behind-the-screens wiring is done, so the handlers actually return, and the applications’ code continues. I don’t find this behavior documented anywhere on MSDN – I would actually qualify this as a bug that only happens in an Out of Browser Silverlight application.

How can we solve this? We cannot set the RootVisual to an instance of MainPage when the application loads, as that would result in composition & instantiation errors: the controls on our MainPage are defined in assemblies that are loaded on-demand. What we can do is create an extra user control, and set that as the RootVisual when we start the application. Afterwards, after our assemblies have been loaded, we add an instance of MainPage to that user control, as its only child (note: setting the RootVisual to a dummy control on load, and changing it to an instance of MainPage after the assemblies have been loaded doesn’t work either).

To this avail, I created a user control, MainPageHost. This is actually a simply, empty control, which only contains a LayoutRoot element.

In Application_Startup, we set the RootVisual to an instance of MainPageHost. Once the assemblies have been loaded, I call a method on MainPageHost, LoadApplication(). This method sets the MainPageHosts’ LayoutRoot (which is a Border) child to an instance of MainPage(). This results in our application getting instantiated, which now works because all necessary assemblies have been loaded.

Code in App.xaml.cs:

parallelAsyncProcesser.AllProcessesCompleted += () =>{    // dependencies have been loaded, init app startpage     (this.RootVisual as MainPageHost).LoadApplication();};

Code in MainPageHost.xaml.cs:

internal void LoadApplication(){    LayoutRoot.Child = new MainPage();}

We can now build and run our application – and everything will work as it’s supposed to work. We’ve now created an Out of Browser client with very little effort, composing the application on-load by reusing the components we’ve separated out in the previous articles of this series.

Conclusion

In this article, we’ve seen how we can add an extra client to our solution, which reuses a lot of code from the previous articles in this series. We’ve also learned how to work around 2 issues: passing in the correct Uri so the assemblies that have to be loaded can be found, and ensuring the necessary behind-the-screens wiring is done so the application execution can continue as expected.

What’s next?

Stay tuned for the next part of this article series, in which we’ll add a Windows Phone client to the equation!

About the author

Kevin Dockx lives in Belgium and works at RealDolmen, one of Belgium's biggest ICT companies, where he is a technical specialist/project leader on .NET web applications, mainly Silverlight, and a solution manager for Rich Applications (Silverlight, Windows Phone 7 Series, WPF, Surface, HTML5). His main focus lies on all things Silverlight, but he still keeps an eye on the new developments concerning other products from the Microsoft .NET (Web) Stack. As a Silverlight enthusiast, he's a regular speaker on various national and international events, like Microsoft Techdays in Belgium, Portugal & Finland, NDC2011, Community Day, ... Next to that, he also authored a best-selling Silverlight book, Packt Publishing's Silverlight 4 Data and Services Cookbook, together with Gill Cleeren. His blog, which contains various tidbits on Silverlight, .NET, and the occasional rambling, can be found athttp://blog.kevindockx.com/, and you can contact him on Twitter via @KevinDockx.

Here comes Windows 8

Fri, 13 Apr 2012 19:41:21 +0000

Creating the SilverlightShow Windows Phone App: part 3

editorial@silverlightshow.net (Peter Kuhn ) — Thu, 12 Apr 2012 10:44:00 GMT

In the first parts of the series about developing the SilverlightShow Windows Phone app I explained the general development process and the technical details of accessing and optimizing the RSS feeds of the site. Now that we are able to access all of the content from the phone, the next step is to take a look at what was necessary to display what we have to the user while preserving a native look and feel. If you haven't seen the app in action, here is a short video about it.

More resources...

All SilverlightShow Ebooks

When you recall the details of the previous part or simply take a quick look at the RSS feeds of the SilverlightShow site again (sample), you will see that the content of each category (news, articles, events) is stored as fully formatted HTML already. All of it is produced by authors in WYSIWYG tools like Windows Live Writer and directly uploaded to the site's content management system. Even though we receive a slightly optimized and cleaned version of that rich content on the phone, it's still HTML. The fundamental decision to make hence was whether we would take that content as-is or transform it into something more native to the phone platform.

HTML or not HTML, that is the question

I have talked about the problems of parsing real-world HTML in the last part already, and how malformed tags and content can easily break a strict approach. We could have used a specialized parser like the Html Agility Pack I've suggested before, to ease some of these problems. However, these tools can only help with certain technical details, to fix low-level issues. SilverlightShow is a platform that is open for anyone to contribute and be an author for their respective area, and that variety is also reflected in the technical structure of the content. An analysis of the existing data revealed that sometimes articles are structured with div elements, sometimes people use paragraph tags; some like to present tabular information, others make heavy use of images, diagrams and screenshots. In addition, we have code snippets for different languages, bulleted lists, and of course the normal styling features you have in HTML for highlighting and font formatting.

All of this quickly lead to the conclusion that any attempt to transform the existing content into something native to Windows Phone (=XAML) would result in various problems:

Either we would have to spend a large amount of time to support an insane amount of formatting features, or
We needed to make sure that all (future) content is only using a limited subset of the available options (which would require a very sophisticated technical review process before publishing any new item), or
We would only support a small subset of the available features in HTML and simply strip the rest, which would result in a more or less significantly worse experience for phone users compared to the normal desktop experience.

In any case, we were sure that none of the above solutions could be implemented in a way that is safe and robust enough for all future content. No matter how thorough you test and create an app like this, since you highly depend on external factors that are completely out of your hands it's almost inevitably that something is going to break at some point in the future.

The logical consequence was to use the content as is, and present it within the app using the web browser control. Obviously the team at Microsoft has much more resources and knowledge, and put more effort into creating a full featured HTML parser and rendering engine than we ever could – why not make use of that and provide the best presentation possible by using this built-in option? This seemed like the perfect compromise to us: creating a nice application to give users the best look and feel as well as a native, integrated experience, and embed the existing content in a way that provides the same nice presentation as accessing the site.

What's in a color?

Using the web browser control in a satisfactory way turned out to be much harder than expected. Along the way we hit quite some obstacles that were hard to overcome. And I'm not talking about advanced or obscure things but pretty basic features. For example, setting the background color of the control can become a challenge if you want it to be perfect. The web browser control is only a shallow wrapper around a native component and in turn makes use of the built-in rendering capabilities of Internet Explorer to display its content. The way the control works unfortunately does not allow to e.g. work with advanced features like transparency for the background.

This analysis of the visual tree of the web browser control I did a while back shows the native Internet Explorer component named "TileHost" as last element. So, with the background color solely determined by the content that is displayed, the natural next step is to simply adjust that data in the HTML content itself. The items we download from the RSS feeds are only HTML fragments and need to be extended to a full and valid HTML page anyway (which means adding html, head and body tags etc.). During that step, we inject some custom styling data, for example for the pre tags of code snippets, and also for the background color:

var styleElement = ownerDoc.CreateElement("style");

// [...]

const string value = "body { font-size: 10pt; background-color: #000000; color: #ffffff; }";

var valueNode = ownerDoc.CreateTextNode(value);

styleElement.ChildNodes.Add(valueNode);

headElement.ChildNodes.Add(styleElement);

The problem with this approach is that before any content is rendered, the web browser control's background color is white by default. This means that when you set it to a black background like we do with the above code, you will see some flickering, because it takes a short amount of time for the content to be loaded and rendered. The background will rapidly switch between the default white and your desired background color every time you change the content.

This annoying behavior cannot be suppressed by any of the built-in features easily. The simplest solution I found on the web was a suggestion by Colin Eberhardt to create an overlay (another UI element, like a rectangle) with the desired background color, and then fade out that overlay once the content in the web browser control has finished rendering. He has used a similar technique in his PhoneGap experiments to overcome the same issue there (you can find his blog post on this here). This workaround is not yet added to the SilverlightShow app – if you play with the app you will therefore see the said flickering when you e.g. navigate back and forth between the content items.

If you think that this is quite some work for something as simple as setting a background color, then you haven't thought about theming yet.

I Want Change

In the above paragraphs, I showed the code used to produce a constant background of black for the web browser control. However, Windows Phone supports both a dark and a light theme, and naturally we wanted to give users of our app the same choice. If a user has set their phone to the light theme, we wanted to invert the presentation scheme of the content items to display black text on white background. Due to the same problems mentioned above, this cannot be achieved by simply setting some properties on the control. Also, we couldn't simply inject the style in the way shown above when we download the content, because obviously the user can switch themes at any time in between uses of the app. So what we had to do instead is find a way to dynamically set the new colors within the HTML content of the control. JavaScript to the rescue!

The idea is to inject some JavaScript into the content that is to displayed, in the same way that we inject the style data above, so we can let that JavaScript code perform the required changes for us whenever it is required. To this end, the web browser control provides a method named InvokeScript, which lets you execute a JavaScript function defined in the current content dynamically. The injected code can be something simple like this:

function changeBackgroundToWhite() {

  document.body.style.background = 'white';

  document.body.style.color = 'black';

Injecting this works the same way as before with the styles:

// create script element and attributes

var scriptElement = ownerDoc.CreateElement("script");

var scriptTypeAttribute = ownerDoc.CreateAttribute("type", "text/javascript");

scriptElement.Attributes.Add(scriptTypeAttribute);

// create script content

string script = "[...]";

var scriptContent = ownerDoc.CreateTextNode(script);

scriptElement.ChildNodes.Add(scriptContent);

// add everything to the head tag

headElement.ChildNodes.Add(scriptElement);

Now we are able to switch the color scheme when the device currently is set to use the light scheme:

var lightThemeVisibility = (Visibility)Application.Current.Resources["PhoneLightThemeVisibility"];

if (lightThemeVisibility == Visibility.Visible)

  ContentWebBrowser.InvokeScript("changeBackgroundToWhite");

Note: Due to an issue with detecting theme changes after you return from tombstoning in the current release of the phone OS switching to the light theme that way (and not having a way to switch back) is actually sufficient in our case.

Where am I?

One of the most annoying problems with the web browser control is that it does not display a scroll bar to give the user an indication of what part of the page they are currently looking at, or how much more content there is during scrolling. I have written a detailed analysis of the problem a while ago in my blog; if you're interested in learning more on the technical details, you can read that post here. The following is a screenshot taken from that post to demonstrate the issue:

In my post I also explain a workaround that tries to emulate the behavior of the built-in browser experience. To achieve that I'm once again injecting some custom JavaScript into the content, but this time I communicate with the outer application from that very JavaScript, using the well-known "external.notify" mechanism. The corresponding JavaScript looks like this:

function initialize() {

  window.external.notify("scrollHeight=" + document.body.scrollHeight.toString());

  window.external.notify("clientHeight=" + document.body.clientHeight.toString());

  window.onscroll = onScroll;

function onScroll(e) {

  var scrollPosition = document.body.scrollTop;

  window.external.notify("scrollTop=" + scrollPosition.toString());

window.onload = initialize;

On the Silverlight side of things, you are able to capture these calls and process the information accordingly; in the case of the SilverlightShow app, I'm using it to update a fake scrollbar overlay I've added to the web browser control.

// e.g. in the constructor, or in XAML

ContentWebBrowser.ScriptNotify += ContentWebBrowser_ScriptNotify;

private void ContentWebBrowser_ScriptNotify(object sender, NotifyEventArgs e)

  // parse e.Value and use it to update a fake ScrollBar element

Unfortunately, the way the web browser works on the phone (and I think the web browsers on other mobile platforms and brands work in a similar way) is that they make heavy use of GPU features and deferred rendering to optimize performance. Only by using these tricks can they provide a smooth scrolling and zooming experience. The side effect of this is that the respective scrolling properties and events are not invoked until the panning has come to an end, which in turn means a limitation of this visualization workaround is that it's only updated once the user has finished scrolling.

And Some Fine-Tuning

As the name already says, one of the core features of HTML is its hyperlinked nature. The content available from SilverlightShow is no different in that. Articles and news contain links to external sources and other web sites all the time. Since we have even less control over that external content in a technical sense, and also out of legal reasons and other considerations, we decided that users of the SilverlightShow app should not be able to navigate to that external content within the web browser control, and within the context of the phone app itself. Instead, the idea is to intercept those navigational events and relay them to the built-in web browser of the Windows Phone operating system. This not only makes sure that the target page is displayed correctly and in the best way possible on the phone, but it also makes it as clear as possible to the user that they're leaving the content provided by SilverlightShow. At the same time, features like fast app switching and tombstoning allow a quick and seamless transition back to the app with no drawbacks for the user.

To make this work, you can simply handle the "Navigating" event of the web browser controls, cancel the navigation that is about to happen, and simply hand off that task to the platform's built-in web browser:

private void WebBrowser_Navigating(object sender, NavigatingEventArgs e)

    // we cancel all internal navigation...

    var uri = e.Uri;

    e.Cancel = true;

try

        // ... and instead launch an external web browser for this

        WebBrowserTask task = new WebBrowserTask();

        task.Uri = uri;

        task.Show();

    catch (Exception ex)

        // do some error handling

Note: You may need to add some additional code to prevent that logic from kicking in when you set or refresh your own internal content.

Conclusion

The web browser control that is built into the framework is a powerful tool to display HTML content within your application. Unfortunately, it comes with some limitations that require unconventional and creative workarounds and solutions to provide a good user experience. Some issues like the missing scroll bars even cannot be fully resolved with the current given possibilities. If you can live with these limitations and the additional effort to achieve seemingly simply things, the control still provides a great way to present rich content, especially if it's already available as HTML.

New Article on JsRender Templating

Wed, 11 Apr 2012 12:49:13 GMT

Super fast rendering, easy to pick up, no DOM nor jQuery dependency. That’s JsRender. Check out this month’s Client Insight column where I cover the basics of JsRender. And be on the lookout for my new full length course on JsRender, coming to Pluralsight in May 2012.

JsRender is the successor to jQuery Templates created by Boris Moore. It brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string-based rendering.

So instead of writing code like this:

var i = 1;
$(my.vm.movies).each(function () {
  var movie = this;
  $("#movieContainer1").append(
    "<div>" + i++ + ": " + movie.name + " ("
    + movie.releaseYear + ")</div>");
});

you can write code like this:

<div>
    {{:#index+1}}: {{:name}} ({{:releaseYear}})
</div>

Creating the SilverlightShow Windows Phone App: part 2

editorial@silverlightshow.net (Peter Kuhn ) — Wed, 11 Apr 2012 11:43:00 GMT

In the first part of this mini series I was mostly talking about the process of developing the SilverlightShow Windows Phone application, and didn't discuss any of the technical specifics. Today I want to dive into some of the details around downloading and optimizing RSS feeds. I not only want to give you insight into the particular problems we were facing, but also some hopefully useful advice and guidelines should you ever want to develop a similar feature for your own application. If you haven't used or seen the app yet, you can watch a quick intro video here and find it on the Marketplace here.

It's all about content

As described before, the SilverlightShow portal has already established a nice infrastructure for creating, maintaining and accessing its rich content, and that includes multiple RSS feeds which seamlessly cover all the data we need in the mobile app.

More resources...

All SilverlightShow Ebooks

So the first step was to prototype an app that could download and display the content provided by these feeds, to evaluate whether going down that road is feasible.

When you search for samples and tutorials on RSS feed reading on Windows Phone, you inevitably will find articles that recommend using the Syndication assembly that comes with Silverlight, which indeed is safe to use on the phone too. I won't post any links here, because I strongly vote against doing this. If you still want to try it out yourself, you will realize that the parser included with this library is really strict, and unfortunately that means it's fighting severe problems with real world RSS feeds. A single unexpected space character somewhere in the data of feed items can result in an exception and the inability to parse the feed at all. As you can see in the old Connect bug I've just linked to, people continue complaining about this and other issues with the Syndication framework even though the bug entry itself is "closed as fixed".

Don't use System.ServiceModel.Syndication.dll

In an environment where you have full control over the very detail of the feeds you may be able to work around this problem, but most of the time you are not. For example here at SilverlightShow, we weren't able to fix some of the glitches that let the Syndication framework fail, because the feeds are not created manually, but handled by a third-party framework for generating RSS feeds from existing data. So what's the alternative? Fortunately, parsing RSS feeds manually isn't such a big deal, because in the end it all comes down to walking an XML tree and extracting the data you want from its elements. When you do that, you are able to handle the specific problems of the feed you're dealing with yourself, or can create a parse algorithm for e.g. date values (these often are problematic) that is more forgiving and flexible than the built-in parser of the Syndication framework.

If you're looking for a full example, I'm pleased to announce that the official RSS starter kit for Windows Phone switched to a more robust way of parsing the feeds just a few days ago, and can now be recommended as a great starting point for these kinds of applications. It used to use the Syndication framework but Chris Koenig decided to change the implementation to manual processing recently. You can find its web site here, and its GitHub page here. The code for downloading and parsing essentially looks like this:

// retrieve the feed and it's items from the internet

var request = HttpWebRequest.CreateHttp(SelectedFeed.RssUrl) as HttpWebRequest;

request.BeginGetResponse((token) =>

  // process the response

  using (var response = request.EndGetResponse(token) as HttpWebResponse)

  using (var stream = response.GetResponseStream())

  using (var reader = XmlReader.Create(stream))

    var doc = XDocument.Load(reader);

    // ...

    feed.Description = doc.Root.GetSafeElementString("summary");

    // ...

    foreach (var item in doc.Root.Elements(doc.Root.GetDefaultNamespace() + "entry"))

      var newItem = new RssItem()

        Title = item.GetSafeElementString("title"),

        // ...

In the SilverlightShow app, we're using a slightly different approach to squeeze out the last bit of performance :). Instead of working with Linq to Xml, the code uses the XmlReader object directly to sequentially extract all the required information from the feed. Like:

private void ReadFeed(XmlReader xmlReader, FeedData result)

try

    xmlReader.ReadStartElement("rss");

    xmlReader.ReadStartElement("channel");

    while (xmlReader.IsStartElement())

      if (xmlReader.IsStartElement("title"))

        result.Title = xmlReader.ReadElementContentAsString();

      // ...

  // ...

Working this way, you are flexible enough to e.g. apply a more relaxed date parsing, or process the content in any way you want. You'll also be able to do your own custom error handling, for example to only skip a single item if you're unable to parse it, instead of throwing away the whole feed content when you run into a small error.

Optimizations, optimizations, optimizations

Now that we were able to correctly load the content in question onto the phone, it was important to evaluate whether doing this was a practical solution. One of the invaluable helpers in the tool box of every developer to analyze these scenarios is a network monitoring tool. I generally start with Fiddler because it's so simple and convenient to use, and only switch to more advanced tools when Fiddler isn't able to capture the traffic or provide the information I need. For developing with the Windows Phone emulator, Fiddler is perfectly fine as long as you remember to first start Fiddler and then launch the emulator afterwards (or you won't be able to capture any of the emulator's traffic). You can find more information and download Fiddler for free here.

In the case of analyzing the RSS feeds of SilverlightShow you don't even have to go through the Windows Phone emulator, but can access the feed directly in your browser and watch the traffic in Fiddler that way. One of the particular feeds we are interested in is the one that retrieves article content from the site:

http://www.silverlightshow.net/FeedGenerator.ashx?type=Article

At the time of writing this article, the size of the returned 25 items in this feed is a whopping 1.5 MiB:

Obviously that amount of data is unsuitable to be transferred to a mobile device frequently, where people often are using slow connections or even worse, have to pay for the transferred data byte-by-byte. It was clear that we needed to introduce a whole lot of optimization and improvements to make this work. Fortunately, we had already reckoned this situation and collected a bunch of ideas during the design phase.

Squashing the Content

One of the particular details we quickly identified for optimization are the code snippets that are included with most of the articles on SilverlightShow. Authors can use a nice plug-in to Windows Live Writer to beautify the code they paste. Behind the scenes, the coloring and formatting of the code is achieved by applying CSS styles to it. This can tremendously increase the size of the HTML necessary to display the code. For example, this small snippet of code (147 characters) taken from a recent article…

private void button1_Click(object sender, RoutedEventArgs e)

    MyBeep myBeep = new MyBeep();

    myBeep.PlaySound(BeepTypes.Information);

… is turned into a block of 3313 characters in the RSS feed. In addition to the CSS styling information, the required encoding of HTML entities also adds quite a lot to this size. This means that we see a size increase of factor 22 here just for the added benefit of having colored code snippets. Stripping this formatting from the content when it is requested by the phone was a natural consequence. We still have some code formatting in the app (like using a fixed-size font), but without the syntax highlighting. This was one of the areas that required some work on the existing services. A newly added parameter for the feed generator solved this problem nicely. You can see the result using the following url:

http://www.silverlightshow.net/FeedGenerator.ashx?type=Article
&stripCodeFormatting=true

This change alone shrinks the size of the feed by approximately two thirds, depending on the actual content and the percentage of code in the current set of articles. At the moment, the new size is ~625 KiB:

The content on the phone after that looks similar to this…

private void button1_Click(object sender, RoutedEventArgs e){    MyBeep myBeep = new MyBeep();    myBeep.PlaySound(BeepTypes.Information);}

… and only requires 118 additional characters per document, and these are generated on the device itself (more on that later).

In addition to this, we also reduced the maximum number of articles returned to the phone from 25 to 10, as we felt that this is sufficient for the mobile device where you are more interested in being notified about new content than reading the archives. This of course also reduces the total size a lot.

Parsing HTML

A side note on stripping the code tags and CSS from the original content: this actually is a very interesting topic that we unfortunately do not have the time and space to cover in more detail here. Real-world HTML often does not follow the strict rules of normal XML content; especially when you're working with WSIWYG editors, and when multiple authors are responsible for a merged final output, the result might look significantly different from what you would expect. In most cases, trying to treat HTML as XML, and assuming that it follows the same strict rules is a dangerous thing to do. Therefore, I generally recommend against the usual approaches people attempt to follow when they work with that kind of data. In particular, do not:

Use regular expressions
Use string replacement
Use XML readers or documents

All of these fail quickly with faulty HTML, and are not flexible enough to handle the situations you will come across, with reasonable effort. So what is the alternative here? There are some projects out there that have put quite some work into creating more tolerant parsers for HTML that are capable of handling malformed tags and content better than probably any custom solution you (and I) would be able to create within the limits of a small phone project. One of these projects is the Html Agility Pack hosted on CodePlex. It has built-in support for Windows Phone and not only helped us strip the code formatting from the articles, but also to improve some other details of the content, like dealing with multi-column layouts and turn it into something that is more suitable for the small phone screen.

If you are ever in the situation where you need to parse HTML, I recommend you take a look at this or similar projects to make your life easier, instead of trying to reinvent the wheel.

Local Caching

Another important feature of the SilverlightShow app is that we do not pull all the RSS items from the feeds whenever you hit the refresh button or start the app on your device. Instead, we locally store the items and only fetch those that we haven't retrieved in the past yet. To achieve this, another small extension of the existing service was implemented that allows you to restrict the returned data by date, by appending an "after" parameter to the url:

http://www.silverlightshow.net/FeedGenerator.ashx?type=Article
&stripCodeFormatting=true
&after=2012-04-03%2014:57:57Z

Retrieving a single new article then results in a really small transferred size, depending of course on the actual article content. At the moment, retrieving only the newest article for example only requires transmitting 15.428 bytes.

This means that after the initial download of the full articles list, successive downloads will be much faster.

Mother of Optimization: Dynamic Data Compression

Surprisingly few people know about the possibility to compress dynamic content on the fly in IIS. By default this feature is disabled, and you may even have to add it manually using the "Turn Windows features on or off" or server roles dialog of the operating system:

This is a feature that comes virtually at no cost for normal application developers. In my experience, it also has little to no impact on existing clients and applications, as you are able to configure its details per application, and clients explicitly have to opt-in to make use of it (meaning if they don't support it, turning it on shouldn't break anything for existing clients). It does have some implications for your server however, because obviously it needs to compress the content it delivers on the fly now, which increases CPU load; if you're in doubt, talk to your system administrator or provider.

Unfortunately, Windows Phone devs do not fall into the "normal application developers" category; even the most recent version of the SDK does not have built-in support for compressed content, which means the available networking classes do not explicitly opt-in to the feature and also do not do the decompression for you transparently. The benefit you get from implementing this manually however is tremendous for text-based content (like RSS feeds), so it's something you should always consider. As often, some people have done most of the work for you already. Morten Nielsen for example has created an implementation of this that you can use with just a few lines of code, and the package also is conveniently available on NuGet.

I've used a very similar technique in all of my Windows Phone development that required downloading text-based content; for the SilverlightShow app, the code looks like this:

var request = WebRequest.CreateHttp(uri);

// opt-in to compressed content

request.Headers[HttpRequestHeader.AcceptEncoding] = "gzip";

var ar = request.BeginGetResponse(GetResponse_Callback, feedResult);

// ...

using (var response = feedResult.Request.EndGetResponse(ar))

  using (var stream = response.GetResponseStream())

    // decide what to do

    Stream decodedStream;

    if (response.Headers[HttpRequestHeader.ContentEncoding] == "gzip")

      decodedStream = new GZipStream(stream, CompressionMode.Decompress);

    else

      // simply use the original

      decodedStream = stream;

    // ...

Here, "GZipStream" is my own custom implementation similar to what Morten has developed himself. The savings are tremendous. The original feed that currently has 1,591,787 bytes, without any of the other phone optimizations applied, is reduced to a size of 302,537 bytes:

Final Comparison

Let's take a final look at the before and after situation for the articles RSS feed with all the optimizations in place:

	Original RSS	Optimized for the phone + gzipped	Saved
Retrieving the full list (25/10)	1,591,787 bytes	91,399 bytes	94%
Update (1 new item)	1,591,787 bytes	~5,000 – 15,000 bytes	>99%

This is a very reasonable amount of data to handle for the phone. Also please remember that we are only looking at the article feed here. All the other feeds we're using in the app (news, events etc.) are much smaller in their nature anyway, but have the same optimizations applied. This is one of the reasons why the app works well even with not so fast internet connections, and updating or refreshing the list typically only takes a few seconds, at the most.

Now that we have the possibility to pull content into the app, and also optimized the amount of data that has to be transferred for this, what do we do with that content? It's all HTML formatted text, images, and tables – we need to find a way to nicely display that content to the user. This topic will be covered in the next part of the series.

Metro app development hidden gem: anonymous type binding

Tue, 10 Apr 2012 15:38:12 GMT

Just a little post to point out a hidden gem if you are a .NET developer creating a Metro style app: you can bind to anonymous types. This came up in a discussion with a customer today that I was having and, frankly, I never tried it until then because my mind was back in Silverlight where this isn’t possible. There may not be a tone of cases where this is valuable for you, but knowing it is there may help.

Let’s assume I have a basic class Person:

        1: public class Person       2: {       3:     public int Age { get; set; }       4:     public string FirstName { get; set; }       5:     public string Gender { get; set; }       6: }

And in my application I have a list of that Person type that I somehow received. In this example, I’m just hard-coding it right now.

       1: List<Person> people = new List<Person>();       2: people.Add(new Person() { Age = 38, FirstName = "Tim", Gender = "Male" });       3: people.Add(new Person() { Age = 9, FirstName = "Zoe", Gender = "Female" });       4: people.Add(new Person() { Age = 5, FirstName = "Zane", Gender = "Male" });

I can then decide I want to bind to a ListView control which has a particular template:

       1: <ListView x:Name="PeopleList" Width="500" Height="300">       2:     <ListView.ItemTemplate>       3:         <DataTemplate>       4:             <StackPanel Orientation="Horizontal">       5:                 <TextBlock Text="{Binding TheName}" Margin="0,0,10,0" />       6:                 <TextBlock Text="{Binding GuysAge}" />       7:             </StackPanel>       8:         </DataTemplate>       9:     </ListView.ItemTemplate>      10: </ListView>

Notice that I’m binding to properties (TheName and GuysAge) that don’t exist on my Person class? In my code, I can then create a LINQ query to filter out only the “dudes” from my list and bind that result:

       1: var onlyGuys = from g in people       2:                where g.Gender == "Male"       3:                orderby g.FirstName descending       4:                select new       5:                {       6:                    GuysAge = g.Age,       7:                    TheName = g.FirstName,       8:                    Gender = "Dude"       9:                };      10:        11: PeopleList.ItemsSource = onlyGuys;

The result is that my ListView now shows 2 people in the list. Nice.

Get in the real world

Now I would probably agree that since you already have a strongly-typed class this is probably not the use case here. It certainly might be helpful, but you already have a class (and in this example, one that you completely control so you could shape it to be what you really need). What about those times you don’t have a class or you don’t own the type coming back? JSON ring a bell? Using the sample JSON response (I’m not focusing on how to retrieve data here just how to bind to it) from Twitter APIs, we can demonstrate how this might be more helpful. Here’s the Twitter JSON data I’m referring to in this example: Twitter Mentions API.

My app wants to retrieve and bind to Twitter data but I don’t really want to have a “TwitterResponse” data type that I have to serialize in/out in my code. The mention data is an array of mentions. For the sake of simplicity I’ve basically put my JSON string in a file rather than confuse this sample in how to work with Twitter. My code looks like this (assume that ‘data’ is the resulting Twitter mentions JSON string:

       1: // parse the data into a JsonArray object       2: var mentions = JsonArray.Parse(data);       3:         4: // build the query out of the mentions       5: var qry = from m in mentions       6:           select new       7:           {       8:               MentionText = m.GetObject()["text"].GetString(),       9:               FromUser = m.GetObject()["user"].GetObject()["screen_name"].GetString(),      10:               ProfilePic = m.GetObject()["user"].GetObject()["profile_image_url"].GetString()      11:           };      12:        13: MentionData.ItemsSource = qry;

Notice the LINQ query for creating a “new” type that I will bind to my ListView. In my XAML I have a simple DataTemplate to demonstrate:

       1: <ListView x:Name="MentionData" Width="500" Height="300">       2:     <ListView.ItemTemplate>       3:         <DataTemplate>       4:             <StackPanel>       5:                 <TextBlock Text="{Binding FromUser}" />       6:                 <TextBlock Text="{Binding MentionText}" TextWrapping="Wrap" />       7:             </StackPanel>       8:         </DataTemplate>       9:     </ListView.ItemTemplate>      10: </ListView>

The result is me being able to create a LINQ query and create a new anonymous type and directly bind to it.

Voila! Perhaps you already discovered this little gem and are using it. It is a welcome addition to the data binding story for Metro style app development with XAML and .NET! Of course the same benefit can be had for XML data using XLINQ queries, so while this example is for JSON data, really any source data applies…it is all about that new anonymous type you create!

Hope this helps!

tags: linq, metro, win8, xaml, windows 8, anonymous, databinding

This work is licensed under a Creative Commons Attribution By license.

Stung by Azure Data Transfer fees

Tue, 10 Apr 2012 05:46:38 GMT

I should have known better honestly. I’ve had one strike with cloud billing catching me by surprise and I’m not sure why I’m shocked it happened again. This time, however, I thought I really did plan it out, pay attention to things and asked what I thought were the right questions. Unfortunately I didn’t get the full answers. This time I was stung by my shiny new SQL Azure service choice.

UPDATE 12-APR-2012: Based on comments I've received I feel the need to clarify that I'm not bashing Azure or cloud services in general here. I don't think anywhere I indicated Azure was a crap product or that I hated it at all. In fact, I indicated I was completely happy with the service offering. My frustration was *only* with the fact that the pricing was unclear to me based on how I researched it...that is all and nothing more. As many have pointed out, cloud services like Azure are extremely important in the marketplace and the ability to scale real-time with minimal effort is an exceptional feature. *FOR ME* I currently don't have those needs so I couldn't justify the charges beyond what I had planned...that is all, nothing more. My experience with SQL Azure was a positive one as a product. Quick setup, familiar tools to manage, worry-free database management, great admin interface and a reliable data storage solution. My architecture, however, just didn't prove ideal currently with my site not being in Azure as well. When VM roles come out of beta I will be sure to evaluate moving sites there and plan better.

A while back I heard about the change in price for some Windows Azure services and the one that piqued my interest was the SQL Azure. At the time it hit me right as I needed to move around some of my hosting aspects of my site. The lure of the $5/month SQL Azure database (as long as it was < 100MB) was appealing to me. The SQL server aspect of my site has always been a management headache for me as I don’t want to have to worry about growing logs, etc.

Stung by marketing

I followed the announcements to the http://www.windowsazure.com site and read the descriptions of the services. I was immediately convinced of the value and heck, it was a service from my company so why shouldn’t I give it a try and support it? When I began to set it up, however, there were questions being asked during setup and I started to get concerned. I asked around about if this $5 fee was really the only fee. I didn’t want to get surprises by things like compute time. Perhaps I wasn’t asking specific enough questions, but all answers I got was that signs pointed to yes, that would be my only fee.

NOTE: As of this writing yes I am a Microsoft employee, but this is my own opinion and I realize that peoples’ expectations and results vary. This is only my experience. I’m not only an employee but also a customer of Microsoft services and in this instance a full paying customer. No internal benefits are used in my personal Azure hosting accounts.

Yesterday I learned that wasn’t the case. I received my first Azure billing statement and it was way more than I expected. Yes my $5 database was there as expected, but also was suddenly “Data Transfer” charges of $55.

Trying to make sense of billing

I immediately tried to make sense of this billing. I immediately remembered that I had created a storage account as well for a quick test and perhaps I forgot to disable/delete that service. I logged into the management portal and saw that my storage account was properly deleted and nowhere to be seen. But how to make sense of these charges from the past week then? Luckily Azure provides detail usage download data so I grabbed that. The CSV file I download did indeed provide some detail…perhaps too much as some of it I couldn’t discern, namely the one piece that I had hoped would help me: Resource ID. This ID was a GUID that I thought pointed to a service that I used. It did not, or at least that GUID was nowhere to be seen on my Azure management portal.

I contacted the billing support immediately to help. I was able to talk with a human fairly quickly which was a plus. The gentleman explained to me that I had a lot of outgoing data leaving the Azure data centers and that was the source of the costs. He asked if I knew if anything was connecting to my SQL Azure instance externally. Well, duh, yes it was my site! He went on to explain that this constitutes “Data Transfer” and I’m billed at a per GB rate for any data that leaves the Azure data center.

I took a deep breath and asked where this was documented in my SQL Azure sign-up process. We walked through the site together and he agreed that it wasn’t clear. After being put on hold for a while, I was assured I would receive a credit for the misunderstanding. Unfortunately for Azure, the damage was done and they lost a customer.

Where the failure occurred

For me the failure was twofold: me for not fully understanding terms and Azure for not fully explaining them in context. I say “in context” because that was the key piece that was missing in my registration of my account. Let me explain the flow I took (as I sent this same piece of internal feedback today as well) as a customer once I heard the announcement about the SQL Azure pricing changes:

I received notice of updated SQL Azure pricing
I visited the site http://www.windowsazure.com for more information
I clicked the top-level “PRICING” link provided as that was my fear
I was presented with a fancy graphical calculator. I moved the slider up to 100MB and confirmed the pricing on the side (no asterisks or anything)
I notice a “Learn more about pricing, billing and metering” link underneath the calculator and click it to learn more
I’m presented with a section of 10 different options all presented at the same level giving the appearance as unique services.
I choose the Database one and again read through and confirm the charge for the 100MB database option.
I click the “More about databases” link to double-verify and am presented with another detailed description of the billing

Not once during that process was context provided. Not at any of the steps above (3 different pricing screens) was there context that additional fees could also apply to any given service. Data transfer, in fact, doesn’t even describe itself very well. As I was assured in asking folks involved in Azure about my concern on pricing, this “Data Transfer” wasn’t brought up at all. I’m not sure why at all it is listed along side services and almost presented as a separate service as it appears all Azure services are subject to data transfer fees. This is not made clear during sign up nor marketing of the pricing for each service. SQL Azure should clearly state that the fees are database *plus* any additional fees resulting from data transfer. Heck Amazon does this with S3 which also makes it so confusing to anticipate the cost of billing there as well…but at least it is presented that I need to factor that into my calculation.

I’m to blame, so why am I whining

I said I’m to blame as well for not understanding better what I’m getting into. It is unfortunate because I really did like the service and felt an assurance of more reliability with my database then I had before. The management portal was great and the uptime and log management was something I didn’t have to think about anymore.

So why, you might ask, am I complaining about a service fee for something that was providing me value?

NOTE: You may ask why I didn’t just move my site within Azure as well so that no data would be leaving the data centers. This is a fair question, but unfortunately my site won’t run on any Azure hosting services and additionally I manage a few sites on a single server so it is cost prohibitive to have multiple Azure hosting instances for me right now.

Well it is simple. I’m not made of money. This blog has no accounting department or annual budget and such, I have to be smart about even the smallest cost. I already have sunk costs into the server that hosts this site as well as a few others. A $5/month database fee was nothing and justifiable easily with the value I was getting and the minor additional cost. $50 (and growing) just wasn’t justifiable to me. It was already at the same cost as my dedicated server and just no longer made sense for my scenario here. In this instance I’m the “little guy” and need to think like one. Perhaps cloud services are not for me.

Summary

So what did I learn? Well, I really need to understand bandwidth and transfer data better for the sites I have. Unfortunately this isn’t totally predictable for me and as such if I can’t predict the cost then it isn’t something that I should be using. If you are considering these types of services regardless of if they are from Azure or Amazon (or whomever) you need to really plan out not only the service but how it will be used. Don’t be lured by those shiny cost calculators that let you use sliders and show you awesome pricing but don’t help you estimate (or alert you) to that some of those sliders should be linked together.

I think Azure (and other similar services) have real customer value…there is no doubt in that. For me, however, it just isn’t the time right now. The services, based on my configuration needs, just don’t make sense. Had I had a clearer picture of this when signing up, I wouldn’t have been in this situation of frustration. Choose your services wisely and understand your total usage of them. For me it currently doesn’t make sense and I’m moving back to a SQL Express account on my server. Yes I’ll have to manage it a bit more, but my costs will be known and predictable.

Hope this helps.

tags: azure, cloud, s3, amazon, sql

This work is licensed under a Creative Commons Attribution By license.

Windows 8 and the future of XAML: Part 4: Contracts in WinRT/Windows 8

editorial@silverlightshow.net (Gill Cleeren ) — Tue, 10 Apr 2012 00:40:05 GMT

In the previous article of this series, we wrote our first lines of code for WinRT. The main message was that although WinRT is a new API, we can still use our familiar languages to create Metro style applications. We have used the XAML/C# combination, but it’s perfectly possible to use XAML/VB or XAML/C++ as well. We’ll be using more of the API in the coming articles but in this article, we’ll focus on some specifics around contracts, more specifically, the Search contract. Contracts enable Metro applications to communicate with each other or with Windows itself without there being a hard reference in place.

The code for this article is available here.

Contracts: what are they

You are probably familiar with the term and meaning of a contract. It’s basically an agreement between two parties where they agree on some mutual aspect.

Don't miss...

All SilverlightShow Ebooks

When you use an interface, you’re using a software contract: your interface defines a contract that classes implementing this interface need to oblige to. If they don’t, they are breaking the contract, hence the functionality is not guaranteed.

Windows 8 defines contracts as well. Like with other contracts, they are a way of making sure that the users of the contract will oblige certain rules. In the case of Windows 8, the participants for the contract are the apps: some contracts take place between two applications, mediated by Windows itself, others are between an app and Windows.

Windows 8 defines quite a few contracts. The most important ones are the search contract, the share contract, the settings contract and the App-To-App picker contract. There are more contracts available, but when you start with implementing these in your application, you’ll definitely be adding a good experience to your app. For the other contracts, head over to this page on MSDN.

Now that we have a basic understanding of what a contract is, let’s take a look at how the end-user will experience these contracts. We’ll start our exploration by looking at the search contract.

The Search contract from the end-user perspective

Searching for information is very important in today’s world. We are constantly searching on the web but also locally on our machine/device. During a regular day, I often enter a search query in my Outlook search bar (thank God it still likes searching over 15GB of mails…) or I enter a short string as search query in my start menu. Quite often, I (and countless of users worldwide) rely on search to quickly find the information we need on our machine without remembering where we put it in the first place. The same thing happens when I need to find something in my control panel: when I look for the administrative tools, I don’t start clicking my way to them. Instead, I enter a query and find them, probably faster than when I would have started navigating.

Windows 8 is built around apps. These apps have a lot of information available as well. This information is by default reachable by opening the app and then searching from within the app.

In Windows 8, Microsoft has built in an integrated way of searching. When we enter a search query when we are in the Metro environment, Windows will by default search for apps, settings and files as can be seen on the image below. Note that this search is conducted from within Windows itself (you’ll see why this is important in just a second).

When we select any of the top 3 options, we can see that the list of results is being shown. Here we see results for apps.

Below we see results for files being shown.

Down at the bottom of the search pane, we see a list of apps. This list is composed out of all the apps that have implemented the search contract. To do so, they have made it clear through a declaration (we’ll see what exactly is a declaration later in this article) that they can be searched from within Windows. When selecting an app (here we have used the Store app), the app will open and we are immediately transported to the search results page. Below, you can see the Store app showing search results. The app was activated through search.

With this app open, we can search again. Notice now that at the top, we are searching within the app. Searching is made consistent all throughout Windows. The active app can now send query suggestions and result suggestions. Query suggestions are returned by the running application to help the end user in finding what he’s probably looking for. Result suggestions are more specific in that they also contain an icon of the search result. Both of these can be implemented through code inside your application.

Below you can see result suggestions.

Let’s now take a look at how we can build an app that implements the search contract.

The Search contract from the developer perspective

If we think of the possible ways of searching we just saw above, we can see the following items to be implemented by the developer to make his application implement the search contract:

Declare that the application can be search through a declaration
Write code that reacts to the application being activated ( while it wasn’t running) for search and show the results of that search query
Write code to accept a search query while it was already running
Send search suggestions and query suggestions to Windows to be shown in the search pane while it’s running

We’ll now build a sample application that implements the search contract in full in the steps below. Create a new Windows 8 Metro style application and name it SearchTest.

Adding the declaration for search

Metro style apps are using a specific way of letting Windows know about their intentions and capabilities once installed on a user’s device.

By adding one or more capabilities, they are saying that they need to use a specific API for them to run properly on the system. For example, when an application needs to use the webcam, the developer needs to check the Webcam capability. This will then be shown in the Windows store so that the end user can decide on not using the application. Also, while running, the capabilities are checked by the runtime broker.

A declaration is different. It’s a way for the application to say to Windows that it will take part in some operations or contracts. One of the possible declarations is search. By enabling the search declaration, Windows will show your application in the list of possible search targets. We’ll see other declarations being used later in this article series.

We can enable the declaration in 2 ways. To do things manually, go to the manifest editor by double clicking on the Package.appxmanifest. In the Declarations tab, check Search as shown below.

A better way that will save us quite some work is adding a Search contract to the application. To do so, in the Add new item dialog, select Search contract. Files are being updated and added as well as the declaration being enabled for you.

To test things out, let’s run the application now. When selecting the Search charm on the right, the Search pane pops up. Notice that it’s now scoped to search the current running application.

Also, when searching from within Windows, the application is now shown in the list.

Both cases of searching don’t work yet (which is quite logical since we haven’t implemented searching yet). Let’s work on that!

React to search activation

Another things that’s done automatically by the Search contract template, is adding code in the OnSearchActivated() in the App.xaml.cs. Before we look at the code, a word on activation.

A Metro application in Windows 8 can be “started” in several ways. The most normal way is starting the app by tapping/clicking the tile. This triggers the OnLaunched() to be called in the App.xaml.cs. When the app isn’t running though and the user selects the app as the target for his/her search query, the application also executes the OnSearchActivated(). Effectively, the application gets activated for search. Through this event handler, the search query entered by the user is also passed in via the SearchActivatedEventArgs instance. This way, we know what the user wanted to find in our application. The code generated by the template is shown below.

protected override voidOnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgsargs)

    SearchTest.MainSearch.Activate(args.QueryText);

    //TODO: Move the following code to OnLaunched to speed up searches when your

    //       application is already running:

    //Windows.ApplicationModel.Search.SearchPane.GetForCurrentView().QuerySubmitted+=

    //(sender,queryArgs)=>

//{

    //    SearchTest.MainSearch.Activate(queryArgs.QueryText);

    //};

In the first line of the code, what happens is that MainSearch.Activate() event is called. This is code, generated in the MainSearch.xaml.cs (I called my search result page MainSearch here, you can give it any name of course) sets an instance of the MainSearch page through navigation of the application frame as the content of the application. This way, when the application is activated for search, the search results page is navigated to. If we start the application now again, go to Metro, enter a search query and target our application, the application activates and automatically goes to the search result page as you can see below.

In the commented-out code, we see that VS11 is pointing us to the next topic: reacting to queries being submitted with the application running.

Reacting to submitting queries

When the application is running as the main foreground application (that does not include running in snap mode), the user can search by using the search charm the current application. To do so, we as developers need to subscribe to the QuerySubmitted() event. In the constructor of the BlankPage.xaml.cs, we can do so using the code below.

private SearchPanesearchPane;

public BlankPage()

    this.InitializeComponent();

    //Get SearchPane object

    this.searchPane=SearchPane.GetForCurrentView();

    //Register for SearchPaneQuerySubmitted event

    this.searchPane.QuerySubmitted+=searchPane_QuerySubmitted;

When we run the application now and hit search (the search is of course scoped to the application since it has the search declaration), the entered query is returned to our application. We are automatically redirected to the event handler of the QuerySubmitted event. In there, we can get hold of the value through the SearchPaneQuerySubmittedEventArgs instance that is passed in, as shown below.

void searchPane_QuerySubmitted(SearchPanesender,SearchPaneQuerySubmittedEventArgsargs)

    SearchResultTextBlock.Text="You've searched for: " + args.QueryText;

Of course, in a real-life application, we can write code to perform a search (perhaps by calling a service) and then redirect the user to the search results page.

Sending query suggestions

An application that is running as the main application in the foreground can send query and result suggestions to Windows. Windows will show a maximum of 5. Note that by default, Windows will also show a search history. This comes for free; we don’t have to develop anything for this. Let’s see how we can make search suggestions work.

The first thing we need to do is registering for the SuggestionRequested event coming in. This event will be raised by Windows when the user starts typing in the search box.

this.searchPane.SuggestionsRequested += searchPane_SuggestionsRequested;

When the event is effectively raised, we need to send suggestions. Just like with queries, the results can come from a service. In this sample code, we have hard-coded the list of possible suggestions. In the SearchPageSuggestionsRequestedEventArgs instance, we add our suggestions to the SearchSuggestionCollection. This list is then shown by Windows. Every time the user types something, this code is again executed. Therefore, be cautious what you place in there!

void searchPane_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)

    string[] suggestions={"AAA","AAABBB","AAACCC","AAADDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL","MMM","NNN","OOO","PPP","QQQ"};

    foreach(string suggestion in suggestions)

        if(suggestion.StartsWith(args.QueryText, StringComparison.CurrentCultureIgnoreCase))

            args.Request.SearchSuggestionCollection.AppendQuerySuggestion(suggestion);

        if(args.Request.SearchSuggestionCollection.Size >= 5)

            break;

Below we can see the result of the search suggestions being sent by our application.

We have successfully implemented the Search contract in our application.

Summary

Implementing the right contracts in your application is vital to its success. The user will come to expect that applications work as prescribed by the OS. In this sample, we saw how we could use WinRT code to implement the search contract in our applications. In the next article, we’ll see how to implement the share contract.

About the author

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). His second book, Silverlight 5 Data and Services Cookbook will be released early 2012. You can find his blog at www.snowball.be.

Twitter: @gillcleeren

Yet Another Podcast #63–Windows 8 with Shawn Wildermuth

Mon, 09 Apr 2012 18:52:27 +0000

Interview with Braulio Diez on the new book 'Mastering LOB Development for Silverlight 5: A Case Study in Action' (by Packt Publishing)

editorial@silverlightshow.net (Silverlight Show ) — Mon, 09 Apr 2012 12:00:00 GMT

In this short SilverlightShow interview we talk with Braulio Diez who is a co-author of the recently released e/book ‘Mastering LOB Development for Silverlight 5: A Case Study in Action’. Thanks to Packt Publishing, SilverlightShow readers may now purchase this book with a 27% discount using discount code dssvl2! Enjoy!

SilverlightShow: Hi Braulio! We have recently announced your new book ‘Mastering LOB Development for Silverlight 5’ on SilverlightShow Book Shelf, and it already got an unusually high number of visits. Following this interest, and thanks to Packt Publishing, we also published a free chapter from the book (read here). What do you think is the reason for this interest?

BD: Developing LOB applications using Silverlight is a perfect match, it allows you to develop at high speed level and base your applications on a robust architecture. This book is focused on this hot topic, we have applied on it lessons learned from real world experience.

SilverlightShow: Which parts of the book have you authored, and what would you name as the top/most interesting concepts covered in those?

BD: I have authored the following parts: Architecture, RIA Services, OOB and Security. The parts I like the best from this book, is the “real” life approach to RIA Services, how to manage unhandled errors, and the Architecture part (MVVM + MEF + MVVM Light toolkit).

SilverlightShow: Which do you think are the top 3 reasons for using Silverlight 5 for LOB applications?

BD: Avoid the browser versioning hell, take advantage of using C# on the client side, and separation of concerns + unit testing.

SilverlightShow: Does Silverlight 5 lack something to become a perfect technology for LOB?

BD: Does not work in an iPad or iPhone :)

SilverlightShow: There have been a lot of discussions on the future of Silverlight. What does Windows 8 mean for the future of Silverlight, and how will Win8 affect the development of LOB apps with Silverlight?

BD: Silverlight will have its place inside a desktop, if a tablet / mobile edition of the app is needed, we can take advantage of XAML + C# in WinRT.

SilverlightShow: Finally, why should someone get this book, rather than try to find coverage of the same topics on the Internet?

We have tried to cover in this book and end to end guide, based on real world experience, to quickly allow developers start implementing Silverlight LOB applications, it contains a complete LOB case study build gradually from start to finish throughout each chapter.

Thanks Braulio! Hope Silverlight developers will truly appreciate this book!

Activating the Nokia Lumia 900 Windows Phone

Fri, 06 Apr 2012 23:27:20 GMT

I received my Nokia Lumia 900 today and was very excited to open it. I had 3 goals for today:

1) activate it

2) make sure my unlimited data plan was still in place

3) get my apps to the new phone

I accomplished 1 and 2 and I am currently working on 3. I’ll be doing an unboxing post shortly after this here.

Disclaimer: this review is purely about the ordering, activation and setup process. So this is entirely on ATT … I’ll be reviewing the phone and the OS in a later hands on post.

Don’t forget the Micro SIM

Make sure you have a micro sim card before activating. If you went from a Samsung focus, like I did, then this will be key.

Activation

This took me about 30 minutes. I tried in vain for 15 minutes online to activate the phone. Eventually, I called Premier Support at 1-866-499-8008 and they had me turn both phones off, call me back on my wife’s cell phone, and then they activated the Lumia 900. In all, it was 30 minutes form when I opened the box and not a great experience, but it certainly could have been much worse. That it did not work online and that the guy kept putting me on hold without explaining anything was not good. But 30 minutes is not terrible. So I give this activation process a generous 7/10.

Data Plan

I formerly had an unlimited data plan on my Samsung Focus. ATT no longer offers that plan. When I ordered the Lumia I made sure that they would put this plan back on my Lumia when I got it. They made a note of it and after 2.5 hours on a Sunday, I felt better about it. Then when I got my phone today I called the number they instructed me to call and they put the unlimited plan back on my phone. I’m very happy that honored their promise and despite the time on the phone, I give this a 8/10. They have me the impression that they will only be doing this for customers who have had the unlimited plan for a long time. Obviously, they are trying to phase it out completely.

Apps

I wish the apps would go to the Zune software so when I reconnect to my PC it would just resync them on the new phone. Or with Windows Live it would be great if it noticed the apps were not there, and asked me if I wanted them to be downloaded and installed. Alas, that’s not reality. I had to go through the marketplace and try to find all the apps I had before and install them 1 at a time. The good news is that they queue them up so I can tell it to go install 50 apps. The bad news is that this process really needs to be much simpler and less user involved. Overall, a 5/10 rating for me.

Overall Activation Process

It took a lot of time on the phone beforehand and during the activation and setup process, which really was not fun. I’d rather be spending that time with my family. In the end, it all works, so I am happy … but I give the activation and setup process 6/10 overall simply for the many hours of effort that I had to put into it Sunday and today.

Nokia Lumia 900 Windows Phone Unboxing

Fri, 06 Apr 2012 23:26:34 GMT

I just activated my Nokia Lumia 900 running the latest Windows Phone OS. I purchased the cyan colored Lumia … or blue to me I’ll post a thorough review later after I get more hands on time with it, but this post is all about first impressions. In short … WOW!

Tip: Click on the photos for the full size versions.

If you want to see my activation process experience, you can check it out here.

It arrived on time, as promised from ATT Wireless, via FedEx. Here is the phone inside the box and then a closeup of the box itself (with my number blocked out).

When I opened the Lumia box, I found a subtle reminder not to text and drive. How’d they know?

Here are the contents of the box laid out on the table. Notice that they sent a funky looking plug and USB cable, that looks oddly familiar. There is also a SIM card door key, that is needed to open the door for the sim card. My device came with a sim card already punched out and installed, which was nice. I was upgrading a Samsung Focus (first edition) to the Lumia on the same phone number. But the sim card is a different size, so they sent a new one and installed it for me.

Here is the Lumia 900 cyan from the powered off state all the way through setup and then its initial powered on state. Took about 8 seconds for the first boot to setup, then just a short bit to entered the setup information.

I had to skip the Windows Live setup because I could not get activated right away. Once I was activated, all was well though.

I set up WiFi first and hooked up gmail, twitter (using Rowi from the marketplace), Facebook, and Windows Live. Took about 1 minute to get these going … so I was very happy with that.

The screen is awesome. Its bigger than the Samsung Focus and the colors just pop. You can see here the Lumia 900 is larger than the Samsung Focus, but only by a little bit. It appears (and feels) slightly thinner than the Focus too.

It looks great, feels great in my hand (heavier than the Focus, but less toy like), and so far is very fast. I’ll reserve judgment on the final review for when I have time to do more hands on with it. But out of the gate, I was very impressed with the device!

Yet Another Podcast #62–Joe Stagner

Wed, 04 Apr 2012 15:39:20 +0000

Learn About External Templates with KnockoutJS

Wed, 04 Apr 2012 13:13:42 GMT

Templating is a killer feature of many technologies that helps reduce code and make it more manageable and adaptable. Knockout.js has a native template engine (or you can tie in a custom templating engine), but often I like to go a bit further and load my templates from external files. In this month’s Papa’s Perspective column in Visual Studio Magazine I cover the Knockout.js External Template Engine and how it makes using external templates with Knockout.js a breeze. Check it out.

Jim Cowart wrote this library, pushed it to github, and created a NuGet package for it, so there’s no reason not to use it . Just search for “Knockout” and you will find it in NuGet.

I talk more Jim’s templating library and several ways to use templates with Knockout in my in depth Knockout course at Pluralsight. So if you want to learn more, check out Building HTML5 and JavaScript Apps with MVVM and Knockout.

Windows 8 Metro: Create your apps with simplicity in mind

editorial@silverlightshow.net (Andrea Boschin ) — Wed, 04 Apr 2012 01:30:13 GMT

In the recent days an epocal change is becoming evident. If you tried to download the new Windows 8 Consumer Preview, available for free on Microsoft website, you know what I mean. The change, that is greatly focused on a new user experience, is driven by the growing power of portable devices that are becoming prevalent on common desktop and laptops. Up to the day before today, tablet PCs, smartphones, and generically speaking touch-enabled devices was expensive and not effective, but they are now something that common people start to take in serious consideration from the effectiveness perspective and also from the economical point of view.

Don't miss...

All SilverlightShow Ebooks

As said, this change is mostly focused on a new user experience due to the fact that there is a shift of the attention from the business software to the consumer market. Never like today the wide availability of consumer application have been important and this, joined with the new touch paradigm requires a completely new set of rules to design the experience and the interaction of the user with your software.

Starting with this article, I aim to begin a new series based on my evolving experience with the new Windows 8 Metro Applications. As few people knows I have a graphical background that lives side by side with my programmer soul. During this series I would like to discover most of the wonderful tools behind Metro applications but in this article I would like to briefly switch off my programmer side to take in serious consideration the design aspects behind Metro.

The art of remove instead of add

Antoine de Saint-Exupéry, a french writer and aviator lived in early 1900, one day pronounced a famous sentence: "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.". There is a deep truth behind these words and I know very few people that is able to embrace this concept when he is working on a project, no matter if he is drawing a furniture item or designing the user interface of the latest application.

Focusing on the software industry, what commonly happens is that a series of features are put togheter, they becomes a software with a complex user interface and most of the times the end-user is unable to use all these powerful features because they are hidden by the complexity or in the worst case they are simply unuseful. Have you ever asked yourself if all the features of your software are fully understand and used by your customers? I did this exercise and the result is mostly disappointing.

So, probably the "art of remove instead of add" is something you have to carefully evaluate. Generally speaking this does not apply only to the user interface of your next application, but it has to deeply permeate it with a careful evaluation on each single feature to understand if it is really useful and if it can be part of the whole. The question you have to ask yourself is simple: is it really useful? And the hard part is being brave considering unuseful something that people usually think as required.

As an example, think at an advanced search form, with lot of fields each one dedicated to the filtering of a specific property. You can search for the title, the abstract, the creation date and (why not?) for the deletion date, for the author, for the contributors, for the collection to which the item is part, etc... Omitting that a similar form can't be subject of an effective functional test, I guess that probably the end-user, after a moment of confusion, will write a word in the title field and then, pressing "Search", he will be unable to find what is searching for.

Google embraced simplicity and converted this complex form in a single field. Behind this field there is a complex syntax and logic, made of operators and of algorithms to effectively search, but people usually write one or two words in the textbox and it find what they need in the first ten results. Simple but not trivial. Embracing simplicity does not mean being trivial. It only mean to have the ability of hide the complication.

Watching to the consumer market, the simplicity become a must. The reason is that if your customer is a business company he will patiently call your helpline to ask you a question, but if the customer is a consumer he will simply delete your app to select another that does exactly what he need. To me, this is the main reason because, with the proposal of Windows Phone 7 and now with Windows 8, Microsoft worked on a series of guidelines that aim to become the standard of a new user experience language, a language that prefers the simplicity. Behind the "Metro Guidelines" there are a number of"pillars" that easily explain the way to the zen of the usability.

The pillars of Metro Style

Embracing a new style in designing an applications may be very hard, primarily because we are used to write our code leaving the aspect of the user interface to a set of "standard" components that leverage an user experience coming from ages ago. Few years ago Microsoft already tried to introduce a new way to design interfaces without a clear success, with WPF and Silverlight. I still remember the moan from people that just discovered the absence of a datagrid control in the Windows Presentation Foundation.

The proposition in leaving controls like the datagrid out of the games was a clear indication to people to search for a completely new user experience but unfortunately this call falled on a dry ground. The reason is to search in the absence of a proper guideline able to drive people to seamless change the feel about user experience.

With Windows Phone and now with Windows 8, Microsoft changes the strategy, proposing a slim set of rules called "Metro Design Principles". These guidelines are based on five pillars that can easily drive in embracing the change. Here is these pillars in my personal order of priority:

Be authentically digital

The first, and to me most significative pillar of Metro, is to be Authentically Digital. To understand the meaning of this sentence you have to recall the look and feel of applications in Windows, and of a number of websites still existing on the net. The problem is that you have to finally recognize the digital nature of the screen surface and this must only drive to the removal of every type of skeuomorphic design. Under this strange term is hidden a number of tecniques used to render the feel of materials, embossing, light effect and whatever else that imitate the real world. iOS devices like the iPad make a deep use of skeuomorphism and this pose them on the very opposite side of the Metro guidelines. The direction instead it to remove every kind of chrome in favor of content to valorize is together with the empty space between parts. Just remember the sentence from Antoine de Saint-Exupéry an recognize the emptiness as a value that isolate and point out your content.

Do more with less

If being digital is the most important pillar, doing more with less is probably the most difficult to achieve, and nothing more that removing instead of add may be the way to this pillar. I think it is important to stop yourself every time you decide to add something to your application and, instead, brainstorming to understand if the same feature cannot be added slightly changing something that still exists. This is to me the essence of doing more with less, having the ability of regroup your features in a way that remove the need of additional graphic elements. But please avoid to add strange semantic to the gestures of the user, just for the reason of omitting an element in the interface.

Be fast and fluid

Often, the key to make more with less is being fast. Having a number of elements on the screen, can be easily exchanged with having few elements if you can navigate through the application fastly and fluidly. Being fast make your screen larger and Metro offers a number of controls that leverage the use of fingers to improve fluidity without neglect the use of mouse. Thanks to these control it is really easy to create amazing interfaces, expand the size of the screen and adapt your content to the target resolution. Also you can use a set of transitions that helps to join together fluidly the various parts of your application.

Show pride in craftsmanship

I admit it take long to really understand what this means, but finally I've got the point. It simply states that your app must be polished and complete in every single feature. Complete does not only mean "working" but you have to care about details. The right margin, a perfect size for your fonts, a polished palette, a subtle animation to give the right feedback to the user. Every single aspect of the user interface contributes to the overall quality.

Win as one.

And finally, you have to be aware that your app live into an ecosystem. Thanks to a number of interfaces, a Metro application can easily share, search and pick, taking advantage of other applications and providing services to others. It is important you implement these interfaces to give an additional gear to your work.

Don't be afraid of emptiness

I know, lot of people when is about to create a user interface ask himself: what can I do to fill this hole? The problem isn't the hole per se, but probably its positions, the disposition of elements on the screen. Make things bigger, use the right color and positions and the hole easily becomes space. Your eye needs it at a degree you may be surprised.

I hope I've touched you curiosity with this long article and now you can experiment the new Metro principles by yourself. From the next time I will return to my programmer role to explore the beautiful features behind Metro.

Mastering LOB Development for Silverlight 5: Out of Browser (OOB) Applications

editorial@silverlightshow.net (Silverlight Show ) — Tue, 03 Apr 2012 14:57:57 GMT

This is a free chapter of the book "Mastering LOB Development for Silverlight 5: A Case Study in Action".
Thanks to Packt Publishing, SilverlightShow readers may now purchase this book with a 27% discount using discount code dssvl2! Enjoy!

LOB (Line of Business) applications executing within a web browser are fine, but if we think from the perspective of a final user, it is not the option that they would choose first. This is due to the fact that:

Having a desktop application is easy. It can be directly accessed by double-clicking so that it is launched quickly.
Most of the time, it is necessary to leave Silverlight sandbox application. This happens, for example, when we need to access the filesystem, or with a special hardware via COM (such as an ATM).
It is also crucial that, when executing an application, it allows us to work offline.

Similarly, from the point of view of the user, there are certain restrictions which are normally not well accepted, even though they are 100 percent desktop (namely WPF). It would be great to have the possibility of eliminating them:

Installing a desktop application can carry problems, depending on the OS and installation details. It would be fantastic if they could run under a standard, which is independent from those details.
In order to update a version already installed, it must be uninstalled and installed again. Wouldn't it be preferable that the application itself detected if there is a new version and updated automatically (even though this process is not dramatic)?
Usually, desktop applications only work on a particular OS (that is, Windows). We would love to execute it in different platforms (for example, Mac).
A desktop application normally has quite relaxed permissions. Hence, we dream of an application having restricted access to the hardware and software of our machine. It would only have permissions if allowed.
A desktop application needs a given version of the .NET Framework installed on the machine.

In this chapter, you will learn how to install and execute our applications as Out of Browser (OOB), work with elevated permissions in and out of the browser, support cross domain calls, and work with the WebBrowser control.

Out of Browser (OOB)

Out of Browser (OOB) applications are executed out of the web browser, or that is the impression they give.

Regarding the final user, an OOB application is similar to a desktop application; the user installs it, gets a direct access icon to it, and when executed, it runs under a standard window, as shown in the following screenshot. It can even be uninstalled through the Control Panel.

From the point of view of the Software Developer, an OOB application still runs under a hidden browser, that is, it is a Silverlight application with the same features as an application running under a browser.

Until the arrival of Silverlight 5, the main difference with an application executing in the browser was the fact that it could work with trusted permissions and perform operations, which the sandbox normally does not allow (accessing the filesystem, executing commands via COM+, and so on).

Executing an application in OOB mode

Allowing a Silverlight application to be executed as an OOB is very easy. We just need to tick a checkbox in the project settings. Let's see how to do it.

First, create a new Silverlight application called 01_Simple_OOB_App. In the MainPage, a text block must be added displaying the message Simple OOB App. When you execute it, it will look as a standard in-browser application, as shown in the following screenshot:

In order to enable OOB mode, follow these steps:

1. Right-click on the Silverlight project root. When the context menu is displayed, click on Properties:

2. Select the Silverlight tab and tick the checkbox with the message Enable running application out of the browser:

3. When executing the application, it still runs in the browser but, if we right-click on it, there will be a new option Install 01_Simple_OOB Application onto this computer… in the context menu, as shown in the following screenshot:

4. If we click on that option, we get a message prompt asking to install the app, as shown in the following screenshot:

5. Once we click OK, the application is installed and ready to be used as OOB.

It is great to use apps as a final user, but what happens with developers? In case we want to debug our OOB application, will we have to install it every time we run the environment? Of course not. In the project properties (Context menu | Properties), the Debug tab allows us to choose that the application starts up straight in OOB mode (the Silverlight project will have to be chosen as a start-up project):

Enhancing the experience—tooling up and updating

As we have already seen, enabling the OOB mode in our application is something quite straightforward. Nevertheless, the following doubts may have arisen:

In some cases, I want to know if my application is running in normal or OOB mode to, for instance, show one UI or another. How can I do that?
How can I know if the application is already installed?
When installing from a not very intuitive contextual menu, is there any way to display our own UI in order to allow the user to install the application?
How do I uninstall an OOB application?
I would like to let the users install my application from a CD, eliminating the need to be connected to the Web. Is that possible?
When a new version of my application is uploaded to the production server, is there any way to detect updates and install new versions automatically?

In-browser/OOB detection

Sometimes, the UI we want to show differs depending on whether the application is executing in the browser or as an OOB application. It may also happen that, when it is in-browser, we only want to display a button to install it.

In order to know the mode we are working with, Silverlight offers a function on the level of the application called IsRunningOutOfBrowser, which returns true or false depending on whether the application is executing in OOB mode or not.

To see how it works, let's go back to the previous example, TestOOB, and indicate whether the application is executing in OOB mode or not in the TextBlock we use in the main page. It can be done using the following steps:

1. Open the project previously created (Simple_OOB_Application).

2. Add an ID to the TextBlock of the main page (it will be named tbStatus):

<Grid x:Name="LayoutRoot" Background="White"><TextBlock x:Name="tbStatus" Text="Simple OOB App" FontSize="16"/></Grid>

3. In the constructor of the page, check the value of the application variable IsRunningOutOfBrowser, which will display one of two messages depending on the state.

public MainPage(){    InitializeComponent();    if (App.Current.IsRunningOutOfBrowser == true)    {        tbStatus.Text = "I'm running out of browser";    }    else    {        tbStatus.Text = "I'm running in browser";    }}

4. Therefore, in case we are executing in OOB mode, the following message will be displayed:

Detecting the application installed

Another common scenario arises when the application is being executed in the browser and we need to know if it has already been installed as OOB. For instance, a common example of this is when we want to display a message asking the user whether to install the application or not. We can make use of the application variable InstallState, which returns a type enumerated with one of the following values: NotInstalled, Installed, Installing, or InstallFailed.

Thus, in the sample application that has been created, it could be checked whether the application is installed or not in the following way:

public MainPage(){    InitializeComponent();    if (App.Current.InstallState == InstallState.Installed)    {        tbStatus.Text = "Application Installed";    }    else    {        tbStatus.Text = "Application not installed";    }}

Installing the custom interface

As mentioned previously, installing the application from the contextual menu of our Silverlight application was not intuitive at all. Perhaps it could be possible to place a button so that the user could begin the installation. Up to what point can we customize the installation process of our Silverlight application? Silverlight allows us to launch the installation process by code, as long as it comes from a user petition (such as a click on a button). The dialog which asks if we want to install the application cannot be customized.

To install the application, the method Install of Application must be called. Let's add this functionality to our basic sample:

1. Add a button to the main window:

<Grid x:Name="LayoutRoot" Background="White"><TextBlock x:Name="tbStatus" Text="Simple OOB App" FontSize="16"/><Button Content="Install" Height="23" HorizontalAlignment="Left" Margin="142,55,0,0"Name="button1" VerticalAlignment="Top" Width="75" /></Grid>

2. Subscribe to the Click event:

<Button Content="Install" Height="23" HorizontalAlignment="Left" Margin="142,55,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />

3. Check if the application has already been installed in the handler of the button and add the call to Install:

private void button1_Click(object sender, RoutedEventArgs e){    if (Application.Current.InstallState == InstallState.NotInstalled)    {        Application.Current.Install();    }    else    {        MessageBox.Show("Application already installed");    }}

4. Execute the application. When you click on the new button, the dialog box asking you if you want to install the application will be displayed, as shown in the following screenshot:

Uninstalling an OOB application

To uninstall a Silverlight application, the user can choose among several options:

They can right-click on the application and, in the contextual menu, choose the Remove this application… option, as shown in the following screenshot:

It can be uninstalled right from the Windows Control Panel:

The customization of the installation is an improvement that is pending to be added to Silverlight.

Offline installation

Sometimes, we face scenarios where it is necessary for the user to be able to install the application from a CD, or that an administrator can make an implementation. This scenario is not ideal for Silverlight applications (normally, the user downloads them from a URL, either intranet or extranet and, moreover, benefits from automatic updates).

If you face this situation, you may wonder whether it is more convenient to orient development to WPF-Click once, or use the method explained by Tim Heuer in his blog: Installing Silverlight Offline (http://timheuer.com/blog/archive/2008/09/29/install-silverlight-2-rc0-offline.aspx).

Even though this method allows us to install our OOB application in a silent mode,
it has certain limitations:

If the user does not have the Silverlight plug-in installed, they will need to be connected to the Internet to download it from the Microsoft website
The installation in silent mode is not valid for trusted OOB applications

Updates

OOB applications are installed on our own machine, which means there are a lot of advantages, such as fast boot, offline work mode, and so on. Nonetheless, what happens if we upload an update to the server? Is there a way to update our local application? Of course there is. What's more? It is possible in an easy and powerful way. Let's see it in action:

In the app.cs file, subscribe to the event named CheckAndDownloadUpdateCompleted and, later, make the asynchronous petition to check if there is a new update and, if so, download it automatically. The following is the source code:

private void Application_Startup(object sender, StartupEventArgs e){    CheckAndDownloadUpdateCompleted +=     new CheckAndDownloadUpdateCompletedEventHandle    r(Application_CheckAndDownloadUpdateCompleted);    CheckAndDownloadUpdateAsync();    (…)} private void Application_CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e){    MessageBox.Show("Application updated, please restart.");}

Updates will work as long as our XAP is not in a file that needs security.

Offline work

An advantage of working with OOB applications is that, once they have been installed, it is not necessary to have an Internet connection to execute them (they are downloaded locally). What does this mean? It is possible to implement an offline work method for our applications, which permits, for example, that a user on a flight can work with the application and, later, when they have an Internet connection, they can synchronize the data with the server.

To work offline, it is necessary to have a repository to store reference data, as well as changes or new creations. If our Silverlight applications normally work within a sandbox and we do not have access to the HDD of the local machine, what can we make use of? In such cases, we have two options: either requiring elevated permissions for our application to execute (this will be dealt with later) or making use of the Silverlight Isolated Storage.

Isolated Storage is a virtual filesystem that allows a Silverlight application to store data in an invisible folder in the machine. By default, a Silverlight application can use 2 MB of storage. Isolated Storage is a 10 MB OOB application, but the user can
be asked to increase the quota.

Let's see a simple sample of how to read and write data in the Isolated Storage. This example is available in the online material on http://bit.ly/5gEwuM.

You can create a file in the Isolated Storage using the following code:

using System.IO.IsolatedStorage;using System.IO;(…)private void WriteContentToIsoStorage(string content, string filename){    using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())    {        using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(filename, FileMode.Create, isf))        {            using (StreamWriter sw = new StreamWriter(isfs))            {                sw.Write(content);                sw.Close();            }        }    }}

You can read the information using the following code:

using System.IO.IsolatedStorage;using System.IO;(…)private string LoadContentFromIsoStorage(string filename){    string data = String.Empty;    using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())    {        using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(filename, FileMode.Open, isf))        {            using (StreamReader sr = new StreamReader(isfs))            {                string lineOfData = String.Empty;                while ((lineOfData = sr.ReadLine()) != null)                data += lineOfData;            }        }    }    return data;}

To continue learning how this works, you can follow this link: http://bit.ly/qkY9UM.

How it works

Normally, when data have to be obtained or updated, we communicate with the server via a web service to get or modify this information.

To avoid this connection, we can do the following: first, get the most commonly read data and store them in a cache; second, the user creates his/her own entries, which are stored in the local repository (Isolated Storage). Once the user has an Internet connection again, offline data is sent to be synchronised in the repository.

Offline work is not as easy as it may sound. Another book could be written only on this! If you want further information about this, we can recommend the following session by Steve Lasker, Offline Microsoft Silverlight Applications (http://bit.ly/ltIxNt).

Breaking the sandbox—trusted applications

Up to now, we have seen how an OOB Silverlight application runs within a sandbox. That is to say, its access to certain resources is limited or restricted. What happens if we need to perform operations that the sandbox has restricted due to safety reasons? To solve this issue, there are applications with elevated permissions:

A trusted OOB application is a program the user trusts (similar to when a desktop application is installed on our machine).
Its XAP file is signed with a certificate, which ensures its trustworthy origin.
It has elevated permissions, which makes it possible, for example, to make calls to COM components, P/Invoke calls, or access the local filesystem.
For the application to be installed/executed, it needs the express authorization of the user.

Enabling trusted mode

How can an OOB application be enabled to require elevated permissions? To configure a Silverlight program that already exists, follow these steps:

1. Go to the Properties tab of the Silverlight Project (contextual menu of the project, Silverlight | Properties) and click on the button Out-of-Browser Settings…:

2. A dialog is displayed, where the option Require elevated trust when running outside the browser must be checked, as shown in the following screenshot:

After these steps, our application will be enabled as OOB trusted. However, if a user tries to install it, they will receive a warning indicating the source that published the application cannot be trusted. To eliminate this message, we will have to use our enterprise's certificate or acquire a new one (we can buy one or, if it is an intranet, our IT administrator can generate a new one). This operation can be performed from the Signing tab in the project's properties (right-click on Silverlight project | Properties | Signing).

Advantages of trusted applications

Now we have our trusted application, which has the following additional advantages:
We can access the filesystem of the machine (from the Silverlight 5 version).
We can make calls to COM components. We can read or write to the registry (only current user entry), call other executable files, and so on.
It is possible to make P/Invoke calls.
We can make petitions to a URL, even if they are cross domain. It is not necessary that the server has a cross-domain policy enabled.
It is possible to integrate a WebBrowser control in our application. That is, we can display HTML in our Silverlight application and interact with it.
Real windows can be created. Normally, when new windows are created in a Silverlight application, they are a fantasy; that is to say, they are not physical windows, but they are displayed within the main one. If our application is trusted (only SL version 5), we can create floating windows and, for instance, they can be displayed on several monitors.

Accessing files

Our trusted application has access to the local filesystem (if it is Silverlight 5; in case it is Silverlight 4, it can only access folders, such as My Documents and via COM calls it's possible to gain additional access). The operations on System.IO, which previously returned safety errors, will now be executed flawlessly.

As a sample, let's see how the content of the Program Files file can be listed in our trusted Silverlight application:

public class ViewModel{    public ObservableCollection<string> DirNames { get; set; }    public ViewModel()    {        DirNames = new ObservableCollection<string>();        // Let's try to enumerate the directories that are        // under Program Files, this operation would throw an        // exception if the application is not a trusted one.        DirectoryInfo di = new DirectoryInfo("C:\\Program Files");        foreach (var info in di.EnumerateDirectories())        {            DirNames.Add(info.FullName);        }    }}

Making calls to COM+

We can make calls to COM components, which open plenty of doors, such as reading and (partially) writing on the registry, communicating with devices, launching apps, and even using Excel Automation.

However, the main disadvantage of this approach is that it only works in Windows. So if our application needs to run in Mac, this code must be isolated and will not offer this functionality for that platform.

If you need to detect under which OS a Silverlight application is running, you can use Environment.OSVersion.

Let's see a couple of examples of how to make these calls.

Writing an entry on the registry

In order to do so, create a new Silverlight Application project and tick the checkboxes (Enable Running application out of the browser, Out-of-Browser Settings | Require elevated trust when running outside the browser).

Add the reference to the Microsoft.CSharp DLL (Add Reference | .NET | Microsoft.CSharp):

Make sure this DLL and System.Core are referenced:

You can write the entry on the registry using the following code:

using System.Runtime.InteropServices.Automation;(…)private void button1_Click(object sender, RoutedEventArgs e){    using (dynamic shell = AutomationFactory.CreateObject("WScript.Shell"))    {        shell.RegWrite(@"HKCU\Software\MyTest", "");    }}

The result is as shown in the following screenshot:

Executing notepad from our application

Another interesting feature is the ability of launching other applications from our trusted application. In the following code we will launch a Notepad.

using System.Runtime.InteropServices.Automation;(…)private void button1_Click(object sender, RoutedEventArgs e)    {        dynamic cmd = AutomationFactory.CreateObject("WScript.Shell");        cmd.Run(@"c:\Windows\notepad.exe", 1, true);    }

P/Invoke

As an innovation, Silverlight 5 includes call support via P/Invoke. Platform Invocation Services allows managed code to call unmanaged functions that are implemented in a DLL. This is only allowed for full-trust applications.

Let's see how this works by creating a sample, which calls a kernel32.dll method reproducing system beeps. Follow the steps mentioned next:

1. Create a new Silverlight project (application) and configure it to be an OOB application with trusted permissions.

2. Add a new class (by means of Add New Class) called MyBeep. Implement the Beep method of the Kernel 32 DLL.

using System.Runtime.InteropServices;public class MyBeep    {        [DllImport("User32.dll")]        private static extern Boolean MessageBeep(UInt32 beepType);        public void PlaySound(BeepTypes type)        {            if (!MessageBeep((UInt32)type))            {                throw new Exception("Beep failed!");            }        }    } public enum BeepTypes : uint{    Ok = 0x00000000,    Error = 0x00000010,    Warning = 0x00000030,    Information = 0x00000040} public static class BeepTypeExtensions{    public static BeepTypes AsBeepTypeEnum(this string beepType)    {        BeepTypes beepTypeEnum;        return Enum.TryParse(beepType,true,out beepTypeEnum)        ? beepTypeEnum        : BeepTypes.Error;    }}

3. In the main page (mainpage.xaml), add a button to be bound to the Click event as follows:

<Button Content="Beep !!" Click="button1_Click" />

4. In the Code-Behind (MainPage.cs), make the call to the method defined in the MyBeep class.

private void button1_Click(object sender, RoutedEventArgs e){    MyBeep myBeep = new MyBeep();    myBeep.PlaySound(BeepTypes.Information);}

If an exception appears when executing the action, check the application settings and make sure that it is running in OOB trusted mode.

Cross-domain calls

When executing our Silverlight application within the sandbox, we can make calls to services, or ask for resources, which are in our domain. However, if we try to access resources in a different domain (namely a feed of Apple's film trailers) this call can return an error since, due to safety reasons, these calls are restricted unless the web service authorizes them explicitly. The following are the solutions we have within sandbox:

The server may have an XML file with the cross-domain policy indicating we have access to these resources. It can be checked by launching a query to the Apple feed and using the Fiddler packages sniffer. We will then realize if this server exposes a cross-domain policy.
It is possible to implement a service in our server acting as a proxy. The bad thing about this approach is that we overload the server and the response to the client is slower.

If our application is executed as trusted, this restriction does not exist. We can make the petition to a cross domain without having the cross-domain policy enabled. For instance, we can make a query to the Apple feed to check new cinema openings.

private void button1_Click(object sender, RoutedEventArgs e){    WebClient wc = new WebClient();    wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);    wc.DownloadStringAsync(new Uri("http://www.apple.com/trailers/home/xml/current.xml", UriKind.Absolute));} void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e){    MessageBox.Show(e.Result);}

WebBrowser control

Another interesting control we can only use in trusted OOB applications is the WebBrowser control. This allows us to view HTML pages within our Silverlight application. Besides, if the page is in the same domain, we can even interact with it via Silverlight | JavaScript.

How it works

Let's check how this control works by creating a simple example:

1. Create a new Silverlight project (application) and configure it so that it is executed as an OOB application with trusted permissions.

2. In the XAML, add the namespace System.Windows.Controls and instantiate the control:

<UserControl x:Class="WebBrowser.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/        markup-compatibility/2006"    xmlns:controls="clr-namespace:System.Windows.Controls;        assembly=System.Windows"mc:Ignorable="d"d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White"><controls:WebBrowser Source="http://www.bing.com"/></Grid></UserControl>

3. The result we obtain is shown in the following screenshot:

Limitations to take into account:

Control is placed on top of the ZOrder. In case we want to show a ChildWindow, for example, this will not be visible at first. To give it visibility, we need to create a rectangle using a WebBrowser Brush, make a static picture to the WebBrowser Control content and, when the dialog box is shown, hide the WebBrowser showing our rectangle.
For safety reasons, we cannot capture the moment when the user navigates from one page to another; neither can we make JavaScript calls from Silverlight if the page belongs to a different domain.
It is a heavy control, so it is not a good idea to create and destroy it dynamically quite often.

Real windows

Another advantage of trusted OOB applications is the fact that they can show physical windows.

At the moment, these windows are not modal in Silverlight 5. The following is how it works:

1. Create a Windows object and assign the content property of this control to
a given UserControl.

2. Then, we see how this sort of window can be displayed:

private void button1_Click(object sender, RoutedEventArgs e){    Window wnd = new Window();    wnd.Width = 500;    wnd.Height = 350;    wnd.Title = "This is a test window";    //We indicate here a custom user control to display in the    //new window    wnd.Content = new MyControl();    wnd.Visibility = Visibility.Visible;}

3. The result is shown in the following screenshot:

In-browser trusted applications

Having trusted applications, which are executed as if they were desktop applications, is a powerful and interesting idea, but what happens if we need to have elevated permissions for applications running in the browser? For instance, a bank's intranet.

Silverlight 5 incorporates in-browser trusted applications, whose main features are as follows:

It is a specific functionality for enterprise applications.
The administrator controls which applications can be executed via
group policy.
The user is not asked and neither is the application installed. It is marked
as valid, so it will be executed by the administrator.
It can be integrated as part of an HTML website, without the need to give elevated permissions to the entire site.

On the other hand, the doubt arises, when developing, shall we create our own test certificate? The answer is no. If we execute from localhost, the restriction is not applied.

Thus, in the example that was previously implemented (getting the content of C:\Program Files), we only need to select the properties of our Silverlight project (right-click on Silverlight | Properties) and select the option Require elevated trust when running in-browser, as shown in the following screenshot:

When executing the application, it can be seen running flawlessly within the browser.

As we pointed out earlier, if the application in production is displayed, it will fail as it is not executed from localhost. The following are the necessary steps to avoid it:

The XAP file has to be signed with a certificate (this can be seen in depth in Chapter 11, Security).
The network administrator has to specify a setting for the trusted in-browser applications to be executed in all machines. Particularly, the flag of the registry entry HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Silverlight\AllowElevatedTrustAppsInBrowser must have the value of 1.
The network administrator has to add the certificate in which the XAP has been signed with as a trusted certificate (CurrentUser\Trusted Publishers).

For more information about the display process, please visit the link http://bit.ly/kKbdpl.

In order to know if the application is running with elevated permissions, check the flag Application.Current.HasElevatedPermissions.

LOB application case study: applying what we have learned

As final users, one of the disadvantages of using web applications is the fact that we have to remember URLs, open the browser, and so on. Isn't it easier to double-click on a desktop icon and run an application? That is what has been added to our booking application:

We detect whether it is running or not within the browser
If so, an option is shown to install the application as OOB
Then, we install the application as OOB

Thus, when executing the application within the browser, a new option is added in the navigation menu, as shown in the following screenshot:

When clicking the Install button, the confirmation dialog appears and the application gets installed (then, go to the desktop icon and execute it).

It is necessary to bear in mind that the application item has been customized. This can be set up in the project properties, Out-of-Browser Settings.

Summary

The capabilities offered by Out of Browser (OOB) applications are amazing. If we also add the possibility of elevating permission (in-browser and OOB trusted), the result is a light web application that can be almost as powerful and functional as a desktop application. Remember this chapter when a client indicates non-standard requirements of a web application (such as the integration of the application in an ATM, accessing the local filesystem, and so on). Anyway, before accepting, make the possible concept tests and ensure the functionality is covered.

Additional resources

If you need to dive deeper into any of the features presented in this chapter, you can check the following links:

How far can I get using COM+? This post by Justin Angels summarizes it nicely at http://bit.ly/4Ama4H
In-browser http://bit.ly/kKbdpl and settings http://bit.ly/oKFbzG
P/Invoke, how does it work? http://bit.ly/r2DTQF
P/Invoke and Silverlight, an excellent introduction by Vikram Pendse http://bit.ly/qI3XhN
How to create physical windows, by Pete Brown http://bit.ly/gZ4w7S

Fundamentals of Windows 8 XAML/C# Metro Style Apps

Tue, 03 Apr 2012 04:15:56 GMT

This is a Windows 8 XAML/C# Fundamentals presentation I gave at the Spring 2012 DevConnections conference in Las Vegas. It covers some of the key topics you need to know to get started building Windows 8 XAML Metro apps including styling, animations, invoking the Windows Runtime (WinRT), the intrinsic controls, and more that will help prepare you to develop Windows 8 Metro style apps.

You can view my other sessions from DevConnections and Orlando Code Camp here:

View more of my presentations here.

Sample code shown in the presentation can be found here. A large number of samples are available in the Windows 8 SDK which can be found here.

If you like this you can check out the Windows 8 Fundamentals course Dan Wahlin and I co-authored for Pluralsight.

Whirlwind Tour of Building HTML5 and JavaScript Apps with MVVM and Knockout

Tue, 03 Apr 2012 04:14:48 GMT

This is the Whirlwind Tour of Building HTML5 and JavaScript Apps with MVVM and Knockout presentation I gave at the Spring 2012 DevConnections conference in Las Vegas and in Orlando Code Camp (both last week). It covers some of the key topics you need to know to build web applications using the MVVM pattern with JavaScript and jQuery that consume json data, use json objects in Javascript, use declarative binding, using KnockoutJS.

You can view my other sessions from DevConnections and Orlando Code Camp here:

View more of my presentations here.

The demo code can be downloaded from here and here.

If you are interested in KnockoutJS, you’ll want to check out my course for Pluralsight which covers KnockoutJS in depth.

JsRender Fundamentals: Templating for HTML5 Applications

Tue, 03 Apr 2012 04:14:30 GMT

This is a JsRender Fundamentals presentation I gave at the Spring 2012 DevConnections conference in Las Vegas. It covers some of the key topics you need to know to build web applications with JsRender. Learn how JsRender brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string-based rendering.

You can view my other sessions from DevConnections and Orlando Code Camp here:

View more of my presentations here.

The demo code can be downloaded from here.

If you are interested in JsRender, you’ll want to check out my upcoming course for Pluralsight (May 2012) which will cover JsRender in depth.

9 jQuery Samples

Tue, 03 Apr 2012 04:13:12 GMT

These are the jsfiddle samples that Dan Wahlin and I covered in our jQuery Fundamentals workshop at DevConnections last week. These were samples we wrote on the fly in http://jsfiddle.net and wanted to share. Enjoy!

Additional jQuery samples covering selectors, DOM manipulation, Ajax techniques, as well as sample applications can be found here.

You can view my other sessions from DevConnections and Orlando Code Camp here:

View more of my presentations here.

Using the Data Function

Using Object Literals with jQuery

Using jQuery each() with string concatenation

Using on() to handle child events

jQuery - hover

jQuery - event handling variations

jQuery - Twitter (bind, append, appendTo, each, fadeOut, $.getJSON, callback, success, error, complete)r

jQuery - attr vs prop

jQuery - Simple selectors

Redesigning my blog for adaptive layout

Mon, 02 Apr 2012 06:08:07 GMT

My blog runs on Subtext which has a pretty good skinning model (albeit a tad outdated) and allows you to customize whatever you want. I’ve had my own custom theme since 2009. I figured I was due for an update. I was further strengthened by a post from Jon Galloway last week.

There wasn't a vote, but if there was: I don't like narrow, fixed width web designs. Use media queries, scale intelligently on widescreen.
— Jon Galloway (@jongalloway) March 30, 2012

Now when I saw this I figured it was another nudge. I did also have some time this weekend without any distractions so I took it as an opportunity to do some ‘work’ on this here blog. Now a while back I was inspired by what Scott Hanselman had done on his site with a designer. I reached out to a few designers that I admired, but frankly never heard back :-(. I figured that was okay as I wasn’t in a position to really pay what I know it is worth for a good designer. So I went looking for things on the web that I could do myself. I did want some subtle design tweaks to represent some things I’m currently passionate about.

Bootstrap your CSS

After some digging I saw a ton of pointers to Bootstrap. This is an Open Source Javascript/CSS library that sets your site up for styling success and layout goodness. The documentation was some of the better docs I’ve seen for a library. Each aspect of the library/styles where in the docs that I could visually see, interact with and see the code that produced the behavior. I liked what I saw and went to work.

When I got all the styles configured (using the basic setup from Bootstrap) I went to work on some of my own minor tweaks. One of the things I really liked is the responsive layout options, not only for the grid but also for different screen sizes. By adding a simple class I can specify certain aspects that shouldn’t be displayed when viewing the site on a tablet or phone. There were other cool responsive options for this such as the main menu will switch to a drop-down approach when on a smaller device. Using Firebug, IE F12 tools and real devices I was able to get the precise tweaks that I wanted. Here’s what my site looks like on an iPhone as an example:

Notice the menu at the top is gone but replaced with a little icon (which is a drop-down). Also notice the sidebar area is no longer visible (it is on the bottom of the site in this device view). I like this subtle configuration that was really easy to do with just adding a class name to the area I wanted to collapse.

The other thing I wanted was to implement my primary navigation links in a little-more-than-text style. I used the CSS sprite method by creating a single image that I would then define styles that used clips within that image to pull out the right area. Here is the image in entirety:

Notice how the normal and hover states are the same image.

NOTE: I put this on a black background so you can see them but it is actually a transparent background so the theme’s background shows through.

What I do then is just define a style for the <a> tag like:

        1: #follow {       2:     background-image: url("navbarglyphs.png");       3:     background-position: -195px 0px;       4: }       5:         6: #follow:hover {       7:     background-image: url("navbarglyphs.png");       8:     background-position: -195px -70px;       9: }

Now I was having a bit of difficulty with this because I was misunderstanding the background-position value in CSS. A quick set of second eyes with Shawn Wildermuth (who is doing a bunch of HTML dev posts right now) helped me realize my math was wrong and I needed to use the negative value instead of what I was using. Once that forehead-slap moment was done, I was set.

I still have a few tweaks to go (need to re-work the comments sections but didn’t have the time to think about a design more) but I’m happy with the quick re-design. It is very simple for sure, but I like it. I tried on a few different screen sizes and I think I have met Jon’s challenge to adapt to the available space for the screen. If you are working with a new site and aren’t a CSS/JS guru I highly recommend looking at Bootstrap as a solid starting point for your efforts.

tags: css, html5, js, subtext, web

This work is licensed under a Creative Commons Attribution By license.

3 Quick JavaScript Tips for .NET Developers

Fri, 30 Mar 2012 16:16:15 GMT

Yesterday at the DevConnections event I had to make an emergency speaking appearance for a speaker who became suddenly ill. Luckily that talk was a topic I know well (JavaScript intro for .NET developers), I was available, and I didn’t freak out

I grabbed the speaker’s deck and used it as a guideline, but I spent the majority of the time in jsfiddle.net writing examples. The audience was really interactive and grasped the basics pretty quickly. The topics that we spent the most amount of time discussing as a group where regarding namespaces, functions and objects. So I thought I might include 3 of the examples here on my blog.

Namespacing

Namespacing is an important (and easy) way to make sure your objects do not collide with other javascript libraries. There are many ways to handle namespacing, but the way I like to start with is dead simple. This example shows that all variables hang off the ‘my’ namespace. I like using ‘my’ because its short and sweet.

Creating an Object Literal

Objects can be created in a variety of ways. But the most common you will see in demos is the object literal. The reason? Its short and sweet. Objects can be created simply by setting a variable equal to an open and close curly brace pair, as shown below. Then add properties as needed. I often use this syntax for simple objects (not a lot of logic, mostly properties and a few methods).

The ‘this’ keyword does work with the object literal, though once you get into nesting functions it can get unwieldy unless you manage ‘this’. That’s often when I use one of a few techniques such as setting ‘this’ (at a place where you know what ‘this’ represents for certain) to a variable called self. But I’ll hit that topic in a later post.

I most often use object literals for passing arguments to functions

Creating an Object from a Function

You can also create objects through functions. While I prefer using a pattern such as the Revealing Module pattern for this, the simplest way to create an object from a function is shown below. Note that use of ‘self’ in here to represent ‘this’. It may not be needed in all cases but it’s a good habit to get into that has saved me many times. A friend of mine actually uses the word ’me’ instead of self … says its twice as fast

Released: New Version of Expression Blend for Silverlight 5

Pete Brown — Thu, 29 Mar 2012 18:32:38 GMT

You may have noticed that your current copy of Expression Blendfor Silverlight 5 expires in the next day or two. A new version ofExpression Blend Preview for Silverlight 5 is now out. Get it here.

This new version has the all important go-live license, and alsoextends the expiration date to June 20, 2013 (over a year fromnow)..

More information on the Expression Blend Team Blog.

XAML Tip: Setting Attached Properties from Code

Pete Brown — Thu, 29 Mar 2012 17:36:39 GMT

Recently, a reader asked how they should go aboutsetting the Typography properties from code-behind.

The original question was about Silverlight, but the approachworks in WPF, Windows 8 and more.

Given the following markup:

<StackPanel>
    <TextBlock x:Name="OriginalText"
               FontSize="72"
               FontFamily="Gabriola"
               Text="Hello World!" />

    <TextBlock x:Name="ExampleText"
               FontSize="72"
               FontFamily="Gabriola"
               Text="Hello World!" />
</StackPanel>

You can set an attached property such asTypography.StylisticSet5 by using theSetValue method like this:

private void SetTextOptions()
{
    ExampleText.SetValue(Typography.StylisticSet5Property, true);
}

The SetValue method comes from theDependencyObject base class.Typography.StylisticSet5Property is the name of adependency property - an attached property in this case. This couldeasily have been the Canvas.Left property, theGrid.Row property or any number of other attachedproperties. The resulting display looks like this:

Note how the second TextBlock has had the stylistic set appliedto it.

This approach used the SetValue method of thedependency object. There's also another way:

private void SetTextOptions()
{
    Typography.SetStylisticSet5(ExampleText, true);
}

This version uses the Set[dpname] method of theclass which owns the property. Use the most convenient method. Bothare equivalent.

I also cover dependency properties and attached properties inboth of my Silverlight books, as well as in my upcomingWindows 8 XAML book.

Tip: Binding an Image element’s Source property to a Uri in WinRT XAML

Pete Brown — Tue, 27 Mar 2012 19:00:23 GMT

Over the years, I've conditioned myself to use the Uri classwhen surfacing web URLs in my application. Early versions ofSilverlight couldn't bind an image source directly to an instanceof a Uri because they lacked an appropriate type converter; theusual workaround was to change the property to a string type.

Subsequent versions Silverlight added that capability and theconverter. For example. Given an instance of the following modelclass as the data context:

public class Tweet
{
    public string Message { get; set; }
    public Uri Image { get; set; }
}

In Silverlight, you can bind in XAML like this:


<Image Source="{Binding Image}" />

In the current version of Windows 8/WinRT XAML, you can't bindimage sources directly to Uris, but there's a nice way to do it byusing property element syntax and and a BitmapImage class. It'smore verbose, but may be just the ticket if you need to bind toUris and not strings, and can't change, or don't want to change,your [view]model.

<Image>
    <Image.Source>
        <BitmapImage UriSource="{Binding Image}" />
    </Image.Source>
</Image>

The team is aware of this difference, and have it in theirbacklog of things to prioritize for future revs. In case you'resharing markup or anything between WinRT XAML and Silverlight, it'sgood to know this more verbose approach works in both.

Review of the ASUS ZenBook UX31E

Fri, 23 Mar 2012 13:47:04 GMT

I’ve been using my ASUS ZenBook UX31E out and about for blogging, surfing, coding, and presentations for about 5 weeks now. A lot of people have commented on it with the common theme of it being a slick looking, eye catching, lightweight machine. I agree that its got the looks. The ZenBook is pretty snappy too for a i5 with 4GB of RAM and has done a very good job during presentations. When I wrote about my unboxing experience, I was originally bothered by the keyboard (it’s just not as fluent as Lenovo or even Vaio keyboards) and the overly “washed out” screen. Ultimately, I found some very good uses for the UX31E. It’s fair to note that these machines sell for around $1000 depending on varying features. So when evaluating my options I try to keep in mind that value for the cost. In this review I broke down my experiences by how I used the ZenBook.

But first, just as a reminder…

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Power

If a PC can’t handle the load, I instantly toss it aside. So did the ZenBook hold its own with my daily use? Simply put, the ZenBook handled all of my requests admirably. I suspect that the i5 and SSD had a lot to do with this as the 4GB of RAM is certainly not a lot. It handled lightweight tasks like surfing the web, blogging with Live Writer, managing email, editing photos, and playing games on the internet (that was my daughter) quite well. When I installed Visual Studio 2010 on the ZenBook I expected some bigger lags but I was pleasantly surprised in how fast it loaded and built projects. Is it as fast as my i7, 8GB RAM machines, no … but its also half the cost. Overall, I the ZenBook was fast and powerful enough for me.

Writing Code

I do a lot of coding, writing demos, and tinkering on the side with Visual Studio. The ZenBook had no problems keeping up with me and I was happy to code along with it. My biggest concerns were that I never quite got used to the keyboard. Maybe I’m picky, but I just didn’t get used to the feel of the keyboard and often had to go back and correct typos more often than usual. This was a problem for me when coding because my mind takes me in many directions, very quickly, and having to go back really took me out of any rhythm I could get into. I am used to nice expensive keyboards that are very responsive. Maybe I am too used to them, because my most common issue was I “missed” keys (did not press hard enough). Ultimately, because of this hurdle I could not overcome, for writing code in long blocks of time I just was not as productive with the ZenBook.

It’s worth noting that the screen does appear to be a little washed out, too. I played with the contrast quite a bit as I kept thinking that maybe it was turned up too high. I could never get it to be as sharp and colorful as I had hoped. This wasn’t a killer, but it certainly wasn’t a plus either when sitting down to write code for long periods.

Presentations

I took the ZenBook to several presentations and it simply excelled. First, its lightweight at less than 3 pounds so it was easy to carry around. The power supply is lightweight too, which is often a place that these tiny laptops manufacturers lack. The ZenBook also looks great, so when doing presentations I often got a lot of remarks about how nice it looked. It was certainly a topic of conversation with its shiny case. The fast start feature on the ZenBook was also great, so I could close the lid, carry it from room to room, and set back up in just a few minutes. The keyboard issues I mentioned previously did not bother me at all for this type of use as during presentations I am more deliberate about what I type. So overall, the UX31E is an ideal presentation laptop for me. The laptop comes in a nice looking case and also has a small ouch for the video out dongle.

Family Use

My daughter loves this laptop. I let her use it for a day and not long after she was attached to it. We have several laptops and desktops in our house along with a Windows 8 tablet from Build and an iPad 2. but the kids enjoy the laptops because they can do so much more with them. My daughter gave the ZenBook a good test by writing stories in Word, surfing the web, playing games (HTML5 and Flash based), watching videos, and doing homework (sometimes). The ZenBook fared very well for all of these uses and my daughter simply loved it. In fact, I had to tear it away from her to write the review

Sound

I normally don’t say anything about the sound on a computer,because frankly, I don’t often use a computer’s built in speakers for music or movies. Instead, I use nice headphones or a dedicated sound system. But for being a built in sound system, the ZenBook’s sound is exceptionally good. I was very happy with the quality of the sound coming from the UX31E and found myself using it more that I ever had with a laptop.

More on the Keyboard

Interestingly, my daughter had the same problems with the keyboard early on, but got over them faster than I did. She no longer has any slow downs with the keyboard. I however, never got comfortable with the keyboard responsiveness. Keyboards are a personal taste, so I expect some will be fine with it and others will find the same issues I did.

Summary

The ultimate test for me is if I still use it after a month. So do I? Yes, I found the ZenBook to be very useful for travel and presentations, but not for long periods of day to day development. I did find a hidden gem though, as the ZenBook is ideal for my oldest daughter. In fact, my younger children all eye the laptop too. So it seems that its looks and weight (kids lugging it around the house) are very appealing to families. My kids are picky too, as they get frustrated when their apps are slow (Word, email, videos) or games won’t work. They had no such issues on the ZenBook.

The keyboard was a killer for me, but my family is happy about that since they now have a great laptop that they share. I’ll still use it for travel and presentations, but on all other days, its slated for my family’s use. I’ll follow up with a final conclusion in April, since I have a few more tests slated for the ZenBook.

The little Story of “I Unlock Joy” event by Microsoft and Pune User Group

noreply@blogger.com (Vikram Pendse) — Wed, 21 Mar 2012 19:08:00 +0000

This post is about recent “I Unlock Joy” event happened in Pune which was conducted by Microsoft and Pune User Group.

Little History :

I remember I got myself a HTC HD7 in early January 2011. I even did a big post here with fire saying “Its White Elephant” in India.When I saw Tweets,Photos and Mails by people in US who showing off their Windows Phones in early days of Windows Phone, Frankly I was very angry thinking why each and every thing comes to India when Entire US and Europe people about to throw that piece of technology and switch to its version next.I even had fight at various level to get a Test Device for me but my all attempts result was “Fail”, so finally I got HD7 for myself from local shop, by the time few of my friends from User Group ordered it via some online site and got their shipment before me.Neither me or my friends who ordered it online even before it was made available in India officially bothered about Money and what will happen to it. That time even Mango build was not available.

I was already going through lot of frustrating moments due to Silverlight and HTML5 issues around year back and thanks to Windows Phone, It pulled me back on track.Me,Mayur and few other folks from Community started talking about this device from last year.Frankly, early response was very low since most of the people was not having device and was not sure about future of Windows Phone since it was not made available in India.

First call on “I Unlock Joy” :

I remember that around October 2011,I was taking snaps of some Star Fishes near Tarkarli Beach in Sindhudurga and all of a sudden I got a call from Aviraj saying “You are in conference with Mayur Mahesh and Dhaval for upcoming Windows Phone event” ..I replied “What??..Microsoft is planning event on Windows Phone??”..Trust me call went for 5 minutes where each one just saying “what”, “when”,”ok lets see”,”keep us posted”.Then nothing happened on this till Mid December.

Trust me..before this call..no one was sure about this event.Even we were not sure whether we will be able to host such event or not, Even for Microsoft, it was very first such event in India.

The Plan :

Earlier I was not happy with the event plan just because I misunderstood agenda and found it too much professional, I raise this concern to Mahesh (@maheshmitkari),Mayur (@mayur_tendulkar) and Aviraj (@aviraj111)saying “There are people in Pune, who don’t know what is Windows Phone,How it looks like or they have not even saw or touch that device and how they can build apps for that?”, Thanks to Aviraj Mayur and Mahesh who simplified it for me and told me that its from Hello World to Get Certify from Marketplace over span of 4 Full Days.So after that call on next weekend we started talking more about this event.

Wait..but will people come to this event by paying App Hub Fees?? :

Humm..another 1 hour just went on this discussion,Frankly among our Team, only Mayur was aware of AppHub process since he had account and submitted one or two apps in Marketplace.He and Mahesh and Aviraj show confidence then with 50-50 mind I also said to myself..lets do it people will come ! So Aviraj then given inputs on I Unlock Joy and how it works (MS people really work hard for each of their things,that I re-realize again on that day).He also told about Prizes and how overall things should go if we as Pune User Group want to do it with Microsoft.

Execution of Plan :

Here comes our UG Manager Mahesh Mitkari, He drafted overall plan including Days of Trainings,Venue etc.Thanks to Microsoft, This time there was no “Mission :Find Venue” for us ! As usual my all time favorite question came for discussion “What about Food??..are we giving and not giving??” ..Suddenly Mahesh replied “Food later ! First think about event”..I said “Rest is Ok,but Food is equally important” ..Mayur said “If possible do it or people have to eat somewhere around the venue” ..Aviraj was on bit silent mode during this discussion since Budget for this was already allocated and now it was our turn to manage all in that amount.Finally with the years of experience Mahesh have in community, He managed the food for us. Since we took it up this event under support of MS, Content and Speaker for event was from Pune User Group. Mayur took the ownership of this speaking engagement and hence that pain part was already taken care.

Then there was lot of confusion about allowing “Individual”,”Students” and “Business” types of AppHub Account holders.But we decided that aim of this event is to “Empower individuals with great skills and great device”, so we decided to cut off Students and Companies and fixed our agenda accordingly.

Since this was very first event so we decided to keep the number of attendees equal with the capacity of hall or even less will do.

Registration Process and getting people to Venue : Mission Impossible

We hosted a lovely Website using ASP.NET MVC + Cloud for this event using shiny logos and stuff.

For first week, there was not a single registration, all we had is test records entered by us for testing of that portal.Week went bad for us.No one turn to site for registration.We were almost feeling dead at that moment since it was January 1st week and we were about to kick off the event from end of January 2012, we paid for venue, book food counters, done all formalities with MS,ok but where are attendees??

Mahesh Me,Mayur and Aviraj come back to our old conclusion “Its paid event so people are not coming ..maybe?” since Pune User Group events are never paid.So how to solve this problem??

Meetings Meetings..Calls Calls .. :

We decided to do quick analysis of this thing and jumped to a conclusion that it was not about spending money but we came to know about following concerns :

Its Credit Card thing..is it safe?
Will they pull some extra money from Background?
Do they will come to know whether I am using illegal software?
I will seriously get Windows Phone if I build apps for I Unlock Joy?

Ok ! we got our answers, the very first thing we did is added a big “FAQ” section on our site and made publicity of the same, we captured most common uncommon and unique Questions,As a result, in last week of Registration count went to almost 40+ and we closed registration.We are all set for First ever such event by any User Group in India..Get Set Go !

Overall Event :

Now the next tension on mind was, whether people will adopt the skills and able to build and submit apps or not,else again everything will go waste !

Kudos to Mayur Tendulkar and Amol Vaidya ( and me as a Backup Speaker with full support from MSPs Omkar,Sneha and Apporva) who carried out training successfully.4 Days were full of gyan and not like typical sessions happens around where speaker comes in drag drop things and execute. Some real code and real stuff happened here in Pune.Thanks to AKant (Abhishek Kant who was our Ex-MVP Lead and now Country Manager for Telerik in India) for his valuable time at Keynote session and giving Telerik Controls for free to all attendees there at event.

Very Special Thanks to Harish Vaidyanathan (@harishv ), Girish Joshi, Aditee Rele (@aditeerele ) and our big brother from Microsoft (@aviraj111), without these people it was impossible to unlock the joy !

What went wrong in this event :

Shortage of Power Plugs and less power extensions at Venue on Day1, From Day 2 we fixed that by adding more plugs-extensions
Delay in distribution of Pen Drives, instead of day 1 people got that on day 4
Connectivity and WiFi was not available due to infra issues
1 Test Device out of 2 was not Mango, we updated that to Mango from Day 2

What people went home with :

Some amazing knowledge about Windows Phone Application Development
Confidence to build Windows Phone Apps
Joy and Fun moment during all 4 Days and great device experience with Test Devices kept for them
Some even went away with Nokia Lumia 800

What’s the outcome of all this 4 month story from October 2011 to January 2012 ? :

Some 30+ Quality Apps already in Marketplace from this event
Around 45+ are due for Certification
Around 20+ new apps getting developed from people who already submitted apps
Me, Mahesh and Mayur declared officially from Microsoft as “Agents of Joy” and now visible on Microsoft’s I Unlock Joy Portal

http://www.microsoft.com/india/developer/windowsphone/

Click on “Agents of Joy” tile at the bottom !

Final Day :

I Unlock Joy Members snap with Harish Vaidyanathan at Pune

Conclusion :

Its for the “Community” by the “Community” to build more better and better “Community”, so despite of all challenges we faced.The passion of working towards “Community” made all things easy.

There are so many things happen in those 4 months, so its difficult for me to put down all things here,still I tried my best to cover up the entire story.

I am proud that I am associated with such a wonderful community in Pune. Microsoft and Pune User Group Rocks !!

Thanks to all who are directly or indirectly involved in this activity, its difficult to take all names since its very big community effort.so thanks to all !

After this event, Girish Joshi from Microsoft asked Me and Mahesh to give a snap of ours and we given below snap :

Well ! There is again a Big story behind this photo which we took at midnight at Mahesh’s home..that story..well..some other time !

Vikram.

Creating the SilverlightShow Windows Phone App: part 1

editorial@silverlightshow.net (Peter Kuhn ) — Wed, 21 Mar 2012 10:06:00 GMT

At the end of February, the official SilverlightShow Windows Phone app has been accepted into the Marketplace. The app gives you access to some of the content of this website, including news, articles and events, and is completely free for use (also ad-free!). Some of the convenience features include the possibility to create reminders for upcoming events and webinars directly on your phone, to get notifications about new content in the form of live tiles, and to maintain a local list of favorites that allows you to permanently store items for later reading. If you haven’t checked out the app yet, you can find more details and a quick intro video here, or visit its Marketplace page here.

More resources...

All SilverlightShow Ebooks

The creation of the app was an interesting experience, because unlike other phone projects I had worked on in the past, this one wasn’t a greenfield development. Obviously the SilverlightShow portal already existed, had a long-established production infrastructure and already a lot of existing content available.

During the course of developing the application, we thought it would be a nice idea to share some of the experiences with the SilverlightShow readers, because it is a nice example of discussing a real-world application, with real-world problems (and solutions :)). The idea of this mini-series of articles was born, where you will discover both details about the development process as well as some technical challenges we came across. This first part will deal with the process itself, so prepare for some more text and less code (read: no code) than usual.

Prerequisites

With almost every piece of software you are developing, you usually (hopefully?) don’t start coding right away, but begin with some sort of requirements engineering, and then create the concept of your software. You may not be aware of the order and existence of these actions if you’re only a hobby programmer, or you may not be familiar with the formal terms and definitions, but even if you’re only creating a really small app, these steps are part of the development process in one form or the other. We can sum up these two elements by two simple questions:

What is it our software is intended to do?
How shall our software achieve this goal?

As I wrote, the details on how sophisticated you analyze these questions and the ways you maintain the results of this analysis is a direct result of several factors, like the development process you intend to use, your personal experience, external requirements, and the complexity of the project you’re taking on. Sometimes all this information may only exist in your head, in other situations it will result in huge documents being produced upfront.

When you’re developing an app based on an already existing eco system, there are additional steps you need to perform. In particular, you have to do an analysis of the existing infrastructure to see what parts you can make use of and integrate with your own development, how you can achieve this, whether other parts require work or need to change, and what features you rely on are missing completely. Sometimes, the intended requirements of the result even depend on what’s possible to achieve with a reasonable amount of effort, taking the given system into consideration. This is how extending an existing system can be both good and evil: it may speed up your development when you’re able to reuse components that are already available, but it may also limit your possibilities, and even bring up whole new problems that you wouldn’t have to face if you started from scratch.

The Existing Infrastructure

Building an app for the SilverlightShow portal wasn’t any different in this. The web site obviously existed already, and a great variety of people, consisting of both the SilverlightShow staff as well as external authors, actively contributes to the content. To allow comfortable and easy editing, the SilverlightShow team has put a great amount of work into integrating the site nicely with WYSIWYG tools, especially Windows Live Writer. As a result, the content available on the site is maintained in a blog-like manner, and stored as rich content in a corresponding data store.

On the consuming side of things, we have the web user interface you’re directly interacting with at the moment, but there are other options to access the content of the site which are optimized for machine/automated access. This includes several RSS feeds that can be consumed by special reader software, so you can access the site through your favorite client and presentation software. Some other areas of the site also offer specialized web services tailored for being accessed by Silverlight clients.

Since both working with the site itself as well as the authoring of content is a well-known, proven process that has evolved and been established over a longer period of time, it was a logical consequence to put the Windows Phone app on top of this existing infrastructure, and introduce as little changes as possible to the existing system. This was one of the first and most central requirements established in the development process of the app.

Requirements

Starting with the above information, we established a set of features we wanted to see in the app. In particular, we wanted to expose the most popular content of the site (news, articles, events/webinars), and at the same time make sure that we blend in nicely with the phone platform, by implementing typical features the user would expect: notifications, reminders, and a Metro-style native experience.

Concept

If you carefully read through the requirements and the result of the infrastructure analysis listed above, then maybe you can see how a lot of this more or less determined fundamental parts of the concept and later implementation already. Let’s pick some of the more interesting details, all of which will be covered over the course of this mini-series:

Like said, we wanted to make use of the existing system and introduce as little changes as possible. A logical consequence of this was that we would make use of the already existing rich content directly if possible, so both the web interface and phone app could work directly on the same data.
Another logical step of this was to use the already existing RSS feeds to get access to that data, instead of creating a whole new solution that would exist in parallel (and require additional implementation and maintenance costs).
Consequently, that same premise also affected features of the app you would not expect or think about at first. Take the notifications requirement, for example. Implementing a full-blown push notification solution would’ve required setting up quite some additional server infrastructure and server-side logic, something that we didn’t want to do. Eventually, this resulted in the decision to use a local background agent to add the notification features to the app.
Since we wanted to create a nice and smooth Metro-style experience with the app, we ruled out alternate ways of creating such an accompanying app pretty quickly. For example, I have seen quite some “wrapper” apps in the Marketplace that are using a web browser control to display a mobile version of a web site – simple, quick to set up, but in no way living up to the expectations of the SilverlightShow users and definitely not what we were looking for. We wanted to present a rich, familiar look and feel based on a native Silverlight implementation. And, after all, this is SilverlightShow.net, not WebBrowserControlWrapper.net :-).

Prototype

In some areas, we weren’t sure whether it really would be possible to achieve good results in terms of performance and user experience by using the concept we created. This is a common problem when you’re developing software: sometimes the complexity is just too high, or the involved technology is not understood well enough or has too many dependencies to allow for a definite answer and final design just by thinking about it in theory. In these cases, the way you should probably take into consideration is to create a prototype. This is a small piece of software that takes on the most pressing aspects of your concept and delivers a proof that what you intend to do will work as expected, or can work by modifying some details of the concept or add tuning – hence the naming “proof of concept”.

This is exactly what we did with some of the fundamental topics I have listed above. The small prototype allowed us to eliminate some mistakes in the concept that had slipped through, and to identify other issues we would be running into later on, which we now could plan for accordingly, early in the process. This very short phase of the development process helped enormously with clarifying some details and laying out the foundation and basic structure of the app.

By the way, the result of creating a prototype can also be that what you intended to do is not feasible – you should not think of a situation like that as a defeat, but a huge success. Imagine the wasted effort if you discovered the dead end only months after starting development. It’s much better to return to the drawing board early.

Implementation

For a passionate developer, starting with the actual implementation is the most exciting moment during a development process like this, after having built up all the excitement during the previous phases. And if you have worked on some projects like that before, you know that during implementation you get to crack the real problems, low-level, that nobody anticipated when they wrote the specs. Even when you have used advanced techniques like prototyping you will run into those pesky little details in your daily work that you hate, curse, and love to beat. So did we during the implementation phase of the app – some of these details and experiences will be covered in the next part of the series, and it will become a lot more technical then.

Conclusion

I didn’t go into the details of specific techniques of requirements engineering, creating specifications or even the implementation process itself. This of course exceeds the scope of this article. But whether you’re using agile processes or classic approaches doesn’t matter. What I wanted to show you is that things you may know from your day job can also be applied to this much smaller scale of creating relatively simple phone apps, and that it in fact helps with being more effective. I hope you enjoyed this first part, and are looking forward to dive into some of the technical problems we were facing next time.

Part 4: Developing for a multitude of clients: strategies for code reuse and keeping costs in check.

editorial@silverlightshow.net (Kevin Dockx ) — Tue, 20 Mar 2012 06:50:00 GMT

Welcome to the fourth part of this article series on strategies for designing your application for a multitude of different clients. In the first part, we’ve looked into the business case & some general concerns, and in the second part, we made a choice for a service layer: WCF RIA Services. In the third part, we’ve seen how we can use MEF for on demand loading & code reuse across different clients.

More resources...

All SilverlightShow Ebooks

However, I left out a few things in that article: loading the Views on demand (as it requires extensions to the Silverlight Navigation framework to navigate to Views in an assembly that’s loaded on demand), and loading multiple assemblies on demand (as we need an async component loader for that, to ensure we can load these assemblies at the same time instead of one by one). This article will deal with these two concerns.

You can download the source code for this article here (you can log in to the demo application with pete.campbell@madmen.com / abc@123).

Deciding what to load on demand

First of all, we need to decide what exactly we want to load on demand, and what we’ll keep as a regular reference. As you can see in the following screenshot, the main project requires quite a few assemblies:

What will we load on demand, and what will we keep as reference? You could load almost anything on demand, if you're really set on diminishing the initial load of your application (the size of the XAP), however: I like to keep things a bit more realistic. Take, for example, an assembly like System.Windows.Interactivity. This one contains the classes used to enable commands on any event, like a command on the SelectionChanged event of a ListBox (as you can see throughout the application) - does it make sense to load this on demand?

Well, it depends. Some might say it does: after all, theoretically you could have a part of an application that never uses any of the classes from that assembly. And it does keep down the initial load. As an added bonus, it even allows your assembly to be cached automatically by the browser (have a look at the caching overview article for more information on this).

On the other hand: this might qualify as overkill. Does it really make sense to separate out an assembly that will be used by almost any module, like System.Windows.Interactivity? Or an assembly that will be used by each ViewModel, like the MVVM Light assemblies? I would argue it doesn't - a matter of "it's not because we can do this, that we should."

As a rule of thumb, I like to separate out the assemblies (/classes) that belong to specific modules and aren't used throughout the application. A model, used only by the Employee Opportunity module, would be something that's preferably loaded on demand. The authentication model, used regardless of who's using the application? Not so much. A self-created assembly containing commonly used code, or an existing assembly that contains classes used throughout the application (like System.Windows.Interactivity, or in our case: the MVVM Light-related assemblies), are typically assemblies I'd keep as a reference instead of loading on demand.

With this in mind, we can get going. And we'll immediately bump into 2 issues…

Loading a multitude of assemblies at startup.

The first issue: we now have to load a multitude of assemblies when the application starts, and it's only after all these assemblies have been loaded that we can continue with our application execution (in this case: set the RootVisual to an instance of MainPage). The simplest way to solve this is to call the loading of the next assembly in the completed handler of the previous async call, and continue doing this until all the necessary assemblies have been loaded… While this could be a valid approach with 2 or 3 assemblies, the code becomes very cluttered when we need to load more assemblies. Besides that, assemblies will be loaded one by one instead of in parallel - which is a shame, as the last option would result in faster application startup.

What we need is a way to execute multiple asynchronous calls, in parallel, and start another action after all these calls have completed.

Luckily, this can be done with a bit of custom coding. We'll create a helper class, ParallelAsyncProcessor, in Framework.Silverlight. An instance of this class is initialzed, after which we’ll add the actions to be executed by calling the AddToParallelQueue method. To start executing them, we’ll call the StartParallelProcessing method, which will start executing them in parallel (as they're async calls). When an action completes, the action should be taken from the list of actions, and when all actions have been completed, another action, AllProcessesCompleted, will be executed. This is typically where we’ll continue with the execution of the application.

The following code illustrates the helper class:

public class ParallelAsyncProcesser{    public Action AllProcessesCompleted;    public Dictionary<object, Action> Processes;    private int _numberOfActions = 0;    public ParallelAsyncProcesser()    {        Processes = new Dictionary<object, Action>();        _numberOfActions = 0;    }    public void StartParallelProcessing()    {        foreach (var action in Processes.Values)        {            action.Invoke();        }    }    /// <summary>    /// Add an action to the parallel queue    /// </summary>    /// <param name="action">The action to invoke</param>    /// <param name="identifier">An optional identifier.  Add this if you want to ensure     /// the correct action is removed from the queue.      /// If not, the processer acts as a counter.</param>    public void AddToParallelQueue(Action action, object identifier = null)    {        _numberOfActions++;        if (identifier == null)        {            Processes.Add(_numberOfActions, action);        }        else        {            Processes.Add(identifier, action);        }    }    /// <summary>    /// Typically executed in the completed method of an async call    /// </summary>    /// <param name="identifier">When this is passed in, the correct action will be removed     /// from the internal dictionary.      /// If not, any action will be removed.</param>    public void ProcessComplete(object identifier = null)    {        _numberOfActions--;        if (identifier == null)        {            // remove any            Processes.Remove(Processes.Count);        }        else        {            Processes.Remove(identifier);        }        // invoke action on all processes complete        if (_numberOfActions == 0 && AllProcessesCompleted != null)        {            AllProcessesCompleted.Invoke();        }    }}

To use this, we need to change our Application_Startup method a bit. We need a list of assemblies that have to be loaded (this list can vary depending on custom application logic, like the users' rights - if that's the case, these assemblies will of course have to be loaded after the user logs in instead of in the Application_Startup method). We run through this list, and add the DownloadAsync method to the list of actions that have to be executed. We also ensure actions are removed from the list by calling ProcessComplete in the completed handler.

Once the last action has been fully completed, the AllProcessesCompleted method will be executed. The method is executed automatically, and is used to set the RootVisual to a new instance of MainPage. The code for this looks as such:

// create a list of external dependenciesList<string> lstDependencies = new List<string>(){    "SalesDashboard.Client.Model.dll",    "SalesDashboard.SL.Modules.EmpOpp.ViewModels.dll",    "SalesDashboard.SL.Modules.EmpOpp.Views.dll"};// instantiate a new aggregate catalagvar catalog = new AggregateCatalog();// instantiate a new parallel async processerParallelAsyncProcesser parallelAsyncProcesser = new ParallelAsyncProcesser();foreach (var dependency in lstDependencies){    // note:  pass in another variable instead of directly passing in the dependency string.    // This ensures this new value is used when executing the parallel processes instead     // of using the last passed-in string multiple times     var foo = dependency;    var catalogDep = new SuperDeploymentCatalog(foo);    catalog.Catalogs.Add(catalogDep);    EventHandler<AsyncCompletedEventArgs> handler = null;    handler = (s, a) =>        {            parallelAsyncProcesser.ProcessComplete(foo);            catalogDep.DownloadCompleted -= handler;        };     catalogDep.DownloadCompleted += handler;    parallelAsyncProcesser.AddToParallelQueue(() => catalogDep.DownloadAsync(), foo);}parallelAsyncProcesser.AllProcessesCompleted += () =>    {        // dependencies have been loaded, init app startpage        this.RootVisual = new MainPage();    };// start fetching the dependencies, parallel instead of one by oneparallelAsyncProcesser.StartParallelProcessing();

And like that, we can now load assemblies on demand, in parallel.

Navigating to a View residing in an assembly that's been loaded on demand.

The second issue we run into actually consists of 2 related issues.

First, some background information: we're using a View-first approach. This means View is initialized, and it is provided with a DataContext - the ViewModel - by another component (MEF, in this case - the View isn't responsible for initializing the ViewModel). To ensure the View is initialized, we simply place it on MainPage (for the header) or set it as source for the frame on the MainPage. I'll get into the second part immediately, as this has to do with another challenge, but solving the first problem might not be obvious either: after all, how are you going to place a View on a page if you haven't got a reference to the assembly containing the View? Obviously, your code simply won't compile.

Well, let's think back at why exactly we're loading assemblies on demand: it enables shorter initial loading times, makes it easier to roll out changes (you don't have to recompile your complete XAP), but in our case, the most important reason was: allowing reuse of code (the modules) & composability. So how can we reach our goal? It's actually pretty easy: we're going to add a reference to the assembly containing the Views, so we can add an instance of one to the MainPage, AND we're still going to load that assembly on demand. The trick is the "Copy local" value in your reference properties. If you put this on false, this assembly will not be packaged in the XAP (thus keeping your XAP smaller), and thus has to be loaded on demand.

Note that we use the “Copy Local = false” technique extensively, especially in the assemblies we load on demand – in fact, if you look at the project containing the Views we’ll load on-demand, you’ll notice that all the references are set to “Copy local = false”, as they all are either references in the main project, or loaded on-demand.

If we now build and run our application and look into the XAP, we'll notice it no longer contains the View assembly: this is now loaded when the application is launched. After that, MainPage is initialized, and the Header will be shown.

But we immediately run into another challenge, the second of our 2 view-related issues: we get an error on our Frame: apparently, it's not possible to navigate to a View in another assembly when that assembly is loaded on demand. Can we solve this?

Introducing: a custom Content Loader & View Factory

In Silverlight 4, a new interface was introduced: INavigationContentLoader. Going into the details of this would lead us too far for this article, but if you want, you can read about it on MSDN or in one of my previous articles on Authorized Navigation (where a custom implementation of this interface is used). By writing our own implementation of this, we can decide how exactly our Views should be loaded. A few implementations and techniques using this interface already exist: David Poll described one on his blog, and Pencho Popadiyn wrote an article about it on Silverlight Show. However, we’re not using MEF to export our Views: we’re already using MEF to set the DataContext of our Views to an instance of a certain ViewModel, which therefore makes it quite a hassle to export the Views as well – they’re already dependent on importing a ViewModel from another plugged-in assembly. So we’ll need another technique.

What we need is “something”, a component, to provide us with an instance of the View we need. We need a component that “knows” about these views, so it can instantiate them with a bit of reflection, and can return them to the custom NavigationContentLoader. So, in essence: we need a ViewFactory, which should reside in our View assembly, and which we can import using MEF in our NavigationContentLoader. This ViewFactory instance is then used by the NavigationContentLoader to provide us with the View instance we need.

Let’s start with the ViewFactory:

namespace Framework.Silverlight{    [Export(typeof(IViewFactory))]    public class ViewFactory : IViewFactory    {        public Page GetViewInstance(string className)        {            try            {                var instance = Activator.CreateInstance(Type.GetType(className));                return instance as Page;            }            catch (Exception ex)            {                return null;            }        }    }}

As you can see, this is pretty straightforward. It expects a class name, and will return an instance of that class (a View), using some reflection, to whichever component we’re calling the ViewFactory from.

On to the custom content loader. First, we import all instances of ViewFactory. As we need to ensure our application can work with different assemblies containing Views, we need to use ImportMany.

[ImportMany(typeof(IViewFactory))]public List<IViewFactory> ViewFactories { get; set; }

In BeginLoad, we try to get an instance of a View back from one of the imported ViewFactory instances (note that this code is used to illustrate a technique – for production-ready code, you’ll probably want to refine the way we fetch the class name some more).

public IAsyncResult BeginLoad(Uri targetUri, Uri currentUri,    AsyncCallback userCallback, object asyncState){        NavigationAsyncResult ar = new NavigationAsyncResult(userCallback, asyncState);    string fullUri = targetUri.ToString();    string className = (fullUri.Substring(1, fullUri.IndexOf(';') - 1) + "." +     fullUri.Substring(fullUri.LastIndexOf("/") + 1, fullUri.IndexOf(".xaml")     - fullUri.LastIndexOf("/") - 1));    // use one of the the ViewFactories to load    foreach (var factory in ViewFactories)    {        Page page = factory.GetViewInstance(className);        if (page != null)        {            ar.Result = page;            ar.CompleteCall(false);            return ar;        }    }    // in case nothing is found...    throw new ArgumentException("No view found in any imported assembly with classname " + className);        return null;}

In EndLoad, we ensure our custom loader logic is used instead of the default loader:

public LoadResult EndLoad(IAsyncResult asyncResult){    if (asyncResult is NavigationAsyncResult)        return new LoadResult((asyncResult as NavigationAsyncResult).Result);    else        return _loader.EndLoad(asyncResult);}

And that’s it! Our custom content loader is ready. All that’s left now is making sure it’s used, which we can do by adjusting our XAML code a little bit, as such:

<sdk:Frame x:Name="mainFrame"           Background="Transparent"           JournalOwnership="Automatic"           BorderThickness="0"           Margin="50,0,50,0"           Source="/LoginView">    <sdk:Frame.ContentLoader>        <fw:CustomXAPContentLoader></fw:CustomXAPContentLoader>    </sdk:Frame.ContentLoader>    <navigation:Frame.UriMapper>        <sdk:UriMapper>            <sdk:UriMapping Uri="/{page}"                            MappedUri="/SalesDashboard.SL.Modules.EmpOpp.Views;component/{page}.xaml" />        </sdk:UriMapper>    </navigation:Frame.UriMapper></sdk:Frame>

We’ve now created a way to ensure our View assembly can be loaded on demand, and we can still navigate to these Views even though they reside in a different assembly, by extending the Navigation framework.

Conclusion

In this article, we've seen some best practices on how you can separate your app into different modules so this code can be reused. We've tackled a few issues, or rather: challenges that come with these techniques, by creating a custom loader queue, and extending the Silverlight Navigation framework in such a way that it allows navigating to View in assemblies that are loaded on demand. We've now got a truly composable application that can consist of various modules, each easily reusable by other client applications.

In the next part, we'll add another client to the equation and see how exactly we can reuse all the separated-out components from the last few articles: an Out of Browser Silverlight client.

About the author

Kevin Dockx lives in Belgium and works at RealDolmen, one of Belgium's biggest ICT companies, where he is a technical specialist/project leader on .NET web applications, mainly Silverlight, and a solution manager for Rich Applications (Silverlight, Windows Phone 7 Series, WPF, Surface, HTML5). His main focus lies on all things Silverlight, but he still keeps an eye on the new developments concerning other products from the Microsoft .NET (Web) Stack. As a Silverlight enthusiast, he's a regular speaker on various national and international events, like Microsoft Techdays in Belgium, Portugal & Finland, NDC2011, Community Day, ... Next to that, he also authored a best-selling Silverlight book, Packt Publishing's Silverlight 4 Data and Services Cookbook, together with Gill Cleeren. His blog, which contains various tidbits on Silverlight, .NET, and the occasional rambling, can be found at http://blog.kevindockx.com/, and you can contact him on Twitter via @KevinDockx.

Using a ToggleButton in your XAML Metro style AppBar

Tue, 20 Mar 2012 04:08:15 GMT

If you’ve been playing around with the Windows 8 Consumer Preview then hopefully you’ve seen the hundreds of samples provided and downloaded some apps form the store. In a lot of those applications you’ll notice the common theme of the use of an AppBar…the command bar that shows when you swipe from the top or bottom of the screen. You can also invoke the AppBar by right-clicking or using the Windows 8 keyboard shortcut of Windows key + ‘z’ to bring it up as well.

Picture of the AppBar in the Bing Maps application

Most of the applications use the standard AppBar button concepts that clicking invokes some action for the app. There may be times, however, where that button serves as a “toggle” to something in your app. Using the Bing Maps app as an example, the “Show Traffic” command is actually a toggle command that, well, shows traffic. You want to give your users some visual indication whether that toggle selection is on/off. This can be accomplished in XAML by using 2 buttons and toggling their visibility, but that may be overkill for what you simple want to do.

The Visual Studio project templates provide a set of styles for the AppBar for you, but more importantly a base style AppBarButtonStyle that serves as the core design. Altering this just slightly and you can have a ToggleAppBarButtonStyle for your project. Here’s the style for that base:

        1: <Style x:Key="ToggleAppBarButtonStyle" TargetType="ToggleButton">       2:     <Setter Property="Foreground" Value="{StaticResource AppBarItemForegroundBrush}"/>       3:     <Setter Property="VerticalAlignment" Value="Stretch"/>       4:     <Setter Property="FontFamily" Value="Segoe UI Symbol"/>       5:     <Setter Property="FontWeight" Value="Normal"/>       6:     <Setter Property="FontSize" Value="21.333"/>       7:     <Setter Property="AutomationProperties.ItemType" Value="AppBar ToggleButton"/>       8:     <Setter Property="Template">       9:         <Setter.Value>      10:             <ControlTemplate TargetType="ToggleButton">      11:                 <Grid Width="100" Background="Transparent">      12:                     <StackPanel VerticalAlignment="Top" Margin="0,14,0,13">      13:                         <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">      14:                             <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundBrush}"/>      15:                             <TextBlock x:Name="BackgroundCheckedGlyph" Visibility="Collapsed" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemForegroundBrush}"/>      16:                             <TextBlock x:Name="OutlineGlyph" Text="&#xE0A7;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"/>      17:                             <ContentPresenter x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center"/>      18:                         </Grid>      19:                         <TextBlock      20:                         x:Name="TextLabel"      21:                         Text="{TemplateBinding AutomationProperties.Name}"      22:                         Margin="0,0,2,0"      23:                         FontSize="12"      24:                         TextAlignment="Center"      25:                         Width="88"      26:                         MaxHeight="32"      27:                         TextTrimming="WordEllipsis"      28:                         Style="{StaticResource BasicTextStyle}"/>      29:                     </StackPanel>      30:                     <Rectangle      31:                         x:Name="FocusVisualWhite"      32:                         IsHitTestVisible="False"      33:                         Stroke="{StaticResource FocusVisualWhiteStrokeBrush}"      34:                         StrokeEndLineCap="Square"      35:                         StrokeDashArray="1,1"      36:                         Opacity="0"      37:                         StrokeDashOffset="1.5"/>      38:                     <Rectangle      39:                         x:Name="FocusVisualBlack"      40:                         IsHitTestVisible="False"      41:                         Stroke="{StaticResource FocusVisualBlackStrokeBrush}"      42:                         StrokeEndLineCap="Square"      43:                         StrokeDashArray="1,1"      44:                         Opacity="0"      45:                         StrokeDashOffset="0.5"/>      46:        47:                     <VisualStateManager.VisualStateGroups>      48:                         <VisualStateGroup x:Name="CommonStates">      49:                             <VisualState x:Name="Normal"/>      50:                             <VisualState x:Name="PointerOver">      51:                                 <Storyboard>      52:                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">      53:                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemHoverBackgroundBrush}"/>      54:                                     </ObjectAnimationUsingKeyFrames>      55:                                 </Storyboard>      56:                             </VisualState>      57:                             <VisualState x:Name="Pressed">      58:                                 <Storyboard>      59:                                     <DoubleAnimation      60:                                     Storyboard.TargetName="OutlineGlyph"      61:                                     Storyboard.TargetProperty="Opacity"      62:                                     To="0"      63:                                     Duration="0"/>      64:                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">      65:                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundBrush}"/>      66:                                     </ObjectAnimationUsingKeyFrames>      67:                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">      68:                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPressedForegroundBrush}"/>      69:                                     </ObjectAnimationUsingKeyFrames>      70:                                 </Storyboard>      71:                             </VisualState>      72:                             <VisualState x:Name="Disabled">      73:                                 <Storyboard>      74:                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Foreground">      75:                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemDisabledForegroundBrush}"/>      76:                                     </ObjectAnimationUsingKeyFrames>      77:                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">      78:                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemDisabledForegroundBrush}"/>      79:                                     </ObjectAnimationUsingKeyFrames>      80:                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">      81:                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemDisabledForegroundBrush}"/>      82:                                     </ObjectAnimationUsingKeyFrames>      83:                                 </Storyboard>      84:                             </VisualState>      85:                         </VisualStateGroup>      86:                         <VisualStateGroup x:Name="FocusStates">      87:                             <VisualState x:Name="Focused">      88:                                 <Storyboard>      89:                                     <DoubleAnimation      90:                                         Storyboard.TargetName="FocusVisualWhite"      91:                                         Storyboard.TargetProperty="Opacity"      92:                                         To="1"      93:                                         Duration="0"/>      94:                                     <DoubleAnimation      95:                                         Storyboard.TargetName="FocusVisualBlack"      96:                                         Storyboard.TargetProperty="Opacity"      97:                                         To="1"      98:                                         Duration="0"/>      99:                                 </Storyboard>     100:                             </VisualState>     101:                             <VisualState x:Name="Unfocused" />     102:                             <VisualState x:Name="PointerFocused" />     103:                         </VisualStateGroup>     104:                         <VisualStateGroup x:Name="CheckStates">     105:                             <VisualState x:Name="Checked">     106:                                 <Storyboard>     107:                                     <DoubleAnimation     108:                                     Storyboard.TargetName="OutlineGlyph"     109:                                     Storyboard.TargetProperty="Opacity"     110:                                     To="0"     111:                                     Duration="0"/>     112:                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">     113:                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundBrush}"/>     114:                                     </ObjectAnimationUsingKeyFrames>     115:                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundCheckedGlyph" Storyboard.TargetProperty="Visibility">     116:                                         <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>     117:                                     </ObjectAnimationUsingKeyFrames>     118:                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">     119:                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPressedForegroundBrush}"/>     120:                                     </ObjectAnimationUsingKeyFrames>     121:                                 </Storyboard>     122:                             </VisualState>     123:                             <VisualState x:Name="Unchecked"/>     124:                             <VisualState x:Name="Indeterminate"/>     125:                         </VisualStateGroup>     126:                     </VisualStateManager.VisualStateGroups>     127:                 </Grid>     128:             </ControlTemplate>     129:         </Setter.Value>     130:     </Setter>     131: </Style>

Now with that style we can have a simple style that shows a toggle on and off for the same button:

       1: ...       2: <Page.BottomAppBar>       3:     <AppBar>       4:         <ToggleButton Style="{StaticResource ToggleAppBarButtonStyle}"        5:                 AutomationProperties.Name="Search"        6:                 Content="&#xE11A;" />       7:     </AppBar>       8: </Page.BottomAppBar>       9: ...

The result would show:

ToggleButtonAppBarStyle in off/on state

This way we exhibit all the same behaviors of the AppBarButtonStyle, but just applied to the ToggleButton element in XAML. Now we could probably refactor both to have an even more derivative base style and use more BasedOn styling, but how it is currently structured we couldn’t have a ToggleButton based on a Button style. But thanks to the style/template engine in XAML we can re-use a lot and serve our needs!

Notice that you can set the Content to be whatever you want. Since my base style uses the Segoe UI Symbol font, I’m setting the unicode value for a glyph here for Search. A set of some cool glyphs you can use can be found in my previous post on XAML AppBar button styles.

You can get the ToggleAppBarButtonStyle from here: https://gist.github.com/2131230.

Hope this helps!

tags: windows 8, winrt, xaml, appbar, win8, metro

This work is licensed under a Creative Commons Attribution By license.

Yet Another Podcast #61–Agile Programming

Wed, 14 Mar 2012 21:51:21 +0000

Consume JSON with Windows Phone: a seamless solution

editorial@silverlightshow.net (Andrea Boschin ) — Wed, 14 Mar 2012 10:47:00 GMT

One of the growing needs of these days, is the requirements of exposing services that are available to multiple platforms. This request come obviously from the increasing availability of a number of mobile platforms that is forcing companies to adopt strategies to decrease the complexity and use technologies that are able to respect the verb "write once and use everywhere".

Don't miss...

($4.99)

All SilverlightShow Ebooks

Javascript object notation - or as everyone know for sure, JSON - is something that has emerged as the common denominator, when the need is to expose services and APIs that may be easily consumed by multiple platforms. JSON is a simple notation - born long before the birth of the today's mobile world - that is able to describe object instances with a javascript syntax. The primary feature of JSON is the compactness, that is better than any other text based serialization strategy and many times better than XML. JSON is made of a combination of curly and square braces, of comma, colon and quotes. Explaining the syntax of JSON is out of the scope of this article but here is a basic example of the notation:

   1: { "FirstName" : "Andrea", "LastName" : "Boschin", "Age" : 43 }

This notation, as you can easily understand, describes a Person instance that exposes FirstName, LastName and Age properties. JSON let you describe objects and arrays and it always remain compact in size. The reason of its popularity is not only about compactness, but comes from the fact that every platform, mobile or not, has a way to serialize and deserialize this smart notation.

Windows Phone is not different in this. Including the System.ServiceModel.Web.dll you have a DataContractJsonSerializer class that is able to perform the required conversion between JSON to plain objects and viceversa. But what about if you have to create a json service and consume it with Windows Phone? For us, developers that usually take advantage of great Visual Studio IDE, able to generate code on behalf of us, using a json service may be matter of give up of helpers and write all by hand.

Architect your service

So let say you have the common need of expose a set of APIs from your website and obviously you want to create a native app for Windows Phone that have to consume these APIs. The requirement is to prepare the connection points to be ready to be consumed by other devices so you want to use JSON as output.

The first thing to do is configure your service. WCF is a good starting point because, thanks to the WebHttpBinding, you can write services, with the common constraints you already know and then configure an endpoint to accept calls made with json. The starting point, as usual is to create the contract:

   1: [ServiceContract]   2: [ServiceKnownType("GetKnownTypes", typeof(KnownTypesProvider))]   3: public interface ITestService   4: {   5:     [OperationContract]   6:     [WebInvoke(   7:         Method = "POST",   8:         BodyStyle = WebMessageBodyStyle.Wrapped,   9:         RequestFormat = WebMessageFormat.Json,  10:         ResponseFormat = WebMessageFormat.Json)]  11:     Article GetArticleById(int id);  12:       13:     // add here other methods...  14: }

In this snippet there are two important details. The service contract is decorated with the ServiceKnownType attribute that is useful to instruct your service about the types you need to serialize and deserialize. This attribute indicate a type to be the source of the types WCF has to know. This class has to expose the "GetKnownTypes" method:

   1: public static class KnownTypesProvider   2: {   3:     public static IEnumerable<Type> GetKnownTypes(ICustomAttributeProvider provider)   4:     {   5:         yield return typeof(Article);   6:     7:         // yield here other types...   8:     }   9: }

The code returns the Article type, but you have to add all other types that have to cross the service boundary, particularly if this type is not directly the return type of a method.

The other important thing to note is the WebInvoke attribute. This attribute, applied to the operations, determine the way the input and output will be serialized. In this sample I use WebMessageFormat.Json for both RequestFormat and ResponseFormat, meaning it will return and accept data formatted with json. Another important attribute is BodyStyle. Setting this argument as "Wrapped" means that we want WCF to encapsulate arguments in a envelope that describe the signature of the method. This wrapper contains the name of the method, and the name of the parameters. Here is an example ot the input and output of the above method:

   1: // Signature   2:     3: Article GetArticleById(int id);   4:     5: // Input Message   6:     7: {"id":27}   8:     9: // Output Message  10:    11: {"GetArticleByIdResult":{"Id":27,"MediumVote":0,"Title":"test","VoteCount":0}}

Once the contract has been prepared now you can implement all the methods you need. In the example attached to the article you will find all the needed code. The most important thing is the configuration of the service, in the Web.Config. This chunk of code specified the connection endpoint and some important details about the nature of the binding and transport:

   1: <system.serviceModel>   2:      3:   <services>   4:     <service name="XPG.WindowsPhoneJson.Services.TestService">   5:       <endpoint address=""    6:                 binding="webHttpBinding"    7:                 contract="XPG.WindowsPhoneJson.Services.ITestService"    8:                 behaviorConfiguration="ITestService_WebHttp" />   9:     </service>  10:   </services>  11:     12:   <behaviors>  13:     <endpointBehaviors>  14:       <behavior name="ITestService_WebHttp">  15:         <webHttp />  16:       </behavior>  17:     </endpointBehaviors>  18:   </behaviors>  19:     20: </system.serviceModel>

The keys of this configuration are the webHttpBinding assigned to the binding attribute and the <webHttp /> element. These two configurations enable our service to accept calls with simple POST and make the service completely interoperable with a number of platforms.

Architect your App

Moving to the Windows Phone application, when all the methods of the services are implemented, you cannot simply generate a proxy as you do usually with services. To simplest way to consume the json service is to make POST calls using the WebClient class. This means write the json message, prepare the string to send to the service and then place the call. Then, when the service returns a value you have to make the deserialization. I really love to write code, but I do not like to write the same code lot of times to do always the same thing. So finally I put together a bunch of classes that simplify my work.

My solution is made of two classes: Channel is responsible of manage the communication between the client and server. It initializes the WebClient, sets the required headers and then send the message along the wire. Then, when the answer returns, it check for errors and cleanup the resources. On the other side the JsonSerializer use a DataContractJsonSerializer to prepare the message to send and read the returning answer:

   1: public void Call<K>(string method, object args, Action<K> success, Action<Exception> fail)   2: {   3:     string message = this.Parser.Serialize(args);   4:     Uri uriToCall = new Uri(this.Uri.AbsoluteUri + "/" + method);   5:     6:     this.Client.Headers[HttpRequestHeader.ContentType] = "application/json";   7:     8:     UploadStringCompletedEventHandler handler = null;   9:    10:     handler = (s, e) =>  11:     {  12:         this.Client.UploadStringCompleted -= handler;  13:    14:         if (e.Error != null)  15:             fail(e.Error);  16:         else  17:         {  18:             K result = this.Parser.Deserialize<K>(method, e.Result);  19:             success(result);  20:         }  21:     };  22:    23:     this.Client.UploadStringCompleted += handler;  24:     this.Client.UploadStringAsync(uriToCall, message);  25: }

The above method, is from the Channel class. as you can see it accept a method name (the name of the service operation to call) and an args parameter. This argument, of type object, is used to easily pass the arguments using anonymous types. Then the method prepares the uri, attaching the method name to the base uri of the service. Finally it sets the application/json content-type and place the call. The JsonSerializer class collaborate with the Call method:

   1: public T Deserialize<T>(string method, string message)   2: {   3:     Match match = Regex.Match(message, @"{""" + method + @"Result"":(?<inner>.*)}");   4:     5:     if (match.Success)   6:         return FromJson<T>(match.Groups["inner"].Value);   7:     8:     throw new FormatException("Message format is not valid");   9: }  10:    11: public string Serialize(object args)  12: {  13:     Type type = args.GetType();  14:     StringBuilder builder = new StringBuilder();  15:     bool isFirst = true;  16:    17:     builder.Append("{");  18:    19:     foreach (PropertyInfo property in type.GetProperties(BindingFlags.Public | BindingFlags.Instance))  20:     {  21:         object value = property.GetValue(args, null);  22:         if (!isFirst) builder.Append(","); else isFirst = false;  23:         builder.AppendFormat("\"{0}\":{1}", property.Name, this.ToJson(value));  24:     }  25:    26:     builder.Append("}");  27:    28:     return builder.ToString();  29: }

The trick is done creating the right wrapping code. The DataContractJsonSerializer simple convert the object to json but it does not directly handles the wrapped format of the message for the json service. So, if in the Deserialize method I strip away the wrapper just before of passing the message to the DataContractJsonSerializer , in the Serialize method I read the properties of the args value and I add the wrap calling the DataContractJsonSerializer of each parameter.

Unfortunately, the DataContractJsonSerializer needs to know the types that it has to serialize or deserialize. In a normal web service this problem is handled generating a copy ot the DataContracts on the client side, but her we have not a copy of these classes. So we have to manage add a copy of the data contracts to the client solution. This is done creating a link between the Windows Phone application project and the Service application project. In a real world example you shoud generate data contract in a specific assembly and then link these classes in another assembly, compiled for Windows Phone.

In the figure on the left side you see the solution where the Article and KnowTypesProvider class are defined in the server assembly and linked in the WP7 class library. The important thing to note is that the base namespace for both the classes is the same "XPG.WindowsPhoneJson.Entities" because I've removed the "WP7" part in the settings. After you linked the assemblies on the respective part (service and client) you can instruct the DataContractJsonSerializer to use them:

   1: private static T FromJson<T>(string json)   2: {   3:     DataContractJsonSerializer dcjs =   4:         new DataContractJsonSerializer(typeof(T), KnownTypesProvider.GetKnownTypes(null));   5:     6:     using (MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(json)))   7:         return (T)dcjs.ReadObject(stream);   8: }   9:    10: private string ToJson(object value)  11: {  12:     DataContractJsonSerializer dcjs =  13:         new DataContractJsonSerializer(value.GetType(), KnownTypesProvider.GetKnownTypes(null));  14:    15:     using (MemoryStream stream = new MemoryStream())  16:     {  17:         dcjs.WriteObject(stream, value);  18:         return Encoding.UTF8.GetString(stream.ToArray(), 0, (int)stream.Length);  19:     }  20: }

Write your own proxy

When you generate code from a service endpoint, side by side with your datacontracts, you get the main wrapper for the service under the form of a class that is usually called proxy. It main scope is to create an abstraction of the service to provide a way to consume its methods seamless. Once the Channel class has been build, is become very easy to write a proxy for a json service. Thanks to the structure I've illustrated it is a matter of write a single line of code, in a method that serves as a way to make parameters more user friendly. Here is a simple service wrapper based on the Channel class:

   1: public class TestService : Channel<JsonSerializer>   2: {   3:     public TestService(Uri uri)   4:         : base(uri)   5:     { }   6:     7:     public void GetArticleById(int id, Action<Article> success, Action<Exception> fail)   8:     {   9:         base.Call<Article>(MethodBase.GetCurrentMethod().Name, new { id }, success, fail);  10:     }  11:    12:     public void VoteArticle(int id, int vote, Action<int> success, Action<Exception> fail)  13:     {  14:         base.Call<int>(MethodBase.GetCurrentMethod().Name, new { id, vote }, success, fail);  15:     }  16:    17:     public void SaveArticle(Article article, Action success, Action<Exception> fail)  18:     {  19:         base.Call(MethodBase.GetCurrentMethod().Name, new { article }, success, fail);  20:     }  21: }

Thanks to the call method you can write a method that is ready to the asynchronous nature of network calls made with windows phone. You can user the generic method when you need to return a value or the base implementation when the method returns void. The first parameter is the name of the method you want to call. If you respect the convention of calling the proxy method with the same name of the service method you can use the MethodBase.GetCurrentMethod() to retrieve the name of the method to call.

Finally it is important you also use the same name for method parameters. When you pass the arguments as an anonymous type, Visual Studio automatically create the properties with the same name as the parameter we pass. Internally the Call method scans these properties and add them to the service call with the right name.

Beat the competitors

The proxy you have created in this brief article is highly reusable, but the same is true if you think at the output of the web service. This let you provide a service that is fully interoperable with all the platforms, but Windows Phone will beat other competitors in term of fast development, using the services in a seamless way. As a side note, please be sure that you can apply the same tecnique to provide a version of the proxy to Silverlight.

Download the source code

Free Online Event on KnockoutJS and MVVM

Wed, 14 Mar 2012 01:52:21 GMT

I published my Knockout / JavaScript / MVVM course with Pluralsight last month and have been getting a lot of positive feedback … thanks! I decided to do a free short presentation from the course and answer some questions online. And what better way to do that than on LIDNUG. So next Monday I’ll be presenting KnockoutJs and MVVM at LIDNUG … you can register for the event online. Monday, March 19th 2012 from 1:00pm to 2:00pm ET

HTML/ JavaScript Apps with MVVM and KnockoutJS

Do you write a lot of HTML and JavaScript code to push and pull data? In this session John will demonstrate how to bind your data from JavaScript to your target controls in HTML writing less code, and gaining more power. See how to use objects in JavaScript, use declarative binding, integrate templates and control of flow, create custom bindings, and include jQuery UI following good separation patterns using KnockoutJS and MVVM.

More Resources for JavaScript Patterns

Wed, 14 Mar 2012 01:51:24 GMT

In just a few weeks I’ll be at DevConnections in Las Vegas where I’ll be presenting on a few sessions such as JsRender/JsViews, KnockoutJS, and Windows 8 Metro apps with XAML, JavaScript Patterns. These will each be a whirlwind tour of those topics, which is about all you can do in an hour. I always tell folks that I am not trying to teach everything there is to know in 1 hour …. but rather I am showing what can be done and inspire you to continue down that path, if you so choose.

For those of you who can’t make DevConnections, you’ll be glad to know that there is an excellent video training course on the JavaScript patterns by Dan Wahlin at Pluralsight titled “Structuring JavaScript”. Dan and I subscribe to many of the same philosophies on patterns. For example, you’ll see that Dan and I are co-presenting the JavaScript Patterns session at DevConnections and in my KnockoutJS course for Pluralsight, I use the Revealing Module Pattern heavily. (Hey, I practice what I preach.)

For the most in depth coverage of the patterns and how to use them properly, you should definitely check out Dan’s course. It’s chocked full of great content such as:

Why do we Need JavaScript Patterns?
Prototype Pattern
Module Pattern
Revealing Module Pattern
Revealing Prototype Pattern

Silverlight and Sharepoint working together: event receivers in Silverlight

editorial@silverlightshow.net (Walter Ferrari ) — Tue, 13 Mar 2012 16:17:00 GMT

In the previous articles of this series (see the panel From this series on the right) we dealt with some introductory aspects such as how to integrate Silverlight into Sharepoint, then we built a Silverlight menu capable of interacting with a Sharepoint site as an example. Throughout this journey we have introduced some basic concepts of Sharepoint useful for Silverlight developers.

Don't miss...

($0.99)

All SilverlightShow Ebooks

Now it's time to dig into it at full throttle facing more advanced concepts. In this article we will become familiar with the Sharepoint event receivers, a cool feature which allows the user to be notified about various events occurring inside a Sharepoint environment. An example is the possibility to receive the notification of an item added to a list. Unfortunately, the mechanism works at server side and that means that there is no “out of the box” possibility to use the feature directly in a Silverlight application.

Nevertheless, we will find a way to make the event receivers available in a Silverlight web part in order to give a new dimension of interactivity to a Sharepoint solution.

As an example we will create a small application to invite our colleagues to a coffee break and get a close to real time answer. This will involve the creation of a wcf service with a service contract for a Sharepoint solution and a service contract for a Silverlight web part. Both contracts are duplex service contracts. Now you may be like “all this mess for a silly application to get someone together for a coffee break?” In fact, it may sound useless but it is not. Event receivers are a great feature of Sharepoint and exporting them into a Silverlight web part opens a very interesting perspective.

The “Coffee break” application

Let’s suppose we want to create a small application running in a Sharepoint site (a kind of widget) to quickly organize a coffee break with colleagues. We want to be able to select a time and send an invitation to our user’s group. The other users should be notified quite immediately and they should be able to accept or turn down the invitation. Eventually we should be notified about all the confirmations received from our colleagues. All this without the need to refresh any page.

The images below sum it all up:

A video showing the application in action is available here.

The source code of the application is available here.

The big picture

In the introduction I gave some clues. I mentioned Sharepoint event receivers, a wcf service with duplex service contracts, a Sharepoint solution and a Silverlight web part. Let me put together the pieces of the mosaic starting with the event receivers. (As usual Sharepoint developers can skip this part)

Event receivers are a convenient way to get notifications about Sharepoint events. The trappable events most used are synthesized in the tables below:

The nice thing is that you can create these event receivers from Visual Studio 2010 selecting the “Event receiver” template for a “new project” or for a “new item” of an existing project.

The template lets you choose the type of event you want to trap and then creates the skeleton code for you.

Once clarified what the event receivers are, let’s move on and suppose you want to trap the events related to the built-in Sharepoint Calendar list. In fact, this list seems the ideal candidate where to store the “coffee break appointments”. So the idea is that when someone (user A) proposes a coffee break, he/she inserts a new item in this list. Then, “an item was added” event is fired and caught by the event receiver that we previously created in a web part. From here the web part should be able to redirect the notification to a Silverlight application.

Obviously the Silverlight application must be hosted in a Silverlight web part in order to be available in a Sharepoint page.

When the Silverlight app received the notification it should be able to display the information to the user B and allow him to express a positive feedback. If a positive feedback is given, the item in the Calendar list is updated causing the firing of a “an item was updated” event. Another event receiver pointed on this event should redirect the feedback to the client Silverlight app of user A.

So the key point is: who is in charge of transferring the signalling of events from the server code in the web part to the client code in the Silverlight application?

The answer is : a wcf Service that serves as a bridge.

Hopefully the following images will help to clarify this.

Figure 1: How the “new coffee break event” is passed from the Silverlight of the user A to the Silverlight app of the user B

Figure 2: How the “coffee break event confirmation” is passed from the Silverlight app of the user B to the Silverlight app of the user A

Note that the built-in Calendar list does not contain any field specifically dedicated to storing the participants of an event or their confirmations. So for this purpose I used the “Description” field of the Calendar. Basically, when user B in figure 2 confirms his will to take a coffee break with user A, he updates the “coffee break” item in the Calendar list by adding his confirmation in the Description field.

A wcf service as a bridge

In the previous paragraph we learned that the idea (behind the possibility to extend the event receivers to a client application) is to use an “ad hoch” wcf service. Furthermore, this wcf service should be able to manage a one-to-many relation when a new item in the Calendar is created and when an item is updated. The image below shows both cases:

Figure 3: the wcf service manages a one-to-many relation

In this way all the users of a group will receive a notification about a new coffee break proposal and a notification about the confirmations of one or more of them.

Previously we have also stated that all these notifications should appear without the need to refresh the Sharepoint page containing the Silverlight application. This means that the Silverlight application should implement some kind of polling to the wcf service or better, the wcf service should be able to “push” the data into the Silverlight application. You as Silverlight developers surely know that there are several ways to accomplish this. For the “coffee break” application I used HTTP Polling Duplex following the details explained in this excellent article. Without going too much in detail (for further explanations you can download and look at the source code linked to this article), I added the following interfaces to the service: the first defines the methods that the client can call on the service:

[ServiceContract(Namespace = "Silverlight", CallbackContract = typeof(ISPDataServiceCallback))]
    public interface ISPDataService
    {
        [OperationContract(IsOneWay = true)]
        void DataFromClient(SPData value);

        [OperationContract(IsOneWay = true)]
        void DataFromSP(SPData value);
    }

As for the DataFromSP(SPData value) method we will come back on this in a while. Instead, the DataFromClient(SPData value) method is called by the Silverlight client application at the first start to be registered on the service. As you may remember, this is due to the fact that the service must ensure a relation “one to many” with the running clients. For this reason the service must keep track of each client available.

The registration is made by the client as follows:

// registration to the server
     SPData regData = new SPData();
     regData.Event = events.client_reg;
     regData.User = currentUser;
     _Proxy.DataFromClientAsync(regData);
}
…
void _Proxy_ReceiveSPDataReceived(object sender, ReceiveSPDataReceivedEventArgs e)
        {
            if (e.spData.Event == events.client_reg)
            {
                LogtxtBlock.Text = "Connection estabilished.";
                AddBreakBtn.IsEnabled = true;
            }

At the service level the DataFromClient(SPData value) method is implemented as follows:

public void DataFromClient(SPData value)
{
    //Get client callback channel
    var context = OperationContext.Current;
    var sessionID = context.SessionId;
    var currClient = context.GetCallbackChannel<ISPDataServiceCallback>();
    context.Channel.Faulted += Disconnect;
    context.Channel.Closed += Disconnect;

    ISPDataServiceCallback client;
    if (!_ClientCallbacks.TryGetValue(sessionID, out client))
    {
        lock (_Key)
        {
            _ClientCallbacks[sessionID] = currClient;
        }
    }

    // Get SPData
    if (value.Event == events.client_reg)
    {
        value.ItemValue = "acknowledgment";
        currClient.ReceiveSPData(value);
    }
   
}

For each new client a specific channel is reserved for future communications. Only in the event of a new registration an “acknowledgment” is sent back to the client as feedback that the communication channel has been established.

If you were careful you may have noticed that in the snippet of the code above there was a reference to a ISPDataServiceCallback interface. This interface defines the callback methods that the service can use to communicate with a client:

[ServiceContract]
public interface ISPDataServiceCallback
{
    [OperationContract(IsOneWay = true)]
    void ReceiveSPData(SPData spData);

    [OperationContract(IsOneWay = true, AsyncPattern = true)]
    IAsyncResult BeginReceiveSPData(SPData spData, AsyncCallback callback, object state);
    void EndReceiveSPData(IAsyncResult result);

    [OperationContract(IsOneWay = true)]
    void DataFromSPCallback(string message);
}

Here you may notice the definition of the ReceiveSPData(SPData spData) method used above to communicate to the client that the communication channel is ready.

Let's take a breath now and think: ok, we have seen how the client Silverlight app and the service can communicate but… one more piece is missing. In what way does the event receiver communicate with the service and instruct it to redirect the information gathered to the client?

You can add another service endpoint and a new binding to the wcf service. Using the Microsoft Configuration Editor” in the “coffee break” application I added a new endpoint called “wsdual” and a binding of type “wsDualHttpBinding”. So I was able to use the same contract type used by the Silverlight application.

The DataFromSP(SPData value) method included in the first interface (ISPDataService) that I put in a corner some paragraphs above is just the method used in the event receivers to transfer the notification about new/updated items in the Calendar list into the service.

The snippet below shows the method used by the event receivers:

public void SendSPDataToClient(events eventType, SPItemEventProperties properties, string userColumn)
{
    InitConnectionToWCF();

    DateTime eventDate = (DateTime)properties.ListItem["EventDate"];

    SPData spdata = new SPData();
    spdata.Event = eventType;
    spdata.ItemValue = eventDate.ToShortTimeString();
    spdata.listName = properties.List.Title;
    spdata.ItemID = properties.ListItemId.ToString();

    SPFieldLookupValue userValues = new SPFieldLookupValue(Convert.ToString(properties.ListItem[userColumn]));

    spdata.User = userValues.LookupValue;
    spdataService.DataFromSP(spdata);

}

Once the service receives the notification, it sends the information directly to the clients as follows:

public void DataFromSP(SPData spData)
{
     SendSPDataToClient(spData);
}

public void SendSPDataToClient(SPData spData)
{
      var cbs = _ClientCallbacks.Where(cb => ((IContextChannel)cb.Value).State == CommunicationState.Opened);
      for (int i = 0; i < cbs.Count(); i++)
      {
           var cb = cbs.ElementAt(i).Value;
           try
           {
                cb.BeginReceiveSPData(spData, _ReceiveSPDataCompleted, cb);
           }
           catch (TimeoutException texp)
           {
                //Log timeout error                 
           }
           catch (CommunicationException cexp)
           {
                //Log communication error                 
           }
      }
                        
}

Insert/update items in the Sharepoint Calendar List from Silverlight

If you have read my previous articles on this topic you should be familiar with the use of the Silverlight client object model. In the “coffee break” application the insert/update is carried out in a secondary thread in order to be able to use the synchronous ExecuteQuery() method instead of the conventional ExecuteQueryAsync(). There is no particular reason behind that, it is just another way. Here below the snippet of code that creates a new item:

public void InsertEventThreadFunc(object objData)
{
    ThreadData mthData = (ThreadData)objData;

    List list = mthData.ThClientContext.Web.Lists.GetByTitle(mthData.ThSPData.listName);
    ListItemCreationInformation itemCreateInfo = new ListItemCreationInformation();

    ListItem newEvent = list.AddItem(itemCreateInfo);
    newEvent["Title"] = "Coffee break for " + mthData.ThSPData.User;
    newEvent["EventDate"] = (DateTime)mthData.ThSPData.ItemValue;
    newEvent["EndDate"] = (DateTime)mthData.ThSPData.ItemValue;
    newEvent.Update();

    mthData.ThClientContext.Load(list, i => i.Title);
    
    mthData.ThClientContext.ExecuteQuery(); 
}

And below the snippet that updates the item:

public void UpdateEventThreadFunc(object objData)
{
    ThreadData mthData = (ThreadData)objData;

    List list = mthData.ThClientContext.Web.Lists.GetByTitle(mthData.ThSPData.listName);

    CamlQuery camlQuery = new CamlQuery();
    
    camlQuery.ViewXml =
        @"<View>
        <Query>
          <Where>
            <Eq>
              <FieldRef Name='ID'/>
              <Value Type='Counter'>" + mthData.ThSPData.ItemID + @"</Value>
            </Eq>
          </Where>
        </Query>
      </View>";
    
    
    ListItemCollection listItems = list.GetItems(camlQuery);
                
    mthData.ThClientContext.Load(listItems,
         items => items.Include(item => item["Description"]));
    
    mthData.ThClientContext.ExecuteQuery();

    if (listItems[0] != null)
    {
        listItems[0]["Description"] = listItems[0]["Description"] + " " + mthData.CurrentUser.Substring(mthData.CurrentUser.LastIndexOf(@"\") + 1) + " will join the coffee break!";
        listItems[0].Update();
        mthData.ThClientContext.ExecuteQuery();
    }

}

Summary

In this article we have introduced another interesting feature of Sharepoint: the event receivers. Although this feature seems to be reserved to server side applications like classic Sharepoint web parts, we have explored a way to make it available for a Silverlight application embedded in a Sharepoint web part. The simple application that we have created, i.e. a widget to quickly organize a coffee break with colleagues, is able to transfer to the client code the notification of an item added/updated to the built-in Calendar list. To do that it uses an external wcf service that exposes a HTTP Polling Duplex binding to communicate with the Silverlight part and a WSDualHttp binding to communicate with the server code of the event receiver. This example opens interesting perspectives of interaction between Silverlight and Sharepoint. In one of the next articles we will try to apply this strategy to another big chapter of the Sharepoint world: the workflows. But now, I definitely need a coffee break.

Monetize your Metro style app with Microsoft AdCenter

Thu, 08 Mar 2012 23:54:12 GMT

Today, the Microsoft Advertising team announced an update to their AdCenter SDK to include support for monetizing your Metro style apps.

In a blog post announcing the update, Ian notes that if you were using the previous SDK that there have been breaking changes and to use the updated SDK. This update includes support for XAML applications and adding the ad units couldn’t be easier. After installing their SDK (which was developed using the same distribution concepts in my post about creating a distributable custom control previous post), you will be able to use Add Reference in Visual Studio, navigate to the Windows/Extensions area and add the SDK. After that it is as simple as adding the control in your project:

        1: <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">       2:     <Border Background="Red" VerticalAlignment="Bottom">       3:         <ads:AdControl xmlns:ads="using:Microsoft.Advertising.WinRT.UI"        4:                        VerticalAlignment="Bottom" Width="728" Height="90"        5:                        AdUnitId="YOUR_AD_UNIT_ID"        6:                        ApplicationId="YOUR_APPLICATION_ID" />       7:     </Border>       8: </Grid>

Now you do, of course, have to have a pubCenter account and create the ad units beforehand in order for this to work, but that setup time didn’t take long at all.

You may have some time for your own ad units to be provisioned and start serving ads, but the ad team created some test values you can use to see how things all work. Download the Ads SDK today!

Hope this helps!

tags: adcenter, windows 8, metro, xaml, winrt, pubcenter

This work is licensed under a Creative Commons Attribution By license.

Resolving Prohibited Applications 2.7.2 Issue in Windows Phone Application Certification Process

noreply@blogger.com (Vikram Pendse) — Thu, 08 Mar 2012 18:41:00 +0000

If you are building a Windows Phone Application especially which deals with Location based Services or Location related information share,then this blogpost might come to your help.

Recently,I submitted one Windows Phone Application titled as "LocateMe" to Microsoft Windows Phone Marketplace as a normal procedure of Marketplace of Microsoft, After 2-3 Days I got email as follows :

When I logged into AppHub account, I got one PDF file having detail description of above mail along with complete error details. When I saw that PDF, It was written like :

Since such kind of rejection is very new to me,For day or two I was wondering what to do and resolved so that my application can clear certification.Since comments was clear on the test result like this :

One of my friend Mayur Tendulkar suggested that my application is using Location Service without User Consent or User's permission which indirectly crossing Privacy of the User of that application, In other way its like taking or using User's location without giving him any intimation or notification. This was the issue which my application was doing.

Solution :

I came across this blogpost which exactly states the above problem, Solution suggested there is to create a Custom Page with On/Off Switch which can Enable or Disable Location which will be provided by User of the application.

Somehow I felt it as little extra work in terms of coding and navigation to user.So I given a try to a very simple solution and I am happy that it worked for me and my application came out of this Privacy issue and got certified. I just given a message box like this :

MessageBoxResult result = MessageBox.Show("For Tracking on Map you need to Enable Location,For More Information Read Privacy Statement,Are you sure you want to enable Tracking?", "LocateMe", MessageBoxButton.OKCancel);

                if (result == MessageBoxResult.OK)
                {
                   // Turn On the Location
                }
                else
                {
                    // Turn Off the Location
                }

This saved me from that extra step of navigating to Location Setup Page and Set Reset location and come back to application.This helped me to get consent of user to use Location on his/her device.This allows user to choose to Turn On or Off the location service and does not force the user anyway and does not disclose any location data of user anywhere.

To be on safer side, I added a Privacy Statement Page in Application Bar Menu so that User can know more about in what way and terms the User location which is his/her private data is getting used.This page looks like below :

What I learn from this problem :

Its not always mandatory to have a separate page just for turning On or Off the location but it can just be done by a message box since its all about giving notification to the user and asking his/her permission to use and or share his/her location in any way.

Since I didn't came across any valid or legal solution for this problem,hence I thought I should share my experience with you all, So in future any of you got into such problem, should not be a big issue for your application during the Certification Process of Microsoft Marketplace.

Although in terms of legal aspect, this is not a valid or legal solution which is full proof,however I will claim this only as "work around" to get ride of Prohibited Applications 2.7.2 Issue in Windows Phone Application Certification.If you want More information about 2.7.2 section,I encourage you to go through following MSDN Documentation available on this subject :

http://msdn.microsoft.com/en-us/library/hh184841%28v=VS.92%29.aspx

With this, I conclude this post, The only intention of this post is to make you aware of this issue and not get lost anywhere like I got in initial go of my application development.This might help you to be extra careful while you are building your app especially location based.So make sure you keep these things in your mind and while building such kinds of apps, think from all aspects and build your own Privacy Statement or Policy according to need of your application.

Well, I recently submitted few apps and in my next post I am talking some interesting things happen last month in my town where me and my User Group friends conducted Windows Phone Training Program, till that time, Just check out my "LocateMe" app and let me know your feedback.Take care and see you soon.

Warning : Above post and solution given came out of my own experience and might not applicable as a general solution to all generic location based applications on Windows Phone Marketplace,Hence use this post as just a guideline and not as a final and/or Legal solution in any way.Only intention of this post is to create awareness about this Prohibited Applications 2.7.2 Issue in Windows Phone Application Certification Process.

Vikram.

Building a deployable custom control for XAML Metro style apps

Wed, 07 Mar 2012 22:35:52 GMT

At //build one of the surprising immediate things I heard about was folks wanting to build custom controls right away. I knew that would happen, but not so quick on something so new (WinRT). The XAML platform did not have good support for building custom controls in the Developer Preview but now that the Consumer Preview for Windows 8 and Visual Studio 11 Beta are out, there is much better support. There are two key things when thinking about custom controls: 1) building it and 2) making it consumable by developers (even if those developers are your own company). I’ll try to articulate the methods of both here.

Defining custom versus user control

There is usually some debate in the XAML community about the definition of a custom control. For the purposes of this discussion I define a custom control as a control that provides a generic.xaml, can be styled/templated and is usually encapsulated in its own assembly which can then be distributed. A custom control can contain user controls, but generally speaking does not. A typical user control scenario is one that lives within your project and not meant to be consumed by anyone outside your project.

This definition is the same whether we are talking about C++, C# or Visual Basic. Everything below applies to all languages.

Creating the custom control

The fundamentals of a custom control are that it is a class and it provides it’s own template/style. This style/template definition usually lives in a file located at themes/generic.xaml. This is the same pattern that has existed in other XAML implementations like WPF, Silverlight and Windows Phone. The pattern is no different for Metro style apps in this regard.

The creation of the most basic custom control is very simple. A Windows SDK sample for XAML User and Custom Controls is available for you to download for the quick review and core concept. My intent here is to take that a step further for the end-to-end implementation if I were a control vendor. Let’s first create our control. For our purposes we will create a control that shows an Image and allows you to specify some Text for the label. The label, however, will be prepended with some text that comes from string resources.

In Visual Studio we will create a class library project first.

NOTE: You can create a C#/VB Class Library and keep it managed, or convert it to a WinRT component. You may also create this in C++ using the WinRT Component project type. Again, these concepts are the same, the syntax will be obviously slightly different for C++ and managed code.

Once you create the class library (I called mine SimpleCustomControl and deleted the initial Class1.cs file that was created), add an item to the project. You can do this via right-clicking on the project and choosing add item. You will be presented with a few options, but the important one is Templated Control.

Watch was this does to your project as it will do 2 things:

Create a new class
Add a Themes folder and place a ResourceDictionary called generic.xaml in that folder

The themes/generic.xaml is very important if you use the DefaultStyleKey concept in your class. This is very much a convention-based approach. The contents of the class is very simple at this point, with the sole constructor and the DefaultStyleKey wired up:

        1: namespace SimpleCustomControl       2: {       3:     public sealed class LabeledImage : Control       4:     {       5:         public LabeledImage()       6:         {       7:             this.DefaultStyleKey = typeof(LabeledImage);       8:         }       9:     }      10: }

This maps to the generic.xaml definition of our control. Let’s modify our ControlTemplate in generic.xaml to be a little more than just a border:

       1: <Style TargetType="local:LabeledImage">       2:     <Setter Property="Template">       3:         <Setter.Value>       4:             <ControlTemplate TargetType="local:LabeledImage">       5:                 <Border Background="LightBlue" BorderBrush="Black" BorderThickness="2"        6:                         HorizontalAlignment="Center" Width="140" Height="150">       7:                     <StackPanel HorizontalAlignment="Center">       8:                         <Image Stretch="Uniform" Width="100" Height="100"        9:                                Source="{TemplateBinding ImagePath}" Margin="5" />      10:                         <TextBlock TextAlignment="Center" FontFamily="Segoe UI" FontWeight="Light"       11:                                    FontSize="26.667" Foreground="Black" x:Name="LabelHeader" />      12:                         <TextBlock TextAlignment="Center"       13:                                    Text="{TemplateBinding Label}" FontFamily="Seqoe UI" FontWeight="Light"       14:                                    FontSize="26.667" Foreground="Black" />      15:                     </StackPanel>      16:                 </Border>      17:             </ControlTemplate>      18:         </Setter.Value>      19:     </Setter>      20: </Style>

Now we have a place for an Image, LabelHeader and a Label. Notice that we have {TemplatBinding} statements there. This is how the template binds (duh) to values provided to the control. So our ControlTemplate is expecting these properties to exist on our control. We will create these as DependencyProperty types so we can use them in Binding, change notification, etc. In Visual Studio we can make re-use out of the ‘propdp’ code snippet that exists for WPF. It is slightly different in the last argument, but it will definitely save you a lot of typing. We’ll create 2 DependencyProperties like this in our LabeledImage.cs file:

       1: public ImageSource ImagePath       2: {       3:     get { return (ImageSource)GetValue(ImagePathProperty); }       4:     set { SetValue(ImagePathProperty, value); }       5: }       6:         7: public static readonly DependencyProperty ImagePathProperty =       8:     DependencyProperty.Register("ImagePath", typeof(ImageSource), typeof(LabeledImage), new PropertyMetadata(null));       9:        10: public string Label      11: {      12:     get { return (string)GetValue(LabelProperty); }      13:     set { SetValue(LabelProperty, value); }      14: }      15:        16: public static readonly DependencyProperty LabelProperty =      17:     DependencyProperty.Register("Label", typeof(string), typeof(LabeledImage), new PropertyMetadata(null));

We also had that LabelHeader property. This is going to be a value coming from a string resource that may be localized at some point. In our library add a folder called “en” and then within that, using the Add Item dialog in VS, add a Resources.resw file. Within that Resources.resw file add a name/value pair of name=LabelHeader.Text and value=This is an image of a… and you can save/close the file.

Now back to our class file we are going to set the value of our TextBlock by overriding our template rendering, grabbing a reference to that TextBlock and setting the value from our string resource.

       1: protected override void OnApplyTemplate()       2: {       3:     base.OnApplyTemplate();       4:         5:     TextBlock tb = GetTemplateChild("LabelHeader") as TextBlock;       6:     tb.Text = new ResourceLoader("SimpleCustomControl/Resources/LabelHeader").GetString("Text");       7: }

Now, I’m showing this way, because it is pretty verbose and there is an easier way…but you wouldn’t know it is easier unless you saw the harder way right?

First it is important to understand how these resources are indexed. You’ll notice that I’m using a ResourceLoader class to map to what looks like {component}/{resw-file-name}/{property} which is effectively right. When you create a resw file, at compile-time these get built into a PRI file. This post isn’t about this whole resource loading process, but you should definitely understand this a bit. Basically for a control creator perspective you need to understand that your string resources (and file-based resources) live in a ResourceMap that is the name of your component.

NOTE: An easy way to look at this resource indexing is to use the makepri.exe tool installed with VS. From a VS command prompt navigate to your build output and you should see a resources.pri file. Call makepri.exe dump and you’ll get an XML representation of that file you can look at. Knowing that structure is very helpful.

I said there was an easier way to get that string though. First remove the OnApplyTemplate override completely…we don’t need it for this control anymore. Now in generic.xaml change the x:Name=”LabelHeader” to the following:

       1: <Style TargetType="local:LabeledImage">       2: ...       3:     <TextBlock TextAlignment="Center" FontFamily="Segoe UI" FontWeight="Light"        4:                FontSize="26.667" Foreground="Black"        5:                 x:Uid="/SimpleCustomControl/Resources/LabelHeader" />       6: ...       7: </Style>

This will use the XAML parser way of getting the string resource (note the ResourceMap is still in the x:Uid value). Using the ResourceMap prefix is necessary when using this method as a custom control vendor.

We are done. Our control is complete.

Consuming the control from an application

We can quickly test our control by adding a new Metro style app to our project. Once we do this, make that the startup project and add a project reference to our control library. Then in the default page for our app (BlankPage or MainPage depending on your template choice), add an xmlns to the top and then consume the control:

       1: <Page       2:     x:Class="Application1.BlankPage"       3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       5:     xmlns:local="using:Application1"       6:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"       7:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"       8:     xmlns:controls="using:SimpleCustomControl"       9:     mc:Ignorable="d">      10:        11:     <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">      12:         <controls:LabeledImage ImagePath="Assets/110Orange.png" Label="Orange" />      13:     </Grid>      14: </Page>

See how the ImagePath and Label are used here? In more advanced scenarios we can bind values from our view model or other ways. When rendered the control will show like this:

This is great…but also what we call a “project-to-project” (P2P) reference. As a control vendor we want to distribute our control, not our source primarily. So we need to package this up. There are two ways you can do this.

Package your control as an Extension SDK

One of the new methods for distributing Metro style controls in VS11 is via Extension SDKs, also sometimes referred to as non-Framework SDKs. Extension SDKs are machine-wide and available to all projects once installed. They can be distributed via the Visual Studio gallery and using the VSIX mechanism…which allows for update notification in Visual Studio. There are a few intricacies that you can configure your Extension SDK but for most it will get down to three things:

Describing your SDK and what it supports
Including the binary that projects need to reference
Including any assets/files that the control relies on to render

In examining our sample above we have a few things that map to this:

Describing – our sample is a C# custom control so it will only work with managed Metro style apps, we will need to describe this in our SDK
Binary – we have one binary: SimpleCustomControl.dll
Redistributables – we have a generic.xaml and a PRI file with our string resources

The last part (redist) probably is making some existing XAML control developers scratch their heads. Why isn’t the generic.xaml embedded is what you are likely asking yourself. In Metro style apps, XAML assets are not embedded but rather exist as “loose file” assets for your control. This is why it is critical for getting the distribution model correct so that the runtime knows where to get the definitions for everything.

NOTE: This is a default method. You can, of course, use other techniques to get your assets into your binary either via string constants, other embedding techniques, etc. In doing so, however, you will now be managing all those extractions yourself rather than being able to rely on the resource APIs for Metro style apps.

The first thing we want to do is understand the structure of an SDK. These live in %ProgramFiles%\Microsoft SDKs\Windows\v8.0\Extension SDKs directory on disk. Within there you will have your own folder, version and then the layout of your SDK, as described by your manifest. Here is what our manifest (SDKManifest.xml) would look like for our control:

       1: <?xml version="1.0" encoding="utf-8" ?>       2: <FileList        3:   DisplayName="Simple Custom Control"        4:   ProductFamilyName="Simple Controls"       5:   MinVSVersion="11.0"        6:   MinToolsVersion="4.0"        7:   CopyRedistToSubDirectory="SimpleCustomControl"       8:   AppliesTo="WindowsAppContainer+WindowsXAML+Managed"      10:   MoreInfo="http://timheuer.com/blog/">      11:   <File Reference="SimpleCustomControl.dll">      12:     <ContainsControls>True</ContainsControls>      13:   </File>      14: </FileList>

We are describing the display information as well as some key data:

Display data – the title that will show up in Add Reference
CopyRedistToSubdirectory – this would be the name of your component
AppliesTo – what I support; in this I’m saying managed, XAML, Metro style apps
<File> – these are the files that describe components in my SDK (not their loose assets)

Now to create the structure. When you build the DLL your output will give you this:

We need to create the following structure that will live under the Extension SDK folder listed above:

%ProgramFiles%\Microsoft SDKs\Windows\v8.0\Extension SDKs\

--SimpleCustomControl

----1.0

------SDKManifest.xml (the file above)

------References\CommonConfiguration\neutral\SimpleCustomControl.dll

------Redist\CommonConfiguration\neutral\SimpleCustomControl.pri

------Redist\CommonConfiguration\neutral\Themes\generic.xaml

Notice the References and Redist folders. By placing these in that structure, the project will know what it needs to get type information (References) and then during running/deployment what it needs to package (Redist) and where it puts it (CopyRedistToSubdirectory). Put this layout in the directory and then when you choose add reference on a project you will see your option:

There are other configuration options for the SDKManifest that you can use and the required reading is the Extension SDK section in this MSDN article: How to: Create a Software Development Kit.

The next step for an Extension SDK is to really package it up nicely. You probably don’t want your users copy directories around all the time…and what about updates as well! Using the Visual Studio VSIX structure for this really makes it easy to do.

There are tools for Visual Studio to allow you to create a VSIX package. This requires the Visual Studio extensibility SDK to be installed and using Visual Studio professional or higher. Once you do that you can create a VSIX package and you will see the VSIX manifest designer. On the Install Targets tab you will choose Extension SDK:

We then re-create the layout structure in the VSIX project and add the Assets to the manifest. The result in the IDE looks something like this:

Now when we build we will get a VSIX installer that we can upload to the Visual Studio Gallery or distribute to our customers.

NOTE: Uploading the to Visual Studio Gallery has benefits in that once installed, any update you put in the gallery will provide notifications to the Visual Studio user than an update exists. This is done via the unique Product ID value in your manifest, so choose that value accordingly and don’t change it if you want this capability.

When a user gets the VSIX, they double-click it and see the installer:

And then they can use it as normally in Add Reference just like described above. Additional details on other VSIX deployment configurations can be found here: VSIX Deployment.

Once you have your VSIX you can upload to the Visual Studio Gallery and make it discoverable for users from within Visual Studio. Remember that this method of Extension SDK is machine-wide which is in contrast to the second method described next.

Package your control as a NuGet Package

The other option you have is to package up your control via a NuGet package. NuGet packages apply to the project and not the machine, but have the flexibility of not having to have anything installed and can travel their dependencies with the project. NuGet packages are another type of package that has a manifest that describes what the content does.

For Metro style XAML controls you will have to do a few things differently currently with the NuGet package you create. NuGet packages are based on nuspec files, which is basically a manifest describing where to get/put things in the package. You can also use the NuGet Package Explorer for a GUI way of reading/creating new packages. If you are unfamiliar with the nuspec format, using the package explorer will help you get a package created quickly.

NuGet is one area where there actually are current differences in C++ or managed code. Right now NuGet only supports managed code projects and not C++. I’m sure this may change in the future, but as of right now this applies only to managed code. For our control above here is what my nuspec file looks like:

       1: <?xml version="1.0"?>       2: <package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">       3:   <metadata>       4:     <version>1.0.0</version>       5:     <authors>Tim Heuer</authors>       6:     <owners />       7:     <id>SimpleCustomControl</id>       8:     <title />       9:     <requireLicenseAcceptance>false</requireLicenseAcceptance>      10:     <description>A simple custom control for Metro style apps</description>      11:   </metadata>      12:   <files>      13:     <file src="SimpleCustomControl\bin\Debug\Themes\Generic.xaml" target="lib\winrt\SimpleCustomControl\Themes\Generic.xaml" />      14:     <file src="SimpleCustomControl\bin\Debug\SimpleCustomControl.dll" target="lib\winrt\SimpleCustomControl.dll" />      15:     <file src="SimpleCustomControl\bin\Debug\SimpleCustomControl.pri" target="lib\winrt\SimpleCustomControl.pri" />      16:   </files>      17: </package>

This assumes that the binaries being referenced here are all relative to the nuspec file. Notice how all the files go into the lib\winrt folder and that we essentially re-create that SDK layout in our package as well.

Now when I build this with nuget.exe I get a package output. In Visual Studio (with NuGet installed) I can now right-click on a project and choose Manage NuGet Packages and browse the library of packages. In testing out my package, I create a custom library (you do this via the Settings option when you are in the Manage NuGet Packages dialog) and just point it to the folder where my nupkg file was created:

When the package is selected, the reference is added to my project and during build, all the right pieces are put in my APPX package where they need to go. Once the reference is there I build and run my project and the control renders as expected!

What about the design-time experience?

All of the methods above will allow you to view your control on the XAML design surface in Visual Studio as well. In the Extension SDK method there is actually additional affordances for you to provide additional design-time assemblies/resources to make that experience even better. Custom control developers for XAML know about this .Design.dll that is created for their projects that can improve the design-time experience for UI controls. I highly encourage you to do that if you are creating a control that is for wide distribution and not just yourself or your small group of friends.

Summary

Wow this felt like a long post…thanks for reading this far! I think developing custom controls is a great way to encapsulate specific UI and behavior you want in your application. XAML has a great ecosystem of control vendors and I fully expect them to produce controls for Metro style apps as well. Hopefully these techniques of packaging them up for distribution will help us all take advantage of them.

I also think that creating an Extension SDK *and* a NuGet package are the best ways of thinking about it as a producer. This enables your consumers to have the greatest flexibility in how they want to consume your control. Creating these distribution mechanisms may seem cumbersome at first (and there are some places where Visual Studio can improve the experience of creating/managing these manifests), but once you understand the core layout that is required for a Metro style XAML control and the fact that you now have “loose files” to consider it really becomes pretty streamlined and you can automate the creation of these pretty quickly in your build systems.

Be sure to check out these resources again:

Windows SDK: XAML User and Custom Controls (shows the C++ custom control as well)
Creating a Software Development Kit (refer to Extension SDK section)
NuGet Packages
VSIX Deployment

Here is the solution for the project I walked through above: SimpleCustomControl.zip

Hope this helps!

tags: xaml, winrt, nuget, windows 8, controls

This work is licensed under a Creative Commons Attribution By license.

Use Bing Maps in your Windows 8 XAML applications

Tue, 06 Mar 2012 20:04:32 GMT

Today the Bing team announced the release of their WinRT Bing Maps control (BETA) for XAML applications. First the goods:

Read their announcement here: Bing Maps for Metro style apps
Download the bits: Bing Maps SDK for Metro style apps (VSIX)
Read the reference API docs: Bing Maps SDK

If you are familiar with the Silverlight control, it is similar in nature to how you would use it in your XAML Metro style app. Here’s some helpful tips that are in the docs but just wanted to elevate them because we have a tendency not to read docs :-).

Installing

Installing is simple for Visual Studio. Download the VSIX file and double-click it. If you have both Express and Ultimate installed it will prompt you to install it for both installations. That’s it…you are done. If you had VS running while you did this, it would be a good idea to restart VS.

Creating a .NET XAML application with maps

Once you restart VS, you can create a new C# Metro style application. Once you have this, just right click on the project and choose Add Reference and then navigate to the Windows\Extensions section and you will see Bing Maps:

When you do this you will also want to add a reference to the VCLibs Extension at this time. Why? Well, the Map control is a native control. Adding the VCLibs dependency at this time will add the necessary information in your app’s package manifest noting the dependency and it will install any required package dependencies from the store when your user’s install it.

If you compile your application immediately you will notice an exception during build:

        1: 1>------ Build started: Project: Application17, Configuration: Debug Any CPU ------       2: 1>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(1667,5): error MSB3774: Could not find SDK "Microsoft.VCLibs, Version=11.0".       3: 1>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(1667,5): error MSB3778: "APPX" attributes were found in the SDK manifest file however none of the attributes matched the targeted configuration and architecture and no "APPX" attribute without configuration and architecture could be found. If an appx is required then the project will fail at runtime.       4: ========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

This is because by default the managed applications are “AnyCPU” configuration and the native control doesn’t have that configuration. Change your app to be either x86 or amd64 and your build will succeed. This means that yes, you will want to create multiple architecture-specific packages for your app. The good thing is during package creation, the tools in Visual Studio make this easy for you.

Creating a C++ XAML application with maps

For C++ the step is to just reference the Bing Maps extension SDK and you are done. C++ projects are always architecture-specific so you don’t have the AnyCPU situation here.

Using the Map control

You’ll need to get set up with an API key, which the getting started docs inform you about. Once you have that you are ready to use the control. I’m a fan of putting the API key in my App.xaml as a resource:

       1: <Application.Resources>       2:     <ResourceDictionary>       3:         <ResourceDictionary.MergedDictionaries>       4:             <ResourceDictionary Source="Common/StandardStyles.xaml"/>       5:         </ResourceDictionary.MergedDictionaries>       6:         <x:String x:Key="BingMapsApiKey">YOUR KEY HERE</x:String>       7:     </ResourceDictionary>       8: </Application.Resources>

And then in my Map control I can just refer to it:

       1: <Page       2:     x:Class="Application17.BlankPage"       3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       5:     xmlns:local="using:Application17"       6:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"       7:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"       8:     xmlns:bing="using:Bing.Maps"       9:     mc:Ignorable="d">      10:        11:     <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">      12:         <bing:Map x:Name="MyMap" Width="640" Height="480"       13:             Credentials="{StaticResource BingMapsApiKey}" />      14:     </Grid>      15: </Page>

Once I have those pieces in place, I’m done and can run my app and get full map interactivity. Notice the xmlns declaration in my Page with the “using:Bing.Maps” notation. Now when I run:

I can quickly add location to my app by setting the capability in the Package.appxmanifest and then wiring up the map to center on my current location…

       1: async protected override void OnNavigatedTo(NavigationEventArgs e)       2: {       3:     Geolocator geo = new Geolocator();       4:     geo.DesiredAccuracy = PositionAccuracy.Default;       5:     var currentPosition = await geo.GetGeopositionAsync();       6:         7:     Location loc = new Location() { Latitude = currentPosition.Coordinate.Latitude,        8:         Longitude = currentPosition.Coordinate.Longitude };       9:        10:     MyMap.SetView(      11:         loc, // location      12:         13, // zoom level      13:         true); //show animations)      14:        15: }

I’m excited about what the Bing team has done here and you should go grab it, read the docs and start incorporating location visualization into your Metro style XAML apps today!

Hope this helps!

tags: windows 8, bing, bing maps, winrt, xaml, geolocation

This work is licensed under a Creative Commons Attribution By license.

Building a good app settings experience in XAML

Tue, 06 Mar 2012 15:48:50 GMT

So you’ve started to kick the tires of the Windows 8 Consumer Preview and now you are building an app. You’ve read all the UX design guidelines and started looking at some great apps on the store. Perhaps you’ve also viewed the online documentation and some samples? And you’ve likely read about the contract implementations and other charms items like custom settings.

What is Settings?

When I refer to Settings here I’m referring to that consistent experience in Metro style apps when the user invokes the charms bar and chooses settings. By default every application will respond to that Settings charm. If you do nothing you will get the default experience that you may have seen:

The text items underneath your app title are referred to as commands. Each application will always get the Permissions command. When the user clicks this they will get some “about” information on your app (name, version, publisher) as well as the permissions the app has requested. As an app developer, you have to do nothing to get this experience. In addition to that the Settings pane shows some OS-level options like volume, Wi-Fi, brightness, etc. that the user can manipulate. But you, my fellow app developer, can also implement custom settings options in your app.

The custom SettingsCommand

The first thing you have to do to customize your experience is implement a custom SettingsCommand. These are implemented by first listening to when the SettingsPane will request if there are any additional commands for the current view. Settings can be global if you have something like a “master” page setup in your XAML application, but can also be specific to a currently viewed XAML page. It is not an either/or but a both. I’ll leave the exercise up to you and your app on when you need which (or both).

First thing you have to do is listen for the event. You would likely do this in your XAML view’s constructor:

        1: public BlankPage()       2: {       3:     this.InitializeComponent();       4:         5:     _windowBounds = Window.Current.Bounds;       6:         7:     Window.Current.SizeChanged += OnWindowSizeChanged;       8:         9:     SettingsPane.GetForCurrentView().CommandsRequested += BlankPage_CommandsRequested;      10: }

Notice the SettingsPane.GetForCurrentView().CommandsRequested event handler that I am using. This will get triggered whenever the user invokes the Settings charm while on this view. It is your opportunity to add more commands to that experience. In your method for this you would create your new SettingsCommand and add them to the ApplicationCommands:

       1: void BlankPage_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)       2: {       3:     ResourceLoader rl = new ResourceLoader();       4:         5:     SettingsCommand cmd = new SettingsCommand("sample",        6:         rl.GetString("SoundOptionCommandText"), (x) =>       7:         {       8:             // more in a minute       9:         });      10:        11:     args.Request.ApplicationCommands.Add(cmd);      12: }

You are able to add the text-based commands to the SettingsPane at this time. The second argument I provided above will be the text that will display as the menu. Notice how here I’m using ResourceLoader to get the string value for the text to be displayed. This is a best practice to ensure you give your user’s the best experience. Even though you may not localize now, setting this up in the beginning makes it way easier to just drop in localized strings and not have to change code. The “SoundOptionCommandText” exists as a key/value pair in a file in my project located at en/Resources.resw.

Now that I have this enabled and my CommandsRequested wired up, when I invoke the charm while my app is running you see my new command:

Yippee! Your custom commands will show before the Permissions one. The next step is to actually add something valuable to the user when they click on this new command…and that means some UI.

The custom Settings UI

When your user clicks your new shiny command you want them to see some shiny, but relevant UI. If you were using HTML/JS you would use the WinJS.UI.SettingsFlyout control to do a lot of this for you. There is a sample of this for comparison located in the Windows 8 developer samples. In XAML there isn’t the literal ‘SettingsFlyout’ control equivalent, but a set of primitives for you to create the experience. There are a few pieces you will need in place.

First I create a few member variable helpers to store some items away:

_windowBounds – this is the Rect of the current Window size. I will need this for proper placement
_settingsWidth – The UX guidelines suggest either a 346 or 646 wide settings flyout
_settingsPopup – the Popup that will actually host my settings UI

The Popup is the important piece here. It is the primitive that provides us with the “light dismiss” behavior that you see a lot in the Windows 8 experience. This is where you have a menu/dialog and you simply tap away and it dismisses. Popup.IsLightDismissEnabled gives us that functionality in our control that we will need in XAML. Now let us go back to where we created our custom SettingsCommand and add back in the creation of our Popup and custom UI:

       1: SettingsCommand cmd = new SettingsCommand("sample", rl.GetString("SoundOptionCommandText"), (x) =>       2: {       3:     _settingsPopup = new Popup();       4:     _settingsPopup.Closed += OnPopupClosed;       5:     Window.Current.Activated += OnWindowActivated;       6:     _settingsPopup.IsLightDismissEnabled = true;       7:     _settingsPopup.Width = _settingsWidth;       8:     _settingsPopup.Height = _windowBounds.Height;       9:        10:     // more to come still      11: });

Notice that we are creating the Popup, setting the width to the value specified in _settingsWidth and the height to whatever the current height of the active Window is at this time. We are also listening to the Activated event on the Window to ensure that when our Window may be de-activated for something that a user may not have done via touch/mouse interaction (i.e., some other charm invocation, snapping an app, etc.) that we dismiss the Popup correctly. here is the OnWindowActivated method definition:

       1: private void OnWindowActivated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)       2: {       3:     if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)       4:     {       5:         _settingsPopup.IsOpen = false;       6:     }       7: }       8:         9: void OnPopupClosed(object sender, object e)      10: {      11:     Window.Current.Activated -= OnWindowActivated;      12: }

Notice we are also listening for the Popup.Closed event. This is so that we can remove the OnWindowActivated method to avoid any reference leaks lying around. Great, now let’s put some UI into our Popup.

For my example here I’m using a UserControl that I created to exhibit my settings needs. Your use may vary and you may just need some simple things. As we know in XAML there is more than one way to implement it in this flexible framework and this is just an example. Going back to our custom SettingsCommand we now create an instance of my UserControl and set it as the Child of the Popup, setting appropriate Width/Height values as well:

       1: SettingsCommand cmd = new SettingsCommand("sample", rl.GetString("SoundOptionCommandText"), (x) =>       2: {       3:     _settingsPopup = new Popup();       4:     _settingsPopup.Closed += OnPopupClosed;       5:     Window.Current.Activated += OnWindowActivated;       6:     _settingsPopup.IsLightDismissEnabled = true;       7:     _settingsPopup.Width = _settingsWidth;       8:     _settingsPopup.Height = _windowBounds.Height;       9:        10:     SimpleSettingsNarrow mypane = new SimpleSettingsNarrow();      11:     mypane.Width = _settingsWidth;                          12:     mypane.Height = _windowBounds.Height;      13:        14:     _settingsPopup.Child = mypane;      15:     _settingsPopup.SetValue(Canvas.LeftProperty, _windowBounds.Width - _settingsWidth);      16:     _settingsPopup.SetValue(Canvas.TopProperty, 0);      17:     _settingsPopup.IsOpen = true;      18: });

Now when the user clicks the “Sound Options” they will see my custom UI:

And if the user taps/clicks away from the dialog then it automatically dismisses itself. You now have the fundamentals on how to create your custom UI for settings.

Some guiding principles

While this is simple to implement, there are some key guiding principles that make this key for your user’s experience. First and foremost, this should be a consistent and predictable experience for your users. Don’t get crazy with your implementation and stay within the UX design guidelines to ensure your app gives the user confidence when using it. Additionally, here are some of my other tips.

Header Elements

You’ll notice above that the header of the custom UI is specific and contains a few elements. The title should be clear (and again be ideally localized) in what the settings is doing. The background color would match your app’s branding and likely be the same as the value of BackgroundColor in your app’s package manifest. Putting your logo (use the same image you use for your SmallLogo setting in your package manifest) helps re-enforce this is the setting only for this app and not for the system. Additionally providing a “back” button so the user can navigate back to the root SettingsPane and not have to invoke the charm again if they wanted to change other app settings. In my example, the button simply just calls the SettingsPane APIs again to show it:

       1: private void MySettingsBackClicked(object sender, RoutedEventArgs e)       2: {       3:     if (this.Parent.GetType() == typeof(Popup))       4:     {       5:         ((Popup)this.Parent).IsOpen = false;       6:     }       7:     SettingsPane.Show();       8: }

You may be curious to see the XAML used for my custom UI and I’ve included that in the download at the end here as not to take up viewing area here on the key areas.

Immediate Action

Unlike some modal dialog experiences, the Settings experience should create immediate change to your application. Don’t put confirmation/save/cancel buttons in your UI but rather have the changes take effect immediately. For instance in my sound example, if the user invokes the Settings charm, clicks/taps on my Sound Options and toggles the Sound Effects option on/off, then the sound should immediately turn on/off. Now implementing this philosophy may change the way you create your custom UI and/or UserControl, but take that into account when designing.

Light Dismiss

This concept of light dismiss is about honoring the user’s action and not requiring interruption. This is why we use the Popup.IsLightDismissEnabled option as we get this capability for free. By using this if the user taps away to another part of the application or Window, then the Popup simply dismisses. Don’t hang confirmation dialogs in there to block the user from doing what they want, but rather honor the context change for them.

Summary

The Windows platform has afforded us developers a lot of great APIs to create very predictable and consistent user experiences for the common things our apps will need. Settings is one of those simple, yet effective places to create confidence in your application and a consistent Windows experience for your users. Stick to the principles:

Set up custom commands that make sense for the context of the view and/or for the app as a whole
Create and show your UI according to the UX design guidelines
Have your settings immediately affect the application
Ensure that you use the dismiss model

Combine all these and you will be set. Everything I talk about above is supported in XAML and WinRT. My example is in C# because I’m most proficient in that language. But this 100% equally applies in C++ as well and should be identical in practice.

You may be saying to yourself wouldn’t this make a great custom control? Ah, stay tuned and subscribe here :-)!

Hope this helps!

Download Sample: SettingsExample.zip

tags: windows 8, xaml, winrt, settings, appbar, winjs

This work is licensed under a Creative Commons Attribution By license.

Known issues with RIA Services V1 SP2 on Visual Studio 11 Beta

Tue, 06 Mar 2012 00:46:55 GMT

RIA Services V1 SP2 works great with With Visual Studio 11 Beta. There are a few small issues to be aware of, check out my post here: http://hashtagfail.com/post/18631640309/ria-sp2-vs11-beta.

CSS3 Background Gradients

Mon, 05 Mar 2012 18:38:10 GMT

CSS3 background gradients can add jut the right amount of pop to a web page when used properly, but its important to know how they work differently in the major browsers.

This month in my Papa’s Perspective column in Visual Studio Magazine I discuss CSS3 background gradients and show some tips on how to use them across Chrome, Safari, Firefox and IE. It’s a quick article that will help get you jump started and coding with them in just a few minutes. You can check out my article on CSS3 background gradients here.

SilverlightShow Interview with Tim Huckaby - Keynote Speaker at Visual Studio Live! Las Vegas 5-day Conference

editorial@silverlightshow.net (Silverlight Show ) — Mon, 05 Mar 2012 14:27:00 GMT

In this SilverlightShow interview, we talk with Tim Huckaby – keynote speaker on the 3^rd day of Visual Studio Live! Las Vegas conference (March 26-30, 2012). The keynote will be focused on The Future of User Experience: The Natural User Interface (NUI).
As we have announced, SilverlightShow is the Social Media Premiere Partner for this conference and we are sending one SilverlightShow member to this conference for free.

About Tim: Tim Huckaby is focused on the Natural User Interface (NUI)- Touch, Gesture, and Neural in Rich Client Technologies like HTML5, Silverlight, WPF, & IOS on a broad spectrum of devices that include computers, tablets, the Surface, the Kinect, and mobile devices.

Tim has been called a “Pioneer of the Smart Client Revolution” by the press. Tim has been awarded many times for the highest rated technical presentations and keynotes for Microsoft and many other technology conferences around the world. Tim is consistently rated in the top 10% of all speakers at these events. Having worked for or with Microsoft for over 20 years, Tim has been on stage with, and done numerous keynote demos for many Microsoft executives including Bill Gates and Steve Ballmer.

Tim founded InterKnowlogy, experts in .NET and Microsoft Platforms in 1999 and Actus Interactive Software in 2011 and has over 30 years of experience including serving on a Microsoft product team as a development lead on an architecture team on a Server Product. Tim is a Microsoft Regional Director, a Microsoft MVP and serves on many Microsoft councils and boards like the Microsoft .NET Partner Advisory Council.

SilverlightShow: Hi Tim! Your upcoming keynote at Visual Studio Live!Las Vegas is one of the most awaited ones, according to the conference organizers. What aspect or direction of development of Natural User Experience (NUI) is currently important for developers, what’s bringing them to your keynote?

TH: Well, thanks for the kind words. Clearly the conference organizers are friends of mine. I really am looking forward to doing this keynote for numerous reasons. Firstly, because I will strive to make the message clear: You may not be doing natural user interfaces in your software solutions now, but you will be. It’s just a matter of time. I reinforce that with demos of some of the most compelling NUI software out there. And then I will speculate about the future of NUI with more compelling use cases. I bring it back to reality by going through the past 30 years of user interfaces. I was there when the mouse came out. I remember thinking how unnatural is was to take my right hand off the keyboard and grab the mouse. Now we consider that second nature. I will argue that in a timely manner we’ll say the same thing about waving at software…using simple gestures to manipulate the interface.

SilverlightShow: What are the main difficulties developers have when building NUI in their applications, and how will the technology evolve to allow easier creation and integration of such interfaces?

TH: Great question. I find it so interesting that the challenges of NUI software are not as much technical as they are of usability. Let’s face it. CRUD applications are simply not a good use case for NUI. Nothing that I know of can produce text as quickly as a keyboard. So finding the right use cases for touching, or gesturing or voice controlled software is the real challenge. It’s also very interesting to me that Microsoft has pretty much dominated and paved the way for multi-touch support in .NET for years. Yet, it wasn’t until that magically expensive Apple device to make multi-touch a mainstream way to use software. Now with the Kinect for Windows SDK shipping we have an extremely powerful and compelling dev stack for NUI based applications.

SilverlightShow: NUI is already available in Win8, mobile platforms, Kinect and others. On which platforms do you think it will have the biggest potential to evolve, to become a standard, and push related innovations?

TH: Let’s add Windows 7 in all forms, and the Microsoft Surface to your list. And then we can say on the Microsoft and IOS platforms we will have multi-touch covered end to end. What I tell developers is that from here on in you are going to get multi-touch capability in the hardware whether you want it or not. So, now is the time to start leveraging it. Kinect clearly is an awesome differentiator on the Microsoft side. But, what is most exciting to me, and is really not well known, is that the HTML5 spec calls for multi-touch capability and programmatic access. In that respect the Multi-touch part of NUI truly can be called a standard.

SilverlightShow: Can you name 1 or 2 applications that are best using NUI at this current moment, and why?

TH: Well, let’s be clear. I’m a Kinect fanatic. I have not seen anything so powerful and cool from Microsoft in years. So, that being said, the work we do in health care and life sciences is truly futuristic cool because of the complexity, the 3d, and the gesture and voice controlled interfaces with Kinect. I’ll be demoing a good number of these apps in my keynote. On the other side of the spectrum of Kinect is simple gesture based interfaces to control an interactive kiosk. In many environments, especially in a public place you do not want to touch anything. So a simple wave of the right hand from right to left is a very legitimate use case for next. An important part of my professional life right now is interactive kiosk and active digital signage solutions, and with Actus Interactive software we plan to rock that world. In fact, we already are.

SilverlightShow: How do you see the future of NUI? In which areas of life should we also expect to see NUIs very soon?

TH: In the keynote I will talk about the future. And I will show off some of the innovative work that is being done now for the future of NUI. It’s high tech stuff: it’s holodeck like software and it’s neural interfaces to software. Imagine a world where you think at software to use it. it’s not so far in the future. And Microsoft research is already doing proofs of concepts in totally virtual environments. Crazy exciting stuff.

SilverlightShow: How and where may conference attendees meet you during the conference?

TH: I just love talking to technologists… not just developers, but everyone involved in the computing lifecycle. So, it is absolutely my pleasure to hang out and talk to as many VSLive attendees as possible.

Thanks Tim for this interview! Wish you, as well as our free pass winner a great conference event!

Do you know about applications that give an outstanding example of successful use of Natural User Interfaces? Share it with us by commenting below this interview!

KnockoutJS's Built-in Bindings

Fri, 02 Mar 2012 15:40:55 GMT

Bindings are the glue between the data values in the source (JavaScript objects) and the presentation in the target (the DOM). I continue to explore the KnockoutJS JavaScript library by examining Knockout’s various built in bindings in this month’s Client Insight column in MSDN Magazine, that just hit the shelves.

<htmltag     data-bind="built-in-binding:vm-property1,         another-built-in-binding:vm-property2"></htmltag>

If you are not familiar with Knockout, you may want to first read the overview article on Knockout in last months’ Client Insight column here first.

Knockout is ideal for building single page web apps (SPA’s) and works great with the MVVM pattern with JavaScript and HTML. If you are interested in learning Knockout from end to end, you can check out my Pluralsight course Building HTML5 and JavaScript Apps with MVVM and Knockout, which contains over 40 examples you can download with your Pluralsight subscription.

And if you like it, please be sure to share it.

Physamajig is a First Apps Contest Winner!

andy@andybeaulieu.com — Wed, 29 Feb 2012 21:02:00 GMT

Physamajig was selected as one of the Winning entries of the Windows 8 First Apps Contest! Microsoft unveiled the 8 Winners today in Barcelona while unveiling the Consumer Preview of Windows 8.

[read the Windows Store blog post]

[see the video about the contest winners]

[the contest site also has a nice summary]

If you've downloaded the Consumer Preview, you can find Physamajig in the Store under the Entertainment Category:

I'll be continuing to add some goodies to Physamajig, and here is a little sneak peek of something in the next version: Textures! I really like how these textures make your creations seem more toy-like!

Windows Phone SDK 7.1.1 Update CTP

Wed, 29 Feb 2012 17:25:00 GMT

We recently released an update to the Windows Phone SDK that provides extra tools and features for developing for 256-MB devices. Most importantly, this tools update contains a new 256-MB emulator to test your applications. Keep in mind however, that this release does not include the necessary license to publish your apps to the Marketplace, so you should use it to test your apps for now and plan on publishing them after the final release of this update. You can expect the final release to be happening soon.

We've also updated the docs to help you develop for 256-MB devices. You will find a new icon in relevant places to call to call out considerations for developing for 256-MB devices. If you want to dig into the docs, a good place to start is the overview topic, Developing for 256-MB Devices. If you are developing with the XNA Framework, you can check out a new topic on reducing memory use in XNA games.

Making sure your applications run well on 256-MB devices will provide you with the greatest market reach for your apps, so check out the tools and docs today!

SilverlightShow Interview with Billy Hollis - Presenter in a Visual Studio Live! Las Vegas Workshop

editorial@silverlightshow.net (Silverlight Show ) — Tue, 28 Feb 2012 13:44:14 GMT

In this SilverlightShow interview, we talk with Billy Hollis – the presenter at the most-awaited workshop at Visual Studio Live! Las Vegas conference (March 26-30, 2012) - ‘Creating Today’s User Experiences - An Entry Point for Developers’.
As we have announced, SilverlightShow is the Social Media Premiere Partner for this conference and we’ll be sending one SilverlightShow member to this conference for free.

About Billy: Billy Hollis is an author and software developer from Nashville, Tennessee. Billy is co-author of the first book ever published on Visual Basic .NET, VB .NET Programming on the Public Beta. He has written many articles, and is a frequent speaker at conferences. He is the Regional Director of Developer Relations in Nashville for Microsoft, and runs a consulting company focusing on user experience design and rich client applications. You can visit his website at: www.billyhollis.com

SilverlightShow: Hi Billy! According to info from the kitchen of Visual Studio Live!Las Vegas, your workshop has so far attracted most interest by the conference registrants. The topic of the workshop is: ‘Creating Today’s User Experiences - An Entry Point for Developers’. Why do you think user experience has become an important topic for developers right now? Isn’t it better for developers to just leave this work to a UX expert, and focus on development only?

BH: The biggest reason developers are shifting focus to user experience is simple. Apple is kicking us to the curb in some key spaces. Executives are demanding, for example, that corporate apps be made available on iPads, and the users just expect the experience on such devices to be excellent.

I believe that the notion that developers can delegate user experience design to a UX expert, and then just stop worrying about it, is just not feasible for most applications. First, such UX experts are hard to find. If you’re in, say, Springfield, Illinois, where do you get one? Certainly small to medium teams often can’t find or can’t afford such help. Second, designing great user experience requires a deep understanding of the application domain. Developers usually have that, and pure designers generally don’t. Designers do a lot better in the consumer space, because they are themselves consumers, but it’s much harder for them to put themselves inside the mind of a typical corporate application user.

Finally, I think the best designs, particularly for complex business applications, come through collaboration. Even if a designer is involved, the end product will be better if there is collaboration with developers, and developers will be better collaborators if they understand the principles and speak the language of design.

SilverlightShow: What are some of the key user experience concepts you plan to touch upon in this workshop, why should attendees join it?

BH: I’ll be covering over two dozen key concepts, out of a universe of about 150 design principles that I’ve studied in the past five years. The ones I zero in on are the ones that have helped me most in doing designs for my own clients.

I cover them in families of related concepts. One family concerns how users efficiently select options and navigate through an application. It includes Hick’s Law, inattentional blindness, and gestalt principles, among others. These principles are mostly concerned with how the user’s visual and cognitive systems work. Then there’s another family of design principles based on the human preference for natural things. It includes whitespace, proper use of gradients and animation, layering to get 3D effects, and so forth.

Then I talk some about purely aesthetic concepts, plus ideas such as mapping and affordances. I also discuss the need to use context to decide good designs, because sometimes design principles involve tradeoffs, and the right balance depends on circumstances.

SilverlightShow: That sounds like a lot of material! Can attendees really learn all that in one day?

BH: It is a lot, and that’s why I used the term “entry point” in the workshop title. I can’t teach everything, but I can build a skeleton that will enable attendees to keep learning on their own.

But I think it’s quite true that they would walk out with their heads spinning if I just talked all day. So instead, we do regular exercises to help them apply the concepts themselves, and I require class interaction at certain points. That makes it real to them.

Some exercises are just a minute or two – for example, analyzing an elevator panel to see what’s wrong with it. Others take as long as twenty minutes. I think there are about ten or twelve exercises scattered throughout the day. In that sense, it really is a workshop, not a day long technical lecture session.

SilverlightShow: What knowledge do you expect attendees to gain after this workshop, and how would you advise them to continue their education?

BH: First, they should walk out with a sense of how important this material is. In fact, I actually scare them at certain points. I’ve seen an entire dominant ecosystem of this industry become irrelevant in ten years – IBM, from 1985 to 1995. I don’t want that to happen to the Microsoft side of the industry, and meeting rising user expectations is, I think, one of the essential foundations to prevent that.

Then I hope they find out if this kind of work resonates with them. I believe almost all developers can do a lot better in user experience design than they realize, but some just don’t take to it. Others get really lit up about it.

Finally, they will have learned the raw essentials, and be directed to resources that will take them further. If they really like this area, they’ll be studying it for years. But I think they can take some of the basic ideas out of the workshop and begin applying them in their own projects the day they get back home.

SilverlightShow: What is the trickiest part in building user interfaces, where do you think developers stumble most?

BH: The trickiest part by far is breaking out of the ruts they’ve formed from old technologies. Modern technologies, such as HTML5 and XAML, give us enormous freedom in the way we interact with the user. But most developers have ingrained habits to just divide the screen up into rectangles and pour something into each one. Some of my exercises are designed, in fact, primarily to force them out of their ruts.

Another tricky part is finding the right level of understanding of the problem space before beginning design. With our current emphasis on agile, a lot of developers interpret that to mean they need to get down to coding really early in the process, and figure out requirements as they go. For certain phases of development, that works OK, but to come up with, say, the central navigation theme for the entire application, it doesn’t. A certain breadth of understanding of the problem space is needed to do that, and even then usually some experimentation and user feedback is needed to get a good design.

SilverlightShow: Most SilverlightShow community members are already quite fluent with Windows Phone development and have created one or more applications for this platform. In your opinion, to what extent does user experience contribute to the success of such an application, compared to functionality?

BH: Functionality comes first, in the sense that no one will use an application without functionality they need, regardless of how pretty or well designed it is.

However, if you assume that most developers can get the functionality part figured out, then user experience becomes the differentiator. User experience also weighs as heavy as functionality on how much value the user perceives in the typical application. Plus, to be blunt, really bad user experience repels users, especially when they’ve become accustomed to better UX in other apps.

I like to put it like this. For most of our careers, success has been measured by our ability to make something possible. That’s not enough anymore. Now, we are also expected to make it easy.

SilverlightShow: How and where may conference attendees meet you during the conference (outside the workshop)?

BH: Oh, I’m pretty easy to find. I spend a fair amount of time in the areas outside sessions, lounging around, and I’m there specifically for people to come up and talk if they need to. I usually come to lunch too, even though I don’t usually eat lunch, and anyone who sees me wandering through the lunch hall is welcome to flag me down for a discussion. Finally, I’ll be MC at the evening event, Wild Wednesday. I do about twenty minutes of comedy ranting there, plus draw the tickets to give away prizes and such. I’m usually available afterwards for a conversation or two.

Thanks Billy for this interview! Wish you, as well as our free pass winner, a successful workshop and conference event!

Do you, as a developer, manage to create good user experience for your apps, what are the difficulties you face? Feel free to comment below this interview.

Goodbye and Hello!

Mon, 27 Feb 2012 14:00:00 +0000

Windows Phone + SignalR = Awesome Possibilities!

editorial@silverlightshow.net (Samidip Basu ) — Mon, 27 Feb 2012 04:29:00 GMT

Real-time communication. Many software applications on variety of platforms & form factors have a genuine need for it. But persistent networks, real-time connectivity & asynchrony continue to challenge us developers in building such applications. Is there a silver lining? Could we have near-real-time communication in our mobile apps? Imagine the possibilities.

Download Source Code

Live Demo

Now, let’s do something a little fun before we get to the crux of what this article is about.

Don't miss...

All SilverlightShow Ebooks

How about a live demo of the sample application in action? Works from anywhere on earth with a data connection; in fact, more & diverse the user demographics, the merrier. Let’s do this:

This demo will work with your Windows Phone emulator; but better with your unlocked Windows Phone that can side-load apps, given XAP or source code.
Download the Source Code & extract the Windows Phone solution.
Load in Visual Studio, build & Deploy to emulator/phone.
The sample Windows Phone app essentially shares your location & connects you to a backend SignalR server for continuous real-time chat.
Go to http://signalrserver.cloudapp.net/ and keep it open.
Fire up the app and give yourself a name for the Chatroom.
Share your location & join the fun.
If on a Windows Phone, you should see a pushpin on the Bing map for your actual location (if allowed by your settings). On the emulator, you’ll start out at the mothership, that is, Seattle. Feel free to use the location simulator to fake your position.
See yourself pop up in the chat dialog box?
Now fire away what you want to say .. no profanity please.
See what you say show up in your phone’s chat dialog & on the Server almost immediately? Fun, eh?
Exit the chatroom and you’ll see yourself leave, along with a disappearing pushpin on map.

The result should be something like this:

I’m hoping if we keep the site running, we can see Pushpins show up on different parts of the world map; the Bing map used should zoom in & out to accommodate all pins. Having said that, the server side code isn’t hosted on massive hardware. I’ll try to keep it up; but if load or other issues force it down, please feel free unpack the server code & run it locally. It is a simple MVC3 app that should run just fine on your machine. Only change you would have to do is to point your Windows Phone app to Localhost, instead of the above server. So, let’s hope the site stays up & we can see folks from different places show up on live map & chatroom.

Introduction

SignalR is an async persistent connection library for client-server communication that aids in building real-time, multi-user connected applications across multiple platforms. The connection between clients & server is persisted over best possible transport mechanism, which could be a combination of long polling, periodic polling & sockets. The point is the transport layer is abstracted away to provide a seamless persistent connection for ease of development in making connected applications across the web, mobile & other form factors.

SignalR was started by Damian Edwards & David Fowler from the ASP.NET team and is now an OSS on GitHub (https://github.com/SignalR/SignalR). Want to chat with these & other cool folks working with SignalR? Join the conversations @ http://jabbr.net/#/rooms/signalr. The easiest way to start using SignalR is to utilize the Nugets as need in your application. They are:

SignalR - Package for SignalR.Server and SignalR.Js
SignalR.Server - Server components needed for SignalR endpoints
SignalR.Js - Javascript client for SignalR
SignalR.Client - .NET client for SignalR
SignalR.Ninject - Ninject dependeny resolver for SignalR

These can be incorporated in your project by using the visual Nuget Library Manager or the command-based Management console. This one statement gets you all dependencies:

While there are other technologies that have tried to solve the real-time communication problem, like Socket.IO or HTML5 WebSockets, few do it as simply as SignalR and support cross-platform between the web and mobile platforms like Windows Phone, iOS & Android (through Mono). While the low-level PersistenceConnection class might give you more control, most times the abstraction over it called the Hub class & your implementation of it, will provide easy persistence between client & Server. Want to learn more about SignalR? Try these wonderful posts:

The Sample

So, having learnt a little about SignalR, do you think it would work with and have applications in Windows Phone development? Absolutely! Real-time communication with a backend server on a personal device like the Windows Phone has potentially tons of ways to leverage the technology in Apps. Allow me to show you two here – mapping Windows Phone App users across the globe and real-time chat dialog between multiple Windows Phones & the web. The rest is up to your imagination ..

The Server

You obviously have choices here. I started with a default MVC3 web application; but wanted to change the look to showing mapping & chat dialog. First up, let’s get it ready to be a SignalR server. Here’s how to add the Nuget package:

With that, we know what a Hub is. Let us extend it to make something our own. We essentially want to uniquely keep track of Windows Phone users using our app; so let’s define a class for the phone clients:

   1: // Individual Phone clients.   2: public class PhoneClient   3: {   4:     public string PhoneClientId { get; set; }   5:     public float Latitude { get; set; }   6:     public float Longitude { get; set; }   7: }

Next, let’s add functionality to add phone clients to Hub, disconnect & broadcast messages to all:

   1: // The Hub of communication.   2: public class MessagingHub : Hub   3: {   4:     private static List<PhoneClient> PhoneClientList = new List<PhoneClient>();           5:     6:     public void JoinFromPhone(string phoneID, float latitude, float longitude)   7:     {   8:         PhoneClient phoneClientToAdd = new PhoneClient();   9:         phoneClientToAdd.PhoneClientId = phoneID;              10:         phoneClientToAdd.Latitude = latitude;  11:         phoneClientToAdd.Longitude = longitude;  12:    13:         PhoneClientList.Add(phoneClientToAdd);  14:         Clients.addClient(phoneClientToAdd);  15:         this.Caller.addClients(PhoneClientList.ToArray());  16:     }  17:    18:     public void Disconnect(string phoneID)  19:     {  20:         PhoneClient client = null;  21:    22:         foreach (PhoneClient existingClient in PhoneClientList)  23:         {  24:             if (phoneID == existingClient.PhoneClientId)  25:             {  26:                 client = existingClient;  27:                 break;  28:             }  29:         }  30:    31:         PhoneClientList.Remove(client);  32:         Clients.removeClient(client);  33:     }  34:    35:     public void PushMessageToClients(string message)  36:     {  37:         Clients.addChatMessage(message);  38:     }          39: }

Wondering what some of the function calls are within our Hub? Well .. that’s the magic! These are actually JavaScript methods defined in our web UI view. So, let’s shoot for a UI like this (in the Index view off our Home controller).. Chat dialog on left & Bing Maps to show the pushpins on the right:

Here’s what’s on the view, along with subtle styling included in the downloadable code:

   1: <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>   2: <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>   3: <script src="@Url.Content("~/Scripts/jquery.signalR.min.js")" type="text/javascript"></script>   4: <script type="text/javascript" src="@Url.Content("~/signalr/hubs")"></script>   5:     6: <div id='container'>   7:     <div id='chat'>   8:         <b>Chatroom:</b>   9:         <br /><br />  10:         <input type="text" id="message" maxlength="20" />  11:         <input type="button" id="broadcast" value="Broadcast" />  12:         <input type="button" id="clear" value="Clear" />  13:         <br /><br />  14:         <ul id="chatdialog"></ul>          15:     </div>  16:     <div id='map'></div>  17: </div>  18:    19: <div id="legend">  20:     <label for="userCount">Mapped Users: </label>  21:     <span id="userCount">0</span>  22: </div>

The Bing Maps on the page would be using the Bing Maps Ajax/JavaScript SDK. If you need to use this on your own, please make sure to get yourself a developer ID that you could pass along to Bing; get it HERE.

Now, most of the connectivity magic offered by the SignalR server will be in the code bits below. You’ll see how we open a connection to our SignalR Hub from the web client and define JavaScript methods to manipulate the UI that will be used by the Hub. You’ll notice how we add/remove PushPins on the map using JavaScript & location of phone clients joining the Hub. Also, you’ll see the code sending off Chat messages typed in from the web and appending those received from the server. So, here goes:

   1: <script type="text/javascript">   2:     3:  var map = null;   4:     5:  $(function ()    6:  {   7:      // Create the connection to our SignalR Hub.   8:      var signalRHub = $.connection.messagingHub;   9:    10:      // Define some Javascript methods the server-side Hub can invoke.  11:    12:      // Add a new client to the map.  13:      signalRHub.addClient = function (client)   14:      {  15:          var pins = getPushPins();  16:          addClient(client);  17:          centerMap();  18:          $("#userCount").html(pins.length + 1)  19:      };  20:    21:      // Remove a client from the map.  22:      signalRHub.removeClient = function (client)   23:      {  24:          for (var i = map.entities.getLength() - 1; i >= 0; i--) {  25:              var pushpin = map.entities.get(i);  26:              if (pushpin instanceof Microsoft.Maps.Pushpin)   27:              {  28:                  if (pushpin.getLocation().latitude == client.Latitude && pushpin.getLocation().longitude == client.Longitude)   29:                  {  30:                      map.entities.removeAt(i);  31:                      var pins = getPushPins();  32:                      $("#userCount").html(pins.length)  33:                  }  34:              }  35:          }  36:      };  37:    38:      // Add chat messages from server to dialog.  39:      signalRHub.addChatMessage = function (message)   40:      {  41:          $('#chatdialog').append('<li>' + message + '</li>');  42:      };  43:    44:      // Click event-handler for broadcasting chat messages.  45:      $('#broadcast').click(function ()   46:      {     47:          // Call Server method.  48:          signalRHub.pushMessageToClients($('#message').val());  49:      });  50:    51:    52:      // Start the SignalR Hub.  53:      $.connection.hub.start(function ()   54:      {  55:          showMap();  56:      });  57:    58:      // Click event-handler for clearing chat messages.  59:      $('#clear').click(function ()   60:      {  61:          $('ul li').remove();  62:      });  63:  });  64:    65:    66:    67:  function addClient(client)   68:  {  69:      var location = new Microsoft.Maps.Location(client.Latitude, client.Longitude);  70:      var pushpin = new Microsoft.Maps.Pushpin(location, { text: 'P'});  71:      map.entities.push(pushpin);  72:  }   73:    74:  function showMap()   75:  {          76:      var mapOptions = {  77:          credentials: "AuoGTNP56_kmS3IKUa0E-p_PBX1oWJO6WTpw2xFd-hZqFsffSh3FhKGXhFHQD52y",  78:          center: new Microsoft.Maps.Location(39.80, -98.55),  79:          zoom:5  80:      }  81:      map = new Microsoft.Maps.Map(document.getElementById("map"), mapOptions);                  82:  }       83:    84:  function centerMap()   85:  {  86:      var pins = getPushPins();  87:    88:      var locations = [];          89:      for (var i = pins.length-1; i>=0; i--)   90:          locations.push(pins[i].getLocation());  91:        92:      map.setView({  93:          bounds: Microsoft.Maps.LocationRect.fromLocations(locations),  94:          zoom: 6  95:      });  96:        97:   }  98:    99:  function getPushPins()  100:  { 101:      var pins = []; 102:      for (var i = map.entities.getLength() - 1; i >= 0; i--)  103:      { 104:          var pushpin = map.entities.get(i); 105:          if (pushpin instanceof Microsoft.Maps.Pushpin)  106:          { 107:              pins.push(pushpin);         108:          }  109:      }  110:      return pins; 111:  } 112:   113: </script>

The Windows Phone Client

Now that we have the SignalR server all set up and waiting for interaction from phone clients, let us develop our Windows Phone client app. We’ll build a regular one page Windows Phone application just to demo functionality & connectivity to the SignalR Hub. Let’s begin by adding the appropriate SignalR nuget as below:

As we launch the app, we ask for a one-time user name so the phone client can be identified in the chatroom. For brevity, let us skip showing the simple XAML markup; you may find it in the downloadable code. Both UIs as below:

As the user indicates with button click that he/she wants to join, we use location awareness in Windows Phone to figure out current geo-coordinates of the user with a physical device or read mock emulator inputs. Here’s some code:

   1: private GeoCoordinateWatcher gcw;   2: private double phoneLatitude;   3: private double phoneLongitude;   4:     5: private void connectButton_Click(object sender, RoutedEventArgs e)   6:  {   7:      if (gcw == null)   8:      {   9:          // Look for present geo-location with GPS.  10:          gcw = new GeoCoordinateWatcher(GeoPositionAccuracy.High);  11:          gcw.MovementThreshold = 10;  12:          gcw.StatusChanged += new EventHandler<GeoPositionStatusChangedEventArgs>(gcw_StatusChanged);  13:      }  14:    15:      gcw.Start();              16:  }

Once we have location, it’s time to fire up the reference to the SignalR server and try to connect. Here’s the sample code:

   1: IHubProxy SignalRServerHub;   2: HubConnection connection = new HubConnection("http://localhost:49968/");   3:     4: private void gcw_StatusChanged(object sender, GeoPositionStatusChangedEventArgs e)   5:  {   6:      if (e.Status == GeoPositionStatus.Ready)   7:      {   8:          // Get position from watcher & stop it to conserve battery.   9:          phoneLatitude = gcw.Position.Location.Latitude;  10:          phoneLongitude = gcw.Position.Location.Longitude;  11:          gcw.Stop();  12:    13:          // Reference to SignalR Server Hub & Proxy.                        14:          var messagingHub = connection.CreateProxy("SignalRServer.MessagingHub");  15:          SignalRServerHub = messagingHub;                 16:    17:          // Fire up SignalR Connection & share location.    18:          connection.Start().ContinueWith(task =>  19:          {  20:              if (task.IsFaulted)  21:              {  22:                  // Oopsie, do some error handling.  23:              }  24:    25:              // Join the Server's list of mapped clients.  26:              messagingHub.Invoke("JoinFromPhone", deviceID, phoneLatitude, phoneLongitude).Wait();  27:    28:              // Tell the chatroom that you joined.  29:              SignalRServerHub.Invoke("PushMessageToClients", App.Current.userName + " just joined!").Wait();                    30:          });  31:       }  32:    }

Notice how we build a proxy on the fly (not tight-binding though) and invoke the “JoinFromPhone()” method of the server from the phone app, passing in some identifying information & location coordinates. The point is, you can pass in whatever your server needs. The unique qualifier that we pass in for every phone client to the server is the unique Device ID of the phone. Once pinged, the SignalR Hub wakes up, adds the incoming phone client to an internal collection (which you can persist) and reaches back to each web client (MVC3 view) to invoke some JavaScript functions that actually add a Pushpin on the map. Next up, we also announce on the Chatroom that a new user has joined the Hub by invoking the “PushMessageToClients()” server method. Simple enough, right?

When the user types in some content and hits the Chat button, we got to let the SignalR server know, so that the chat message gets posted on the web front-end & all connected Windows Phone clients. Here’s how we achieve that .. notice that we are making some of these server calls on background threads so as to not hose up our UI:

   1: private void chatButton_Click(object sender, RoutedEventArgs e)   2:  {   3:      if (chatTextbox.Text != string.Empty && chatTextbox.Text != null)   4:      {   5:          // Fire off background thread to post message to server Chatroom.   6:          chatMessage = chatTextbox.Text.Trim();   7:          chatTextbox.Text = string.Empty;   8:          ChatBackgroundDataWorker.RunWorkerAsync();   9:      }  10:  }  11:    12: private void ChatBackgroundDataWorker_DoWork(object sender, DoWorkEventArgs e)  13:  {  14:      // Post message to server chatroom.  15:      SignalRServerHub.Invoke("PushMessageToClients", chatMessage).Wait();  16:      chatMessage = string.Empty;  17:  }

Now, this takes care of the chat message posting part where the server informs all other clients. However, if someone posts a chat message from the web front-end or other phone clients, how does our app know to update the chat dialog with content? There has to be a trigger, right? Unlike JavaScript clients which the SignalR server can directly reach out to in case something of interest happens, there isn’t an easy proposition for .NET clients since we do not have a reference. But, we do have a persistent connection and there is an “On” method on the connection that can be rigged up to fire anytime a certain event happens on the server. Let us do that any time the server posts a message to all clients. Here’s the code .. you’ll be surprised how instantaneously this mechanism posts the chat message to all connected Windows Phone clients:

   1: // Listen in on when Server posts anything to Chatroom.   2:  SignalRServerHub.On<string>("addChatMessage", message =>   3:  {   4:      // Add to local ChatRoom.   5:      chatDialog.Text += "\r\n";   6:      chatDialog.Text += message.Trim();   7:  });

Now, when you are done chit-chatting with your fellow geeks, you would like to disconnect officially and take your Pushpin out, right? Let’s add this code to disconnect, so that the corresponding Disconnect method is fired on the server. Again, notice how we do this on the background thread and officially sign out of the chatroom:

   1: private void disconnectButton_Click(object sender, RoutedEventArgs e)   2: {               3:     DisconnectBackgroundDataWorker.RunWorkerAsync();   4:     5:     chatTextbox.IsEnabled = false;   6:     chatButton.IsEnabled = false;   7:     disconnectButton.IsEnabled = false;   8:     connectButton.IsEnabled = true;   9: }  10:    11: private void DisconnectBackgroundDataWorker_DoWork(object sender, DoWorkEventArgs e)  12: {  13:     // Send Farewell to Chatroom.  14:     SignalRServerHub.Invoke("PushMessageToClients", App.Current.userName + " just left!").Wait();  15:    16:     // Disconnect from Hub.  17:     SignalRServerHub.Invoke("Disconnect", deviceID).Wait();  18: }

Conclusion

That’s it. A functional Windows Phone client that connects to a SignalR server backend and allows us to see the interactions on a web front-end. The SignalR magic simply provides the persistent connectivity through whatever transport means feasible. Now, could there be potential benefit in leveraging such technology in our Windows Phone apps? Think, think ...

About the Author

Samidip Basu (@samidip) is a technologist & gadget-lover working as a Manager & Solutions Lead for Sogeti USA out of the Columbus Unit. With a strong developer background in Microsoft technology stack, he now spends much of his time in spreading the word to discover the full potential of the Windows Phone platform & cloud-backed mobile solutions in general. He passionately runs the Central Ohio Windows Phone User Group (http://cowpug.org), labors in M3 Conf (http://m3conf.com/) organization and can be found with at-least a couple of hobbyist projects at any time. His spare times call for travel and culinary adventures with the wife. Find out more at http://samidipbasu.com.

Getting Started with XAML: Slides and demos

Pete Brown — Mon, 27 Feb 2012 00:22:17 GMT

At the South Florida Code Camp last week, I gave an earlymorning talk titled "Getting Started with XAML". In this talk, Icovered the basics of XAML, the property system, layout, and otherthings you need to know as a XAML developer for WPF, Silverlight,or Windows 8.

Slides

Attached to this post

Demos

It was all real-time stuff in this talk. No downloadable demos.I encourage you to use the Getting Started content on MSDN:

Both include downloadable code in both C# and Visual Basic.

My Silverlight Book

Silverlight 5 inAction
I also have a Windows 8 XAML book in progress. More on thatwhen it gets closer to publication

REST with Silverlight 5, ASP.NET Web API, and MVC 4 Beta

Pete Brown — Sun, 26 Feb 2012 23:50:21 GMT

At the South Florida Code Camp I gave a newer version of theREST Silverlight talk using the just released MVC 4 Beta andASP.NET Web API.

This talk shows how to share code between different versions ofthe framework, how to use the ASP.NET Web API from Silverlight, andhow to integrate a Silverlight application into an MVC 4 site.

Powerpoint Slides

Attached to this post

Demos and Examples

Download the full source and my demo snippit text filehere.

My Book

I cover this in my Silverlight 5 book. At the time of thiswriting, the MEAP has the MVC3 version. I'll update it for theprint and ebook shortly.

Silverlight 5 inAction

Previous Versions

Slides and Code from my VSLive Silverlight 5, REST, WCF Web API,MVC talk (MVC 3 version)

A Lap Around Silverlight 5: Slides and Code

Pete Brown — Sun, 26 Feb 2012 23:30:47 GMT

At the South Florida Code Camp, I gave the "Lap AroundSilverlight 5" talk. The slides and code are all available via thelinks below.

Powerpoint Slides

Attached to this post

Demos and Examples

The Big List of What's New or Improved in Silverlight 5 - PeteBrown's 10rem.net
Threading Considerations for Binding and Change Notification inSilverlight 5
Creating Big Silverlight Windows and Getting Monitor Resolutionsand Positions with PInvoke
Silverlight 5: Using the SoundEffect Class for Low-Latency Sound(and play WAV files in Silverlight)
Silverlight 5: Working with Operating System Windows
Silverlight 5: Working with Implicit Templates
Silverlight 5: Debugging Bindings with Xaml Breakpoints
Silverlight 5: Supporting Double and Even Triple Click for theMouse
- Supporting both Double and Triple Click in Silverlight 5(article with the timer approach)
Silverlight5: Advancements in Text

My Book

Silverlight 5 in Action

Downloads

Download the 3D House Builder Demo Application
See the Babylon3d Engine on CodePlex

Previous Versions

Slides, Videos, and Downloads from my Tech Ed Atlanta 2011 andRecent User Group Talks
Updated Slides and Demos from VSLive Redmond 2011

Part 3: Developing for a multitude of clients: strategies for code reuse and keeping costs in check.

editorial@silverlightshow.net (Kevin Dockx ) — Fri, 24 Feb 2012 20:23:00 GMT

Introduction

Welcome to the third part of this article series on strategies for designing your application for a multitude of different clients. In the first part of this series, we've had a look at the business case & some general concerns we'll have to tackle.

In the second part, we made a choice for a service layer: WCF RIA Services, looked into what this choice offered us and why we made it, and looked into some general guidelines you should keep in mind when designing a service layer which will be used by a multitude of clients.

In this part, we'll start with the development of the first client: a web-based Silverlight client.

You can download the source code for this article here (you can log in to the demo application with pete.campbell@madmen.com / abc@123).

Quick 'n dirty?

As stated, the first client we're going to build will be a Silverlight client.

More resources...

All SilverlightShow Ebooks

The easy, quick 'n dirty way would be to simply add a Silverlight application to our solution, add our Views, ViewModels and application app logic to it, and let it communicate with the EmployeeOpportunityService we've created in the second part.

However, as we know we'll have to build multiple clients, that's probably not the best option: reuse of code would be fairly limited, in fact: we would only be able to reuse the service layer (and accompanying client-side model, generated through WCF RIA Services). There's got to be a way to improve on this, right?

The answer lies in modularity. As you might remember from the first parts of this article series, we're only creating one module for demo purposes: the Employee Opportunity module. The main Silverlight client could, before going into production, import multiple modules: a Management Module, a Reporting Module, .... It makes sense to logically separate these out: some clients might offer all modules, some of the modules, … . Separating this out offers an advantage: code reuse. Each module could be reused by a variety of clients (for example: our Silverlight Out of Browser client can reuse the same assemblies).

Add reference…

The first approach is quite similar to what any .NET developer is used to. Instead of adding the Views and ViewModels in our WebClient project, we create a new Silverlight class library. In this class library, we add the Views and ViewModels that logically belong to the Employee Opportunity Module. For other modules, we do the same.

In our WebClient project, we now add a reference to the class librar(y)(ies) of the modules that can be used by this specific client, and we add references to any assemblies that might be used by any of these modules.

Build, run, and we're set.

Or are we?

A better approach.

While the previous approach might be valid (we've got our reusability), it does offer a disadvantage: your final XAP contains all the code from the assemblies from the different modules, in other words: it can get quite big, resulting in slower load times and higher bandwidth consumption. Moreover, in quite a few applications the modules the user can access depends on his rights: why would we want to get an XAP, containing all modules, to a client who only has access to one module?

And what's more: as this is an article series on code reuse, something's not quite right with our modules either: we've still got no way to reuse Views without importing a specific ViewModel implementation, or the other way around: the module contains both. As we're building different clients, it's not unimaginable we'll want to reuse the code in a specific ViewModel, but use it as DataContext to a different View. Or we could have a client which want to reuse a specific View, but has no need for the ViewModel, as it provides its own, client-specific implementation.

So, what we want to do is keep our Views in one assembly, and keep our ViewModels in a different assembly. When we start our Silverlight client, the Employee Opportunity module will be composed by importing what's needed.

What we really need here is composability & on-demand loading: say hello to MEF.

The Managed Extensibility Framework - a short introduction.

MEF, or the Managed Extensibility Framework, was designed to simplify the design of extensible applications and components. Applications can have changing requirements, or need to be able to plug in extra pieces of logic. After some amount of time, it can become difficult to add new functionality easily to your application. MEF solves this problem by making it easy to “plug in” new functionality into your application. In our example, we can use this to "plug in" the modules when needed.

First of all, there's the concept of Composition: you start by telling MEF where it can find the parts of the application it needs to provide by creating a catalog. From this catalog, you then create a CompositionContainer.
Next, there's the Export concept: by using the Export attribute on a component, you tell MEF you want to export this component (type, property), so it can be composed via the container.
Lastly, there's the Import (or ImportMany) concept, which tells MEF what type of components should be imported in a specific part of your application.

These 3 simple concepts are the basics of MEF, and should give a basic understanding of what MEF is and what it does. A lot more information can be found at http://mef.codeplex.com/

Note: in quite a few projects, MEF is used as a replacement for an Inversion of Control container, like Castle or Ninject. In my opinion, this is defendable (depending on your project requirements, of course), but in essence MEF is designed managing unknown dependencies (hence: plugability), while a classic IoC container is used for managing known dependencies.

Some refactoring & custom code

The first thing to do is separate out our Views from our ViewModels: they both need to be in separate assemblies. This results in the following project division:

For now, we'll keep the View assembly as a reference to our WebClient project, and we'll load the ViewModel assembly on-demand when the application starts (more on why I'm making this choice can be found at the end of the article).

… and we've bumped into a problem. In Silverlight, you can load XAP-files on demand with MEF, but you can't load assemblies on demand. Out of the box, there's no way to compose our application with external assemblies - which is what we'd like.

Luckily, Chris Pietschman (http://pietschsoft.com/) made this possible through his SuperDeploymentCatalog implementation. This is actually for about 95% the same code as a regular DeploymentCatalog, but he changed the HandleOpenReadCompleted method so it allows DLL importing. The complete code can be found in the accompanying source code, in Framework.Silverlight, but this is the part that matters:

private void HandleOpenReadCompleted(object sender, OpenReadCompletedEventArgs e){    Exception error = e.Error;    bool cancelled = e.Cancelled;    if (Interlocked.CompareExchange(ref this._state, 0xbb8, 0x7d0) != 0x7d0)    {        cancelled = true;    }    if ((error == null) && !cancelled)    {        try        {            // Check if a XAP or DLL was downloaded, based on file extension            if (this._uri.OriginalString.ToLower().EndsWith(".xap"))            {                // Load Assemblies from XAP                IEnumerable<Assembly> assemblies = Package.LoadPackagedAssemblies(e.Result);                this.DiscoverParts(assemblies);            }            else             {                // Load DLL Assembly                var assemblies = new List<Assembly>();                assemblies.Add((new AssemblyPart()).Load(e.Result));                this.DiscoverParts(assemblies);            }        }        catch (Exception exception2)        {            error = new InvalidOperationException("Strings.InvalidOperationException_ErrorReadingXap", exception2);        }    }    this.OnDownloadCompleted(new AsyncCompletedEventArgs(error, cancelled, this));}

In the Application_Startup method, we'll load our ViewModel assembly. First, we create a new AggregateCatalog instance. To this type of catalog, other catalogs can be added dynamically (this will also come in useful later on in this article series). Next, we create a new SuperDeploymentCatalog, pointing to the ViewModel assembly. This catalog is added to the Catalogs collection of the AggregateCatalog instance.

We add an event handler to the DownloadCompleted event of our SuperDeploymentCatalog instance. When this event is correctly completed, we set the RootVisual to a new instance of our applications' MainPage. Note that this shouldn't be done earlier, as MainPage contains a View which in turn imports a ViewModel instance: that ViewModel instance is only available after the ViewModel assembly has been loaded.

Next, we'll call the DownloadAsync() method, and we initialize MEF's CompositionHost by passing in our AggregateCatalog instance.

private void Application_Startup(object sender, StartupEventArgs e){    this.Resources.Add("WebContext", WebContext.Current);    WebRequest.RegisterPrefix("http://", WebRequestCreator.ClientHttp);    WebRequest.RegisterPrefix("https://", WebRequestCreator.ClientHttp);    var catalog = new AggregateCatalog();    var catalogVM = new SuperDeploymentCatalog("SalesDashboard.SL.Modules.EmpOpp.ViewModels.dll");    catalog.Catalogs.Add(catalogVM);    catalogVM.DownloadCompleted += (senderVM, argsVM) =>    {        if (argsVM.Error != null)        {            MessageBox.Show(argsVM.Error.Message);        }        else        {           this.RootVisual = new MainPage();        }    };    catalogVM.DownloadAsync();    CompositionHost.Initialize(catalog);    CompositionInitializer.SatisfyImports(this);}

We can now build and run our application. The application is composed on-demand: the ViewModels are not included as a reference, they are loaded when needed. This results in a smaller XAP (faster loading times), composability, and an assembly that can easily be reused. We've now got a technique for code reuse across clients: instead of having to rewrite your ViewModel code, you can simply reuse the existing code.

Note: as we're loading assemblies on-demand, you might want to ensure the correct version is loaded. By default, when you build a project in debug-mode, the resulting assembly is put in the projects' bin/debug-folder (wherefrom it can't be loaded on demand by the Silverlight application, as you won't have rights to access that folder). An easy way to ensure the resulting assembly is always available is by changing its output path to the ClientBin folder of the WebClient.

Conclusion

We've seen a few different techniques to separate out parts of our application: referencing & loading on demand through MEF. This allows us to reuse code across different clients.

Then again, we're not quite there yet. In fact, we're just getting started with this: can we do better?

What's coming up?

You might notice I've carefully avoided a few pretty obvious issues in this article: why are we not loading the Views on demand, but keeping them as a reference instead? And what about those other assemblies, like the model assembly? As we're modularizing the application, it would make sense to only load the model assembly when the ViewModels using that model are necessary, no?

Of course, those are valid concerns, and this is exactly what we'll tackle in the next part of this series. It requires quite a bit of custom coding: we'll need some extensions to the Silverlight Navigation framework (as it's not as straightforward as we would like to navigate to views in assemblies that are loaded on-demand), and we'll need a component loader component (to ensure we can load all necessary assemblies at once, instead of one by one). After that part, we'll end up with a truly composable app, separated out in modules/assemblies that can easily be reused across different clients.

Up until then: happy coding!

About the author

Kevin Dockx lives in Belgium and works at RealDolmen, one of Belgium's biggest ICT companies, where he is a technical specialist/project leader on .NET web applications, mainly Silverlight, and a solution manager for Rich Applications (Silverlight, Windows Phone 7 Series, WPF, Surface, HTML5). His main focus lies on all things Silverlight, but he still keeps an eye on the new developments concerning other products from the Microsoft .NET (Web) Stack. As a Silverlight enthusiast, he's a regular speaker on various national and international events, like Microsoft DevDays in The Netherlands, Microsoft Techdays in Belgium & Portugal, NDC2011, ... Next to that, he also authored a best-selling Silverlight book, Packt Publishing's Silverlight 4 Data and Services Cookbook, together with Gill Cleeren. His blog, which contains various tidbits on Silverlight, .NET, and the occasional rambling, can be found at http://blog.kevindockx.com/, and you can contact him on Twitter via @KevinDockx.

Reset the back of your Tile through push

Tue, 21 Feb 2012 21:26:52 +0100

Have you ever created the back of your tile with a Push notification? You just add some xml in the Notification Message that you send to the Notification Channel.

<wp:BackBackgroundImage>http://someurlinthewild.com/BackTileBackground.png</wp:BackBackgroundImage><wp:BackTitle>Back</wp:BackTitle><wp:BackContent>Content</wp:BackContent>

Yeah that’s easy. Ever tried to get rid of it using a Push notification? Yeah, trying to push without content. Thought that should work as well, didn’t. Leaving the full Xml elements from the Push Notification? Didn’t work either. You explicitly have to add an attribute Action and give it the value Clear, like this:

<wp:BackBackgroundImage Action="Clear"></wp:BackBackgroundImage><wp:BackTitle Action="Clear"></wp:BackTitle><wp:BackContent Action="Clear"></wp:BackContent>

This works for the Title and Count properties for the front of your tile as well. This can all be found in the documentation for Push Notifications as well, but today it took me some time to figure this out.

Knockout Session from South Florida Code Camp

Tue, 21 Feb 2012 16:23:31 GMT

I had a great time at the South Florida Code Camp last weekend presenting a Whirlwind tour of Knockout and Javascript Patterns. The rooms were small and way overpacked, but I’ll take that as a sign that the topic is popular

The Knockout session is a whirlwind tour of KnockoutJS ’s features. If you like it and want to see more in depth material on Knockout, you can check out my full course at Pluralsight titled Building HTML5 and JavaScript Apps with MVVM and KnockoutJS.

Here are the slides and sample code from the presentation at code camp. Thanks for attending!

Yet Another Podcast #60–Knockout.js

Mon, 20 Feb 2012 21:06:03 +0000

Impressions, slides and code from TechDays Belgium and Netherlands

Sun, 19 Feb 2012 22:30:25 GMT

Update: Posted the video of “MVVM Applied” below.

This week I was “on tour” in Belgium and Netherlands and presented 3 times:

“MVVM Applied, From Silverlight to Windows Phone to Windows 8”

(in Belgium and Netherlands)

The goal of this session was to make people feel confident that the skills they acquired working in various XAML frameworks (Silverlight, Windows Phone, WPF, Surface, etc) are going to help them tremendously when developing Windows 8 applications. It was a session packed with code, where we went from a Silverlight 5 application, added design time experience, reworked the design in Expression Blend, then created an application reusing most of the code in Windows Phone (including design time experience in Blend), and then created a WinRT application which, again, reused most of the code (including design time experience in the Visual Studio Designer). Of course the sample code uses the MVVM Light Toolkit in order to make the coding easier, and to maximize code reuse.

I also showed techniques to keep as much compatible code as possible between the frameworks, and abstract the differences. For instance, Windows 8 is more asynchronous than Silverlight (which was already more asynchronous than WPF, remember the discussions around the lack of synchronous web requests in Silverlight?). In Windows 8, operations such as file system access and stream access (read/write) are asynchronous now. Using techniques such as callbacks, you can quite easily isolate the code that is Windows 8-specific, and call into it from shared code (more about this technique in a following blog post). It was an interesting session that gathered quite a lot of positive feedback.

You can download the following from Skydrive:

Start solution (PictureUploader-0-Start, running Silverlight 5 application, without design time data)
Silverlight 5 (PictureUploader-1-SL5) design time data complete
Windows Phone 7 (PictureUploader-2-WP7) application complete
Windows 8 (PictureUploader-3-Win8) application complete
Code snippets for VS10 (Snippets.vssettings, Silverlight 5 and Windows Phone)
Code snippets for VS11 (SnippetsWin8.vssetings, Windows 8)
Slides (MVVMApplied)

To import the code snippets in Visual Studio’s toolbox, select the menu Tools, Import and Export Settings, and select the snippets file. This will import the snippets into your toolbox. Note that if you had snippets in your toolbox before, it will add the new ones instead of overwriting the old ones.

Note about the Windows 8 sample: For some reason the sample refuses to start if you include the GalaSoft.MvvmLight.Extras DLL for Windows 8. It does however run just fine if you include the project instead. For that reason, I included a copy of that project’s source code and referenced it directly. Given the current state of Windows RT (developer preview), I won’t even waste any time looking for a fix. We’ll see about that in the Consumer preview ;)

The video of this talk, also available at Channel 9

“100 Fidelity: From comps to apps, tips and tricks for XAML integration”

(in Netherlands only)

The purpose of this session was to show the audience usage of various tools (of course mainly Expression Blend) to create user experience that is as close from the designers’ vision as possible. Nowadays with XAML and Blend, it is possible to reach 100% fidelity. I also talked about the integrator role, a role that we fully embrace at IdentityMine. The integrator’s main tool is Blend, and Blend is used to integrate the design assets into the application. We talked about and demoed the features that make Blend truly shine, such a gradient creation, resource management, animations, etc.

Even though this session was in the graveyard shift (Friday afternoon, 4PM), I was positively surprised to see quite a few people attending. Also, when asked who in the audience is a designer, I saw approximately 10 hands raising, which is more than usual. Are we seeing more interest from designers in Blend due to Metro? One can only wish so!

You can download the following from Skydrive:

Slides (100%Fidelity)

There is no source code for this session, because most of the demos were about creating and integrating assets in Blend. Refer to the video for more details.

Screenshots

These screenshots are taken from the “MVVM Applied” session

Silverlight 5 application with a beginning of styling

Windows Phone application start screen

Windows Phone application during upload

Windows Phone application, upload completed

Windows 8 application, start screen with application bar

Windows 8 picture picker

Windows 8 application during upload

A few impressions

The room where I presented MVVM Applied in Netherlands

They had my book (and Brennon’s) at the conference bookstore :)

A cool clownfish

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

South Florida Code Camp is Tomorrow

Fri, 17 Feb 2012 19:43:25 GMT

I’ll be heading to Ft Lauderdale tonight so I can get a bright and early start for South Florida Code Camp tomorrow. They have a pretty good lineup and I’ll be presenting 2 sessions. Hope to catch you there!

HTML5 and JavaScript Fundamentals with MVVM and KnockoutJS

John Papa

11:10am – 12:20pm

Do you write a lot of HTML and JavaScript code to push and pull data? In this session you will learn popular techniques to use data binding to bind your data to your target controls in HTML writing less code, but gaining more power. See how to consume json data, use json objects in JavaScript, use declarative binding, using KnockoutJS. You will also see how to use the MVVM pattern to write data centric JavaScript code that follows good separation patterns and creates highly maintainable code.

Techniques, Strategies, and Patterns for Structuring JavaScript Code

John Papa

1:20pm – 2:30pm

Are you writing a lot of JavaScript code and trying to apply good practices to make it more maintainable and flexible? In this session learn about common practices to make avoid problems such as polluting the global namespace and code that executes inconsistently, by using patterns such as separation and the Revealing Module Pattern. You will leave this session with several tips on how to write clean, more maintainable, and consistent code.

If you enjoy these and want more, you can check my latest course Building HTML5 and JavaScript Apps with MVVM and Knockout which is now available at Pluralsight. In it, I demonstrate how to build robust and maintainable Web applications with JavaScript patterns, MVVM, and KnockoutJS .

</shameless plug>

Screenshots of my #mvvm demo at #techdaysbe

Wed, 15 Feb 2012 22:52:35 GMT

Today I gave a talk in TechDays in Belgium about MVVM in Silverlight 5, Windows Phone 7 and Windows 8. This was the first time I gave that particular talk, and in addition keep in mind this is a developer preview, meaning that it is not finished, and not always stable.

I had a few surprises with this build. For example from time to time, the new “Metro style applications” just cannot be launched anymore. Nothing that a simple reboot cannot fix… but I’ll come back to that in a moment.

A couple of hours before my session started, I was notified by Windows 8 that it wanted to install updates. I even joked about it on Twitter. No way was I going to install updates just before a talk! Everyone knows you shouldn’t do that, it can change your computer configuration and cause unexpected effects during the talk! Yeah I thought I was clever.

The presentation went well, but towards the end I wanted to run the application to show it to my audience. Unfortunately when I clicked the shortcut on the Start screen, nothing happened. I tried launching another Metro app and it also failed. I immediately thought it was the effect I mentioned before, where Metro apps stop working and you need to reboot. Turns out I was wrong. Of course the decision I had to take, with more than 100 people waiting for my next move, was tough. I decided to reboot. And yep, at that moment I had totally forgotten about the pending updates.

And this is what happened:

Damn well I have to say the audience was really nice and supportive. I took the occasion to take a few questions (THANK YOU to those who asked something and gave me the chance to fill that void with content!!)

What was the issue actually?

After reboot I tried again, and the same result happened: No Metro apps could be started. From the room, I got the suggestion that it was a resolution problem. And indeed: You cannot run Metro applications with less than 768 pixels vertical resolution. And because of the projector, I was running at 1280x720. So I thought OK, let’s try it, increased the resolution to 1280x768 and indeed I could start the Metro apps… but then the projector stopped showing the image!

That’s really a tough problem to solve, and I must say I am not quite sure yet how to make this work. Projectors nowadays are, for the most part, limited to 1024x768 resolution. If you want to go 16:9, you often get 1280x720. My tests after my session show that at 1024x768, Metro apps seem to run but I am not sure what will happen when I attach the projector again in my next session… I guess I will find out tomorrow

Screenshots

I thought I would take this occasion to show my excellent audience what I wanted to actually show them, and how the finished Metro application looks like. So here are some screenshots. First you will recognize the Silverlight 5 version of the uploader, then the Windows Phone one, and finally the Metro application. I will post the code and the presentation in the following few days, and the video of the presentation will follow shortly after the Windows 8 beta is released. I want to really thank everyone for their attention and support, and for the many kind words I received after my session.

Silverlight 5 version

Windows Phone initial screen

Windows Phone picture selection

Windows Phone during upload

Windows Phone upload completed

Windows 8 initial screen with Application Bar

Windows 8 Picture Picker

Windows 8 during upload

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Unified Ad for Windows Phone - Part 4 - GenericAdProviderForXaml

Tue, 14 Feb 2012 21:31:29 +0100

Alright, we have signed up to a lot of Ad Providers in Part 1, setup the Unified Ad control in Part 2 and even implemented the Remote Ad Provider configuration in Part 3. What’s next?

The Generic Ad Provider for Xaml

Think of the Generic Ad Provider as a very simple AdProvider. It can show Xaml and that’s basically it. You could use this Ad Provider for example to market your own applications within your own applications. So a piece of Xaml with a little bit of text and an HyperlinkButton that links to a Uri. And after a minute the Ad Provider will rotate to the next Ad Provider. The Xaml can be much more complex, we will come up to that in a moment. But first see a small example Ad in Xaml.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      Width="480"      Height="80"      Background="{StaticResource PhoneBackgroundBrush}">    <Border BorderBrush="{StaticResource PhoneAccentBrush}"            BorderThickness="1">        <Grid>            <TextBlock Text="WP Unified Ad"                       Foreground="{StaticResource PhoneAccentBrush}" Margin="0"                       VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"/>            <HyperlinkButton NavigateUri="http://wpunifiedad.codeplex.com"                             HorizontalAlignment="Stretch"                             VerticalAlignment="Stretch">            </HyperlinkButton>        </Grid>    </Border></Grid>

Where do we put the Xaml?

Ideal it would be on a remote server. But if you don’t have the remote server or you want to have a fallback ad in case the remote server isn’t available you can use the OfflineContent property of the GenericAdProvider.

If you do have the remote server you can set the XamlUri property to the remote Url. In case you want to some more intelligent stuff, like a special ad for each country, or making sure you do something special for the current application, you can make use of the format parameters. The first {0} argument will be replaced by the ApplicationID and the second {1} argument will be replace by the CountryCode. So let’s say I have a server app that returns ads for me, my XamlUri could be configured like this:

http://someurlontheinternet.com/ProvideAd?Country={1}&AppId={0}

If you don’t need one or both arguments you could omit them off course.

Using Phone Styles

If you want to make sure that the advertisements have the same color palette as the Phone settings you can even make use of the usual Phone Resources. Like this example where the Background is set to the PhoneBackgroundBrush and the Border and Text to the PhoneAccentBrush.

<Grid Width="480"        Height="80"        Background="{StaticResource PhoneBackgroundBrush}">    <Border BorderBrush="{StaticResource PhoneAccentBrush}"            BorderThickness="1">        <Grid>            <TextBlock Text="WP Unified Ad"                        Foreground="{StaticResource PhoneAccentBrush}"                        Margin="0"                        VerticalAlignment="Center"                        HorizontalAlignment="Center"                        FontSize="35" />        </Grid>    </Border></Grid>

How to add links

The easiest way to add a link is to put a HyperlinkButton on top of the full Xaml. You don’t have to give it a visual appearance as long as you make it stretch to the full Ad space. Put the Uri you want to link to in the NavigateUri. What? Yes put the Uri in the NavigateUri. But won’t that only work for navigation inside the application, from page to page? Yes but this is improved navigation.

“http://anythingontheweb.com” and “https://anythingontheweb.com” will start the WebBrowserTask
“marketplace://search/some content” will start the MarketplaceSearchTask with “some content” as query.
“marketplace://review” will start the MarketplaceReviewTask for the current application.
“marketplace://detail” will start the MarketplaceDetailTask for the current application.
“marketplace://detail/5f171b43-6ea8-e011-a53c-78e7d1fa76f8” will start the MarketplaceDetailTask for the application with the mentioned ID.

This will enable you to create simple ads that show a webpage. But if you want more, like for example market your other apps you can do this as well.

Complex Ads

I’m not the best designer, but I know a little about Xaml. So I was interested to see if I could get a more complex Ad working. The below Ad for example has a Storyboard attached that changes the opacity of two elements. Sounds easy, it is easy. Just think about what more nice things you can do instead.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"      Width="480"      Height="80"      Background="{StaticResource PhoneBackgroundBrush}">	<Grid.Resources>		<Storyboard x:Name="Storyboard" AutoReverse="True" RepeatBehavior="Forever">			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="One">				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>			</DoubleAnimationUsingKeyFrames>			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Two">				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>			</DoubleAnimationUsingKeyFrames>		</Storyboard>	</Grid.Resources>    <Border BorderBrush="{StaticResource PhoneAccentBrush}"            BorderThickness="1">        <Grid>            <Grid x:Name="One">        		<TextBlock Text="WP Unified Ad"        			Foreground="{StaticResource PhoneAccentBrush}" Margin="0"        			VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"/>        	</Grid>            <Grid x:Name="Two" Opacity="0">            	<TextBlock Text="by Mark Monster"            		Foreground="{StaticResource PhoneAccentBrush}" Margin="0"            		VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"/>            </Grid>            <HyperlinkButton NavigateUri="http://wpunifiedad.codeplex.com"                             HorizontalAlignment="Stretch"                             VerticalAlignment="Stretch"/>        </Grid>    </Border></Grid>

Unified Ad for Windows Phone - Part 3 - Remote Ad Provider configuration

Mon, 13 Feb 2012 20:52:07 +0100

Did you read the previous parts?

Part 1 – Introduction

Part 2 – Basic Usage

Done? Let’s continue with Part 3, configure the Ad Providers from a remote location.

Step 1, Add the RemoteAdProviderStrategy

Okay, let’s forget about the default AdProviderStrategy. The default just rotates between the different AdProviders, we want more. First we set the AdProviderStrategy property of the AdControl. Just like this.

<Ads:AdControl.AdProviderStrategy>    <Strategy:RemoteAdProviderStrategy xmlns:Strategy="clr-namespace:MC.Phone.Ads.Strategy;assembly=MC.Phone.Ads" /></Ads:AdControl.AdProviderStrategy>

Step 2, Create a configuration file

It could very well be that you already have a functional configuration file. When you for example made use of Windows Phone 7 Ad Rotator you already have a configuration file that’s fully compatible with the Unfied Ad. But if you want the full power of the Unified Ad you have to use a different configuration file structure. Xml files explain best by showing an example file.

<?xml version="1.0" encoding="utf-8" ?><AdSettings>  <CountryDescriptors>    <AdCountryDescriptor Country="US, GB">      <Probability Value="70" AdProvider="None" />      <Probability Value="10" AdProvider="AdMob" />      <Probability Value="10" AdProvider="MobFox" />      <Probability Value="10" AdProvider="AdDuplex" />    </AdCountryDescriptor>    <AdCountryDescriptor Country="DE">      <Probability Value="15" AdProvider="PubCenter" />      <Probability Value="15" AdProvider="AdMob" />      <Probability Value="20" AdProvider="AdDuplex" />      <Probability Value="50" AdProvider="None" />    </AdCountryDescriptor>    <AdCountryDescriptor>      <Probability Value="20" AdProvider="PubCenter" />      <Probability Value="20" AdProvider="AdMob" />      <Probability Value="20" AdProvider="AdDuplex" />      <Probability Value="20" AdProvider="Smaato" />      <Probability Value="20" AdProvider="MobFox" />    </AdCountryDescriptor>  </CountryDescriptors></AdSettings>

Let examine the last AdCountryDescriptor element lines 16-22. Because this AdCountryDescriptor element doesn’t have a Country property this will be the default configuration to fall back to when there isn’t any other that matches the country of the user.

Inside the AdCountryDescriptor elements there are Probabilty elements, they consist of two values: a probability and an AdProvider name. You can best compare the Probabilty with the chance in percentage that the specific Ad Provider is chosen during AdRotation. If you don’t want an AdProvider to be shown during rotation you either put the probability to 0, but better just remove the element. The AdProvider property is the name of the AdProvider that has to be filled in. Currently that would be one of these AdProviders: AdMob, MobFox, AdDuplex, PubCenter, Smaato, InnerActive, None and GenericAdProviderForXaml.

If you want no ads to be displayed for a certain percentage of the time you should use the None AdProvider. In a future post we will discuss the GenericAdProviderForXaml, for now just see it as a remote location where you put some Xaml that will be displayed as an Ad.

So we now have a default configuration, what about specific country configurations? Yes important of course, by specifying the Country attribute of the AdCountryDescriptor element you can specify to which countries a specific configuration belongs. Which could be one country, or multiple countries. Each country is only allowed once in the configuration but you can specify multiple countries for one configuration by separating the country-codes by a “,”. For the country-codes make sure you use the two-letter codes from the ISO_3166-1, so for the UK this is GB.

Step 3, Where to put this configuration file?

Put it somewhere on a webserver where it’s accessible through http or https. Though if you don’t want to configure it remotely but ship this Xml file as part of your application that’s fine as well. But be aware that the only way to change your shipped configuration file is by shipping a new version of your application. But to have local configuration file makes sense even if you have a remote configuration file. When for example your remote config file cannot be accessed (could be any reason) the RemoteAdProviderStrategy will fallback to the local configuration file. So let’s configure the strategy accordingly.

<Ads:AdControl.AdProviderStrategy>    <Strategy:RemoteAdProviderStrategy xmlns:Strategy="clr-namespace:MC.Phone.Ads.Strategy;assembly=MC.Phone.Ads"                                        LocalProviderSettingsUri="Ads/AdSettings.xml"                                        RemoteProviderSettingsUri="http://someurlinthewild.com/ads.xml" /></Ads:AdControl.AdProviderStrategy>

The RemoteProviderSettingsUri needs to be filled with the remote location url. So put the file somewhere on an internet website, your own is probably the best so that you can easily change it when you want to. The local provider settings can be used as alternative to the remote location in case you don’t want to remotely configure your ads but it could also be used as fallback when the remote url is not available for some reason. For the LocalProviderSettingsUri you need to be aware that it’s an ResourceUri, not an internet Uri. This means that if your xml file has a BuildAction “Content” you can put a simple relative Uri in there, like in the above example. If you would add the Xml file with BuildAction “Resource” you would have to use an Uri like this “/MC.Phone.Ads.Example;component/Ads/AdSettings.xml”.

Hope this explains the Remote Ad Provider configuration a little bit. Please post any questions.

New Single: Paint a Flower in the Sky

Thu, 09 Feb 2012 10:31:37 +0000

One day I asked my daughter Mara what she was drawing: “Oh, I’m just painting flowers in the sky” she answered.Another day, after a very sick night, she said to me in the morning: “Don’t worry about it Dad – when I am sick at night, my angel comes and takes me for a ride”. And [...]

Windows Client Developer Roundup 087 for 2/9/2012

Pete Brown — Thu, 09 Feb 2012 02:44:11 GMT

The Windows Client Developer Roundup aggregates information ofinterest to Windows Client Developers, including WinRT XAML, WPF, Silverlight, VisualC++, XNA, Expression Blend, Surface, Windows7, WindowsPhone, Visual Studio, WCF RIA Services andmore. Sometimes I even include a little jQuery and HTML5. If youhave something interesting you've done or have run across, or youblog regularly on the topics included here, please send me the URLand brief description via the contactlink.

Note that I've started breaking the Netduino, Electronics,Robotics, Synthesizer and similar content into a new roundup seriescalled the Maker GeekRoundup.

Oh and you'll get Windows 8 Consumer Preview on February29. Get ready to code (and design) :)

Windows 8 and WinRT/Metro General

Improving power efficiency for applications (Sharif Farag andBen Srour)

XAML Technologies (Silverlight, WPF, WinRT Metro XAML)

Bad Entropy: MVVM and Multiple Selection - Part IV - DataGrid(Bad Entropy)
Overwriting the default WebRequest used by WebClient (MortenNielsen)
Building A Multi-Touch Photo Viewer Control (MortenNielsen)
DOT NET TRICKS: Optimizing INPC Objects against memory leaks usingWeakEvents (Abhishek Sur)
- Also see my post on weak events.
Using the Live SDK in Windows 8 XAML/C# Metro Applications -Michael Crump (Michael Crump)
Reading and Writing text files in Windows 8 Metro (MortenNielsen)
A Simple Pattern for Creating Re-useable UserControls in WPF /Silverlight (Colin Eberhardt)

DirectX Technologies (DirectX, XNA, WinRT DirectX, GPU and GameProgramming)

The Starter2D and Starter3D tutorials now on the Marketplace(Dark Genesis)
Large Scale Terrain Rendering (Coding4Fun)

C++ and Native Development

C# to C++ - A Somewhat Short Guide (Bob Taco Industries)
C++11 Conformance Survey (Vikas Bhatia)
The Microsoft C++ Compiler Turns 20! (Visual C++ Blog)
C++ AMP Open Specification (Soma)
GoingNative 2012: All Sessions are now available On-Demand!(Channel 9)

Visual Studio and .NET General

Bring Some Game To Your Code! (Visual Studio Blog)

NUI (Kinect, Surface, More)

Kinect for Windows - Details of API Changes from Beta2 to v1.0(C#/VB) (Rob Relyea)
Microsoft® Surface® 2.0 SDK and Runtime Update (LuisCabrera)
InteractivePortfolio (Kinect Hacks)

Off-Topic Fun

The KarateRap (YouTube)

I leave you with only the one "off-topic" item today, becauseafter watching that, nothing else will ever suffice. Ever.

Unified Ad for Windows Phone - Part 2 - Basic Usage

Wed, 08 Feb 2012 21:46:37 +0100

Time for Part 2 of the Unified Ad for Windows Phone series. Also read part 1 for the introduction of the Unified Ad for Windows Phone. We covered the reason why we want the Unified ad for Windows Phone control and also registered for a couple of Ad Providers. Let’s start with implementing the Unified ad control in our application.

Install the NuGet Package for Unified Ad for Windows Phone

Start managing your NuGet Packages for your Windows Phone project. Search for “wpunifiedad” and click install.

Go to one of your pages, for example “MainPage.xaml” and add the following Xaml in for example the ContentPanel Grid.

<Ads:AdControl x:Name="AdBasic"                FallbackAdProviderName="AdDuplex"                IsTest="True"                xmlns:Ads="clr-namespace:MC.Phone.Ads;assembly=MC.Phone.Ads"                xmlns:PubCenter="clr-namespace:MC.Phone.Ads.PubCenter;assembly=MC.Phone.Ads.PubCenter"                xmlns:Smaato="clr-namespace:MC.Phone.Ads.Smaato;assembly=MC.Phone.Ads.Smaato"                xmlns:MobFox="clr-namespace:MC.Phone.Ads.MobFox;assembly=MC.Phone.Ads.MobFox"                xmlns:AdMob="clr-namespace:MC.Phone.Ads.AdMob;assembly=MC.Phone.Ads.AdMob"                xmlns:Provider="clr-namespace:MC.Phone.Ads.Provider;assembly=MC.Phone.Ads"                xmlns:AdDuplex="clr-namespace:MC.Phone.Ads.AdDuplex;assembly=MC.Phone.Ads.AdDuplex">    <Ads:AdControl.AdProviders>        <Provider:GenericAdProviderForXaml XamlUri="http://remoteurlontheinternet.com/Ad.xaml?appid={0}" />        <Provider:NoneAdProvider />        <AdDuplex:AdDuplexAdProvider App="" />        <AdMob:AdMobAdProvider AdUnit="" />        <MobFox:MobFoxAdProvider Publisher="test" />        <Smaato:SmaatoAdProvider AdSpace="0"                                    Publisher="0" />        <PubCenter:PubCenterAdProvider Application=""                                        AdUnit="" />        <!--InnerActive is not really suitable for the Ad Rotation because it doesn't have any events to react on.-->        <!--<InnerActive:InnerActiveAdProvider App="" />-->    </Ads:AdControl.AdProviders></Ads:AdControl>

Lines 12 to 22 are the AdProviders that are available for the Unified ad control. Just remove the elements for the AdProviders that you’re not using or planning to use. For now also remove the GenericAdProviderForXaml element. This ad provider will be discussed separately in a next part. Also take a look at line 3, it is now configured to be run in Test mode. Now let’s start configuring the different ad providers.

AdDuplex configuration

After you added a new application to AdDuplex you will see the App ID. Copy this value to the App property of the AdDuplexAdProvider.

AdMob configuration

When you completed the configuration of a new site/app in AdMob you will see a so called Publisher ID. Copy this value to the AdUnit property of the AdMobAdProvider.

MobFox configuration

For MobFox you should copy the Publisher ID from the app to the Publisher property of the MobFoxAdProvider.

Smaato configuration

For Smaato you should fill in both the AdSpace and the Publisher number in the SmaatoAdProvider. Copy the AdSpaceId from the application list for your application to the AdSpace property for the SmaatoAdProvider. Copy the PubisherId below at that screen to the Publisher property for the SmaatoAdProvider.

PubCenter configuration

The PubCenter configuration consist of two parts. An Application, where you need to copy the Application ID to the Application property of the PubCenterAdProvider. And an Ad Unit where you need to copy the ID of the Ad Unit to the AdUnit property of the PubCenterAdProvider.

InnerActive configuration

InnerActive can be configured, but I cannot recommend using it in combination of the Unified Ad control. Inner Active doesn’t have any events that can be listened to like: NoAd, NewAd or AdEngaged. And because of this it’s impposible to let it rotate with the other Ad Providers. When you want to configure it though, you can. Copy the App Name and put it in the App property of the InnerActiveAdProvider.

Test or not?

You can put your AdControl in production mode by setting the IsTest property to False or completely removing the property from the Xaml.

The next part will be about the Remote Ad Provider configuration.

Creating Big Silverlight Windows and Getting Monitor Resolutions and Positions with PInvoke

Pete Brown — Wed, 08 Feb 2012 03:59:11 GMT

While doing the (long!) tech review for Silverlight 5 in Action,my friend and former coworker Tom McKearney mentionedthat we should put together some code to make handling windowsacross multiple monitors a reasonable task in Silverlight 5. Then,on a mailing list, I recently saw the question:

Hi all -- I'm wondering if there is a maximum window size forSilverlight documented anywhere. For example if I had hardware thatcould support a 3x3 or 3x4 grid of 1920x1080 displays, can I makean SL5 OOB window that big? Can I make individual items in thewindow that big? Can I get hardware acceleration on all of it? Doesthe 3D API have any different limits than XAML? Or maybeSilverlight has no specific limit, but it's up to the hardware?

Curious about that, I decided to try it myself, and combine thiswith what Tom had requested. I don't have a 3x3 array of screensthat size, however. It really is a serious number of pixels.

Cost of screens aside, most people don't have the video hardwareto be able to run 6 displays. ATI has some displayport cards whichwill do that, but otherwise you're looking at a minimum of threevideo cards and a variety of connections. You're also looking at ashedload of video memory.

What I do have is a pair of 30" displays each running at2560x1600. That's quite a bit smaller, but still much larger thanmost people have. It ends up being a bit less than half therequested pixels. I do get almost the right width, but the heightis lacking.

I wouldn't want 3x3 of the HD res screens (too much bevel)unless they were big old TV-style ones and you were doingrelatively low-res graphics. 3x3 of the 2560x1600 though?*drool*

In any case, my two combined are still quite a bit larger thanthe typical HD res 1920x1080 screen people have, with its 2,073,600pixels, and is a valid test of creating big windows inSilverlight.

My displays are also oriented a little differently than you mayexpect:

That means that logical 0,0 is in the middle of the combineddisplay. We'll need to know that for later.

Creating the Window

If you want to learn how to create out-of-browser windows inSilverlight 5, see my post here.

The first test is to see if I can create a window that fits thedimensions of my two screens. All sizes here will behard-coded.

XAML

<UserControl x:Class="PeteBrown.SilverlightBigWindow.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="175
             " d:DesignWidth="800">

    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox x:Name="DisplayList"
                 Margin="126,12,12,12">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150" />
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="150" />
                            <ColumnDefinition Width="150" />
                            <ColumnDefinition Width="75" />
                            <ColumnDefinition Width="75" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="0"
                                   Text="{Binding MonitorName}" />
                        <TextBlock Grid.Column="1"
                                   Text="{Binding IsPrimary}" />
                        <TextBlock Grid.Column="2"
                                   Text="{Binding MonitorArea}" />
                        <TextBlock Grid.Column="3"
                                   Text="{Binding WorkArea}" />
                        <TextBlock Grid.Column="4"
                                   Text="{Binding Width}" />
                        <TextBlock Grid.Column="5"
                                   Text="{Binding Height}" />


                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
     
     
        <Button Content="Open Full"
                Height="23"
                HorizontalAlignment="Left"
                Margin="12,12,0,0"
                Name="OpenWindow"
                VerticalAlignment="Top"
                Width="108"
                Click="OpenWindow_Click" />
        <Button Content="Open Primary"
                Height="23"
                HorizontalAlignment="Left"
                Margin="12,41,0,0"
                Name="OpenPrimary"
                VerticalAlignment="Top"
                Width="108"
                Click="OpenPrimary_Click" />
        <Button Content="Open Secondary"
                Height="23"
                HorizontalAlignment="Left"
                Margin="12,70,0,0"
                Name="OpenSecondary"
                VerticalAlignment="Top"
                Width="108"
                Click="OpenSecondary_Click" />
    </Grid>
</UserControl>

C# code

private void OpenWindow_Click(object sender, RoutedEventArgs e)
{
    Window w = new Window();

    w.Width = 5120;
    w.Height = 1600;

    w.Show();
}

private void OpenPrimary_Click(object sender, RoutedEventArgs e)
{
}

private void OpenSecondary_Click(object sender, RoutedEventArgs e)
{
}

This will allow me to click a button and have it open a giantwindow on the screen. The window has no content, so it'll appear asa plain white empty window.

Run it (remember, must be elevated trust out-of-browser app) andwhat do you see? No problem. One giant white window which fitsacross my screen.

The problem is, however, that it starts in the middle of mydisplays instead of over at the far left. I had to drag it to thefar left to get it to take up the whole set of displays. How do wefigure out how to position and size the window?

Positioning and Sizing the Window

On my setup, the monitor to the left is all in negative space.So, to move the window to the far left, I need to move it to -2560.Then we can open the window and then tell it to move to the topleft, or to take up just a single display.

private void OpenWindow_Click(object sender, RoutedEventArgs e)
{
    Window w = new Window();

    w.Width = 5120;
    w.Height = 1600;

    w.Left = -2560;
    w.Top = 0;
    w.Show();
}

private void OpenPrimary_Click(object sender, RoutedEventArgs e)
{
    Window w = new Window();

    w.Width = 2560;
    w.Height = 1600;


    w.Left = 0;
    w.Top = 0;
    w.Show();
}

private void OpenSecondary_Click(object sender, RoutedEventArgs e)
{
    Window w = new Window();

    w.Width = 2560;
    w.Height = 1600;

    w.WindowStyle = WindowStyle.None;

    w.WindowState = WindowState.Maximized;

    w.Left = -2560;
    w.Top = 0;
    w.Show();
}

Ok, so we've verified that it can be done. Now we need to makeit work for arbitrary resolutions and monitor configurations.Before we do that, though, did you notice that the sizingwas off a bit? Both the width and height appear to be offby the measurements of the window chrome. It turns out this happenswhether or not you're using custom chrome. I've reported abug to the team and they're investigating, so for nowwe're going to have to ignore the size issues. If you workaround the sizing in your own code, stick it in an conditionalcompilation block or something so you can easily change itif/when the bug is fixed.

Getting Display Informatin Using PInvoke

We're running in elevated OOB mode anyway, so as long as youonly care about Windows, you can also throw in some P/Invoke. Themain functions we're interested in are EnumDisplayMonitorsand GetMonitorInfo.

The PInvoke.net example was enough to get me started, but itlacked a few necessary steps. Of course, it also needed somechanges to work with Silverlight.

The first addition is the DisplayInfo class. We'll use this tohold information about a single monitor.

namespace PeteBrown.SilverlightBigWindow
{
    public class DisplayInfo
    {
        public string MonitorName { get; internal set; }
        public Win32Rect MonitorArea { get; internal set; }
        public Win32Rect WorkArea { get; internal set; }
        public int Width { get; internal set; }
        public int Height { get; internal set; }
        public bool IsPrimary { get; internal set; }
    }
}

Next, I need a way to populate this class. Here's where all thePInvoke action happens.

using System;
using System.Runtime.InteropServices;
using System.Collections.ObjectModel;

namespace PeteBrown.SilverlightBigWindow
{

    [StructLayout(LayoutKind.Sequential)]
    public struct Win32Rect
    {
        public int Left { get; set; }
        public int Top { get; set; }
        public int Right { get; set; }
        public int Bottom { get; set; }

        public override string ToString()
        {
            return string.Format("{0}, {1}, {2}, {3}", Left, Top, Right, Bottom);
        }
    }

    [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)]
    internal struct MonitorInfoEx
    {
        public int Size;
        public Win32Rect Monitor;
        public Win32Rect WorkArea;
        public uint Flags;
        [MarshalAs(UnmanagedType.ByValTStr, SizeConst = DisplayManager.DeviceNameCharacterCount)]
        public string DeviceName;

        public void Init()
        {
            this.Size = 40 + 2 * DisplayManager.DeviceNameCharacterCount;
            this.DeviceName = string.Empty;
        }
    }

 
    public class DisplayManager
    {
        // size of a device name string
        internal const int DeviceNameCharacterCount = 32;


        private delegate bool MonitorEnumProcDelegate(IntPtr hMonitor, IntPtr hdcMonitor, ref Win32Rect lprcMonitor, uint dwData);

        [DllImport("user32.dll")]
        private static extern bool EnumDisplayMonitors(IntPtr hdc, IntPtr lprcClip, MonitorEnumProcDelegate lpfnEnum, uint dwData);

        [DllImport("user32.dll", CharSet = CharSet.Auto)]
        private static extern bool GetMonitorInfo(IntPtr hMonitor, ref MonitorInfoEx lpmi);

        private static ObservableCollection<DisplayInfo> _displays = new ObservableCollection<DisplayInfo>();
        public static ObservableCollection<DisplayInfo> Displays
        {
            get { return _displays; }
        }


        public static void LoadDisplays()
        {
            EnumDisplayMonitors(IntPtr.Zero, IntPtr.Zero, MonitorEnumProc, 0);
        }

        [AllowReversePInvokeCalls]
        internal static bool MonitorEnumProc(IntPtr hMonitor, IntPtr hdcMonitor, ref Win32Rect lprcMonitor, uint dwData)
        {
            var monitor = new MonitorInfoEx();
            monitor.Init();

            bool success = GetMonitorInfo(hMonitor, ref monitor);

            if (success)
            {
                var display = new DisplayInfo();

                display.MonitorName = monitor.DeviceName;

                display.Width = monitor.Monitor.Right - monitor.Monitor.Left;
                display.Height = monitor.Monitor.Bottom - monitor.Monitor.Top;

                display.MonitorArea = monitor.Monitor;
                display.WorkArea = monitor.WorkArea;
                display.IsPrimary = (monitor.Flags > 0);

                _displays.Add(display);
            }

            return true;
        }
    }
}

This code calls EnumDisplayMonitors to enumerate the monitors onthe system. For each monitor found, I then call GetMonitorInfo topull back the details. From that call, I create a DisplayInfo classand populate it, ready to be used by the rest of the Silverlightapplication. The list of DisplayInfo classes is stored in aclass-scope collection.

Note the "AllowReversePInvokeCalls" attribute onMonitorEnumProc. That attribute is required for any callbacks. Italso means we couldn't use a simple anonymous delegate for thecallback, as those can't have attributes.

Finally, a short call in MainPage.xaml and we're able to get thedisplay sizes

public MainPage()
{
    InitializeComponent();

    DisplayManager.LoadDisplays();

    DisplayList.ItemsSource = DisplayManager.Displays;
}

Run the application. On my screen, it looks like this:

Ok, so now we know how to position a display using hard-codedvalues, and how to get the display list from windows. Now, tocombine the two to help with sizing and positioning.

Positioning and Sizing the Window

Positioning the window can be tricky. There are any number ofways that monitors can be configured. Here are just a fewinteresting (and common) ones, in addition to the ones mentionedabove:

If you look at the teal and the green examples, you can seewhere a rectangular pixel mapping puts some logical pixels out intonever-never land. On systems like that, a single window spanningall displays is not particularly practical. In any case, mostmulti-display configurations are two, or at most, three displaysbecause that's all you can typically drive from a single typicalvideo card.

As an aside, I've run with all four examples shown above, plus afew extras. My current layout is 2x 30" displays side by side withprimary on right and secondary on left, plus a 23" display on topof the primary. The 23" display is connected to a differentcomputer, however, and shared using Input Director, so it doesn'tfactor into this discussion.

With just the two displays I have, it's easy to test a number ofdifferent scenarios simply by changing resolution and monitorposition in display settings. First, some code to position thewindow on a specific screen.

Position Window on Primary Display

A PC can have only one primary display. Conveniently, thedisplay is called out as such via the API.

private void PositionWindowOnSingleScreen(DisplayInfo screen, Window window, bool SizeToScreen = true, bool maximize = false)
{
    window.Left = screen.MonitorArea.Left;
    window.Top = screen.MonitorArea.Top;

    if (SizeToScreen)
    {
        window.Width = screen.Width;
        window.Height = screen.Height;
    }

    if (maximize)
        window.WindowState = WindowState.Maximized;
}


private void OpenPrimary_Click(object sender, RoutedEventArgs e)
{
    if (DisplayManager.Displays.Count > 0)
    {
        // find primary display
        DisplayInfo info = (from DisplayInfo di in DisplayManager.Displays
                            where di.IsPrimary
                            select di).FirstOrDefault();

        if (info != null)
        {
            Window w = new Window();

            PositionWindowOnSingleScreen(info, w, true, false);

            w.Show();
        }
        else
        {
            MessageBox.Show("No primary display. I suppose you won't see this message.");
        }
    }
    else
    {
        MessageBox.Show("Display list not yet loaded.");
    }

}

This example uses a little LINQ to find the primary screen andthen a separate function to position the window on that screen. Ican't think of a case where you'd have no primary display, but Icheck for it anyway.

Position Window on Secondary Display

Primary is cool. You can do that without any API calls.Secondary is normally a little more work, but I have youcovered.

You can, of course, have more than one secondary display. In mycase, I have only one, so I'm going to position this window in thefirst secondary display I have.

private void OpenSecondary_Click(object sender, RoutedEventArgs e)
{
    if (DisplayManager.Displays.Count > 0)
    {
        // find first secondary display
        DisplayInfo info = (from DisplayInfo di in DisplayManager.Displays
                            where !di.IsPrimary
                            select di).FirstOrDefault();

        if (info != null)
        {
            Window w = new Window();

            PositionWindowOnSingleScreen(info, w, true, false);

            w.Show();
        }
        else
        {
            MessageBox.Show("No secondary display available.");
        }
    }
    else
    {
        MessageBox.Show("Display list not yet loaded.");
    }
}

In this case, all I needed to change was the error message andadd a little bang in the where clause of the LINQ query.

Make a window take up all Display Space

This goes specifically to the 3x3 screen scenario. As Imentioned, we'll need to assume rectangular window space here, asanything else is going to be pretty application-specific.

private void OpenWindow_Click(object sender, RoutedEventArgs e)
{
    if (DisplayManager.Displays.Count > 0)
    {
        Window w = new Window();

        w.Left = (from DisplayInfo di in DisplayManager.Displays
                  select di.MonitorArea.Left).Min();

        w.Top = (from DisplayInfo di in DisplayManager.Displays
                 select di.MonitorArea.Top).Min();

        w.Width = (from DisplayInfo di in DisplayManager.Displays
                   select di.Width).Sum();

        w.Height = (from DisplayInfo di in DisplayManager.Displays
                    select di.Height).Sum();

        w.Show();
    }
    else
    {
        MessageBox.Show("Display list not yet loaded.");
    }
}

Because we're assuming a reasonably logical rectangle, I cansimply take the minimum left and top values and use that toposition the window, and then sum the height and width values inorder to size the window.

As an aside, Silverlight had no issues opening this window on mymachine. I'm not sure I'd recommend stretching a video across it,though.

Well, actually, I can't let that lie out there like that. Let'stry it. Add this code right after the w.Height setting and beforethe w.Show() line

MediaElement video = new MediaElement();
video.Width = w.Width;
video.Height = w.Height;
video.Source = new Uri("/pub/sl5iA/NetduinoRobot_SmallM.wmv", UriKind.Absolute);
video.Stretch = Stretch.UniformToFill;
video.AutoPlay = true;

w.Content = video;

I stretch the video so it takes up all space (UniformToFill) andclips the video so the aspect ratio stays correct. It works, andworks well, If the the video was high enough resolution, it wouldeven look good.

Sweet! Big video. That's almost like IMax or UHDTV :)

Position Main Window on a Named Display

This is particularly useful if you're restoring windows whenstarting up a new session. You could store the display device nameand then do some checks on startup and if the device name andresolution are still valid (they could have swapped displays,bought new ones, got rid of one, etc.) position the window on thatdisplay. If not, position it on the main display.

In this case, I'm simply going to position the main Silverlightwindow on to the display you click on in the ListBox. The code issimple enough. First, add a button to the MainPage, under the otherbuttons.

<Button Content="Move to Selected"
        Height="23"
        HorizontalAlignment="Left"
        Margin="12,115,0,0"
        Name="MoveToSelectedButton"
        VerticalAlignment="Top"
        Width="108"
        Click="MoveToSelectedButton_Click" />

Next, the event handler and work function in the code-behind.There are many ways I could have done this (especiallyusing SelectedItem), but I specifically want to show using thedevice name. I know it's extra work, but I'm doing iton-purpose; the value you store upon exiting is not going to be anobject instance, it's going to be a screen device name string.

private void MoveMainWindowToSelectedDisplay()
{
    // see comments in blog post as to why I went with strings
    string deviceName = ((DisplayInfo)DisplayList.SelectedItem).MonitorName;

    DisplayInfo display = (from DisplayInfo di in DisplayManager.Displays
                            where di.MonitorName.ToLower() == deviceName.ToLower()
                            select di).FirstOrDefault();

    var mainWindow = Application.Current.MainWindow;

    // center on the display

    mainWindow.Left = display.MonitorArea.Left + (display.Width - mainWindow.Width) / 2;
    mainWindow.Top = display.MonitorArea.Top + (display.Height - mainWindow.Height) / 2;

}

private void MoveToSelectedButton_Click(object sender, RoutedEventArgs e)
{
    if (DisplayList.SelectedItem != null)
    {
        MoveMainWindowToSelectedDisplay();
    }
    else
    {
        MessageBox.Show("Please select a screen from the list");
    }
}

The code moves the window to the selected monitor and thencenters in that monitor. Some additional checking to make sure thewindow isn't wider than that monitor would be a good idea.

Summary

The intent of this post was to give you the foundation you'llneed in order to do window manipulation in Silverlight. Once youstart doing multi-monitor window manipulation, you probably have agood idea of what you want to do with it. I'll leave it up to youto take this code and run with it to suit your specific applicationneeds.

Unified Ad for Windows Phone - Part 1 - Introduction

Tue, 07 Feb 2012 21:13:42 +0100

About a month ago I started a new investigation about which Ad Provider I should use. Things I wanted.

- Best eCPM

- Best Fill Rate

- Easy to use

Some of the things that are causing problems is the Ad Availability per Country. Depending on where your app is used more or less localized ads are used. So we know that the Microsoft PubCenter has a high eCPM for the US, it is low for The Netherlands. There are more of those problems with other Ad Providers. I heard there was a solution for this problem. Use the Ad Rotator for Windows Phone 7 which can be found on Codeplex. I did give it a try but at that moment AdMob was not supported (mostly because there were some AdMob specific problems) and also MobFox and Smaato weren’t supported. Those were the specific Ad Providers I was interested in.

My initial though would be, let’s try to modify the source a little bit, to get support for MobFox and Smaato in. But after looking into the source I was warned, almost all the code was in the Code Behind for the AdControl. While I am not against the usage of the Code Behind, I’m pro extensibility. The code I saw was far from maintainable and extensibility is done by adding more code. So when more AdProviders will be added code will be less and less maintainable.

Unification

When I look at the differences between the AdControls, they more or less do the same, but in a different way. All of them have a TestMode, but enabling the testmode is different for each AdControl. Same for the events they have. I want to have a unified ad control that does handle these ‘Complexities’ for me and the rest of the world. There isn’t such a control yet, so why not use the good parts of wp7adrotator (the remote configuration, multiple adproviders) and create something that suits my needs better. So I did.

The Windows Phone Unified Ad control is universal in the following ways.

Properties:

- Country – Will be passed to all the AdProviders that support Country or Location as input

- IsTest – Will be pass to all the AdProviders that support a way of TestMode. Some have a simple boolean field, others require to set the PublisherId to be set to a specific value.

Events:

- NewAd – When a new ad is available this event will be fired, even though the different AdProviders have different events to notify the user, like: NewAdAvailable, AdLoaded, ControlAdRefreshed.

- NoAd – When no ad is availabe this event will be fired, even though the different AdProviders have different events to notify the user, like: AdFailed, ControlErrorOccurred, AdError.

- AdEngaged – When an ad is engaged or clicked this event will be fired, even though the different AdProviders have different events to notify the user, like: AdClick, ControlAdEngaged, ControlIsAdEngagedChanged, AdLeavingApplication.

Best Fill Rate

To get the best fill rate the Windows Phone Unified Ad control supports ad provider rotation. As soon as an Ad Provider is not providing an ad the next Provider will be asked to provide an ad. This will enable you to get a higher fill rate compared to using just one ad provider. You can even roll in your own custom ad based on Xaml.

Best eCPM

Every single Ad Provider changes it’s eCPM from time to time. But they even have different eCPMs per country. Same as they might have, or might not have ads for a particular country at all. To get the best of both worlds Windows Phone Unified Ad control supports AdProviders per Country. Similar to the wp7adrotator, but instead the Country is used and not so much the full culture. If you already have configuration files for wp7adrotator you can use those as well, they are supported in the Windows Phone Unified Ad control as well.

Supported AdProviders

All Ad Providers that currently have an Ad Control for Windows Phone 7 are supported. Register with the ones you like best. Inner-Active support is experimental because they have no way to find out there’s an ad displayed or not, yet.

There are two special Ad Provider implementations.

- None – This ad provider is used to not show an ad at all. Can be very handy during testing phase, when testing the application and not the advertisements. But could also be used to show no ads for a certain percentage of the app usage.

- GenericAdProviderForXaml – This ad provider is used to show some custom Xaml that’s loaded from a remote url. Can be very handy to market your own applications within your own applications.

What’s next?

Next part will be about the basic usage of the Windows Phone Unified Ad Control. If you can’t wait? You can find the source and an example project with the Windows Phone Unified Ad control on codeplex. If you want to start right away you can add the NuGet Package called WPUnifiedAd. Also the homepage contains a basic guide that will help as well.

Part 3 will be about using the Remote Ad Provider Configuration. Future parts will come on how to make use of the GenericAdProviderForXaml