Laurent Bugnion (GalaSoft)

Using the predefined buttons styles for the ApplicationBar in Windows 8

Laurent Bugnion — Mon, 25 Mar 2013 14:25:09 GMT

Originally posted on: http://blog.galasoft.ch/archive/2013/03/25/using-the-predefined-buttons-styles-for-the-applicationbar-in-windows.aspx

When you create a new Windows 8 application, the Common folder contains a file named StandardStyles.xaml. Amongst other styling resources, this file contains a trove of application bar buttons styles, including Microsoft Design-like icons.

In order to use these styles, however, you need to uncomment the corresponding one. Microsoft commented these styles out, because otherwise they would be instantiated by the XAML parser when the app starts, which would cause some delays and use unnecessary memory. That makes it a bit tricky to find the right button style you want to use for your app bar.

To make things a little easier, I made an app that you can download and run.

Download the app packaged in a zip file.
Right click on the zip file and select “Properties”.
If the Unblock button is available in the Properties dialog, click it.
Right click on the zip file again and select “Extract All”.
In the extracted folder, find the SLN file and run it.

This app shows all the available button styles. It also offers the possibility to copy the style name to the clipboard (in order to paste it in your app) as well as the glyph used by the style.

The glyph is a code such as, for instance, “”. Because the button styles are using the FontFamily “Segoe UI Symbol” (which you can see in the AppBarButtonStyle element in the same file), this glyph will translate visually to an icon. For instance, the glyph mentioned here is the “Discard” glyph and looks like this:

When you run the app, you can swipe down to show the application bar and use the commands to copy either the style name or the glyph. Note that to use the style in your own app, you need to open the file StandardStyles.xaml, locate the style by its name and make sure that it is not commented out!

About the styles

The app bar button styles are defining not only the icon, but also the text that will be used for this button. If you inspect the styles, you will find that the AutomationProperties.Name attached property is used, rather than the Content property. This is because the AutomationProperties.Name will enable screen readers to work and to read the button’s caption out loud. Of course you can overwrite this caption at any time in the button itself of in a Style based on the button style you want to use.

Finally, note that you can of course use your own icons (images) in AppBar buttons styles but you will have to define your own control template for that (which is easy in Blend).

Using the predefined AppBar buttons styles has the big advantage to make your users feel comfortable with icons that they already know, and the design of these icons is completely right for Microsoft Store apps. The disadvantage is that they are not original creations (so they are less innovative).

I hope that this small app will be helpful for everyone. Note that I presented this app in my recent talk at TechDays Belgium and Netherlands, talk which can be seen in this blog post.

Happy coding
Laurent

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

Session material from TechDays BE and NL

Laurent Bugnion — Sun, 10 Mar 2013 17:29:26 GMT

Originally posted on: http://blog.galasoft.ch/archive/2013/03/10/session-material-from-techdays-be-and-nl.aspx

UPDATE: Added the videos

Note: Like all material on this blog, this blog post and all the referenced material are licensed under the Creative Commons Attribution 3.0 Unported license. You are free to reuse material from this post and from the referenced material, but you must attribute this material to me, and link to this blog post, or to my website. Thanks!

I had the chance to be invited again to speak at TechDays in Belgium (Antwerp) and in the Netherlands (The Hague), and delivered 3 sessions (one of them twice) to an audience of developers. It was as usual a very wonderful experience in two very well organized events. I also had the chance to speak to a number of great speakers such as Jeff Prosise, Ben Riga, Beth Massi, Iris Classon, Rich Griffin and many more who, in the past years spent travelling and speaking at various events around the world, have become really good friends. Meeting these old friends and talking to a lot of new people at conferences is really enriching and brings me a lot of joy. That is the real value of community in what we do, discovering new technologies together and sharing that knowledge.

Here is the material I used in my sessions.

Putting the Microsoft Design Language to work

Last year I started presenting a design session about what was then called the Metro design language. This year, I evolved the talk to include many practical examples of existing Windows Phone and Windows 8 apps, as well as many practical tips and tricks that our many years of experience developing with the Microsoft design language have taught us.

Abstract:

The new Microsoft Design Language (formerly known as Metro) has taken the tech world by surprise. It brings a refreshing change from hyper realistic design, and offers a welcomed alternative to the other mobile platforms. From Zune and then Windows Phone, the Microsoft Design Language is now used on a number of platforms and devices, notably on Windows 8 apps. In this session, we will see how we can practically convert the five design principles and put them to work, by studying real life applications and understanding how they were applied.

Video of the talk: High Quality WMV

Slides: http://sdrv.ms/ZBIU9r

The videos I showed to illustrate motion design and kinetic typography:

Source code:

AllAppBarButtons: A small Win8 app I put together to make it easy to view and use the Windows 8 application bar buttons. Remember that in order to use the buttons from the Common/StandardStyles.xaml resource dictionary, you need to uncomment the corresponding styles.
GridDemo: An example of how to use Blend to design the various states of the app: Portrait, Landscape, Snapped, Filled.
ShareContractDemo: An example of how to setup your app to be a share target for text and URI content.

Coding and designing for Windows 8 and Windows Phone

Sharing code is easier than ever with the usage of Portable Class Libraries (PCL). This technology is still quite new and a bit immature but we are moving fast! In this session, I show how to setup two apps (Windows Phone and Windows 8) with PCL, how to use Nuget to pull libraries, how to share code at source level too, and how to use NFC to send items from one device to the other.

Abstract:

With the release of Windows 8 and Windows Phone 8, Microsoft is reaching a new level of compatibility between desktops, laptops, tablets and mobile phones. This compatibility is not only at code level, but also visually, with the usage of the Microsoft design language. In this session, we will talk about best practices to share and reuse code and about UI design considerations in order to create the best possible experience for the user.

Video of the talk: High quality WMV

Slides: http://sdrv.ms/XAGmKY

Source code:

FriendsService: The web service I use to deliver the JSON list of Friends.
Friends: A Windows Phone and Windows 8 app connecting to the FriendsService to load a list of friends. The apps are setup for design time data (open in Blend to see it), MVVM (with MVVM Light), JSON.NET, the new HttpClient library, and NFC to connect the Windows Phone to the Windows 8 device.
AsyncWebClient: An example of how to create an asynchronous web client that can be used with async/await in Windows Phone, and consume it with the same async/await syntax in Windows 8 and in Windows Phone.

Advanced Windows Phone 8 development

Abstract:

Windows Phone 8 is the next big thing, and the press is already raving about new devices. With new capabilities, new sensors and improved performance, Windows Phone users have devices which are the best on the market. In this code-packed session, we will talk about advanced features such as asynchronous programming, web connections, mapping and location, background operations (multitasking) and other exciting topics.

Video: High Quality WMV

Slides: http://sdrv.ms/XAHheu

Source code:

PhoneDemo: The full demo with Nuget, JSON.NET, MVVM (with MVVM Light), design time data (for Blend), NFC, Speech, Background Task, Toast notification, Live tile, Mapping and Location.
SimpleBackgroundTask: A simple app showing how to setup a background task, using toast and live tile for notification.
SimpleNfc: A simple app showing how to use NFC to exchange data between a Windows Phone and a Windows 8 device.
SimpleSpeech: A simple app showing how to make your phone speak, and how to make it react to voice commands.

Hoping that all this material will be useful to many developers out there!!

Happy coding,
Laurent

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

MVVM Light V4.1.27.0 in Nuget

Laurent Bugnion — Thu, 14 Feb 2013 20:44:15 GMT

