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 apps and Windows Phone apps. The extension is going to display a list of characters of the Segoe UI Symbols font you can use in you apps.

Getting Started

To be able to build directly into the extensions folder of Blend and have Visual Studio debug them you’ll have to start Visual Studio as administrator.

When Visual Studio is started create a new WPF User Control Library project. This will add the necessary references for creating a user control that will be our panel in Blend.

I named the extension SegoeSymbol, but feel free to use anything you like…

Next we’ll have to change some of the configurations of the project to have Blend pick the extension right from it’s extensions folder.

Go to the properties of the the project and change the Assembly Name on the Application tab to “SegoeSymbol.Extension” . This will name the assembly SegoeSymbol.Extension.dll. All extensions need to have the .extension.dll suffix.

Also change the Target framework to .NET Framework 4.5.

Set the Output Path on the Build tab to “c:\Program Files (x86)\Microsoft Visual Studio 11.0\Blend\Extensions\” . If you have installed Visual Studio 2012 in any other location this path might be different. Also, make sure the Extensions folder exists.

The last property to changes is the Start Action on the Debug tab. Set this to the full path to “Blend.exe”. This way Visuals Studio will start Blend when you hit F5 and attaches the debugger to the process enabling you to set breakpoints and such.

Code

Before we can do anything with this extension we need some code. The project we just created doesn’t have a class file yet, so we’ll have to add a one. Name it SegoeSymbol. This class will be the entry point for the extension.

This class has to implement the IPackage interface from Blend. To get this interface you’ll have to reference Microsoft.Expression.Extensibility.dll. You can this assembly in the root folder of Blend, the same folder you’ve found Blend.exe in a bit earlier.

Implementing this interface will give you two methods, Load and Unload. The Load method is called when Blend loads the extension. And, you might have guessed, Unload is called when Blend unloads the extension. Blend will load the the extension when it is started and unload the extension when it is shut down.

Blend for Visual Studio uses the Managed Extensibility Framework, or MEF, to load extensions. MEF is included in the .NET framework. All you have to do is find the reference to System.ComponentModel.Composition. MEF works by decorating a class you want to enable as extensions with the Export attribute and providing that with the type you’d like to export. The other side, Blend in this case, is using an Import based on the IPackage interface to get to the extension. By now your code should look something like this:

namespace SegoeSymbol
{
    using System.ComponentModel.Composition;
    using Microsoft.Expression.Extensibility;

    [Export(typeof (IPackage))]
    public class SegoeSymbol : IPackage
    {
        public void Load(IServices services)
        {
        }

        public void Unload()
        {
        }
    }
}

One last thing before you build and run your code. By default all assemblies referenced that are not in the GAC are copied to the output directory. Because Blend has everything you need, you can set the Copy Local property of all references to False. If you need to have a reference included with your extensions you can leave that one to true.

If you like you can try it out now… If you place breakpoints at the opening brackets of both methods you will see them both hit when opening and closing Blend.

A small thing you might run into when developing extensions is that Blend will lock the extension assemblies when it has them in use. This means you can’t have Visual Studio compile and build you extensions when Blend is running. Even to the point where if you close Blend a process, Microsoft Visual Studio XAML UI Designer (32 bit), will keep the files locked. I have to look a bit more into why and when this process is used. But you often have to go into the process explorer and end the task by hand. If you hit the “stop” button in Visual Studio it will kill Blend most of the time, which unlocks the files. I don’t know if this is a bug or a feature.

I’ll get back to this class in a second. First we should have a look at the…

User Interface

An extension needs a user interface, right? The user interface doesn’t do anything with Blend itself or with the extension so I’ll go over it rather quickly.

Because we started with the WPF User Control Library template we already have one. I renamed this to CharacterSelector.

Lets have a look at the XAML part of the UI. It’s basically just a ListBox with some styling. I changed the ItemsPanelTemplate (on line 27) to contain a WrapPanel instead of a StackPanel so all icons will be placed next to each other until a row is full at which point it will wrap to the next row.

The ItemTemplate, defined on line 14, draw a border around a TextBlock that contains the character in the Segoe UI Symbol font.

The whole thing is combined in a ListBox, line 34. The selection changed event is handled in the code behind.

