Visually Located | July 2014

Implementing truly timed Windows Phone app trials with Azure Mobile Services

23. July 2014 Shawn Windows Phone (0)

An awesome part of Windows Phone and Windows Store apps is the ability to offer a trial version to users before they decide to purchase the app. This gives uses an opportunity to try the app for free before paying. There are different ways to offer trials. You can limit functionality while in trial mode. You can offer unlimited trials, allowing the user to use the app forever, or you can allow the user to use the app for limited time period. For Windows Store apps, you can specify in the Store how long the user is allowed to try the app.

Windows Phone apps do not offer this capability. When implementing timed trials in apps, a common task for app developers is to store a value within the app for when the app was first opened.

Note: As this is relevant for both Silverlight and Runtime apps, this blog will contain code for both. The code samples will switch back and forth.

     public static bool IsTrialExpired()

    {

        // Silverlight example

        var appSettings = IsolatedStorageSettings.ApplicationSettings;

        DateTime expirationDate;

        if (appSettings.TryGetValue("TrialExpirationDate", out expirationDate) == false)

        {

            // first time app opened

            expirationDate = DateTime.Now + TimeSpan.FromDays(7);

            appSettings["TrialExpirationDate"] = expirationDate;

            appSettings.Save();

        }

        return expirationDate > DateTime.Now;

    }

You would then use this method along with the LicenseInformation class.

    // Silverlight apps

    var licenseInfo = new LicenseInformation();

    var isTrial = licenseInfo.IsTrial();

    // Runtime apps

    var licenseInfo = CurrentApp.LicenseInformation

    var isTrial = licenseInfo.IsTrial;

    if(isTrial)

    {

        if(IsTrialExpired())

        {

            // tell user they can no longer use app

        }

        // possibly limit some functionality

    }

This has been the solution for many apps. The problem with this solution is that the user can uninstall the app and reinstall and get the trial all over again! To overcome this, your app needs to use a service to store user information and check that service for if the trial has expired. There are many cloud based services available to you that are perfect for storing information like this. Two great services are Parse and Azure Mobile Services. This blog post will cover using Azure Mobile Services.

Using a service allows your app to check if the user opened the app at any time. If the user uninstalls the app and reinstalls it, they will now be able to get the trial again. The first step is to set up a mobile service in Azure.

Give the service a name. Name the service something that matches your apps name. If you do not already have a database in azure, create a new free db

When the service is created, click on it, then the Data tab and add new table

Give the table a name that maps to the app itself. This table will be in a database that you will use across multiple apps, so you don’t want something generic like UserInfo, or TrialUser.

Now for some code. First we will create a class that will represent our new table in Azure Mobile Services.

    class MyAppUserInfo

    {

        public string Id { get; set; }

        public DateTimeOffset TrialExpirationDate { get; set; }

    }

Next let’s create a new interface and class that will allow us to check the service if the users trial has expired.

    interface ITrialService

    {

        /// <summary>

        /// Get or sets the amount of time the user is allowed to use the trial.

        /// </summary>

        TimeSpan TrialPeriod { get; set; }

        /// <summary>

        /// Gets a value indicating if the trial has expired for the given userId.

        /// </summary>

        /// <param name="userId">A unique idenitfier for a user</param>

        /// <returns>A task that will complete when the data is retrieved.</returns>

        Task<bool> IsExpired(string userId);

    }

The interface is pretty simple. One property to specify how long the trial should last and one method to see if the trial has expired. For the class, the main this to implement it the IsExpiredAsync method.

Note: Ensure that you add the WindowsAzure.MobileServices nuget package.

    class AzureTrialService : ITrialService

    {

        private readonly IMobileServiceClient _service;

        public AzureTrialService(IMobileServiceClient service)

        {

            _service = service;

            TrialPeriod = TimeSpan.FromDays(7);

        }

        public TimeSpan TrialPeriod { get; set; }

        public async Task<bool> IsExpiredAsync(string userId)

        {

            bool isExpired = false; 

            IMobileServiceTable<MyAppUserInfo> table = _service.GetTable<MyAppUserInfo>(); 

            var users = await table.Where(trialUser => trialUser.Id == userId).ToListAsync();

            var user = users.FirstOrDefault();

            if (user == null)

            {

                // new user, add it

                var trialExpirationDate = DateTimeOffset.Now + TrialPeriod;

                await table.InsertAsync(new MyAppUserInfo { Id = userId, TrialExpirationDate = trialExpirationDate });

            }

            else

            {

                // mobile services will deserialize as local DateTime

                isExpired = user.TrialExpirationDate < DateTimeOffset.Now;

            }

            return isExpired;

        }

    }