Originally posted on: http://blog.galasoft.ch/archive/2013/02/14/mvvm-light-v4.1.27.0-in-nuget.aspx

I just pushed a new version of MVVM Light to Nuget. The new version is 4.1.27.0. The difference towards the previous version (4.1.26.1) and this one is that I am not depending on the CommonServiceLocator Nuget package instead of providing my own.

However, the CommonServiceLocator does not exist for all MVVM Light-supported frameworks. We have the following situation:

WPF3.5 SP1, WPF4, WPF4.5: Depends on the CommonServiceLocator Nuget package.
Silverlight 4, Silverlight 5: Depends on the CommonServiceLocator Nuget package.
Windows Phone 7.1, Windows Phone 8: Provides its own CommonServiceLocator implementation
Windows 8: Provides its own CommonServiceLocator implementation
Windows Phone 7.0, Silverlight 3: Not supported anymore in Nuget.

This change was needed for two reasons:

Simplifying the deployment by relying on existing packages instead of using my own.
Avoiding strong name issues when working in conjunction with another package that uses the CommonServiceLocator (such as Unity for example).

MVVM Light (full) now depends on MVVM Light Libs

There are two packages in Nuget for MVVM Light:

MvvmLightLibs provides only the DLLs with the toolkit’s components. No additional content is added.
MvvmLight provides the DLLs and also a skeleton of ViewModelLocator and MainViewModel (as files). It also modifies the App.xaml and MainPage.xaml file to (attempt to) wire the ViewModelLocator and the MainViewModel (as DataContext). There are still a couple of issues in Windows 8 and Windows Phone 8 which I will do my best to solve ASAP.

What’s next? Installer!

The next step will be to finally provide the full MSI with the 4.1.27 build of the DLLs as well as some changes to the project templates. I had a few issues with the installer but I have good hopes that I can resolve that soon.

Happy coding
Laurent

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

Using async/await with WebClient in Windows Phone 8 (or: TaskCompletionSource saves the day)

Laurent Bugnion — Sun, 27 Jan 2013 15:52:15 GMT

Originally posted on: http://blog.galasoft.ch/archive/2013/01/27/using-asyncawait-with-webclient-in-windows-phone-8-or-taskcompletionsource.aspx

When you share code between Windows Phone 8 and Windows 8, you can use async/await to code against asynchronous APIs, which is a nice step in the right direction. However there are Windows Phone APIs that do not support async/await yet. Probably the most annoying to date is the WebClient (which in Windows 8 has been replaced by a better API called HttpClient).

Now, HttpClient’s methods support async/await. But WebClient’s methods do not support it, and so we have to resort to the old Completed event. This is annoying because even if we pack the HttpClient or the WebClient into a wrapper, we cannot make the wrapper’s methods compatible between Windows Phone 8 and Windows 8.

For instance, we can create a simple dataservice fetching an RSS feed. The service’s interface is:

public interface IRssService
{
    Task<IList<RssArticle>> GetArticles();
}

The DataService implementation uses a Downloader class to do the actual act of downloading. This abstracts the differences between Windows RT and Windows Phone and this object can be shared between the two environments.

public class RssService : IRssService
{
    private const string NewsPageUrl = "http://rss.cnn.com/rss/edition.rss";
 
    public async Task<IList<RssArticle>> GetArticles()
    {
        var downloader = new Downloader();
 
        var feed = await downloader.GetRssFeed(NewsPageUrl);
 
        var reader = new StringReader(feed);
        var document = XDocument.Load(reader);
 
        // Assume that feed is always well formed
 
        var list = document
            .Element("rss")
            .Element("channel")
            .Descendants("item")
            .Select(
                itemXml => new RssArticle
                {
                    Link = new Uri(itemXml.Element("link").Value),
                    Title = itemXml.Element("title").Value,
                    Summary = itemXml.Element("description").Value
                })
            .ToList();
 
        return list;
    }
}

In Windows 8, we use the HttpClient in the Downloader, and async/await to make the asynchronous execution flow more comfortable for the user:

// Windows RT downloader
public class Downloader
{
    public async Task<string> GetRssFeed(string feedUrl)
    {
        var client = new HttpClient();
        var result = await client.GetStringAsync(new Uri(feedUrl));
        return result;
    }
}

In Windows Phone 8, however, because of the usage of the DownloadStringCompleted event, you have to break the flow of execution and use a callback. As a consequence, the Windows Phone 8’s RssService cannot implement the IRssService interface, and there is a larger layer of code that needs to be rewritten instead of being shared.

// Downloader for WP8 using the Completed event
public void GetRssFeed(string feedUrl, Action<string, Exception> callback)
{
    var client = new WebClient();
    client.DownloadStringCompleted += (s, e) =>
    {
        if (e.Error == null)
        {
            callback(null, e.Error);
        }
        else
        {
            callback(e.Result, null);
        }
    };
 
    client.DownloadStringAsync(new Uri(feedUrl));
}

But thankfully there is a way. The way I am using is relying on the TaskCompletionSource’s class, which can be used to let the asynchronous method wait until a certain condition is completed. This can be useful, for instance, if you are sending multiple requests in parallel and waiting for all of them to complete before you continue execution, or in our case, if you are waiting for an asynchronous event to fire. We can rewrite the Windows Phone method and make it fit nicely in our async/await execution flow.

// Downloader for WP8 using the TaskCompletionSource
public Task<string> GetRssFeed(string feedUrl)
{
    var tcs = new TaskCompletionSource<string>();
 
    var client = new WebClient();
    client.DownloadStringCompleted += (s, e) =>
    {
        if (e.Error == null)
        {
            tcs.SetResult(e.Result);
        }
        else
        {
            tcs.SetException(e.Error);
        }
    };
 
    client.DownloadStringAsync(new Uri(feedUrl));
 
    return tcs.Task;
}

As soon as the method is executed, the TaskCompletionSource gets created, and then its Task property is returned on line 21. However the execution of the caller does not continue just yet. Instead, the caller waits (because it uses the await keyword) until the TaskCompletionSource’s SetResult (or, in case of error, SetException) method is called. This allows us to use the Downloader in the RssService in the exact same manner both in Windows RT and Windows Phone, and thus to share more code than if we had to use the callback.

Other usages for TaskCompletionSource

Like I mentioned above, TaskCompletionSource can also be used to synchronize multiple asynchronous operations. By definition, asynchronous operations are unpredictable. You can send the same sequence of requests multiple times and get results in a different order every time. One way to avoid that is to send the requests sequentially: Wait for a response before sending the next request. This simplifies the flow of the execution, but it also takes longer than sending the requests in parallel. Instead, it is better to take advantage of the architecture of the web, and to send the requests in parallel. Then, we wait until all the responses are back before returning the result to the caller.

For instance, the following code aggregates multiple RSS feeds. Each request is sent in parallel, which speeds up getting results by optimizing the usage of the server (or servers). However, to keep implementing the IRssService interface, we keep everything in one method and wait until all the responses get back to the client (or until an Exception is caught).

public class MultiRssService : IRssService
{
    private const string NewsPageUrl = "http://rss.cnn.com/rss/edition.rss";
    private const string TechPageUrl = "http://rss.cnn.com/rss/edition_technology.rss";
    private const string SpacePageUrl = "http://rss.cnn.com/rss/edition_space.rss";