<UserControl x:Class="SegoeSymbol.CharacterSelector"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="322.667"
             Width="Auto"
             Height="Auto"
             MinWidth="325">
    <UserControl.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="ItemTemplate">
                <Border BorderThickness="1"
                        Width="50"
                        Height="50"
                        BorderBrush="White">
                    <Grid HorizontalAlignment="Center"
                          VerticalAlignment="Center">
                        <TextBlock Text="{Binding Character}"
                                   FontFamily="Segoe UI Symbol"
                                   FontSize="24" />
                    </Grid>
                </Border>
            </DataTemplate>
            <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <WrapPanel />
            </ItemsPanelTemplate>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid>
        <ListBox x:Name="listBox"
                 Background="{x:Null}"
                 ItemTemplate="{DynamicResource ItemTemplate}"
                 ItemsPanel="{DynamicResource ItemsPanelTemplate1}"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                 ScrollViewer.VerticalScrollBarVisibility="Auto"
                 SelectionChanged="listBox_SelectionChanged" />
    </Grid>
</UserControl>

In the code behind I fill the selection with characters and handle the selection. The list of characters is created with a simple for loop at line 16. This loop instantiates a helper class MetroIcon (see line 57) and fills it with a number and the corresponding character. After the loop the collection of characters is assigned to the ItemsSource of the ListBox (line 27).

When an element of the ListBox is selected, when the extension is running in Blend, the Listbox_SelectionChanged event handler is called (line 27). To keep things simple, the character selected is copied to the Windows clipboard. As text, but formatted in a way xaml-text can handle it.

Here’s the code:

namespace SegoeSymbol
{
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Controls;

    /// <summary>
    ///     Interaction logic for CharacterSelector.xaml
    /// </summary>
    public partial class CharacterSelector : UserControl
    {
        public List<MetroIcon> Collection = new List<MetroIcon>();
        public CharacterSelector()
        {
            Collection = new List<MetroIcon>();
            for (int i = 0xE100; i < 0xE271; i++)
            {

                Collection.Add(new MetroIcon()
                    {
                        Character = ((char)(i)).ToString(),
                        Value = i
                    });
            }

            InitializeComponent();
            listBox.ItemsSource = Collection;
        }

        /// <summary>
        /// Handles the SelectionChanged event of the listBox control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="SelectionChangedEventArgs"/> instance 
        /// containing the event data.
        /// </param>
        private void listBox_SelectionChanged(object sender, 
                                              SelectionChangedEventArgs e)
        {
            if (e.AddedItems != null && e.AddedItems.Count>0)
            {
                var metroIcon = e.AddedItems[0] as MetroIcon;
                if (metroIcon != null)
                {
                    string val = string.Format("&#x{0:X};", metroIcon.Value);
                    Clipboard.SetData(DataFormats.Text,val);
                }
                listBox.SelectedItem = null;
            }

        }
    }

    /// <summary>
    /// Data class for holding Character and value
    /// </summary>
    public class MetroIcon
    {
        public string Character { get; set; }
        public int Value { get; set; }
    }
}

Lets have a look at gluing the whole thing together.

Adding the control to Blend

We’re going to make some magic happen in the Load method created earlier in this tutorial. Blend calls the load method and passes it its IServices implementation. You can use this class to get access to various services that Blend exposes. One useful service is the IWindowService. This service is responsible for the panels you see all around Blend. To be able to use the IWindowService interface you need reference Microsoft.Expression.Framework.dll and make sure you set “Copy Local” on false.

To get access to IWindowService you need to call the GetService method on services that was passed as a parameter. When you give this generic method the type IWindowService, it will return an instance of that type that Blend is using.

Next, create an instance of the CharacterSelector control we created in the previous chapter. If you someday need IServices in a user control, just extend the constructor and pass it in.

The last thing to do is register the control as a “Palette”. Palettes are the panels in Blend. To register a new palette call the RegisterPalette method on windowService and give it an identifier, the instance of the control and a title. You can provide a fourth, optional, parameter to set some extended properties on the palette, but we’ll use the defaults for now.

The Load methods should be looking something like this by now:

public void Load(IServices services)
{
    IWindowService windowService = services.GetService<IWindowService>();
    CharacterSelector characterSelector = new CharacterSelector();
    windowService.RegisterPalette("SegoeSymbolExtionsion",
                                  characterSelector, 
                                  "SegoeSymbol");
}

