Welcome to part 6, the last part in this article series on Windows 8.1. We’ve made it to the very end! In the previous parts, we’ve spent some time looking at the new things in Windows 8.1 itself. In this last part, we’re changing gears slightly and we will spend some time looking at the tool that makes it possible to create apps for Windows 8.1: Visual Studio 2013. There are a lot of interesting aspects coming with the new versions of the IDE so let’s see how we can become more productive as a XAML developer!
Visual Studio 2013: the new standard
Visual Studio 2012 was a great tool but in some areas, it was still somewhat lacking. In the XAML editing experience we got, there were definitely some improvements possible. With Visual Studio 2013, Microsoft has done with Visual Studio for the XAML developer what it has done in the control area. A great number of improvements have been made. Let’s take a look at some of these.
To start with, Visual Studio 2013 again comes in several SKUs: Professional, Premium and Ultimate. Somewhat surprising is that with 2013, you can only create and maintain Windows 8.1 applications. You cannot create new Windows 8 applications any longer, although you can maintain them. One could ask how long it will still be needed that we start the development of new Windows 8 apps and instead go to Windows 8.1 directly. That being said, you can do a side-by-side install of 2012 and 2013, should you still have the need to create new 8.0 apps. Of course, there’s also a free, Express edition, but we won’t spend any time on that here.
A first question is: should I update my existing apps? Just so you’re clear on this: if you today have a Windows 8 app in the store, any user with Windows 8 or Windows 8.1 will be able to install that app. So from that point of view, there’s no need to immediately start panicking, thinking that you’re missing out on a lot of possible installs. If you want, you can in the store upload both a Windows 8 and a Windows 8.1 version of your app. Depending on the version of Windows used by the user, he’ll either get the 8.0 or the 8.1 version. But coming back to that question. There’s definitely a value in updating existing apps (and by updating I mean just opening the solution in 2013 and re-targeting, as shown a little further): your apps will start faster, certainly if they contain a ListView. The memory footprint of the app will also be lower. One of the main reasons for this is that Windows 8.1 doesn’t load in all keyed resources at startup, which has a huge performance impact! Also, panning on ListViews will definitely give a better experience (the fact that the ListView had issues redrawing items, has been fixed).
So just by retargeting your app, you’ll get a lot of benefits. But how do you do this retargeting? Well, it’s pretty simple. Open your 2012/Windows 8 solution in your freshly installed VS2013. It will start by recommending that you should update, as shown below.
Hitting OK won’t do anything just yet. Head over to the Solution Explorer and right-click on the solution. Select Retarget to Windows 8.1 and sit back. Your app is now being readied to become a Windows 8.1 app!
VS2013 brings a lot of goodness to the table. We’re getting a new project template, based on the Hub Control. This gives you a head start building an app that is built around the Hub Control.
Other improvements focus on better diagnostics, better integration for Azure Mobile Services (you can now add such a service through the Service Manager), shown below.
XAML Editing improvements
As mentioned, in the XAML editing experience, we could definitely use some improvements. Below is an overview of the things I think you’ll really want to know when you start on a new Windows 8.1 project using XAML!
Improved XAML IntelliSense
I was always sad (or should I say slightly frustrated…) when I accidentally typed StakPanel (forgetting the C for example). What happened was that Visual Studio automatically jumped to the first item in the IntelliSense list. Not what I wanted it to do.
In VS2013, Microsoft has added some fuzzy logic that makes VS think about what you want IntellSense to do.
Also improved is the ability to work with closing tags. Normally, when we thought that a closing tag was no longer useful (so for example </TextBlock>) and we wanted to replace it with <TextBlock />, we had to do that manually.
VS2013 makes our lives again a bit easier: when I type a / in the opening tag, it will automatically remove the closing tag.
Another XAML editing improvement is tag matching. Assume you have a Grid and you want to replace it with a StackPanel. Normally, you start by changing the opening tag, then get a lot of VS squiggly lines, then change the closing tag. In VS2013, Microsoft has changed the experience there as well. When we start editing an opening tag, it will automatically match the closing tag as well.
There are some other tweaks in there such as matching the member you’re looking for, based on a substring (so finding StackPanel when you type Panel). Quite related is the ability to type SP when you want to add a StackPanel. Basically, what you’re doing then is using camel case matching.
Data binding improvements
Also on the data binding front, Microsoft has added a lot of extra XAML features. If we specify the data source for the data binding in the XAML code itself, we’ll get more intelligent IntelliSense suggestions. Let’s take a look.
Assume we have a basic viewmodel defined, named MainViewModel.
1: public class MainViewModel
2: {
3: public string FirstName { get; set; }
4: public string LastName { get; set; }
5:
6: public MainViewModel()
7: {
8: this.FirstName = "Gill";
9: this.LastName = "Cleeren";
10: }
11: }
We then instantiate this class as resource (for example at the app level):
1: <Application
2: x:Class="DataBindingInXaml.App"
3: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: xmlns:local="using:DataBindingInXaml">
6: <Application.Resources>
7: <local:MainViewModel x:Key="localMainViewModel"></local:MainViewModel>
8: </Application.Resources>
9: </Application>
If we now set the DataContext for the entire page to this instance, we’ll get good IntelliSense on the properties in the viewmodel.
Note that this of course only works if the data context has been set via XAML. If you would use code-behind or perhaps a ViewModelLocator, this won’t work. You can still then use design-time data and you’ll get the same IntelliSense there as well.
Resources
It has also become easier to work with resources. If you have declared a resource anywhere in your project, you’ll get IntelliSense suggesting it to you. Below, you can see the instance of the viewmodel used above being suggested.
Notice that also the other resources (such as Brushes) are being suggested. VS2013 also gets the resources defined in the generic.xaml and adds them to the list. So although these resources have now been moved to a file outside of the scope of the project, we can still get the resources while editing the XAML code.
Go To Definition
With Visual Studio 2013, it has now become possible to do a Go To Defintion on a lot of things, including resources and data binding statements.
Assume we have the following code (which is some default code that gets generated when executing the new Hub template):
If we now press F12 (the default shortcut for navigating to the definition), VS2013 will search all possible resources and open the containing file if found. In this case, we’ll see the generic.xaml being opened.
This generic.xaml is the file that contains the default style definitions for controls. Previously, these were contained in the StandardStyles.xaml but that has changed with Windows 8.1. Now these styles have all been moved to the generic.xaml.
But back to what we were looking at: we can see that we can navigate to resources. But F12 can do much more. Assume we have the same example again with the viewmodel. If we select the FirstName property and the F12 on that, we’ll be transferred to the property in the viewmodel automatically.
If you F12 on a built-in type, VS2013 will open the Object Browser. If we for example F12 with a StackPanel selected, we’ll see the following happening.
Other XAML editing improvements
VS2013 also includes a number of handy editing improvements:
- Closing tag matching: if we change the opening tag (say we want to change a Grid into a StackPanel), we can simply change the opening tag and VS2013 will update the closing tag for us (VS2013 had this already for some time for HTML editing but now also has this for XAML).
- XAML snippets: VS2013 now also supports snippets in XAML. We can manage snippets via the Snippet Manager (the default installation doesn’t contain any sadly). Tim Heuer has a good overview on how to create your own snippets here: http://timheuer.com/blog/archive/2013/07/08/xaml-code-snippets-for-visual-studio.aspx
- Improved commenting: if we want to comment out a large block of XAML and there are already XAML comments in there, the commenting feature used to fall over this. In VS2013, things have improved here as well, as VS2013 will notice that the block you want to comment out already contains XAML comments and make sure these get included in the comment as well.
Summary
In this article, we looked at the new features of Visual Studio 2013. With that, we have concluded this series on the new developer features of Windows 8.1.
Stay tuned for more great content on Windows 8 here at SilverlightShow!
About the author
Gill Cleeren is Microsoft Regional Director, Silverlight MVP, Pluralsight trainer and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina. 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, TechDays, DevDays, NDC Oslo, SQL Server Saturday Switzerland, Silverlight Roadshow in Sweden, Telerik RoadShow UK… Gill has written 2 books: “Silverlight 4 Data and Services Cookbook” and Silverlight 5 Data and Services Cookbook and is author of many articles for magazines and websites. You can find his blog at www.snowball.be. Twitter: @gillcleeren