Telerik blogs

What an exciting time to be a XAML developer! So many new fantastic updates and features are on the horizon with the release of Windows 8.1 and Visual Studio 2013. Windows 8.1 brings to the table over 650 new API’s. While this may sound daunting, the development experience for XAML developers actually becomes much easier through performance, IntelliSense and Visual Studio IDE improvements. This blog post is the second of the series, see the first article What's New in Windows 8.1 for Developers Part 1. In this blog post we will outline some of the most impressive things we can now take advantage of in Windows 8.1 as XAML and C# developers.

XAML APPLICATION PERFORMANCE ENHANCEMENTS

XAML applications now have the performance benefit of being compiled into assemblies using the XAML Binary Format (XBF).  The load/render time of XAML applications has also been drastically improved as all required keyed resources are no longer completely loaded at startup but rather follow a deferred loading scheme. This means that resources are now only loaded when they are requested. From a usability perspective, panning improvements have been made on large lists of items. Previously when panning through large lists, the application would “pan to black” meaning that when the data is not loaded and rendered, it would look like blank dead space until the rendering of items caught up. Now added is perceived perception improvements where rather than dead space, gray box placeholders will be displayed until the items are rendered. You also have the option of having granular control over what elements in a data template should render first, giving priority to how items are rendered in the large list panning scenario. There is also marked improvements in the design-time performance of the XAML editor in Visual Studio, it is much snappier.

VISUAL STUDIO 2013 EDITOR IMPROVEMENTS

INTELLISENSE

Visual Studio 2013 has improved leaps and bounds when it comes to IntelliSense in the XAML editor. There is full IntelliSense for keyed resources, like styles and converters (click the image for full size)

XAML Static Resource IntelliSense

Full data binding IntelliSense is also available.

XAML Data Binding IntelliSense

Fuzzy matching of XAML elements has also been greatly improved in Visual Studio 2013, so when you don’t get the spelling of your element quite right, IntelliSense will help you find what you need. You can also take advantage of CamelCase matching, so if you wanted to add a StackPanel, simply type “SP” and IntelliSense will filter your selections appropriately.

Fuzzy Matching IntelliSense

GO TO DEFINITION (F12) SUPPORT

Forget about wading through heaps of resource dictionary files, by using the new Go To Definition support in the XAML editor, finding the instantiation or implementation of elements is easy. The Go To Definition feature navigates to XAML element definitions and even has the ability to navigate directly to source code class files (or to the object browser if the source code is unavailable).
Go To Definition

XAML SNIPPETS

The ability to add XAML Snippets in the code editor has been a sought after feature. Snippets can greatly improve productivity and give you the ability to further customize your Visual Studio programming experience to your liking. There are two types of Snippets in Visual Studio 2013, Expansion snippets as well as SurroundWith snippets.  Expansion snippets allow you to scaffold a block of code (or markup) that includes placeholder values that are replaced with values of your choice when the snippet is being added. SurroundWith snippets do just that, they surround the current selection in the editor with the snippet. Currently the Visual Studio 2013 Preview does not contain any snippets, but Tim Heuer has provided an excellent tutorial on creating custom snippets  and you can visit CodePlex XAML Snippets project to get a nice collection of snippets to use while developing your application.

Insert Snippet

Expansion snippet example:

Expansion Snippet

SurroundWith snippet example:
SurroundWith Snippet

DRAG AND DROP FROM THE TOOLBOX DIRECTLY INTO DOCUMENT OUTLINE

Another great timesaver, you can now drag an instance of a XAML control directly into the Document Outline. This allows you to place your control exactly where you want it in the visual tree without having to weed through XAML markup.

Drag And Drop To Document Outline

OTHER ENHANCEMENTS

In addition to the features that we’ve covered, there are a couple more convenience improvements worth mentioning. The first is that the logic used when applying comments to a selection the XAML editor is now smart enough to detect existing comments within the selection and will wrap them appropriately. Secondly, when authoring XAML, the autocomplete logic that generates the end tag of an element is smart enough to identify a self-closing tag, and will remove the generated end tag appropriately.