    public Task<IList<RssArticle>> GetArticles()
    {
        var tcs = new TaskCompletionSource<IList<RssArticle>>();

        var list = new List<string>
        {
            NewsPageUrl,
            TechPageUrl,
            SpacePageUrl,
        };

        var completed = 0;
        var result = new List<RssArticle>();

        foreach (var url in list)
        {
            try
            {
                GetOneFeed(
                    url,
                    articles =>
                    {
                        result.AddRange(articles);

                        if (++completed == list.Count)
                        {
                            tcs.SetResult(result.ToList());
                        }
                    });
            }
            catch (Exception ex)
            {
                tcs.SetException(ex);
            }
        }

        return tcs.Task;
    }

    public async void GetOneFeed(string url, Action<IEnumerable<RssArticle>> callback)
    {
        var downloader = new Downloader();
        var feed = await downloader.GetRssFeed(url);
        callback(ParseFeed(feed));
    }

    private IEnumerable<RssArticle> ParseFeed(string feed)
    {
        var reader = new StringReader(feed);
        var document = XDocument.Load(reader);

        // Assume that feed is always well formed

        var list = document
            .Element("rss")
            .Element("channel")
            .Descendants("item")
            .Select(
                itemXml => new RssArticle
                {
                    Link = new Uri(itemXml.Element("link").Value),
                    Title = itemXml.Element("title").Value,
                    Summary = itemXml.Element("description").Value
                });

        return list;
    }
}

Conclusion

Asynchronous programming with async/await is more comfortable than the « old way » with callbacks, but it requires that the asynchronous method returns a Task in order to be awaitable. Since that is not always possible, especially when using old APIs that have not been updated yet. TaskCompletionSource, when available, offers a possibility to abstract the old APIs away and return the Task needed for the new methods to be awaitable. This can be used when sharing code (for instance between Windows RT and Windows Phone 8), or to synchronize multiple requests and return only one result.

Happy coding!
Laurent

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

2012 in review

Laurent Bugnion — Sun, 06 Jan 2013 20:11:02 GMT

Originally posted on: http://blog.galasoft.ch/archive/2013/01/06/2012-in-review.aspx

It seems it was only yesterday that I was writing about starting my 4^th year at IdentityMine, and here we are now, more than a year later.

The year 2012 has been particularly interesting for all of us in the tech space, and particularly for us who are observing the Microsoft brand. Now, those of you who know me also know that I am an undying optimist (something that is sometimes mistaken for fanboism), so I will make a big effort in adding a dose of realism into this billet. Nonetheless I think we can all agree that this year was a year seeing Microsoft react, with more or less success, in a few areas where it had been sleeping (and slipping, ha ha) for a few years, notably the slate and the phone markets. We can argue endlessly to know if these ventures will be successful or not, but honestly I don’t have (a) the time and (b) the interest to do so. Bottom line is, no one knows for sure what will happen next year (and the next and the next). Let’s rather discuss what happened.

Silverlight

2012 is probably the year where Silverlight, as a brand, was the least talked about in the tech circles. Interestingly though, we still see a lot of Silverlight (for the desktop) projects going on. It’s clear that some opted out of it following the PR fiasco but it is also clear that there isn’t a really satisfying alternative to build a certain type of applications. I am still a strong believer that the promises held by Silverlight are valid and (for the most part) fulfilled. And if it transitioned from being actively developed to being merely supported (for another many years, more in fact than for most technologies available today), it was not because of technical reasons but clearly because of a political fiasco at the management level. Interestingly, too, the main actor of this fiasco now left Microsoft (as we will discuss later), but not without having inflicted a lot of damage. Because of these actions, many good people left (sometimes with a bitter feeling, as is proven by some very disillusioned messages in social media), others moved out from their previous role to another within the company (where at least they continue to do good work for our benefit, so kudos), and of course Silverlight changed its course.

On the positive side however, 2012 has also been the year where XAML has confirmed its role as a leading UI technology, and this on multiple platforms. If we have XAML on the XBOX (see below) and on phones, it is clearly because Silverlight for the desktop paved the way, having created a portable, lightweight and elegant environment. The tools too (notably my personal favorite Blend) and the patterns (notably MVVM) are proving themselves to be available for all the supported platforms. Even though XAML is not completely stable yet, and some differences remain between these platforms, the fact remains that a large portion of a developer’s skills are portable and allow us to get started very fast on any XAML-based platform. The reason why we were able to develop a large number of Windows 8 apps in a short period of time is because of XAML and of the patterns and tools. Our learning curve (given that we were already experts in XAML) was super short. And the result speaks for itself, as some of the best rated apps in the Windows Store today have been developed by IdentityMine.

Being a Silverlight MVP

2013 is my 7^th year as an MVP and my 5^th year as a Silverlight MVP. That might seem a bit weird, and I have been hoping to see the creation of an expertise dedicated to XAML frameworks in general. In my experience, it is very rare that a XAML developer limits himself to just one platform. Nowadays, people who develop for Silverlight often develop for WPF too, people who develop for Windows Phone often develop for Windows 8 too, etc. However creating a new MVP expertise is not that easy, there are many considerations. In the meantime, Silverlight MVPs are strongly encouraged to contribute to community efforts (blogging, developing, teaching, speaking) on all XAML frameworks. So really, even if the title is “Silverlight MVP”, we are all “XAML MVPs” already J

Of course I am honored to get the MVP award once more, but I hope it is clear that everything I do, I do it for its own reward. Speaking at conferences, writing articles on my blog and in magazines, this is a huge pleasure in itself. And developing MVVM Light gives me the pleasure of knowing that this code is used by thousands of developers worldwide, and that it powers some of the most popular apps in Windows Store, Windows Phone store, XBOX and other platforms. I often said that MIX06 and the presentation of XAML changed my life, so thank you to everyone who makes it possible!

Windows Presentation Foundation