At this point you should be able to hit F5 and find the extension in Blend.

After Blend is started you need to create or open a project. If you look in the Window menu, the palette is shown right there.

When the SegoeSymbol panel is visible it behaves like all other panels in Blend. In this case it is docked next to the Resources panel.

What’s next?

I think we’ve got the basics down at this point. There are a lot more things you can do, like creating menus and commands or using documents and dialogs.

Please note that anything you just read is based on my own findings. There is no documentation available on writing these extension, no support and no guarantee it will even work in a next version of Blend for Visual Studio.

The Storyboard extension is available for users of Visual Studio Ultimate, Premium and Test Professional. To view PowerPoint presentations containing these storyboards you don’t need any of those, you can even view the presentations in the PowerPoint Web App.

Storyboard Shapes

If you have Visual Studio installed you’ll probably have the Storyboarding add-in as well. You can find it on the ribbon inside PowerPoint, or you can start PowerPoint Storyboard directly from the start menu.

Once PowerPoint is started it’ll show you the Storyboard shapes panel. This panel contains a whole lot of shapes you can use creating your storyboards or sketches. Not only can this be used for Windows Phone applications, but shapes for Windows Store apps, websites and Windows desktop applications are also included.

The default list of shapes contains most of the common used controls and parts of applications like textboxes and buttons. It also contains more complex controls like maps.

If you need more shapes, or would like to create storyboards for other applications like IPhone apps or just would like a sketchy style, you can download more shapes at the Visual Studio gallery.

Creating a Storyboard

Creating a storyboard is as easy as creating a regular PowerPoint presentation. Well, maybe even easier. Just drag and drop shapes from the panel to a slide and combine them to get your ideas communicated.

You can use all other PowerPoint features too of course. Shapes, animations, transitions, whatever you like. But, almost everything you need is positioned on the Ribbon.

You may want to reuse the basic layout of your storyboard throughout multiple slide. This is very simple to accomplice. Just click the “Create Layout” button on the Ribbon. You’ll have to name the layout. After you did that you can set any new to use the layout you just created.

You can add custom shapes to the list. If you have added some shapes to form a ‘control’ that you might want to reuse, just select the shapes and click “Add to My Shapes” on the Ribbon. Name the Shape and it is added to the “My Shapes” section of the panel. You can export your custom shapes and share them within your team for example. Imported shapes will be places in a section named after the filename you chose when you exported the file.

Another nice features of the storyboarding add-in is the screenshot function. Clicking the button on the Ribbon will present you the option to grab a screenshot from any running application, in one click. Or to select just a portion of the screen you can click the “Screen clipping” option.

To create some interactivity between parts of your storyboard you can use the Hyperlink option. Besides creating a hyperlink to a file or website, this option can also create a link to another slide. This allows you to build and test the navigation of your application. For example. When building a storyboard for a Windows Phone applications, you can add an AppBar to the design. You can add a hyperlink on each button on the AppBar to have those navigate to different slides. If create a new Layout for this screen you can reuse it on various slides to have a consistent layout with the hustle of recreating it on every slide.

The last option I would like to point out is that you can add a link to your storyboard to Team Foundation Service work items right from within PowerPoint. After hitting the “Storyboard Links” button in the Team section of the Ribbon, you have to connect to you TFS server. When the connection is established you need to search for a work item to link the presentation to. This can be done though a query you defined in you TFS, by id or by name. The only thing notable when using this feature is that you’re storyboard has to be saved in a public location accessible by anyone that needs to view the presentation, a location like SkyDrive or SharePoint. Storyboards can be viewed in the PowerPoint Web app when saved on SkyDrive, without the add-in.

You can download the set here: WindowsPhone8Accent.

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 the change in view states and call some methods to set the classes.

Another way comes very close to the visual state manager from the XAML world. And can be done from within Blend.

CSS Media queries

It turns out you can set the styles for the view states using CSS media queries or media types. You might know these from building websites, where they’re often used to set different styles for different media or screen sizes.

If you look at the Style Rules pane in Blend for Visual Studio, when having an HTML Windows Store app opened, you can see four different “@media” definitions. Each one is used for a different view states. The media queries are added by default, but if they are missing or you want to add another you can do this by right click on the .css file.