So the IsExpiredAsync method will check Azure Mobile Services for the given userId. If none is returned, it will add a new user. Every time after that it will check the expiration date with the current time.

This current implementation is dependent on the MyAppUserInfo class, which means that we cannot reuse this class for multiple apps. I lie to reuse my code rather than copy and pasting code. Let’s make a modification to the interface and class that allows this to be used for any app.

First we’ll create an abstract class for the user information. We need an abstract class because I was not able to get data from the service using an interface. Might be user error, or an issue with the SDK. Our MyAppUserInfo will implement this abstract class.

    /// <summary>

    /// Represents information for a trial user.

    /// </summary>

    abstract class TrialUser

    {

        /// <summary>

        /// Gets or sets the id for the user.

        /// </summary>

        public abstract string Id { get; set; }

        /// <summary>

        /// Gets or sets the date the trial will expire for the user.

        /// </summary>

        public abstract DateTimeOffset TrialExpirationDate { get; set; }

    }

Next we will modify the IsExpiredAsync method to allow for a generic parameter, but must be of type ITrialUser

    interface ITrialService

    {

        //other stuff

        Task<bool> IsExpiredAsync<TUser>(string userId) where TUser : TrialUser, new();

    }

    class AzureTrialService : ITrialService

    {

        // other stuff

        public async Task<bool> IsExpiredAsync<TUser>(string userId) where TUser : TrialUser, new()

        {

            bool isExpired = false;

            IMobileServiceTable<TUser> table = _service.GetTable<TUser>();

            var users = await table.Where(userInfo => userInfo.Id == userId).ToListAsync();

            var user = users.FirstOrDefault();

            if ((user == null)

            {

                // new user, add it

                var trialExpirationDate = DateTimeOffset.Now + TrialPeriod;

                user = new TUser { Id = userId, TrialExpirationDate = trialExpirationDate };

                await table.InsertAsync(user);

            }

            else

            {

                // mobile services will deserialize as local DateTime

                isExpired = user.TrialExpirationDate < DateTimeOffset.Now;

            }

            return isExpired;

        }

    }

Now we have a service that can be used across multiple apps to test if a trial has expired for a user. Let’s take a step back for a moment. Our initial goal here was to stop storing trial expiration locally and start using a service. Check! This new service does accomplish that, but now it checks the service every time the app is opened. There is no need to delay the opening of the app any more than is needed. We can get the expiration information the first time the app is opened and save it to use on later opens. We’ll again modify the IsExpiredAsync method

    public async Task<bool> IsExpiredAsync<TUser>(string userId) where TUser : TrialUser, new()

    {

        bool isExpired = false;

        object dateVal;

        if (ApplicationData.Current.LocalSettings.Values.TryGetValue("trialExpiration", out dateVal) == false)

        {

            // get user from server

            IMobileServiceTable<TUser> table = _service.GetTable<TUser>();

            var users = await table.Where(userInfo => userInfo.Id == userId).ToListAsync();

            var user = users.FirstOrDefault();

            if (user == null)

            {

                // new user, add it

                var trialExpirationDate = DateTimeOffset.Now + TrialPeriod;

                dateVal = trialExpirationDate;

                user = new TUser { Id = userId, TrialExpirationDate = trialExpirationDate.ToUniversalTime() };

                await table.InsertAsync(user);

            }

            else

            {

                // mobile services will deserialize as local DateTime

                dateVal = user.TrialExpirationDate;

            }

            ApplicationData.Current.LocalSettings.Values["trialExpiration"] = dateVal;

        }

        var expirationDate = (DateTimeOffset)dateVal;

        isExpired = expirationDate < DateTimeOffset.Now;

        return isExpired;

    }

Now when the user opens the app the second time, they will not hit the service. If they uninstall the app and reinstall, it will check the service once.

The TrialService does still rely on the date the user has on their phone. So there are two possible problems. The first is if the user sets the date ahead when they first open the app. The second is if they set the date back before opening the app. While this is probably not likely, you can prevent this if you wish.

To ensure the expiration date cannot be tampered we can set the date in the service script when a new row is created. Go to your mobile service in the Azure portal and select the Data tab and select your table. Select the Script tab and edit the insert script.

    function insert(item, user, request) {

        var today = new Date();

        var expiration = new Date(today.setDate(today.getDate() + 7));

        item.TrialExpirationDate = expiration;

        request.execute();

    }

This script will set the expiration date to be one week after the row is created.

Next select the read script. We will check the expiration when getting the user information.

    function read(query, user, request) {

        request.execute({ 

        success: function(results) {

            results.forEach(function(r) {

                // IMPORTANT: Note the case of trialexpirationdate  

                r.isExpired = r.trialexpirationdate < new Date();

                });

            request.respond(); 

            }

        }); 

    }

If you take this approach, you will need a new IsExpired property on your user info class and you can then remove the TrialExpirationDate property. You can also remove the TrialPeriod property from ITrialService since the period is being set on the server.

So now we have a way to get if the trial has expired, how do we get the id for the user? For Silverlight apps (Windows Phone 8) you can get the the anonymous id for a user through the UserExtendedProperties class.

    string userId = UserExtendedProperties.GetValue("ANID2") as string;

For Windows Phone 8.1 Runtime apps, there is no such property (that I have found!). I have seen some posts about using various device ids that are available, but this would mean the user could try the app on a number of devices. So far the best approach I have seen is from Dave Smits on the msdn forums. The solution is to use roaming settings to store a new unique ID.

    object userId;

    if (ApplicationData.Current.RoamingSettings.Values.TryGetValue("MyAppUserID", out userId) == false)

    {

        userId = Guid.NewGuid();

        ApplicationData.Current.RoamingSettings.Values["MyAppUserID"] = userId;

    }

Now with all of this information we can determine if the users trial has expired.

    string userId = GetUserId();

    var azureClient = new MobileServiceClient(

        "https://myapptrials.azure-mobile.net/", "YourSecretKey"));

    ITrialService trialService = new AzureTrialService(azureClient);

    bool isExpired = await trialService.IsExpiredAsync<MyAppUserInfo>(userId);

    if(isExpired)

    {

        // tell the user the trial is expired

        // most likely prompt user to purchase app

    }