We see a continued (and even increasing) interest in WPF-powered applications for Windows desktop. That’s not really a huge surprise, considering that WPF is still the best technology to build desktop applications, also for Windows 8. Of course these application won’t run on WinRT devices (such as Surface RT). But WinRT apps are not intended as a replacement for full blown desktop apps anyway. Following the Metro guidelines (yeah I said Metro, sue me), WinRT apps should concentrate on fulfilling just a few tasks, while a desktop app rather delivers a complete suite of features. I have always seen WinRT apps as a kind of companion to desktop application, with which they may even share some code (thanks to C#, XAML and MVVM), but I don’t think many are going to abandon the development of their desktop client to replace it with a WinRT app. Instead, the WinRT apps are, in most cases, going to be developed side by side with more traditional applications.

2012 has confirmed this opinion, and we see a lot of projects started in WPF these days. The uncertainties around Silverlight’s fate probably played a role too, as well as the new improvements in .NET4.5 (such as the introduction of async/await), and the interaction with hardware (such as Kinect, to name just one). Of course this makes us very happy, seeing as we love WPF and have a huge experience with this technology.

XBOX

The development of a new breed of apps on the XBOX platform has also kept us very busy this year. Because it’s still a private SDK, only a few firms have been invited to develop for this platform, and we have kept rather silent on which apps we developed for which clients. It’s worth mentioning that it is XAML/C# under the covers, and that we are able to use the well-known development workflows, tools and patterns: MVVM (and MVVM Light), design time data, Blend, Visual Studio, etc.

Windows Phone

2012 was a big year for Windows Phone in terms of technology and excitement. The release of Windows Phone 8 and of the new devices by Nokia, HTC and Samsung were some big highlights. I had the privilege of getting a developer device and started to use WP8 as my secondary device early on. It’s only when I got my Nokia Lumia 920 at the Build conference that I transferred my SIM card to it and made it my primary device (upgrading from a Lumia 900). I really love the Lumia devices. I find the size of the device really great (I always loved big PDAs and phones, having had a series of Palm devices earlier, including the LifeDrive that was really big and heavy). The Lumia 920 feels extremely solid and smooth to the touch, even without a case. Note that I ended up buying a cyan Incipio ultralight shell, but it is really only because I missed the cyan color (the device we got at Build was the black version).

Windows Phone 7.5 devices will be updated (in the next few days) to version 7.8. Some in the press talked about a slap to existing users, because their devices wouldn’t be updated to the full Windows Phone 8 system. However we need to consider that the full WP8 requires some hardware features that are not available in the earlier devices, such as NFC. Note however that some lower end Windows Phone 8 devices won’t have NFC either. What I am getting at is that Windows Phone 7.8 won’t be that different from Windows Phone 8, once you take the hardware limitations in account. I think Microsoft shouldn’t have named it 7.8. I think it’s just a symptom of bad marketing, really, one more sign that Microsoft should pay more attention to naming and versioning.

In December, Lumia Phones started to get sold in China, and there was apparently a lot of buzz and devices sold out really fast (of course we don’t know how many devices were actually available, but seeing the lines at the Nokia store, it’s easy to see that there was a LOT of interest for these phones). This is not really surprising considering that Nokia has always been a very strong name in Asia (and in Europe and Africa for that matter). For US based observers, it is easy to forget that, seeing that Nokia lost a lot of ground there against the iPhone. For the rest of the world however, Nokia is still a synonym for quality and affordable phones. Apple is losing ground in many places. Of course right now Android is really strong but I think that the really exciting UI and the lack of fragmentation are going to push Windows Phone to be a serious contender. In any case it is definitely going to be an exciting time for Windows Phone enthusiasts, one where we will see the few big names that are still missing make a welcomed appearance to the platform. And maybe it will be the year where the press realizes that Windows Phone does not have Instagram (yet) but there are other apps that are exclusive (or simply much, much better) to Windows Phone, such as the Office suite, Skydrive, the online/offline Nokia maps (and the awesome Drive app on Lumias), and more. Sure there is a long road ahead in terms of marketing, but we now have the material, both software and hardware, to make a real impression on the public.

Windows 8

I installed Windows 8 on my main machine (on a secondary partition) during Build 2011 and I started using it as my primary OS around March this year. Early on, I wrote about the “split personality” issue in Windows 8, especially when you use it on a laptop (or a desktop, which I have not used in quite a long time). In time, I find that this is much less of an issue then when I started using it.

I am currently using the following machines in my everyday work:

- My Nokia Lumia 920 which is pretty much always with me.

- My Dell Precision, 15.6’’. This is a powerful machine, kind of a desktop replacement, but still portable enough that I can travel with it.

- The Samsung Slate 7 that we got at the Build 2011 conference.

- The Microsoft Surface that we got at the Build 2012 conference.

Before I go on, yes I am aware that I am super lucky that IdentityMine sends me to these events.

Apart from the Lumia, obviously, I am using Windows 8 on all machines. The Surface is a RT, so I cannot code on it. This is the only reason why I don’t think I will ever travel only with the Surface, even though the battery life is fantastic, and it is an awesome device. I just need a device on which I can code, even in vacation. Anyway, I find that Windows 8 is really convenient to use on all these machines, with touch or with mouse/keyboard. On the Surface, which I use primarily with touch, I arranged my apps neatly on the start screen. On the Dell, however, I spend very little time on the Start screen: In, type to search, click to start the app, out.

Steven Sinofsky’s departure

Right after Build, I flew to Malmo, Sweden, for the Oredev conference that takes place every November. There I sat with Scott Barnes (@MossyBlog) for dinner and we talked about various things. Notably, I mentioned that I had been surprised not to see Steven Sinosfsky at the Build keynote. Neither him nor the IE team were on stage at that occasion, in the contrary of most previous such conferences. I really thought I would see them gloat and repeat how wonderful IE is, and how HTML is the savior of civilization. I told Scott that I was wondering if that was the beginning of the end for Steven, and that I was not sure the board would ever select him as CEO, given that he is not a team player.

A few days later, the news came: Sinofsky ~~was fired from~~ left Microsoft (to this day it is not quite clear what exactly happened. Personally, I think he was thank-you-very-much’ed by Steve Ballmer and then told he couldn’t continue to divide Microsoft like he had been doing until now. The official announcement, of course, talks about mutual understanding.

I am both happy and worried to see Sinofsky go. Worried because, like or dislike him, he was an efficient project manager in his division, a capable engineer, and he showed himself able to take an bad product (Vista) and turn it into something pretty awesome (Windows 7). But I am also happy to see him leave, because I think he has caused a lot of damage within Microsoft. He has consistently undermined the efforts of the Developer Division to promote .NET and of course caused the change of strategy around Silverlight, because he felt it was threatening Windows. At this point in time, however, with all the talk of cross platform, with technology spanning between devices, what Microsoft needs is a unifier, not a divider. Someone who is able to make the divisions work together. Sinofsky was definitely not this person, and now he is gone.

HTML and the reality

The last thing that was apparent in 2012 is the reality check that HTML5 developers had to face. In 2010 and 2011, HTML5 was sold to client application developers as the panacea, the cure to all the issues that one could face. Of course experienced developers have been promised the famous “write once run everywhere” many times before, and have been disappointed every time. One big difference this time was that, for political reasons, Microsoft also pushed HTML as being a way to share code between the web and Windows 8.

Unfortunately it is not that simple. HTML and JavaScript alone won’t cut it, you need some frameworks to assist you, like every web developer knows. For most, it is jQuery. But if you use jQuery, you don’t have integration with the Windows 8 features. Microsoft also came up with a framework named WinJS, but if you use that, you cannot share that code with the web, and thus you lose the advantage. So you have to put up with the inconveniences of JavaScript (weak typing, bad tooling) to gain… well not much really.

In fact, in terms of cross-platform coding (at least on Microsoft devices), we can argue that XAML/C# is better, since you can share a good portion of code between Windows Phone and Windows 8 apps, for instance (and even with Silverlight or WPF applications). This requires discipline and some experience but it can be done. Windows Phone 8 doesn’t support HTML/JS for native application development.

Two interesting cases were brought to my attention in 2012:

The first one was of course Facebook. Mark Zuckerberg was quoted saying that betting on HTML5 was Facebook’s biggest mistake, and scrapped their HTML-based mobile application, going back to a native app. Of course there was a lot of discussion around the fact that maybe Facebook’s engineers are not the best and maybe they made some errors in architecting their app and their services, which is very possible. Still, the same engineers are reaching better results with a native app (different code for each platform) than with a single code base. That’s a sign that the promises of HTML5 are not fulfilled.

The other one I noticed was the firm Polyvore who dedicated a whole blog post to their issues with an HTML5 based application. Eventually they had so many troubles that they, too, decided to scrap it and start fresh with Objective C, even though they had no experience with that language. The post’s title says it all: “Web Developer Admits: Objective-C > HTML5”.

I think that after the craze of 2011, people are realizing (again) in 2012-2013 that really there is no silver bullet in software development. Yes you can create cool experiences in HTML/JS but that takes work and it is not going to run everywhere magically. And if you want to create great experiences, you’ll need to resort to per-device customization, which is going to take time and effort and eventually be so painful that it is easier to just go native and have a different app for each device type. It’s good to see more reason coming back in the discussion.

Conferences

2012 was a really good year for conferences. I was lucky and honored to be asked to speak at quite a few: TechDays Belgium, TechDays Netherlands, Microsoft Tech Conference in Baden Switzerland, Microsoft Days in Sofia Bulgaria, Shape in Zurich Switzerland, Microsoft TechDays in Dubai UAE, NDC in Oslo Norway, Oredev in Malmo Sweden. I also spoke to some user groups in LA and Philadelphia through Live Streaming, talked on some podcasts, and attended the MVP Summit in February, and the Build conference in October, both in Redmond WA. Meeting people from all over the world is always a great pleasure for me, and this year was no exception.

In conclusion

Well that was a lengthy post wasn’t it :) It took me quite a long time to write, too, and gave me a good occasion to reflect on last year’s events and achievements. I always said that I am blessed to get paid to do what I love, and it is still true after all these years. Software development is an act of creation, and since the triumph of mobile computing, developing for these platforms has been even more fun than usual. What we do is important, we are shaping the future of software, the future of user experience and doing our best to make the life of millions of people smoother and easier. It is a noble goal.

Happy New Year 2013 to all, and happy coding!
Laurent

MVVM Light V4.1.26 change log

Laurent Bugnion — Sat, 05 Jan 2013 22:10:50 GMT

Originally posted on: http://blog.galasoft.ch/archive/2013/01/05/mvvm-light-v4.1.26-change-log.aspx

I just published the change log for MVVM Light V4.1.26, which is available on Nuget only at this time. The full version is available here, while the “libraries only” version is available here.

I am working on an installer which will also add a few more changes to the templates and one bug fix in the code snippets. Stay tuned for that installer as soon as I figure a few things out.

Important note: V4.1.26 is only available on Nuget (here and here) at the current time. An installer will be published soon with changes to the project and item templates too.

Miscellaneous

BL0023.003, Change source structure to include Windows 8 in the normal flow of the folders
BL0023.004, Remove UniversalConverter
BL0023.005, Issue 7594: VS 2012 XML Design time error
BL0023.007, Remove INPChanging temporarily to solve design time issues (WP7.1 only)
BL0009.006, Ported to .NET 4.5
BL0009.007, Ported to Windows Phone 8

SimpleIoc

BL0005.001, Issue 7577: SimpleIoc misleading error when class has private constructor
BL0005.003, An exception can occur when a class has a static constructor and a default constructor, even when they are not explicitly declared.
BL0005.007, ContainsCreated should return true if called without a key, if a keyed instance is found

EventToCommand

BL0004.005, The type 'EventToCommand' from assembly 'GalaSoft.MvvmLight.Extras.WPF4' is built with an older version of the Blend SDK, and is not supported in a Windows Presentation Framework 4 project.

DispatcherHelper

BL0004.001, Rename InvokeAsync in RunAsync
BL0004.002, Return DispatcherOperation (or IAsyncOperation in Win8) for RunAsync.

Happy coding

Laurent

A story of Murphy–my technical issues at TechDays Switzerland #chtd

Laurent Bugnion — Tue, 20 Nov 2012 21:10:44 GMT

Originally posted on: http://blog.galasoft.ch/archive/2012/11/20/a-story-of-murphyndashmy-technical-issues-at-techdays-switzerland-chtd.aspx

I had two sessions at the recent Swiss TechDays. While the first one (Advanced Development for Windows Phone 8) went extremely well (I think), I had a very annoying technical issue in the beginning of my second session.

First let me add that I talked to Microsoft about that and I hope they will change a few things in the room assignment for next year. My two sessions were one right after the other, with only 15 minutes break to change room. I don’t mind having two sessions so close from each other, but I would really like them to be in the same room in order to avoid having to move my laptops (plural, that will become important later) and redoing the tech check. That being said, I am guilty of not checking where my talks would be before the day before the conference, and when I did notice, it was too late to change it.

After my first session, I quickly moved to the other room and setup my main laptop, a Dell Precision. We tested the video output (VGA) and didn’t notice anything special. The projectors are using a fairly high resolution (kudos to the Basel conference center for not having old school 1024x768 projectors anymore, that makes Blend really hard to demo ;) but since everything went great during the first talk, I was not worried. In fact I even had some time to chat with some early attendees about my Microsoft Surface and the Samsung Slate 7, which I had carried with me in addition to the Precision. I just thought it would be nice to show the hardware that Windows 8 can run on, without thinking any further.

When the session started, I immediately noticed that the main screen was not showing anything. I thought I had just forgotten to switch to “duplicate” for the video output, and did that with a quick Win-P. However it didn’t “hold”. After 2 seconds, it reverted back to a black display for my attendees. Then I started to really worry.

We tried everything, switching from VGA to HDMI, changing the resolution, setting the projector as primary display, but nothing did the trick. The projector was just refusing to show my screen. Now, to show you how despaired I started to be, I even considered using the “extend” setting (which worked just fine), and to use one of the feedback monitors on the floor but really it was super cumbersome.

Eventually, my last resort arrived: I started my Samsung Slate 7, which by chance has Visual Studio 12 and Blend 5 installed, plugged the HDMI projector in the dock (yes, I had the dock with me, which I usually don’t!), connected it to internet (had to enter a long password for that), loaded the source code from my main machine using a USB stick and…. finally started to give my presentation. All in all I think we lost about 10 minutes. Amongst the most horrible minutes of my whole life, truly (yes I am blessed, I didn’t have that many horrible minutes in my life ;)

I really want to apologize to my attendees. We joked a bit during the attempts to resolve the issue, the reactions I had after the session were all very nice and sympathetic. Only a handful of people left my session while I was having the issues, and I really don’t blame them (who knew how long the problem would last!!). But still, I probably talked at more than 60 sessions over the years, and this was by far my most painful moment.

What did I learn?

So what did I learn from this? Well from now on I will always have my slate ready with the latest source code, internet connection and every tool I might need during the presentation. This way, if I detect even a hint that the Precision might not work, I will just switch to the Slate. The experience of presenting on the slate is actually not bad at all, it is just a bit slow for my taste, but it does work.

By the way, I will be posting the code and slides for my sessions very soon, I just need to “clean it and zip it”. Stay tuned, and thanks again for your patience in that horrible circumstance.

Cheers
Laurent

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

Displaying the Saved Pictures in the Windows Phone 8 emulator

Laurent Bugnion — Sun, 18 Nov 2012 14:50:48 GMT

Originally posted on: http://blog.galasoft.ch/archive/2012/11/18/displaying-the-saved-pictures-in-the-windows-phone-8-emulator.aspx

One cool feature of the Windows Phone emulator is that it allows you to select pictures from your app (using the PhotoChooserTask) without having to try your app on a physical device. For example, this code (which I used in some of my recent presentations) will trigger the Photo Chooser UI to be displayed on the emulator too:

private Action<IEnumerable<IImageFileInfo>> _callback;
        
public void SelectFiles(Action<IEnumerable<IImageFileInfo>> callback)
{
    var task = new PhotoChooserTask
    {
        ShowCamera = true
    };

    task.Completed += TaskCompleted;
            
    _callback = callback;
    task.Show();
}

void TaskCompleted(object sender, PhotoResult e)
{
    if (e.Error == null
        && e.ChosenPhoto != null
        && _callback != null)
    {
        var fileName = e.OriginalFileName
            .Substring(e.OriginalFileName.LastIndexOf("\\") + 1);

        var info = new FileViewModel(e.ChosenPhoto, fileName);
        var infos = new List<IImageFileInfo>
        {
            info
        };

        _callback(infos);
    }
}

In Windows Phone 8 however, when you execute this code, you will be shown an almost empty Photo Chooser UI:

Notice that the “Saved Pictures” album is missing. At first I thought it was just not there at all, but you can actually restore it with the following steps:

Press on the Windows button
On the main screen, press on Photos
Press on Albums
Open the so called “8” photo album
Press Back until you are back into your app and try again.

This time you will see the saved pictures, and can perform your tests in more realistic conditions!

Happy coding!
Laurent

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

A fix for the design time error in MVVM Light V4.1

Laurent Bugnion — Sun, 11 Nov 2012 22:26:25 GMT

Originally posted on: http://blog.galasoft.ch/archive/2012/11/11/a-fix-for-the-design-time-error-in-mvvm-light.aspx

For those of you who installed V4.1 of MVVM Light and created a project for Windows Phone 8, you will have noticed an error showing up in the design surface (either in Visual Studio designer, or in Expression Blend). The error says: “Could not load type ‘System.ComponentModel.INotifyPropertyChanging’ from assembly ‘mscorlib.extensions’” with additional information about version numbers.

The error is caused by an incompatibility between versions of System.Windows.Interactivity. Because this assembly is strongly named, any version incompatibility is causing the kind of error shown here (for an interesting discussion on the strong naming issue, see this thread on Codeplex).

I managed to resolve the issue for Windows Phone 8 and will publish a cleaned up installer next week. In the mean time, in order to allow you to continue development, please follow the steps:

Download the new DLLs zip package (MVVMLight_V4_1_26.zip).
Right click on the Zip file and select Properties from the context menu.
Press the “Unblock” button (if available) and then OK.
Right click again on the zip package and select “Extract all…”. Select a known location for the new DLLs.
Open the MVVM Light project with the design time error in Visual Studio 2012.
Open the References folder in the Solution Explorer.
Select the following DLLs: GalaSoft.MvvmLight.dll, GalaSoft.MvvmLight.Extras.dll, Microsoft.Practices.ServiceLocation.dll and System.Windows.Interactivity.dll.

Press “delete” and confirm to remove the DLLs from your project.
Right click on References and select Add Reference from the context menu.

Browse to the folder with the new DLLs.
Select the four new DLLs and press OK.
Rebuild your application, and open it again in Blend or in the Visual Studio designer.

The error should be gone now.

In the next few days, as time allows, I will publish a new MSI containing a fixed version of the DLLs as well as a few other improvements. This quick fix should however allow you to continue working on your Windows Phone 8 projects in design mode too.

Special note for WP7.1

Because of some issues with the WP7.1 version of the DLLs, I had to (hopefully temporarily) remove the INotifyPropertyChanging interface from the ObservableObject and ViewModelBase classes. I am talking with Microsoft to try and solve this issue. In the meantime, I hope that this change will not affect too many people.

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

Oredev 2012: Summary and source code

Laurent Bugnion — Sun, 11 Nov 2012 20:27:21 GMT

Originally posted on: http://blog.galasoft.ch/archive/2012/11/11/oredev-2012-summary-and-source-code.aspx

This week, I had the pleasure to be invited to talk at Oredev, a really cool conference taking place in Malmo, Sweden. The whole event is awesome, including a very special dinner on Monday including sauna and swimming in a 6 degrees cold Baltic sea, and a reception with dinner at the town hall, including the mayor himself. Considering Malmo is a town of 300'000 inhabitants, it is a pretty nice occasion and the historical building itself is really worth seeing. For those interested, I placed my pictures on my Flickr account.

I had a workshop on Tuesday morning about Windows 8 development with XAML/C#, and then a session on Wednesday about MVVM in Windows Phone 8 and Windows 8, of course using MVVM Light. I was very nervous because I reworked some of my demos as recently as this morning, in the wake of the Build conference last week and the release of both the Windows Phone SDK and MVVM Light V4.1. Everything went well however, and if I judge by the people I talked t after the talk, and Twitter, everything went pretty well.

Before my talk on Tuesday, I had the pleasure to see a talk by Iris Classon (@irisclasson) on the challenges of being a "n00b" and a woman in software development. I especially appreciated her research and conclusions on the lack of women I our industry, a topic that is dear to my heart (because I want the best possible future for my two daughters, and also because I really enjoy working with women on projects, and getting a different insight on the art of software development.

I really want to thank the excellent organization committee for their hard work and their fantastic welcome to Malmo. In particular Emily Holweck did a wonderful job and was super helpful throughout the preparation and the conference itself. I made a few pictures during my stay, all with the new Nokia Lumia 920, and hope you will enjoy them too.

The source code and the slides…

The source code is available for download from Skydrive. You will find the following:

Windows 8 workshop slides.
MVVM Applied slides
Source code package with
- Win8Demo: The demo I built during the 4 hours workshop, with some light MVVM, web services (JSON), GridView, Design time data (Blend / Visual Studio designer), Bing maps integration, location sensor, Search pane integration.
- SemanticZoomSample: a sample I put together to demonstrate the SemanticZoom control, with two GridViews and of course full design time data for Blend work. Due to time constraints, I was not able to show this demo during the workshop, but I publish it anyway, hoping it will be useful to someone.
- PictureUploader: The demo I built during my 50 minutes session about MVVM Applied in Windows Phone 8 and Windows 8. Code sharing, design time data, MVVM Light are used in Windows Phone 8 and Windows 8 apps.

And in video…

You can also see the video of my MVVM talk thanks to the good services of the Oredev team!

MVVM Applied in Windows Phone and Windows 8 from Øredev Conference on Vimeo.

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

MVVM Light V4.1 with support for Windows Phone 8

Laurent Bugnion — Tue, 30 Oct 2012 18:11:06 GMT

Originally posted on: http://blog.galasoft.ch/archive/2012/10/30/mvvm-light-v4.1-with-support-for-windows-phone-8.aspx

Today is a very exciting day: After the official release of Windows 8 (and Microsoft Surface!) on Friday, and the official release of Windows Phone 8 on Monday, the Build conference is starting! This is the conference in which we will learn all about the developer experience for Windows 8 and Windows Phone 8.

As a partner of Microsoft, I had the privilege of trying out some of the new things early, and this gave me the opportunity to port MVVM Light to Windows Phone 8 (it was already running for Windows 8), and today I am officially publishing this new version.

Before you go and update, please not the following: V4.1 (4.1.24.0) only supports Visual Studio 2012 (and Express). If for some reason you are still using Visual Studio 2010, don’t despair! In the next few days I will publish an update supporting these versions as well. But for now, please only upgrade if you are on VS12!

That being said, here we go: The download page is available on Codeplex and you can download the updated MSI and install it. Please make sure to read the Readme HTML page that automatically opens in your web browser after the MSI completes! It contains important information on how to install selected Project and Item templates for the frameworks of your choice.

This version also support the following versions of Visual Studio:

Visual Studio 2012 Pro, Premium, Ultimate
Visual Studio 2012 Express for Windows 8
Visual Studio 2012 Express for Windows Phone 8
Visual Studio 2012 Express for Web (Silverlight 4, Silverlight 5)
Visual Studio 2012 Express for Windows Desktop (WPF3.5, WPF4, WPF4.5)

We also support Expression Blend of course.

Windows Phone 8 and Windows 8 are very very exciting opportunities for developers in the whole world. There are already a number of apps running on top of MVVM Light in the Windows Store and of course a large range of apps for Windows Phone too. With this release, we hope to support the developers and speed up application development. It is a pleasure to serve such an innovative and creative community!

Happy coding
Laurent

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

“Using the MVVM pattern in Windows 8” in MSDN Magazine

Laurent Bugnion — Wed, 10 Oct 2012 19:29:42 GMT

Originally posted on: http://blog.galasoft.ch/archive/2012/10/10/ldquousing-the-mvvm-pattern-in-windows-8rdquo-in-msdn-magazine.aspx

These days I am swimming in Windows 8 code, and I must say it is a good feeling. This gives me the occasion to push MVVM Light and a few other components of mine to their limits, and to fix or improve a few things on the fly. All this goodness will be available in V4.1 which is scheduled shortly after Windows 8 launch.

In spite of the busy schedule, I couldn’t resist writing an article for MSDN magazine about, you guessed it, the MVVM pattern and MVVM Light in Windows 8. It is an article that goes quite in depth in some of the concepts, and provides an app demonstrating how to use them.

The article is available for free in the special Windows 8 edition of MSDN magazine that just came out today. Enjoy!

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

Adventures in Windows 8: Working around the navigation animation issues in LayoutAwarePage

Laurent Bugnion — Tue, 25 Sep 2012 19:41:20 GMT

Originally posted on: http://blog.galasoft.ch/archive/2012/09/25/adventures-in-windows-8-working-around-the-navigation-animation-issues.aspx

LayoutAwarePage is a pretty cool add-on to Windows 8 apps, which facilitates greatly the implementation of orientation-aware (portrait, landscape) as well as state-aware (snapped, filled, fullscreen) apps. It has however a few issues that are obvious when you use transformed elements on your page.

Adding a LayoutAwarePage to your application

If you start with a blank app, the MainPage is a vanilla Page, with no such feature. In order to have a LayoutAwarePage into your app, you need to add this class (and a few helpers) with the following operation:

Right click on the Solution and select Add, New Item from the context menu.
From the dialog, select a Basic Page (not a Blank Page, which is another vanilla page).
If you prefer, you can also use Split Page, Items Page, Item Detail Page, Grouped Items Page or Group Detail Page which are all LayoutAwarePages. Personally I like to start with a Basic Page, which gives me more creative freedom.

Adding this new page will cause Visual Studio to show a prompt asking you for permission to add additional helper files to the Common folder. One of these helpers in the LayoutAwarePage class, which is where the magic happens. LayoutAwarePage offers some help for the detection of orientation and state (which makes it a pleasure to design for all these scenarios in Blend, by the way) as well as storage for the navigation state (more about that in a future article).

Issue with LayoutAwarePage

When you use UI elements such as a background picture, a watermark label, logos, etc, it is quite common to do a few things with those:

Making them partially transparent (this is especially true for background pictures; for instance I really like a black Page background with a half transparent picture placed on top of it).
Transforming them, for instance rotating them a bit, scaling them, etc.

Here is an example with a picture of my two beautiful daughters in the Bird Park in Kuala Lumpur, as well as a transformed TextBlock. The image has an opacity of 40% and the TextBlock a simple RotateTransform.

If I create an application with a MainPage that navigates to this LayoutAwarePage, however, I will have a very annoying effect:

The background picture appears with an Opacity of 100%.
The TextBlock is not rotated.

This lasts only for less than a second (during the navigation animation) before the elements “snap into place” and get their desired effect. Here is the XAML that cause the annoying effect:

<common:LayoutAwarePage x:Name="pageRoot"
                        x:Class="App13.BasicPage1"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:common="using:App13.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        mc:Ignorable="d">

    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Image Source="Assets/el20120812025.jpg"
               Stretch="UniformToFill"
               Opacity="0.4"
               Grid.RowSpan="2" />

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            
            <Button x:Name="backButton"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            
            <TextBlock x:Name="pageTitle"
                       Grid.Column="1"
                       Text="Welcome"
                       Style="{StaticResource PageHeaderTextStyle}" />
        </Grid>

        <TextBlock HorizontalAlignment="Center"
                   TextWrapping="Wrap"
                   Text="Welcome to my Windows 8 Application"
                   Grid.Row="1"
                   VerticalAlignment="Bottom"
                   FontFamily="Segoe UI Light"
                   FontSize="70"
                   FontWeight="Light"
                   TextAlignment="Center"
                   Foreground="#FFFFA200"
                   RenderTransformOrigin="0.5,0.5"
                   UseLayoutRounding="False"
                   d:LayoutRounding="Auto" Margin="0,0,0,153">
            <TextBlock.RenderTransform>
                <CompositeTransform Rotation="-6.545" />
            </TextBlock.RenderTransform>
        </TextBlock>

        <VisualStateManager.VisualStateGroups>

            [...]

        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>

Solving the issue

In order to solve this “snapping” issue, the solution is to wrap the elements that are transformed into an empty Grid. Honestly, to me it sounds like a bug in the LayoutAwarePage navigation animation, but thankfully the workaround is not that difficult: Simple change the main Grid as follows:

<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid Grid.RowSpan="2">
        <Image Source="Assets/el20120812025.jpg"
                Stretch="UniformToFill"
                Opacity="0.4" />
    </Grid>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
            
        <Button x:Name="backButton"
                Click="GoBack"
                IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                Style="{StaticResource BackButtonStyle}" />
            
        <TextBlock x:Name="pageTitle"
                    Grid.Column="1"
                    Text="Welcome"
                    Style="{StaticResource PageHeaderTextStyle}" />
    </Grid>

    <Grid Grid.Row="1">
        <TextBlock HorizontalAlignment="Center"
                    TextWrapping="Wrap"
                    Text="Welcome to my Windows 8 Application"
                    VerticalAlignment="Bottom"
                    FontFamily="Segoe UI Light"
                    FontSize="70"
                    FontWeight="Light"
                    TextAlignment="Center"
                    Foreground="#FFFFA200"
                    RenderTransformOrigin="0.5,0.5"
                    UseLayoutRounding="False"
                    d:LayoutRounding="Auto"
                    Margin="0,0,0,153">
            <TextBlock.RenderTransform>
                <CompositeTransform Rotation="-6.545" />
            </TextBlock.RenderTransform>
        </TextBlock>
    </Grid>

    <VisualStateManager.VisualStateGroups>

        [...]

</Grid>

Hopefully this will help a few people, I banged my head on the wall for a while before someone at Microsoft pointed me to the solution ;)

Happy coding,
Laurent

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

Adventures in Windows 8: Solving activation errors

Laurent Bugnion — Mon, 10 Sep 2012 07:17:28 GMT

Originally posted on: http://blog.galasoft.ch/archive/2012/09/10/adventures-in-windows-8-solving-activation-errors.aspx

Note: I tagged this article with “MVVM” because I got a few support requests for MVVM Light regarding this exact issue. In fact it is a Windows 8 issue and has nothing to do with MVVM Light per se…

Sometimes when you work on a Windows 8 app, you will get a very annoying issue when starting the app. In that case, the app doesn’t not even start past the Splash screen. Putting a breakpoint in App.xaml.cs doesn’t help because the app doesn’t even reach that point!

So what exactly is happening? Well when a Windows 8 app starts, the system is performing a few check first. One of the checks, for instance, is to see if an app with the same package ID is already available. The package ID is a unique value set in the package manifest.

In the Solution Explorer, double click on Package.appxmanifest.
This opens the manifest in a special editor
Click on the Packaging tab
See the GUID under Package Name. This is the unique ID I am talking about.

If there is a conflict (i.e. if an app is already installed with the exact same ID), Windows will warm the user that the app is already installed. However when you are in the process of developing an app, you install and uninstall the same app many many times (every time that you start in Visual Studio), and sometimes some issues arise, for instance failing to uninstall the app before starting the new instance of the same app.

First step if you get such an error

When the application fails to start past the splash screen, the first step is to identify what kind of error happened. In my experience the “already installed” is by far the most frequent (in fact I never had another such error), but it can be something else. An annoying thing is that the popup that shows the error is usually started below the Windows 8 app, and so you don’t even see it! This is especially true if you run this in the Simulator. In that case, do the following: Press on the Simulator’s home button, then press on the Desktop tile on the Start menu. The error popup should be shown on the desktop.

If your applications runs on the Local machine, you also do the same and press the Windows button, and then from the Start menu press the Desktop tile.

Deployment error in Studio

Sometimes the same error causes Visual Studio to fail launching the application at all with a deployment error. This is a better case, because at least it is clear that there is an issue. In that case, write down the code that is shown in the Error window (for instance 0x80073D05 in the example below).

Once you have the error code, go to the “Troubleshooting packaging, deployment, and query of Windows Store apps” page and look up the code in question.

In my case, the error was “ERROR_DELETING_EXISTING_APPLICATIONDATA_STORE_FAILED”, “An error occurred while deleting the package's previously existing application data.”

Solving the “ERROR_DELETING_EXISTING_APPLICATIONDATA_STORE_FAILED” issue

Update: Before trying the below, you can also try the simple steps:

Exit Visual Studio
Go to the Start menu
Locate your app’s tile. It should be visible in the Start menu directly, towards the far end on the right.
Right click the tile and select Uninstall from the App Bar.
Restart Visual Studio and try again.

Sometimes it helps. If it doesn’t, then try the following:

In order to solve the case where Windows, for any reason, fails to delete the existing application before starting the new instance, follow the steps:

Open the Package.appxmanifest in Visual Studio
Open the Packaging tab.
Change the Package name. For tests you can just try to change the last character of the GUID, though I would recommend creating a brand new GUID.
- Press Start
- Type GUID
- Start the GUID Generator application
- Select Registry Format
- Press Copy.
- Paste the new GUID in place of the Package Name in Visual Studio
- Important: don’t forget to remove the curly brackets at the beginning and at the end of the newly pasted GUID.

Then you just have to cross your fingers and start the application again… If it works, celebrate. if it doesn’t work… well at this point I am not sure so good luck with that ;)