CONTROL ADDITIONS AND ENHANCEMENTS

THEME ENHANCEMENTS

Previously, you had the choice between using the light or dark theme for your application at startup. This choice was made once and could not be changed. Now you have more granular control over theming where you can now set the theme at any time all the way down to the control level. Another type of resource is now introduced called ThemeResource (works similarly to dynamic resources) that deals specifically with theming.

NEW CONTROLS

There are plenty of new controls available for the Windows 8.1 release. What is nice is that many of these controls come pre-built using Windows Store application guidelines. Things like the Settings, Search and menu Flyout controls implement the guidelines and are ready to use out of the box. I am just giving a summary here, later in this blog post I provide a link to a more complete listing of new and enhanced controls.

Creating application bars has never been easier. AppBar that you’ve grown to love is now the primitive control and has been superseded with the introduction of CommandBar, AppBarButton, AppBarToggleButton and AppBarSeparator controls. You no longer need to organize your buttons in stack panels, you simply identify if the button represents a primary or secondary function and it is laid out for you automatically using Windows Store UX guidelines. What is also nice is that you now have the ability to assign the iconography for AppBarButtons using the properties panel (you also still have the option to define the using paths, custom glyphs and more):

AppBarButton Image Selector

The new Hub control brings grouped list boxes back to a native control. Create HubSections to split up your content logically.


The Hyperlink control also makes its Windows 8 XAML début, this is a component that fills a very popular functionality hole.

ENHANCED CONTROLS

Header templates now a property on the ComboBox, Slider, DatePicker, TimePicker, Textbox, PasswordBox and RichEditBox – now you can easily add labels to these controls. Placeholder text, or watermarks are also be included in the ComboBox, PasswordBox, RichEditBox, SearchBox and TextBox controls.

The WebView control has seen a considerable amount of action. It now has the ability to load local files without having to resort to streaming, this includes the ability to render both HTML and JavaScript content. While this is happening, the WebView control now exposes a series of new events that you can subscribe to including ContentLoading and DOMContentLoaded (among others). You also have the ability to define your own custom resolvers for the WebView. For instance, with epub, which is basically a zip file made up of HTML files, you can create a resolver that extracts it and loads its contents into the WebView.

Another enhancement that is quite popular is that you also have the ability to render the XAML visual tree as an image using RenderTargetBitmap in the Windows.Xaml.Media.Imaging namespace.

To learn more about these new controls and enhancements, as well as other additions to Windows 8.1 for XAML developers, follow this link:

http://msdn.microsoft.com/en-us/library/windows/apps/bg182878.aspx

PROJECT TEMPLATE CHANGES

All project templates have been updated to reflect changes made in Windows 8.1. Gone are the days of LayoutAwarePage and StandardStyles.xaml. Applications are now expected to be responsive to their rendering size. The reason for this is because you can now “snap” multiple applications on the same screen, rather than be limited to only 2 sizes.

A new “Hub App” template has also been added that highlights the usage of the new Hub control.

New Project Dialog

Also added is the Coded UI Test Project template. You can now record tests for your Windows Store applications and play them back whenever needed. All code for the tests is generated for you.

CodedUI Project

CONCLUSION

There couldn’t be a better time to get started creating Windows Store applications. The operating system is gaining considerable traction and as you’ve seen from this post, development for the platform is only becoming easier. It’s time to take advantage of these enhancements to the libraries and to Visual Studio.

Win8_Download (2)


About the Author

Carey Payette

Carey Payette is a Senior Software Engineer with Trillium Innovations (a Solliance partner), an ASPInsider, a Progress Ninja, a Microsoft Certified Trainer and a Microsoft Azure MVP. Her primary focus is cloud integration and deployment for the web, mobile, big data, AI, machine learning and IoT spaces. Always eager to learn, she regularly tinkers with various sensors, microcontrollers, programming languages and frameworks. Carey is also a wife and mom to three fabulous boys.

Comments

Comments are disabled in preview mode.