This TrialService should still be used along with the LicenseInfomation class to first check if the user is using the trial version of the app. You can get the complete code for the service on github.

It's important to also note that all records in Azure Mobile Services have a __createdAt column that can be used as well. You can get the property in your class by adding a JsonPropertyAttribute to a property with the name "__createdAt".

Disabling tilt on a ListView or GridView

9. July 2014 Shawn Windows Phone (0)

I have mentioned before that the tilt animation is enabled by default in Windows Phone 8.1 Runtime apps, but what happens when you want to display a collection of items but do not want to enable tilt? You may not want to enable tilt because there is no extra action that happens when you tap an item. As with most things, there are a few options here.

The first is to not use a ListView/GridView at all. Instead just use an ItemsControl to display your items. This is great provided you do not have a lot of items you need to show. ItemsControl is not virtualized like the ListView/GridView so it uses a lot of memory when displaying a lot of items. This is my go to control for displaying a small collection of items that have no action associated with them.

If you still want to use the ListView or GridView control then there is a simple way to disable the animation. You will need to modify the style of the ListViewItem or GridViewItem. For this post I will demonstrate using the ListViewItem, but everything applies to the GridView as well.

First create a copy of the default style of the ListViewItem, you can accomplish this by right clicking on the ListView within the Visual Studio (or Blend) designer or in the document view.

Select: Edit Additional Templates –> Edit Generated Item Container (ItemContainerStyle) –> Edit a Copy…

Name the new style “NonTiltListViewItemStyle”

This will add the style for the ListViewItem as well as a bunch of color and size resources. The key now is to find the use of the PointerUpThemeAnimation and PointerDownThemeAnimation.and remove them. You’ll remove the VisualStateGroup.Transitions from the CommonStates group, remove the Storyboard from the Pressed state. If you have enabled multi select, remove PointerDownThemeAnimation from the CheckboxPressed state.

You now have a style that will not have the tilt animation when tapped!

Tilt animation for Windows Phone Runtime

8. July 2014 Shawn Windows Phone (0)