Notice that only the fullscreen-landscape is white. The other three are greyed out. This is an indication that Blend is showing the landscape orientation at this moment. You can change the current orientation used in Blend on the Device pane. Just select another option for view.

To demonstrate how to use this I created a very simple example showing a grid with 6 boxes. For this I used a FlexBox. When a FlexBox is filled with elements they are stacked horizontally or vertically and wrapping could be enabled.

html:

<div class="ms-flexbox">
    <div class="tile red"></div>
    <div class="tile green"></div>
    <div class="tile red"></div>
    <div class="tile green"></div>
    <div class="tile red"></div>
    <div class="tile green"></div>
</div>

css:

.ms-flexbox {
    display: -ms-flexbox;
    -ms-flex-flow: wrap column;
    width: 1000px;
}
.tile {
    width: 250px;
    height: 200px;
    margin: 20px;
}
.tile.red {
    background-color:red;
}
.tile.green {
    background-color:green;
}

A similar layout like this is often used in Windows Store apps. Unfortunately it does not work when the app is snapped. In the snapped state the elements should be shown in a list, but will remain in three columns at this point. You’ll need to place parts of the .ms-flexbox class in both @media queries. You could do this by hand by editing the .css file, but I’ll show you how to do it using Blend.

The first step is to copy the .ms-flexbox class to the fullscreen-landscape and to the snapped media queries. Just right-click the .ms-flexbox entry on the Style Rules pane and click copy. That paste it on the fullscreen-landscape and the snapped media queries.

Next, select the original .ms-flexbox class and have a look at the CSS Properties pane. There’s a long list of collapsible panels containing a lot of properties. To shorten the list to only the properties that have a value, check the “View set properties only” checkbox. 

The original .ms-flexbox style will be the style that is applied to all view states and contains the properties that are equal in every state. The Flexbox properties will be different. So these need to be removed. To do this click on the small advanced properties square next to Flexbox and select clear.

Select the .ms-flexbox style on the fullscreen media query on the Style Rules pane. For this part of the style clear the layout and the sizing. And do the same for the style on the snapped media query.

The style for the snapped state has to have some different properties for the Flexbox. Start by setting the View to the snapped state on the Device pane, so it visible what the change in properties is causing. First, clear the –ms-flex-wrap property, because in this state wrapping is not needed. Than, set the
–ms-flex-direction property to column. Notice the change in the designer.

And that’s it. Well… Almost actually. We haven’t done anything with the filled and fullscreen-portrait states. You could copy the state from the landscape state, but this would mean you’ll have to keep them in sync in case of changes.

At this point I changed the CSS by hand and added the filled and portrait definition to the landscape view state, which results to:

@media screen and (-ms-view-state: fullscreen-landscape),
screen and (-ms-view-state: fullscreen-portrait),
screen and (-ms-view-state: filled)
{
    .ms-flexbox {
        -ms-flex-flow: wrap;
    }
}

Wrap up

Handling view states is an important part of you Windows Store app. In a real world application the styles and HTML will be a lot more complex than I showed here, but I hope you’ll get the idea. Otherwise, just drop me a line and I’ll see if I can expand the tutorial.

It’s not recommended to uses these templates as is. They’re provided as Visual Studio solutions in C# and JS and you should change the design to match your brand, of course.

UPDATE May 9th 2013:
Added 10 more templates to the list.