Happy coding,
Laurent

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

Adventures in Windows 8: Understanding and debugging design time data in Expression Blend

Laurent Bugnion — Wed, 05 Sep 2012 21:53:21 GMT

Originally posted on: http://blog.galasoft.ch/archive/2012/09/05/adventures-in-windows-8-understanding-and-debugging-design-time-data.aspx

One of my favorite features in Expression Blend is the ability to attach a Visual Studio debugger to Blend. First let’s start by answering the question: why exactly do you want to do that?

Note: If you are familiar with the creation and usage of design time data, feel free to scroll down to the paragraph titled “When design time data fails”.

Creating design time data for your app

When a designer works on an app, he needs to see something to design. For “static” UI such as buttons, backgrounds, etc, the user interface elements are going to show up in Blend just fine. If however the data is fetched dynamically from a service (web, database, etc) or created dynamically, most probably Blend is going to show just an empty element.

The classical way to design at that stage is to run the application, navigate to the screen that is under construction (which can involve delays, need to log in, etc…), to measure what is on the screen (colors, margins, width and height, etc) using various tools, going back to Blend, editing the properties of the elements, running again, etc. Obviously this is not ideal.

The solution is to create design time data. For more information about the creation of design time data by mocking services, you can refer to two talks of mine “Deep dive MVVM” and “MVVM Applied From Silverlight to Windows Phone to Windows 8”. The source code for these talks is here and here.