In a previous post I talked about some of the awesome animations and transitions available in Window Phone 8.1 Runtime apps. These animations and transitions were previously only available with a second SDK like the Windows Phone Toolkit or Telerik’s phone controls. One of the most used animations from both toolkit was the tilt animation. This animation shows a user that what they are touching can be tapped and will probably do something when they do tap. I also previously blogged about how you can enable the tilt animation for “unselectable” items. I am happy to say that the tilt animation is now built into all “tappable” controls without having to do anything!

So you would think that would be the end of the post right? I just said “it just works”. This is true for things like ListView/GridView/Buton, but what about when you want to display a StackPanel with a few items in it and those items should be tiltable? Some work is needed to get this working and there are a few ways to accomplish this.

Wrap content in ListViewItem

Much like my previous post, you can easily enable tilt on “normal” items by simply wrapping the elements with a ListViewItem!

     <!-- enable tilt by wrapping with a ListViewItem -->

    <ListViewItem>

        <StackPanel Margin="0,0,0,9.5">

            <TextBlock Text="Name" Style="{ThemeResource ControlContextualInfoTextBlockStyle}"/>

            <TextBlock Text="Shawn Kendrot" Style="{ThemeResource BodyTextBlockStyle}"/>

        </StackPanel>

    </ListViewItem>

This works because of the default style of the ListViewItem uses the PointerUpThemeAnimation and PointerDownThemeAnimation.

Start Storyboard on PointerPressed/Released

A second option to to listen to the PointerPressed and PointerReleased events of an element and play a Storyboard with the

    <!-- enable tilt by listening to pointer events -->

    <Grid PointerPressed="OnStoryboardGridPressed" 

          PointerReleased="OnStoryboardGridReleased">

        <Grid.Resources>

            <Storyboard x:Key="TiltDownStory">

                <PointerDownThemeAnimation TargetName="LovesPanel" />

            </Storyboard>

            <Storyboard x:Key="TiltUpStory">

                <PointerUpThemeAnimation TargetName="LovesPanel" />

            </Storyboard>

        </Grid.Resources>

        <StackPanel x:Name="LovesPanel" Margin="0,0,0,9.5">

            <TextBlock Text="Loves" Style="{ThemeResource ControlContextualInfoTextBlockStyle}"/>

            <TextBlock Text="XAML" Style="{ThemeResource BodyTextBlockStyle}"/>

        </StackPanel>

    </Grid>

    private void OnStoryboardGridPressed(object sender, PointerRoutedEventArgs e)

    {

        var panel = ((FrameworkElement)sender);

        var story = (Storyboard)panel.Resources["TiltDownStory"];

        PlayStory(story);

    }

    private void OnStoryboardGridReleased(object sender, PointerRoutedEventArgs e)

    {

        var panel = ((FrameworkElement)sender);

        var story = (Storyboard)panel.Resources["TiltUpStory"];

        PlayStory(story);

    }

    private void PlayStory(Storyboard story)

    {

        // stop just in case it is already playing

        story.Stop();

        story.Begin();

    }

When you tap the element, it will play the story.

Use VisualStates

A final option is to create a new control that will use visual states to play the animations. You will need to create you own control, either a UserControl or a custom control. When the element is pressed or released you will change the visual state of the control. For this example I used a UserControl.

    protected override void OnPointerPressed(PointerRoutedEventArgs e)

    {

        base.OnPointerPressed(e);

        _isPressed = true;

        ChangeState("PointerDown");

    }

    protected override void OnPointerReleased(PointerRoutedEventArgs e)

    {

        base.OnPointerReleased(e);

        _isPressed = false;

        ChangeState("PointerUp");

    }

    private void ChangeState(string state, bool useTransitions = true)

    {

        VisualStateManager.GoToState(this, state, useTransitions);

    }

Define the states in your XAML

    <Grid> 

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="TapStates">

                <VisualState x:Name="Normal" />

                <VisualState x:Name="PointerDown">

                    <Storyboard>

                        <PointerDownThemeAnimation TargetName="RootPanel" />

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="PointerUp">

                    <Storyboard>

                        <PointerUpThemeAnimation TargetName="RootPanel" />

                    </Storyboard>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

        <Grid x:Name="RootPanel">

            <!-- place content here -->

        </Grid>

    </Grid>