Here’s the entire list again. Click on the image to go to the template.

	Block Style Color template will help if you want to build an app which needs a Variable Size Content display blocksThe Block Style Color template contains placeholders for Category and Detail Page. You can leverage this style if your implementation scenario is closest to this template.
	Block Style Pic template is an emulation of a data storage app with placeholders for category and details data.
	Brick Style template will help if you want to adopt a brick style variable size display in your app’s hub page.
	Cook Book template will help if you want to build an app which has the following ingredients: Group display Category display Recipe detail display Making use of this template you can create any Cookbook app.
	E-Commerce Electronic template will help if you want to build an app which has the following ingredients: Category Display Group Category Display Category Detail Display Detail Display
	E-Commerce Fashion template will help if you want to build an app which has the following ingredients: Category Display Group Category Display Category Detail Display Detail Display
	Finance Template will help if you want to build an app which has the following ingredients Chart & Market Indies Display Market Indies Display The finance template is an emulation of a Finance app with placeholders for Chart and Market Indies data. Making use of this template you can create any Market Watch app.
	The Food and Dining template is an emulation of a Recipe app with placeholders for various category of recipe, Ingredients and Instruction.
	Food Light Template will help if you want to build an app which has the following ingredients Recipe Details Restaurant The Food Light template is an emulation of a Recipe app with placeholders for various category of recipe, Ingredients and Instruction.
	The Health & Fitness is an emulation of a fitness app with placeholders for Category, Group Category, and Detail data. Making use of this template you can create any fitness app.
	The Invitation template is an emulation of an invitation app with placeholders for event category, catalogue, details and review share data. You can also share the created invitation through share source.
	Music Template will help if you want to build an app which has the following ingredients Music Category Display Playlist Display Music Player
	News Dark Template is an emulation of a News app with placeholders for News category and News details.
	News Grey Template is an emulation of a News app with placeholders for News category and News details.
	News Variable Tile Template is an emulation of a News app with placeholders for News category, Group Category and Detail data.
	Photo Browser template is an emulation of a Picture browser app with placeholders for Category, Group Category, and Detail Data. Making use of this template you can create a Photo Browser app.
	Shopping template will help if you want to build an app which has the following ingredients Product Category Display Product Catalogue Display Product Details Page The shopping template is an emulation of a shopping app with placeholders for product category, catalogue and details data. Shopping cart and eventual payment features are left out of the template intentionally as they are better dealt during actual implementation.
	Travel Dark Background template is an emulation of a travel app with placeholders for Vacation destination, group destination and destination detail data. Add to favourite features are left out of the template intentionally as they are better dealt during actual implementation.
	Restaurant template is an emulation of a Restaurant app with placeholders for Restaurant category, Restaurant Details. Booking Table and eventual payment features are left out of the template intentionally as they are better dealt during actual implementation.
	Tutor Advanced Template is an emulation of a tutor app with placeholders for Category, Gallery, and Detail data.
	Tutor template is an emulation of a tutor app with placeholders for category, catalogue and details data.
	Baby Journal Template is an emulation of a Baby Journal app with placeholders for Category, Gallery, and Detail data. Making use of this template you can create a Baby Journal app.
	Basic Game template will help if you want to build an app which has the following ingredients Game Category Display Game Catalogue Display Game Page
	Blocks template provides navigation placeholders in the hub page followed by content blocks in the details page.
	Forum template will help you build an app which has elements of connecting to various discussion groups.
	Drawing template is an emulation of a Painting app with placeholders for Colour selection and Tool Box.
	E-Commerce Jewellery template is an emulation of a Shopping app with placeholders for Category, Group Category, and Detail Data. Making use of this template we can create any Ecommerce app. Shopping Cart functionality is left out of the template intentionally as they are better dealt during actual implementation.
	Fitness template is an emulation of a health and fitness app with placeholders for Category, Group Category, and Detail data.
	Food Variable template is an emulation of a Recipe app with placeholders for various category of recipe, Ingredients and Instruction.
	Health Management template is an emulation of a personal health manager with placeholders for Profile, Reports and Patient details.
	Language Converter template is an emulation of a Language Translator app with placeholders for Category Selection, Choose Scenario and Translate.
	Lifestyle Template will help if you want to build an app which has the following ingredients Restaurant Search Food, Nightlife and Events Search Today’s Happening
	Matching Template will help if you want to build an app which has the following ingredients Choose the Best Matching Pattern
	News and Weather template is an emulation of a News app with placeholders for Grouped Items, Weather, and Detail data.
	News Big Image Template is an emulation of a News app with placeholders for News category, Group Category and Detail data.
	News template is an emulation of a News app with placeholders for News category, article and video data.
	Notes Template will help if you want to build an app which has the following ingredients Calendar Display Overdue Display Task Display
	Pillar Block template is an emulation of a Pillar Block app with placeholders for category Display (Local News, Local Events etc.), and details.
	Planning Dairy Template will help if you want to build an app which has the following ingredients Schedule Tracking Schedule Planning
	Product Template is an emulation of a shopping app with placeholders for Category, Group Category, and Detail data.
	Recipe template is an emulation of a Recipe app with placeholders for Recipe List, Recipe details data.
	Shoe store template is an emulation of a Shopping app with placeholders for Category, Group Category, and Detail data.
	Solution template will help if you want to build an app which has the following ingredients Topics Display Query Solution Display Query logging
	Standard Square template will have a Square tile with placeholders for product category and details data.
	Text Keyboard template is an emulation of a Keyboard with placeholders for the text keys.
	Tracking template is an emulation of tracking apps with placeholders for category and details data. Add, Delete and Refresh are left out of the template intentionally as they are better dealt during actual implementation.
	Translator template is an emulation of a translating app with placeholders for translating one language to other. Select language features are left out of the template intentionally as they are better dealt during actual implementation.
	Travel & Tourism template is an emulation of a travel app with placeholders for Summary, Category, and Detail data.
	Travel light theme is an emulation of a travel app with placeholders for Summary, Group summary, and Detail data.
	Travel picture template is an emulation of a travel app with placeholders for Vacation destination, group destination and tour detail data. Enquire and Bookmark features are left out of the template intentionally as they are better dealt during actual implementation.
	Financial Adviser template will help if you want to build an app to manage personal finances.
	Unit Convertor will help if you want to build an app that brings in various conversion logic/units under one roof.
	News Light Theme will help if you want to build an app which has the following ingredients News Category Display Article Display Video Page
	The Food Template is an emulation of a Recipe app with placeholders for different Categories.
	The Simple Grid will help if you want to build an app which has a uniform display of tiles which are proportionate.
	The Variable Grid Style A Template will help if you want to build an app which has an option for an image followed by uniform display of tiles which are proportionate
	The Variable Grid Style B Template will help if you want to build an app which has an option for an image followed by uniform display of tiles which are proportionate
	The Variable Grid Style C Template will help if you want to build an app which has an option for an image followed by uniform display of tiles which are proportionate
	The Variable Grid Style D Template will help if you want to build an app which has an option for an image followed by uniform display of tiles which are proportionate