Design time data in MVVM Light

One of the main reasons why I developed MVVM Light is to facilitate the creation of design time data. To illustrate this, let’s create a new MVVM Light application in Visual Studio.

Install MVVM Light from here: http://mvvmlight.codeplex.com (use the MSI in the Download section). After installing, make sure to read the Readme that opens up in your favorite browser, you will need one more step to install the Project Templates.
Start Visual Studio 2012.
Create a new MvvmLight (Win8) app.

Run the application. You will see a string showing “Welcome to MVVM Light”.

In the Solution explorer, right click on MainPage.xaml and select Open in Blend.
Now you should see “Welcome to MVVM Light [Design]”

What happens here is that Expression Blend runs different code at design time than the application runs at runtime. To do this, we use design-time detection (as explained in a previous article) and use that information to initialize a different data service at design time. To understand this better, open the ViewModelLocator.cs file in the ViewModel folder and see how the DesignDataService is used at design time, while the DataService is used at runtime. In a real-life applicationm, DataService would be used to connect to a web service, for instance.

When design time data fails

Sometimes however, the creation of design time data fails. It can be very difficult to understand exactly what is happening. Expression Blend is not giving a lot of information about what happened. Thankfully, we can use a trick: Attaching a debugger to Expression Blend and debug the design time code.