So when you have content that needs to show the tilt animation, you have three ways to do this. You can download my complete transition/animation sample to see these three examples.

Hope that helps!

Alternatives to OpacityMask

7. July 2014 Shawn Windows Runtime (0)

In Windows Phone Silverlight apps you had the ability to take a png image and change the color of the image with an OpacityMask. This is a really handy tool to have when you want to show different state to a user or use one image and have it work with different backgrounds. Where is an example:

     <StackPanel Orientation="Horizontal">

        <Image Source="Assets/appbar.book.png" Width="72" Height="72"></Image>

        <Rectangle Fill="Red" Width="72" Height="72" >

            <Rectangle.OpacityMask>

                <ImageBrush ImageSource="Assets/appbar.book.png" Stretch="Fill"/>

            </Rectangle.OpacityMask>

        </Rectangle>

        <Border Background="{StaticResource PhoneForegroundBrush}" Width="72" Height="72" >

            <Rectangle Fill="{StaticResource PhoneBackgroundBrush}" >

                <Rectangle.OpacityMask>

                    <ImageBrush ImageSource="Assets/appbar.book.png" Stretch="Fill"/>

                </Rectangle.OpacityMask>

            </Rectangle>

        </Border>

    </StackPanel>

This will give you the following three images:

This works really well except that it is pretty intensive on your phone to do this so I do not recommend doing a lot of these!

While this works great in Windows Phone Silverlight apps, this functionality does not exist in Windows Runtime (XAML apps for Windows Store and Phone 8.1). So what should you do? You have a few options.

BitmapIcon

If you wish to continue to use the image, you can use a BitmapIcon to display the image and change the color. Set the image with the UriSource property and then set the Foreground to the desired color! Be careful using the BitmapIcon because it will fill up all the space it is given so you’ll want to set the height and width of it, or it’s container explicitly.

    <StackPanel Orientation="Horizontal" Height="72">

        <BitmapIcon UriSource="Assets/appbar.book.png" Margin="12"/>

        <BitmapIcon UriSource="Assets/appbar.book.png" Margin="12"

                Foreground="Red"/>

        <Border Background="{StaticResource PhoneForegroundBrush}">

            <BitmapIcon UriSource="Assets/appbar.book.png" Margin="12"

                Foreground="{StaticResource PhoneBackgroundBrush}"/>

        </Border>

    </StackPanel>

Use an image vector

The first option is to use a vector of the image. Once you have the vector data, you display it in a Path element.