If you are a startup and have a great idea for a Windows 8 app this might be a great opportunity for you. You’ll have to enter your idea by March 15. Five teams will than be shortlisted. If you make it to the list, the judges will interview your team in early April.

And if the judges pick your idea, you’ll get $30K of funding, a 1 week bootcamp in Hong Kong and 3 months of virtual mentorship.

You can enter here.

Actions for Launchers

I often have simple trigger actions that need to be executed in my apps. For example, opening a URL in Internet Explorer or sending an email. Because I use Blend a lot (and I’m lazy ;) ), I just like to drag and drop an action to a button or text block and be done with it. The great thing about actions and behaviors is that you can bind the the properties which makes them very useful in templates.

At this point only a few of the possible Windows Phone Launchers are available as trigger actions, but I’m sure the list will grow over time. If you would like one added just let me know and I’ll see what I can do.

NavigateToUrlAction

Using these actions is very simple. The code surrounding the action is pretty much the same for all actions, only the event name might change. The NavigateToUrlAction performs a WebBrowserTask. It opens up the Url property so you can bind to it. As a small extra feature it checks if a network connection is available and shows a message if there isn’t. This message can be customized as well.

<Button Content="Wp7nl" HorizontalAlignment="Left" VerticalAlignment="Top">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Tap">
            <behaviors:NavigateToUrlAction Url="http://wp7nl.codeplex.com"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

SendEmailAction

This action executes the EmailComposeTask. The “To”, “Subject” and “Body” properties can be bound to.

NavigatieToMarketplaceDetailAction

This action executes the MarketPlaceDetailTask. It opens up the marketplace and shows the details of your app.

NavigatieToReviewAction

Getting people to review your apps is crucial for a successful app. This action executes the MarketplaceReviewTask and makes it very easy for users to review.

ShareLinkAction

Sharing links is a very common task in apps. This action executes the ShareLinkTask. So you can use the native sharing features of the phone. The “LinkUri”, “Message” and “Title” properties can be bound to.

Limit TextBox Behavior

I ran into cases where I wanted to limit the number of characters a user can enter. This behavior an only be used with a TextBox element. You can set the maximum number characters that can be entered in the “MaxChars” property. As a bonus feature you can have the phone vibrate a little when the maximum number of characters is reached.