In WPF and Silverlight (including Windows Phone 7), you could simply attach the debugger to Blend.exe (using the “Managed (v4.5, v4.0) code” option even for Silverlight!!)

In Windows 8 however, things are just a bit different. This is because the designer that renders the actual representation of the Windows 8 app runs in its own process. Let’s illustrate that:

Open the file DesignDataService in the Design folder.
Modify the GetData method to look like this:

public void GetData(Action<DataItem, Exception> callback)
{
    throw new Exception();

    // Use this to create design time data

    var item = new DataItem("Welcome to MVVM Light [design]");
    callback(item, null);
}

Go to Blend and build the application.
The build succeeds, but now the page is empty. The creation of the design time data failed, but we don’t get a warning message. We need to investigate what’s wrong.
Close MainPage.xaml
Go to Visual Studio and select the menu Debug, Attach to Process.
Update: Make sure that you select “Managed (v4.5, v4.0) code” in the “Attach to” field.
Find the process named XDesProc.exe. You should have at least two, one for the Visual Studio 2012 designer surface, and one for Expression Blend.

Unfortunately in this screen it is not obvious which is which. Let’s find out in the Task Manager.

Press Ctrl-Alt-Del and select Task Manager
Go to the Details tab and sort the processes by name.
Find the one that says “Blend for Microsoft Visual Studio 2012 XAML UI Designer” and write down the process ID.

Go back to the Attach to Process dialog in Visual Studio. sort the processes by ID and attach the debugger to the correct instance of XDesProc.exe.
Open the MainViewModel (in the ViewModel folder)
Place a breakpoint on the first line of the MainViewModel constructor.
Go to Blend and open the MainPage.xaml again.

At this point, the debugger breaks in Visual Studio and you can execute your code step by step. Simply step inside the dataservice call, and find the exception that you had placed there. Visual Studio gives you additional information which helps you to solve the issue.

More info and Conclusion

I want to thank the amazing people on the Expression Blend team for being very fast in guiding me in that matter and encouraging me to blog about it. More information about the XDesProc.exe process can be found here. I had to work on a Windows 8 app for a few days without design time data because of an Exception thrown somewhere in the code, and it was really painful. With the debugger, finding the issue was a simple matter of stepping into the code until it threw the exception.

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