You most likely already have access to the vector of the image. You may have created the image with Photoshop, or you are using one of the awesome icons from the Modern UI Icon pack. The zip from Modern UI Icons contains the XAML needed to create an image, but you can also get it from the website! Using that XAML for the Path I can then recreate the three images above:

    <StackPanel Orientation="Horizontal">

        <Path Width="42" Height="33.7913" Stretch="Fill" Fill="White" 

              Margin="12"

              Data="F1 M 22,46.9996C 26.4235,48.3026 34.4825,48.8053 37.2083,52.2153L 37.2083,32.9996C 34.4826,29.5896 26.4235,29.0869 22,27.7839L 22,46.9996 Z M 22,24.3078L 22,24.028C 26.4235,25.331 34.4825,25.8337 37.2083,29.2437L 38,29.4716L 38.7917,29.2157C 41.5174,25.8057 49.5765,25.303 54,24L 54,24.2798C 55.2286,24.6498 56,24.9716 56,24.9716L 56,27.9716L 59,26.8258L 59,50.9716C 59,50.9716 41.1667,52.2216 38,57.7633L 37.9999,57.7913C 34.8333,52.2496 17,50.9996 17,50.9996L 17,26.8538L 20,27.9996L 20,24.9996C 20,24.9996 20.7714,24.6778 22,24.3078 Z M 23.5,44.506L 23.5,41.3844C 27.269,42.243 32.4604,42.8187 35.5,44.7496L 35.5,47.8712C 32.4604,45.9402 27.269,45.3646 23.5,44.506 Z M 23.5,39.1212L 23.5,35.9996C 27.269,36.8582 32.4604,37.4338 35.5,39.3648L 35.5,42.4864C 32.4604,40.5554 27.269,39.9798 23.5,39.1212 Z M 23.5,33.6344L 23.5,30.5128C 27.269,31.3714 32.4604,31.947 35.5,33.878L 35.5,36.9996C 32.4604,35.0686 27.269,34.493 23.5,33.6344 Z M 54,46.9716L 54,27.7559C 49.5765,29.0589 41.5174,29.5616 38.7917,32.9716L 38.7917,52.1873C 41.5175,48.7773 49.5765,48.2746 54,46.9716 Z M 52.5,44.478C 48.731,45.3366 43.5395,45.9122 40.5,47.8432L 40.5,44.7216C 43.5395,42.7906 48.731,42.215 52.5,41.3564L 52.5,44.478 Z M 52.5,39.0932C 48.731,39.9518 43.5395,40.5274 40.5,42.4584L 40.5,39.3368C 43.5396,37.4058 48.731,36.8302 52.5,35.9716L 52.5,39.0932 Z M 52.5,33.6064C 48.731,34.465 43.5395,35.0406 40.5,36.9716L 40.5,33.85C 43.5395,31.919 48.731,31.3434 52.5,30.4848L 52.5,33.6064 Z "/>

        <Path Width="42" Height="33.7913" Stretch="Fill" Fill="Red" 

              Margin="12"

              Data="F1 M 22,46.9996C 26.4235,48.3026 34.4825,48.8053 37.2083,52.2153L 37.2083,32.9996C 34.4826,29.5896 26.4235,29.0869 22,27.7839L 22,46.9996 Z M 22,24.3078L 22,24.028C 26.4235,25.331 34.4825,25.8337 37.2083,29.2437L 38,29.4716L 38.7917,29.2157C 41.5174,25.8057 49.5765,25.303 54,24L 54,24.2798C 55.2286,24.6498 56,24.9716 56,24.9716L 56,27.9716L 59,26.8258L 59,50.9716C 59,50.9716 41.1667,52.2216 38,57.7633L 37.9999,57.7913C 34.8333,52.2496 17,50.9996 17,50.9996L 17,26.8538L 20,27.9996L 20,24.9996C 20,24.9996 20.7714,24.6778 22,24.3078 Z M 23.5,44.506L 23.5,41.3844C 27.269,42.243 32.4604,42.8187 35.5,44.7496L 35.5,47.8712C 32.4604,45.9402 27.269,45.3646 23.5,44.506 Z M 23.5,39.1212L 23.5,35.9996C 27.269,36.8582 32.4604,37.4338 35.5,39.3648L 35.5,42.4864C 32.4604,40.5554 27.269,39.9798 23.5,39.1212 Z M 23.5,33.6344L 23.5,30.5128C 27.269,31.3714 32.4604,31.947 35.5,33.878L 35.5,36.9996C 32.4604,35.0686 27.269,34.493 23.5,33.6344 Z M 54,46.9716L 54,27.7559C 49.5765,29.0589 41.5174,29.5616 38.7917,32.9716L 38.7917,52.1873C 41.5175,48.7773 49.5765,48.2746 54,46.9716 Z M 52.5,44.478C 48.731,45.3366 43.5395,45.9122 40.5,47.8432L 40.5,44.7216C 43.5395,42.7906 48.731,42.215 52.5,41.3564L 52.5,44.478 Z M 52.5,39.0932C 48.731,39.9518 43.5395,40.5274 40.5,42.4584L 40.5,39.3368C 43.5396,37.4058 48.731,36.8302 52.5,35.9716L 52.5,39.0932 Z M 52.5,33.6064C 48.731,34.465 43.5395,35.0406 40.5,36.9716L 40.5,33.85C 43.5395,31.919 48.731,31.3434 52.5,30.4848L 52.5,33.6064 Z "/>

        <Border Background="{StaticResource PhoneForegroundBrush}" Width="72" Height="72" >

            <Path Width="42" Height="33.7913" Stretch="Fill" Fill="{StaticResource PhoneBackgroundBrush}" 

              Margin="12"

              Data="F1 M 22,46.9996C 26.4235,48.3026 34.4825,48.8053 37.2083,52.2153L 37.2083,32.9996C 34.4826,29.5896 26.4235,29.0869 22,27.7839L 22,46.9996 Z M 22,24.3078L 22,24.028C 26.4235,25.331 34.4825,25.8337 37.2083,29.2437L 38,29.4716L 38.7917,29.2157C 41.5174,25.8057 49.5765,25.303 54,24L 54,24.2798C 55.2286,24.6498 56,24.9716 56,24.9716L 56,27.9716L 59,26.8258L 59,50.9716C 59,50.9716 41.1667,52.2216 38,57.7633L 37.9999,57.7913C 34.8333,52.2496 17,50.9996 17,50.9996L 17,26.8538L 20,27.9996L 20,24.9996C 20,24.9996 20.7714,24.6778 22,24.3078 Z M 23.5,44.506L 23.5,41.3844C 27.269,42.243 32.4604,42.8187 35.5,44.7496L 35.5,47.8712C 32.4604,45.9402 27.269,45.3646 23.5,44.506 Z M 23.5,39.1212L 23.5,35.9996C 27.269,36.8582 32.4604,37.4338 35.5,39.3648L 35.5,42.4864C 32.4604,40.5554 27.269,39.9798 23.5,39.1212 Z M 23.5,33.6344L 23.5,30.5128C 27.269,31.3714 32.4604,31.947 35.5,33.878L 35.5,36.9996C 32.4604,35.0686 27.269,34.493 23.5,33.6344 Z M 54,46.9716L 54,27.7559C 49.5765,29.0589 41.5174,29.5616 38.7917,32.9716L 38.7917,52.1873C 41.5175,48.7773 49.5765,48.2746 54,46.9716 Z M 52.5,44.478C 48.731,45.3366 43.5395,45.9122 40.5,47.8432L 40.5,44.7216C 43.5395,42.7906 48.731,42.215 52.5,41.3564L 52.5,44.478 Z M 52.5,39.0932C 48.731,39.9518 43.5395,40.5274 40.5,42.4584L 40.5,39.3368C 43.5396,37.4058 48.731,36.8302 52.5,35.9716L 52.5,39.0932 Z M 52.5,33.6064C 48.731,34.465 43.5395,35.0406 40.5,36.9716L 40.5,33.85C 43.5395,31.919 48.731,31.3434 52.5,30.4848L 52.5,33.6064 Z "/>

        </Border>

    </StackPanel>