<TextBox x:Name="LimitedTextbox">
    <i:Interaction.Behaviors>
        <behaviors:LimitTextBoxBehavior MaxChars="25" Vibrate="True"/>
    </i:Interaction.Behaviors>
</TextBox>

Visible On Locale Behavior
The VisibleOnLocaleBehavior sets the attached element to visible if the current UI language of the phone matches the specified two letter ISO language name and hides it when it doesn’t. The behavior can be used I you have certain element, like images, that are language specific.

<TextBlock Text="English" >
    <i:Interaction.Behaviors>
        <behaviors:VisibleOnLocaleBehavior LanguageCode="en"/>
    </i:Interaction.Behaviors>
</TextBlock>
<TextBlock Text="Nederlands">
    <i:Interaction.Behaviors>
        <behaviors:VisibleOnLocaleBehavior LanguageCode="nl"/>
    </i:Interaction.Behaviors>
</TextBlock>

Visibility In Trial Behavior
The VisibilityInTrialBehavior sets the attached element to visible or collapsed if the app is in trial mode. Whether the attached element should be visible or collapsed is determined by the “Visibility” property.

<TextBlock Text="Not in trial mode">
    <i:Interaction.Behaviors>
        <behaviors:VisibilityInTrialBehavior Visibility="Collapsed"/>
    </i:Interaction.Behaviors>
</TextBlock>

This behavior makes use of the TrialHelper. This helper is used to see if your app is running in trial mode. The be able to run your application in trial mode you can add “TRIAL” as a conditional compilation symbol to fake it when debugging.

Converters

I’ve added a couple of converters to the Wp7nl library. Most of which are very simple.

ObjectToStringValueConverter

Let’s start with the one that needs the most explanation. The ObjectToStringConverter is used to create a nicer representation of an object. Add properties of the bound object between { } to the converter parameters.

Take, for example a Person class.

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

Whenever you would like to have a textblock show the last name and the first name separated with a comma, you could just add that to the converter parameter.

For this example I’ve set the datacontext of the mainpage to a new instance of the person class directly in the constructor. You wouldn’t do that in a real application of course, but you’ll get the idea.

public MainPage()
{
    InitializeComponent();
    DataContext = new Person{FirstName = "Larry", LastName = "Laffer"};
}

Than I’ve added a databinding to the textblock.

<TextBlock Text="{Binding ConverterParameter=\{LastName\}\, \{FirstName\}, Converter={StaticResource ObjectToStringValueConverter}}"/>

When creating the binding in Blend, you don’t have to escape the curly brackets, as shown in the image below.

NullToCollapsedConverter

Returns Visibility.Collapsed for any value that is null, empty, only whitespaces or an empty guid. Very useful to hide empty stuff. You don’t want to show a navigate to URL button if the URL is empty, for example.

StripHtmlValueConverter

Removes all HTML from a string and decodes ‘&XXXX’ to regular chars. Often when data is requested from external services like Twitter or Facebook, it contains HTML at some point. This HTML has to be converter to either a regular string or to some sort of rich text block. This converter does the first, removing all HTML. <BR /> tags are changed to new lines.

ToLowerValueConverter

Converts a string to all lowercase characters. Useful for headers.

ToUpperValueConverter

Converts a string to all uppercase characters. Useful for titles.

I recently reinstalled my laptop with Windows 8 and Visual Studio 2012 to be able to develop Windows Phone 8 application on that. I thought every thing was fine until I ran the first application in the emulator.

I immediate got an error: “Something happened while creating a switch: Xde couldn’t find an IPv4 address for the host machine.” After some searching I found a solution that worked for me.

I had to start the Hyper-V Manager, which was on my start menu. I selected the Virtual Switch Manager… from the action menu on the right.

In the Virtual Switch Manager I created a new virtual network switch. I selected “Internal” from the list of types and hit the button. I named the switch “Windows Phone Emulator Internal Switch” and made sure the connection type was set to “Internal Network”. After trying these setting it turned out I had to check “Enable virtual LAN identification…” too.

Below is a screenshot of the setting…

I hope this helps anyone struggling with the same issue.

