Expression Blend, SketchFlow, Windows Phone 8

Windows Phone Sketchflow 2013

In the past I used SketchFlow to prototype my Windows Phone apps. Unfortunately the development of the windows phone SketchFlow templates stopped back in 2011. These templates don’t work in Blend for Visual Studio 2013. Today I had enough of not being able to use that template and just upgraded it to Blend for VS2013. To use the template you’ll need Silverlight and SketchFlow (which comes with Blend on VS premium and ultimate). You can download the Windows Phone SketchFlow templates here: http://1drv.ms/1gfqR1d Once downloaded, extract the zip file into: %userprofile%\documents\Visual Studio 2013\Blend This folder was probably empty and now…

Blend for Visual Studio, Windows 8.1, XAML

Behaviors SDK

When the release candidate of Visual Studio 2013 came available, so did the Behaviors SDK. The Behaviors SDK is somewhat similar to the Expression Blend SDK you might have used before when using Behaviors and Actions. Along with the SDK come a couple of actions and behaviors you can use in your Windows Store applications right away. What are they? Both behaviors and actions are small pieces of code that can be reused throughout your projects. In the case of the new Behaviors SDK the only thing you need to do is implement an interface. A behavior adds some behavior…

Blend for Visual Studio, Windows 8.1

Settings Flyout from Blend

Adding a settings flyout to your application has become much simpler with the release of the Windows 8.1 preview and the preview of Blend for Visual Studio 2013. The settings flyout is now supported out of the box and can be added to your project by using an item template. Adding a Settings Flyout A settings flyout can be added to your project just by adding a new item. You can do this by right-clicking on a project in the project panel and select Add New Item. From the list on the New Item dialog select the Settings Flyout. You…

Blend for Visual Studio, Windows 8.1, Windows Store apps, XAML

XAML Flyouts using Blend

A new control added in the Windows 8.1 preview is the Flyout control. It is used for temporarily showing some UI based on what the user is doing. It could be, or actually must be, easily dismissed by clicking or tapping outside it. You can attach the Flyout control to a button or use the FlyoutBase.AttachedFlyout  attached property on any other framework element. Other than a dialog, the flyout does not create a window and does not block the UI. Button Flyout For demonstration purposes I started by creating a new Windows Store application using Blend for Visual Studio 2013…

Blend for Visual Studio, Windows 8.1, XAML

Hub Control in Blend

HUB When looking at the apps that are in the Windows Store at the moment you might notice a certain pattern. A lot of apps start by showing some various types of content separated in sections, often with the possibility to navigate to more content. Sometimes semantic zoom is also added to make navigating between different sections more easy. In Windows 8.0 you needed to do quite a lot of work to get this done. In Windows 8.1 a new control is added that makes the process of building apps using this hub pattern a piece of cake. Speaking of…

Blend for Visual Studio, HTML5, Windows 8.1, Windows Store apps, XAML

What’s new in Blend for Visual Studio 2013

First Look On the first day of the Microsoft Build 2013 conference the preview of Visual Studio 2013 was announced. The preview contains a new version of Blend for Visual Studio. This preview has some new features and some “old” features that didn’t work in the previous version, mainly when building Windows Store apps. The first thing noticeable after installing the preview is the new icon. Opening Blend will show you the splash screen which looks pretty much the same as the 2012 version. So does the welcome screen. A thing to note is that while all platforms are supported,…

Blend for Visual Studio, Expression Blend

Extending Blend for Visual Studio

Once upon a time, in a galaxy far away, I wrote a couple of tutorials on how to write extensions for Expression Blend. Today there’s still not much information available on how to write your own extensions. But it is still possible to extend Blend for Visual Studio. The way to do this is slightly changed though. I recently came across a question at StackOverflow.com that made me decide to update/rewrite some that older tutorials. Instead of building some dummy extension I’d like to show you how to build an extensions that might be useful for developers of Windows Store…

CSS, Expression Blend, HTML5, Windows Store apps

setting view states in HTML windows store apps using Blend

Intro From developing XAML applications I got used to working with the visual state manager to set various states of my applications and controls. In Windows Store apps that are build using XAML use the visual state manager to change various properties when the view state of the app changes. The app can be ran in fullscreen, filled or snapped state. When building Windows Store apps using HTML and JavaScript I wanted to show some UI different when the view state changes. One way to accomplish this is to change the CSS class of the elements from JavaScript. Just handle…