The vector data will scale up or down very nicely as well so you do not have to worry about multiple images!

Fonts

The third option is to use one of the built in symbol fonts like Segoe UI Symbol. This font allows for many options of symbols. It’s best to use a Character Map to see what is available. Because this option uses text elements, it is very easy to scale the icon up or down using the FontSize property!

    <StackPanel Orientation="Horizontal">

        <TextBlock FontFamily="Segoe UI Symbol" Text="&#xE114;" 

                   FontSize="64" Margin="6"/>

        <TextBlock FontFamily="Segoe UI Symbol" Text="&#xE114;" 

                   Foreground="Red" 

                   FontSize="64"  Margin="6"/>

        <Border Background="{StaticResource PhoneForegroundBrush}">

            <TextBlock FontFamily="Segoe UI Symbol" Text="&#xE114;"

                       Foreground="{StaticResource PhoneBackgroundBrush}"

                   FontSize="64" Margin="6"/>

        </Border>

    </StackPanel>

A forth option (which goes along with the third) is to create your own font. You can use Fontastic (thanks to Christopher Maneu for this suggestion) which will take SVG and convert to a font. Another option for creating custom fonts is Type 3.2 (thanks to Matt Duffield for this suggestion). I have not used these options, but I’m sure they work fine!

SymbolIcon

The last option is to use the SymbolIcon. This is a great option if you are using a “standard” icon. The SymbolIcon allows you to set a Symbol with plain, readable text!

    <StackPanel Orientation="Horizontal">

        <SymbolIcon Symbol="Camera" Margin="12"/>

        <SymbolIcon Symbol="Camera" Margin="12" Foreground="Red"/>

        <Border Background="{StaticResource PhoneForegroundBrush}" Height="52">

            <SymbolIcon Symbol="Camera" Margin="12" Foreground="{StaticResource PhoneBackgroundBrush}"/>

        </Border>

    </StackPanel>

The unfortunate part of the SymbolIcon is that you cannot set a size to it. You can however use the ViewBox control to scale the icon without any loss of quality!

    <Viewbox Width="100">

        <SymbolIcon Symbol="Camera" Margin="12"/>

    </Viewbox>

Hope that helps you out on your next project!