When working on Windows Phone or Silverlight applications I use the sample data feature of Blend a lot. I like to see what I’m working on. The only downside of this sample data is that it rarely mirrors the data (unless I’m working on the chair application for a company called Lorem Ipsum). I’d like to see Dutch phone numbers, cities and postal codes. So I’ve decided to create my own list of sample data. At first I thought I had to build a new extension for Blend to be able to customize the data. It turned out to be far less complicated.

How?

The “String” type of sample data is stored in two files. If you’ve installed Blend on the default location you can find these files at:

• Blend for Visual Studio ==> C:\Program Files (x86)\Microsoft Visual Studio 11.0\Blend\SampleDataResources\en\Data
• Expression Blend 4 ==> C:\Program Files (x86)\Microsoft Expression\Blend 4\SampleDataResources\en\Data

The first file, LoremIpsum.txt, contains a dummy text. This text is loosely based on Latin an is commonly used as dummy text. The second file, SampleStrings.csv, is a comma delimited file that contains the names and words you are probably used to when working with sample data. All you need to do if you want to create custom data is replacing these files.

Because I’m Dutch and would like to use Dutch dummy text I replaced the contents of the LoremIpsum.txt file with some of the generated text on this page. This immediately makes the random generated text look Dutch.

Replacing the SampleStrings.csv file was a bit more complicated. I assumed the strings had to be in the exact same format as they were, but I was wrong here. You can do whatever you want with this file, as long as the first row of elements are the names of the data you are fine. These names show up in the Format combobox.

Besides the obvious things like first name, last name and addresses, I added a few thing I always needed as sample data but didn’t have. I added image urls and a thumbnails that point to http://lorempixel.com. That way I have “real” images when binding the sample data to the source property of an image. I also added dummy tweets. These are just texts but sometimes start with @ or RE, can contain a url or sometimes have a random hash tag.

Download

You can find both files in SampleData. I also include .bak files of the original files.

Often you need to store some data from the application you are building. One option for Windows Store apps is a local database in the file system, SQLite. It’s pretty easy to setup and to use.

SQLite is self-contained serverless database engine and is available for free for many platforms ranging from Linux to Windows. In this small tutorial I’d like to show you how to get started using it in you Windows Store app.

Bits & Pieces

First you’ll have to get the database engine. There is a .visx installation package available at www.sqlite.org. I downloaded the Precompiled Binaries for Windows Runtime and installed it. This makes it to show up in Visual Studio when adding a reference in your app under the extension tab.

To use the binaries you’ll need an open-source wrapper too. The most convenient way to get these is via NuGet. Just do a search for SQLite and install sqlite-net. This NuGet package contains a couple of helper classes and attributes to create and access the database.

Code

To get it to work you have to create the entities in code and decorate it with the right attributes.

This is how two entities might look like:

public class Artist
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }

    [MaxLength(64)]
    public string Name { get; set; }
}

public class Album
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }

    [Indexed]
    public int ArtistId { get; set; }

    public string Name { get; set; }
    public int ReleaseYear { get; set; }
}

Than, you can create and query the database like this:

// Set the path in which to store the database.
string dbRootPath =
             Path.Combine(new[]
                          {
                            ApplicationData.Current.LocalFolder.Path, "SqlightTest.sqlite";
                          });

// Create a new connection
var _db = new SQLiteConnection(dbRootPath);

// Create the tables if they not exists
_db.CreateTable<Artist>();
_db.CreateTable<Album>();

// insert a new artist in the database
int key = _db.Insert(new Artist {Name = "The Who"});

// insert some records using the artist key
_db.Insert(new Album {ArtistId = key, Name="My Generation", ReleaseYear = 1965});
_db.Insert(new Album {ArtistId = key, Name="A Quick One", ReleaseYear = 1966});
_db.Insert(new Album {ArtistId = key, Name="The Who Sells Out", ReleaseYear = 1967});
_db.Insert(new Album {ArtistId = key, Name="Tommy", ReleaseYear = 1969});

// query the database using chained methods
var result = _db.Table<Album>().Where(s => s.Name.StartsWith("T"))
                               .OrderByDescending(x=>x.ReleaseYear);

// or using linq
var result2 = from x in _db.Table<Artist>()
              where x.Name == "The Who"
              select x;

Wrap up

I hope this is enough the get you started using a local database in your Windows Store apps.