Channel 9 - Entries tagged with XAML

Currency Converter v2 – Now on Caffeine!

Pedro Lamas — Mon, 02 May 2011 12:00:00 GMT

Taking user feedback about the application into consideration, it’s time to make some improvements! J

Here are some of the reports we got from the users:

The application is too slow when exchanging currencies
It uses too much data traffic/should cache the exchange rates
It doesn’t work for some currencies
The results are inaccurate/using out-of-date exchange rates

So, what we can see from these comments is that we need a better data source, and that we should use some sort of caching mechanism…

I think I’ll go ahead and put some coffee on to boil!

To Bing or not to Bing…

The first version of Currency Converter used Bing to make the exchanges, which resulted in some of the reports you read above!

For this version, however, we decided to use MSN Money because it has more accurate and up-to-date data, and because it works every time no matter the currency!

MSN Money provides a very nice page on which we can see current currency exchange rates in relation to US Dollars; just open your Internet Explorer 8.0+ and navigate to the following URL:

http://moneycentral.msn.com/investor/market/exchangerates.aspx

As you can see here, we have all the data we need to convert from X to USD and from USD to X, and we can even convert from X to USD to Y.

So, why not just get all of this data on a single request, cache it, and use it offline to make the currency exchanges? J

Like before, we will retrieve the data we require from the page HTML by using Regular Expressions. To do so, open Internet Explorer Developer Tools (press F12), use the “Select element by click” option (Ctrl + B), and click on the “Argentine Peso” text; you’ll get something looking like this:

Using the information above, we can see a pattern in the code:

HTML


    CURRENCY
    VALUE_IN_USD
    VALUE_PER_USD

Now that we know the pattern, we are now able to build this regular expression:

private static Regex _resultRegex = 
    new Regex("(?[^<>]+).*?>(?[0-9.,]+)");

Applying this Regular Expression to the retrieved HTML will allows us to get every row matching it, and retrieve the Currency Name and the “Per USD” Exchange Rate!

Time for some coding

Now that we know how to get all the currency rates from a single URL, it’s time to make the necessary changes to our code to accommodate the new data!

Like the previous article, we will maintain the MVVM pattern, showing the coding from the pattern’s bottom (Model) to the very top (View).

The (Re)Model

Here are the changes we need to make on our model in order to accommodate the retrieved and cached currency rates:

Set each currency to save its exchange rate and last update
Mark the base currency (US Dollar), giving it an exchange rate of 1.0 (trying to convert from USD to USD? Right…)
Add an “Update Exchange Rates” operation to the service

And here is the full Model, with the changes in yellow:

using System;public interface ICurrencyExchangeService
{
    ICurrency[] Currencies { get; }    ICurrency BaseCurrency { get; }    void ExchangeCurrency(double amount, ICurrency fromCurrency, ICurrency toCurrency, Action callback);    void UpdateCachedExchangeRates(Action callback, object state);
}public interface ICurrency
{
    string Name { get; }    double CachedExchangeRate { get; set; }    DateTime CachedExchangeRateUpdatedOn { get; set; }
}public interface ICurrencyExchangeResult
{
    Exception Error { get; }    string ExchangedCurrency { get; }    double ExchangedAmount { get; }
}public interface ICachedExchangeRatesUpdateResult
{
    Exception Error { get; }    object State { get; }
}

The ICurrencyExchangeService now has a new BaseCurrency property that we will set with the “US Dollar” currency instance, as well as an UpdateCachedExchangeRates method to update all the exchange rates.

For the ICurrency, we have two new properties: the CachedExchangeRate to store the currency exchange rate value, and the CachedExchangeRateUpdatedOn for the last update date.

A new interface called ICachedExchangeRatesUpdateResult has been added in order to return any exception thrown by the ICurrencyExchangeService.UpdateCachedExchangeRates method asynchronous execution to the caller.

Now let’s look at the interface’s implementation:

The first new thing to take note of is that we now have a CurrencyBase abstract class. From here, we extend the MsnMoneyCurrency class, adding a single Id property to store the numeric Id for the Currency found in MSN Money.

Next is the MsnMoneyV2CurrencyExchangeService, a direct implementation of the ICurrencyExchangeService.

Unlike BingCurrencyExchangeService from the previous version, notice that MsnMoneyV2CurrencyExchangeService does not extend the CurrencyExchangeServiceBase, and that it only requests online data in the UpdateCachedExchangeRates method and not on every ExchangeCurrency method call.

Here is the code for these classes:

public class MsnMoneyV2CurrencyExchangeService : ICurrencyExchangeService
{
    private const string MsnMoneyUrl = "http://moneycentral.msn.com/investor/market/exchangerates.aspx?selRegion=1&selCurrency=1";    #region Static Globals    private static Regex _resultRegex = new Regex(@"(?[^<>]+).*?>(?[0-9.,]+)");    private static ICurrency[] _currencies = new ICurrency[] { 
        //The currencies exposed by MSN Money will go here
    };    #endregion    #region Properties    public ICurrency[] Currencies
    {
        get
        {
            return _currencies;
        }
    }    public ICurrency BaseCurrency { get; protected set; }    #endregion    public MsnMoneyV2CurrencyExchangeService()
    {
        BaseCurrency = Currencies.First(x => x.Name == "US Dollar");
    }    public void ExchangeCurrency(double amount, ICurrency fromCurrency, ICurrency toCurrency, bool useCachedExchangeRates, Action callback, object state)
    {
        if (useCachedExchangeRates)
        {
            try
            {
                ExchangeCurrency(amount, fromCurrency, toCurrency, callback, state);                return;
            }
            catch
            {
            }
        }        UpdateCachedExchangeRates(result =>
        {
            if (result.Error != null)
            {
                callback(new CurrencyExchangeResult(result.Error, state));                return;
            }            try
            {
                ExchangeCurrency(amount, fromCurrency, toCurrency, callback, state);
            }
            catch (Exception ex)
            {
                callback(new CurrencyExchangeResult(ex, state));
            }
        }, state);
    }    private void ExchangeCurrency(double amount, ICurrency fromCurrency, ICurrency toCurrency, Action callback, object state)
    {
        var fromExchangeRate = fromCurrency.CachedExchangeRate;
        var toExchangeRate = toCurrency.CachedExchangeRate;
        var timestamp = DateTime.Now;        if (fromCurrency == BaseCurrency)
            fromExchangeRate = 1.0;
        else
        {
            if (timestamp > fromCurrency.CachedExchangeRateUpdatedOn)
                timestamp = fromCurrency.CachedExchangeRateUpdatedOn;
        }        if (toCurrency == BaseCurrency)
            toExchangeRate = 1.0;
        else
        {
            if (timestamp > toCurrency.CachedExchangeRateUpdatedOn)
                timestamp = toCurrency.CachedExchangeRateUpdatedOn;
        }        if (fromExchangeRate > 0 && toExchangeRate > 0)
        {
            var exchangedAmount = amount / fromExchangeRate * toExchangeRate;            callback(new CurrencyExchangeResult(toCurrency, exchangedAmount, timestamp, state));
        }
        else
            throw new Exception("Conversion not returned!");
    }    public void UpdateCachedExchangeRates(Action callback, object state)
    {
        var request = HttpWebRequest.Create(MsnMoneyUrl);        request.BeginGetResponse(ar =>
        {
            try
            {
                var response = (HttpWebResponse)request.EndGetResponse(ar);                if (response.StatusCode == HttpStatusCode.OK)
                {
                    string responseContent;                    using (var streamReader = new StreamReader(response.GetResponseStream()))
                    {
                        responseContent = streamReader.ReadToEnd();
                    }                    foreach (var match in _resultRegex.Matches(responseContent).Cast())
                    {
                        var currencyName = match.Groups["currency"].Value.Trim();                        var currency = Currencies.FirstOrDefault(x => string.Compare(x.Name, currencyName, StringComparison.InvariantCultureIgnoreCase) == 0);                        if (currency != null)
                        {
                            currency.CachedExchangeRate = double.Parse(match.Groups["value"].Value, CultureInfo.InvariantCulture);
                            currency.CachedExchangeRateUpdatedOn = DateTime.Now;
                        }
                    }                    callback(new CachedExchangeRatesUpdateResult(ar.AsyncState));
                }
                else
                {
                    throw new Exception(string.Format("Http Error: ({0}) {1}",
                        response.StatusCode,
                        response.StatusDescription));
                }
            }
            catch (Exception ex)
            {
                callback(new CachedExchangeRatesUpdateResult(ex, ar.AsyncState));
            }
        }, state);
    }
}

Here’s how it works: when the ExchangeCurrency method is called, we pass a parameter (useCachedExchangeRates) that instructs the method to use (or not!) the previously cached exchange rates.

Next, make the exchange operation and return the results. If the operation throws an exception, or if we didn’t allow for cached exchange rates usage, call the UpdateCachedExchangeRates to update the exchange rates and then run the exchange operation with the new data.

And that’s about it for the Model!

The ViewModel

We maintained the full ViewModel from the previous version, but added some new functionality to it. Here’s the coding (main changes are in yellow):

public class MainViewModel : INotifyPropertyChanged
{
    //Full previous code    #region Properties    [IgnoreDataMember]
    public ICurrencyExchangeResult Result
    {
        get
        {
            return _result;
        }
        protected set
        {
            if (_result == value)
                return;            _result = value;            RaisePropertyChanged("Result");
            RaisePropertyChanged("ExchangedCurrency");
            RaisePropertyChanged("ExchangedAmount");
            RaisePropertyChanged("ExchangedTimeStamp");
        }
    }    [IgnoreDataMember]
    public string ExchangedTimeStamp
    {
        get
        {
            if (_result == null)
                return string.Empty;            return string.Format("Data freshness:\n{0} at {1}",
                _result.Timestamp.ToShortDateString(),
                _result.Timestamp.ToShortTimeString());
        }
    }    [DataMember]
    public CurrencyCachedExchangeRate[] CurrenciesCachedExchangeRates
    {
        get
        {
            return Currencies
                .Select(x => new CurrencyCachedExchangeRate()
                {
                    CurrencyIndex = Array.IndexOf(Currencies, x),
                    CachedExchangeRate = x.CachedExchangeRate,
                    CachedExchangeRateUpdatedOn = x.CachedExchangeRateUpdatedOn
                })
                .ToArray();
        }
        set
        {
            foreach (var currencyData in value)
            {
                if (currencyData.CurrencyIndex >= Currencies.Length)
                    continue;                var currency = Currencies[currencyData.CurrencyIndex];                currency.CachedExchangeRate = currencyData.CachedExchangeRate;
                currency.CachedExchangeRateUpdatedOn = currencyData.CachedExchangeRateUpdatedOn;
            }
        }
    }    #endregion    //Full previous code    public void ExchangeCurrency()
    {
        if (Busy)
            return;        BusyMessage = "Exchanging amount...";        _currencyExchangeService.ExchangeCurrency(_amount, _fromCurrency, _toCurrency, true, CurrencyExchanged, null);
    }    public void UpdateCachedExchangeRates()
    {
        if (Busy)
            return;        BusyMessage = "Updating cached exchange rates...";        _currencyExchangeService.UpdateCachedExchangeRates(ExchangeRatesUpdated, null);
    }    private void CurrencyExchanged(ICurrencyExchangeResult result)
    {
        InvokeOnUiThread(() =>
        {
            Result = result;            BusyMessage = null;            if (result.Error != null)
            {
                if (System.Diagnostics.Debugger.IsAttached)
                    System.Diagnostics.Debugger.Break();
                else
                    MessageBox.Show("An error has ocorred!", "Error", MessageBoxButton.OK);
            }
        });
    }    private void ExchangeRatesUpdated(ICachedExchangeRatesUpdateResult result)
    {
        InvokeOnUiThread(() =>
        {
            BusyMessage = null;            Save();            if (result.Error != null)
            {
                if (System.Diagnostics.Debugger.IsAttached)
                    System.Diagnostics.Debugger.Break();
                else
                    MessageBox.Show("An error has ocorred!", "Error", MessageBoxButton.OK);
            }
        });
    }    private void InvokeOnUiThread(Action action)
    {
        var dispatcher = System.Windows.Deployment.Current.Dispatcher;        if (dispatcher.CheckAccess())
            action();
        else
            dispatcher.BeginInvoke(action);
    }    #region Auxiliary Classes    public class CurrencyCachedExchangeRate
    {
        [DataMember]
        public int CurrencyIndex { get; set; }        [DataMember]
        public double CachedExchangeRate { get; set; }        [DataMember]
        public DateTime CachedExchangeRateUpdatedOn { get; set; }
    }    #endregion
}

The first thing you will notice here is a new ExchangedTimeStamp read-only property that feeds the interface with the date string to denote when the used currency data was obtained. The interface is notified that this property value has changed when the Result property value is also changed.

Further down there’s another new property, CurrenciesCachedExchangeRates, that stores the cached exchange rates. For this to work, we have an auxiliary class called CurrencyCachedExchangeRate that stores the currency index along with the exchange rate as well as the update timestamp.

The UpdateCachedExchangeRates method allows users to manually force an update over the cached exchange rates.

The CurrencyExchanged and ExchangeRatesUpdated callbacks use the InvokeOnUiThread method to make sure that their codes run properly on the UI thread.

The View

Two simple changes have been made in the MainPage.xaml (our main View): an area on the screen has been added to show the exchange operation result timestamp, and a menu option has been added to force a full exchange rate update.

To make the first change, add a simple TextArea on the bottom StackPanel and bind it to the ExchangedTimeStamp property of the ViewModel:

XAML


    Amount
    
    From
    
    To

As for the “update exchange rates” menu option, add a new ApplicationBarMenuItem to the MenuItems collection, set the appropriate text, and add a handler for the click event:

XAML

Now, all that is missing is implementing the UpdateExchangeRatesMenuItem_To do so, click the event handler in the MainPage.xaml.cs:

private void UpdateExchangeRatesMenuItem_Click(object sender, EventArgs e)
{
    var viewModel = DataContext as MainViewModel;    if (viewModel == null)
        return;    Dispatcher.BeginInvoke(() =>
    {
        viewModel.UpdateCachedExchangeRates();
    });
}

Conclusion

The bottom line is that your application is as good as the data source you use. By utilizing a new (better) data source, some really simple changes to the code, we now have the Currency Converter—faster than ever!

And just in time: the coffee is ready!

About The Author

Pedro Lamas is a Portuguese .Net Senior Developer on Microsoft’s Partner DevScope, where he works with all the cool stuff that Microsoft .Net has to offer its developers!

He’s also one of the administrators of PocketPT.net, the largest Windows Phone Portuguese community, where his contribution is mostly visible on support for Windows Phone developers, and as a speaker for Windows Phone Development in Microsoft Portugal Events.

You can read his blog or contact him via twitter!

Simple Dependency Injection with XAML

Jeff Brand — Tue, 18 Jan 2011 21:25:39 GMT

Have you ever wanted the flexibility of dependency injection without having to implement a full-blown IoC solution? Maybe you just want an easy way to pass concrete services to your ViewModel? This short video will show you you can use XAML to configure your ViewModels to provide a property-based dependency injection solution. You can also read a full write up and download demo code on my blog.

Currency Converter for Windows Phone 7

Pedro Lamas — Tue, 30 Nov 2010 23:51:54 GMT

The purpose of this article is to show how you can make your very own, very simple Currency Converter application for Windows Phone 7, using Bing to make all the hard exchanging work!

Introduction

Microsoft has done an absolutely amazing job with the Windows Phone 7, giving each and every one of us all of the necessary tools to make our applications blend nicely on it; and the best part—the tools are, and will always be, free!!! J

Using Bing for the currency exchange

First let's look at what happens when I open up Bing on my browser, and enter a search query like “1 US Dollar in Euros”:

As you can see, Bing correctly understood my query, and knew that I was looking for an exchange rate. Then MSN Money made the exchange and presented the result.

Also, notice that the address displays as:

http://www.bing.com/search?q=1+US+Dollar+in+Euros&go=&form=QBRE&qs=n&sk=&sc=1-20

OK, but how can we use this to feed the WP7 application? Call the Internet Explorer Developer Tools (just press F12 on your IE8+) and use the “Select element by click” option (Ctrl + B) to select the result on the page and see its HTML code. The result will look just like this:

Now we know how to build the Bing currency exchange search query (using “http://www.bing.com/search?q={VALUE}+{SOURCE_CURRENCY}+in+{DESTINATION_CURRENCY}&go=&form=QBRE&qs=n&sk=&sc=1-20”) and also how to find the results on the returned HTML (search the “RESULT”).

The final task is selecting that span tag on the full HTML and then extracting the converted amount; for this task, I'll be using the following Regular Expression (using System.Text.RegularExpressions):

static Regex _resultRegex =   new Regex(".*? = (?[0-9.,]+).*?");

This expression searches the HTML code for a span with class “sc_bigLine” and inner content matching something like the above example: “1 USD = 0.71270 EUR”.

The expression also allows me to extract the number after the “=” sign by using Groups[“value"].value property.

MVVM is our friend!

I'll start by quoting the Wikipedia:

The Model View ViewModel (MVVM) is an architectural pattern used in software engineering (…) is targeted at modern UI development platforms (Windows Presentation Foundation and Silverlight) in which there is a User Experience (UX) developer who has different requirements than a more “traditional” developer (i.e. oriented toward business logic and back end development).

Basically, the point is to clearly separate the user interface from all the business logic and data that our application will use!

We can summarize the MVVM pattern with this schema:

The View is the basic XAML for the user interface (although sometimes it can have a C# file attached to it) that will use Data Binding to read and change properties on the ViewModel, and Actions to invoke the methods.

The ViewModel is the abstraction of the View and will do all the work for binding the View to the Model, with the necessary data conversion.

The Model can represent the actual object model instance in a known state, or just a data access layer.

There is one basic rule in MVVM: don't look up! The Model has no knowledge of either the ViewModel or the View, and the ViewModel has no knowledge of the View.

This brings a new challenge on how to make the three components talk between themselves, and that's where notifications come along!

We use notifications to communicate changes from a lower component to an upper one; when the upper component gets notified, it will then query the lower for what changed and act accordingly to the new state!

You can read more about MVVM throughout the internet, but there is an article by Shawn Wildermuth that's one of the best I've seen; you can read it here: http://msdn.microsoft.com/enus/magazine/dd458800.aspx.

The Model

We will start at the very bottom (a.k.a. the Model), and as such I've created the following Interfaces to support our Data Model:

using System; public interface ICurrencyExchangeService{    ICurrency[] Currencies { get; }    void ExchangeCurrency(        double amount,         ICurrency fromCurrency,         ICurrency toCurrency,         Action callback);} public interface ICurrency{    string Name { get; }} public interface ICurrencyExchangeResult{    Exception Error { get; }    string ExchangedCurrency { get; }    double ExchangedAmount { get; }}

From these three interfaces, we will extend our Bing Currency Exchange provider:

The abstract CurrencyExchangeServiceBase class implements the ICurrencyExchangeService.ExchangeCurrency method to do all the asynchronous work required to request data from a webserver and retrieve the resulting HTML; to achieve its goal, the CurrencyExchangeServiceBase has two abstract methods that must be implemented: CreateRequestUrl, to get the request url that will be passed to the WebRequest, and GetResultFromResponseContent, to parse the received HTML and return the exchanged value.

We then extend the BingCurrencyExchangeService from CurrencyExchangeServiceBase, implementing the CreateRequestUrl and GetResultFromResponseContent required methods and the ICurrencyExchangeService.Currencies property including all currencies supported by this service instance.

We have also a basic ICurrency interface implementation class called BingCurrency.

This is the CurrencyExchangeServiceBase abstract class implementation:

public abstract class CurrencyExchangeServiceBase : ICurrencyExchangeService{   public abstract ICurrency[] Currencies { get; }   protected abstract string CreateRequestUrl(        double amount,         ICurrency fromCurrency,         ICurrency toCurrency);   protected abstract double         GetResultFromResponseContent(string responseContent);   public void ExchangeCurrency(        double amount,         ICurrency fromCurrency,         ICurrency toCurrency,         Action callback)   {      var url = CreateRequestUrl(amount, fromCurrency, toCurrency);      var request = HttpWebRequest.Create(url);      request.BeginGetResponse(ar =>       {         try         {            var response = (HttpWebResponse)request.EndGetResponse(ar);            if (response.StatusCode == HttpStatusCode.OK)            {               string responseContent;               using (var streamReader =                   new StreamReader(response.GetResponseStream()))               {                  responseContent = streamReader.ReadToEnd();               }               var exchangedCurrency =                   GetResultFromResponseContent(responseContent);               callback(                  new CurrencyExchangeResult(                     toCurrency.Name,                      exchangedCurrency));            }            else            {               throw new Exception(                string.Format("Http Error: ({0}) {1}",                  response.StatusCode,                  response.StatusDescription));            }         }         catch (Exception ex)         {            callback(new CurrencyExchangeResult(ex));         }      }, null);   }}

As I said before, this is an abstract class that requires any inheritor to implement the Currencies property as well as the CreateRequestUrl and GetResultFromResponseContent functions—and that's exactly what the BingCurrencyExchangeService class does:

public class BingCurrencyExchangeService : CurrencyExchangeServiceBase{   private static Regex _resultRegex =       new Regex(".*? = (?[0-9.,]+).*?");   private static ICurrency[] _currencies = new ICurrency[] {       new BingCurrency("Euro"),      new BingCurrency("US Dollar")      //all available currencies will go here!   };   #endregion   public override ICurrency[] Currencies   {      get      {         return _currencies;      }   }   protected override string CreateRequestUrl(double amount, ICurrency fromCurrency, ICurrency toCurrency)   {      return string.Format(         @"http://www.bing.com/search?q={0}+{1}+in+{2}&scope=web&mkt=en-US&FORM=W0LH",         amount,         fromCurrency.Name.Replace(" ", "+"),         toCurrency.Name.Replace(" ", "+"));   }   protected override double GetResultFromResponseContent(string responseContent)   {      var match = _resultRegex.Match(responseContent);      if (match.Success)         return double.Parse(            match.Groups["value"].Value,             CultureInfo.InvariantCulture);      else         throw new Exception("Conversion not returned!");   }}

As you can see here, the BingCurrencyExchangeService class knows how to build the Bing search url if given the currencies and the value of exchange, and also how to get the converted value out of the response HTML code (notice the usage of our regular expression).

The ViewModel

The ViewModel has a basic inheritance requirement: using INotifyPropertyChanged to notify the user interface of property value changes.

Our MainViewModel class will have to expose three base data properties for the user interface controls: FromCurrency, ToCurrency, and Amount.

All assembled, this is how the ViewModel looks:

public class MainViewModel : INotifyPropertyChanged{   private ICurrencyExchangeService _currencyExchangeService;   private double _amount;   private ICurrency _fromCurrency;   private ICurrency _toCurrency;   public ICurrencyExchangeService CurrencyExchangeService   {      get      {         return _currencyExchangeService;      }      set      {         if (_currencyExchangeService == value)            return;         _currencyExchangeService = value;         _fromCurrency = Currencies.FirstOrDefault(x => x.Name == "US Dollar") ?? Currencies[0];         _toCurrency = Currencies.FirstOrDefault(x => x.Name == "Euro") ?? Currencies[1];         RaisePropertyChanged("CurrencyExchangeService");         RaisePropertyChanged("Currencies");      }   }   public ICurrency[] Currencies   {      get      {         return _currencyExchangeService.Currencies;      }   }   public string Amount   {      get      {         return _amount.ToString("0.00");      }      set      {         double amount;         if (double.TryParse(value, out amount))         {            if (_amount == amount)               return;            _amount = amount;            RaisePropertyChanged("Amount");         }         else            throw new Exception("Please enter a valid Amount");      }   }   public ICurrency FromCurrency   {      get      {         return _fromCurrency;      }      set      {         if (_fromCurrency == value)            return;         _fromCurrency = value;         RaisePropertyChanged("FromCurrency");      }   }   public ICurrency ToCurrency   {      get      {         return _toCurrency;      }      set      {         if (_toCurrency == value)            return;         _toCurrency = value;         RaisePropertyChanged("ToCurrency");      }   }   public MainViewModel()   {      CurrencyExchangeService = new BingCurrencyExchangeService();      Amount = "100";   }   public event PropertyChangedEventHandler PropertyChanged;   private void RaisePropertyChanged(string propertyName)   {      if (PropertyChanged != null)         PropertyChanged(this, new PropertyChangedEventArgs(propertyName));   }}

In order to allow the user to change the FromCurrency and ToCurrency properties, we need to list the available ones; as such, we added a Currencies property to return the ICurrency[] Currencies property of the Model instance.

On the MainViewModel constructor, set the CurrencyExchangeService property to a new BingCurrencyExchangeService instance, making it retrieve “Euro” and “US Dollar” (if available; if not, get the 1^st and 2^nd one instead) as the two default exchange currencies, and then set the Amount property to an initial value of “100.”

The PropertyChanged event is a basic implementation of the INotifyPropertyChanged interface, with a helper method called RaisePropertyChanged used to invoke the event.

Now we need to add functionality to request a currency exchange operation and show the results on the user interface:

public class MainViewModel : INotifyPropertyChanged{    //remaining code...    private ICurrencyExchangeResult _result;    public ICurrencyExchangeResult Result    {        get        {            return _result;        }        protected set        {            if (_result == value)                return;            _result = value;            RaisePropertyChanged("Result");            RaisePropertyChanged("ExchangedCurrency");            RaisePropertyChanged("ExchangedAmount");        }    }    public string ExchangedCurrency    {        get        {            if (_result == null)                return string.Empty;            return _result.ExchangedCurrency;        }    }    public string ExchangedAmount    {        get        {            if (_result == null)                return string.Empty;            return _result.ExchangedAmount.ToString("N2");        }    }    public void ExchangeCurrency()    {        _currencyExchangeService.ExchangeCurrency(_amount, _fromCurrency, _toCurrency, CurrencyExchanged);    }    private void CurrencyExchanged(ICurrencyExchangeResult result)    {        System.Windows.Deployment.Current.Dispatcher.BeginInvoke(() =>        {            Result = result;        });    }}

The ExchangeCurrency method will be used to request a currency exchange operation on the Model instance, including the entered data. When the operation ends, the CurrencyExchanged method will be invoked and we will then get an ICurrencyExchangeResult instance with the results; this method will be asynchronously called on another thread, so we will need get the current Dispatcher and use it to invoke the changes to the MainViewModel.Result property (so that they are made on the interface thread).

As the Result property gets changed, it will also make property changed notifications to the ExchangedCurrency and ExchangedAmount properties, allowing the user interface to show the returned values.

The View

The View that will support our application is really quite simple!

The basic requirements are two ListPicker controls (these are implemented on the Silverlight Toolkit): one for each Currency (the MainViewModel FromCurrency and ToCurrency properties) and a TextBox for the Amount.

We also need two more TextAreas to show the currency exchange results (one for the ExchangedCurrency property and the other for the ExchangedAmount property, both from our MainViewModel).

Using the current MainPage.xaml, start by adding a reference to the Silverlight for Windows Phone Toolkit, like so:

XAML

<phone:PhoneApplicationPagexmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"&lt;!--remaining code... -->

Then, I'll change the default ContentPanel control from a Grid to a StackPanel, and add the required controls to edit the Currencies and the entry Value:

XAML

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0">   <TextBlock       Margin="12,0,0,-5"       Style="{StaticResource PhoneTextSubtleStyle}">      Amount   TextBlock>   <TextBox       InputScope="TelephoneNumber"       Text="{Binding Amount, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True}" />   <TextBlock       Margin="12,10,0,-5"       Style="{StaticResource PhoneTextSubtleStyle}">         From   TextBlock>   <toolkit:ListPicker       ItemsSource="{Binding Currencies}"       SelectedItem="{Binding FromCurrency, Mode=TwoWay}"       FullModeHeader="FROM CURRENCY"       Style="{StaticResource CurrencyListPicker}" />   <TextBlock       Margin="12,10,0,-5"       Style="{StaticResource PhoneTextSubtleStyle}">      To   TextBlock>   <toolkit:ListPicker       ItemsSource="{Binding Currencies}"       SelectedItem="{Binding ToCurrency, Mode=TwoWay}"       FullModeHeader="TO CURRENCY"       Style="{StaticResource CurrencyListPicker}" />   <StackPanel>      <TextBlock          Style="{StaticResource PhoneTextGroupHeaderStyle}"          Text="{Binding ExchangedCurrency}" />      <TextBlock          Margin="25, 0, 0, 0"          Style="{StaticResource PhoneTextTitle1Style}"          Text="{Binding ExchangedAmount}" />   StackPanel>StackPanel>

Here's how it looks right now:

Notice the CurrencyListPicker style applied to the two ListPicker controls on the code above? Here it is:

XAML

This style sets the initial values of three properties on the ListPickers: the DisplayMemberPath (it will be binded to the ICurrency.Name property), the CacheMode (for optimization only), and, most importantly, the FullModeItemTemplate, which indicates how to show each item when the ListPicker window pops up.

The next step will be adding the “Exchange” button to the bottom ApplicationBar, like so:

XAML

<phone:PhoneApplicationPage.ApplicationBar>   <shell:ApplicationBar       IsVisible="True"       IsMenuEnabled="False">      <shell:ApplicationBarIconButton          IconUri="/Images/appbar.money.usd.png"          Text="Exchange"          Click="ExchangeIconButton_Click" />   shell:ApplicationBar>phone:PhoneApplicationPage.ApplicationBar>

Remember to create an Images folder in your project and copy the required “appbar.money.usd.png” image to it (you can find this and other ApplicationBar icons in your “%ProgramFiles%\Microsoft SDKs\Windows Phone\v7.0\Icons\dark”); then, set its “Build” and “Copy to Output Directory” properties to “Content” and “Copy always”, respectively.

On the MainPage.xaml.cs, we'll add the ExchangeIconButton_Click() method:

private void ExchangeIconButton_Click(object sender, EventArgs e){   var viewModel = DataContext as MainViewModel;   if (viewModel == null)      return;   Focus();   Dispatcher.BeginInvoke(() =>   {      if (!NetworkInterface.GetIsNetworkAvailable())      {         MessageBox.Show(            "No network connection found!",             "Error",             MessageBoxButton.OK);         return;      }      viewModel.ExchangeCurrency();   });}

This method will check for a valid MainViewModel set on the DataContext, remove the Focus from any TextBox (thus hiding the on-screen keyboard), check if there is a valid network connection, and then call the MainViewModel.ExchangeCurrency() method.

Tombstoning

The final piece to developing this into the perfect Windows Phone 7 application is making it “Tombstoning” aware!

Since WP7 doesn't allow multitasking, every time an application is deactivated or closed you should save its state and then restore it when the application is reactivated or reopened; this process is called “Tombstoning.”

To do this, we use the System.Runtime.Serialization classes, namely, the DataMemberAttribute to mark all the properties of the MainViewModel we want to save (FromCurrency, ToCurrency, and Amount), and the IgnoreDataMemberAttribute to mark the ones we don't (CurrencyExchangeService, Currencies, Result, ExchangedCurrency, and ExchangedAmount).

We can't (or at least, shouldn't!) directly save the state of the FromCurrency and ToCurrency properties because they have complex values (rather than a base type like Int or String), so we mark these with the IgnoreDataMemberAttribute and add two new properties, one for each, that will get/set the relative index of the Currencies array:

[DataMember] public int FromCurrencyIndex{    get    {        return Array.IndexOf(Currencies, FromCurrency);    }    set    {        FromCurrency = Currencies[value];    }}[DataMember] public int ToCurrencyIndex{    get    {        return Array.IndexOf(Currencies, ToCurrency);    }    set    {        ToCurrency = Currencies[value];    }}

Now add the methods to Load and Save the state of the MainViewModel instance; since the Save method has to be called on the App.xaml.cs Application_Deactivated() and Application_Closing() events, the best way is to make our View Model a singleton. To do this, add the following code to the MainViewModel class:

[IgnoreDataMember] private const string SettingFileName = "mainviewmodel.dat"; public static MainViewModel Instance { get; protected set; } static MainViewModel(){    Instance = Load();} public static MainViewModel Load(){    return StorageHelper.LoadContract(SettingFileName, true);} public void Save(){    StorageHelper.SaveContract(SettingFileName, this, true);}

The StorageHelper class you see here is just a helper used to serialize and deserialize a file on the application's IsolatedStorage.

Now all we have to do is change the MainPage.xaml.cs constructor so it uses the singleton instead of creating a new MainViewModel instance:

public MainPage(){    InitializeComponent();    this.DataContext = MainViewModel.Instance;}

Finally, invoke the Save method on the two required events of the App.xaml.cs file:

private void Application_Deactivated(object sender, DeactivatedEventArgs e){    MainViewModel.Instance.Save();} private void Application_Closing(object sender, ClosingEventArgs e){    MainViewModel.Instance.Save();}

And that is it! To test the application, open it, press the windows key so that the Windows Phone main screen appears, wait a couple of seconds, and press the back key to return to the application: you will see a “resuming” message appear when the application state restores!

The application can now be Tombstoned anytime, and when it gets opened again, it will appear as if it never closed!

Conclusion

As you see here, you can build simple applications for Windows Phone 7 by using basic MVVM architecture, and still have time to go out and have a coffee with your friends!

Remember: If you want to try this out, the download link for the source code is at the top of the article!

The sample code uses the BingCurrencyExchangeService, but it also has a second provider for MSN Money, the MsnMoneyCurrencyExchangeService, which you can check out!

About The Author

Pedro Lamas is a Portuguese .Net Senior Developer on Microsoft's Partner DevScope, where he works with all the cool stuff that Microsoft .Net has to offer its developers!

He's also one of the administrators of PocketPT.net, the largest Windows Phone Portuguese community, where his contribution is mostly visible on support for Windows Phone developers, and as a speaker for Windows Phone Development in Microsoft Portugal Events.

You can read his blog or contact him via twitter!

PicFx – Windows Phone Picture Effects Application – Part 2

Rene Schulte — Tue, 19 Oct 2010 13:00:00 GMT

The first part of this short series showed how to create the base Windows Phone application and how to implement a Black & White and Sepia effect. The basic Windows Phone picture manipulation workflow was explained, and I showed how to load, resize, take, and save an image. The User Interface with the Pivot control template was introduced and some important Windows Phone development key points were also discussed. We also learned how to implement the Black & White and the Sepia effect with the reusable Tint and Contrast & Brightness modification effects.

In this second, final part of the series, we will learn how to make the application more responsive by offloading the image processing computation to a background thread. Furthermore, how to implement a nice vintage Polaroid-like and a miniature faking (tilt shift) effect will be demonstrated, along with how to brand the finished image with a custom logo.

The App in Action

The video below introduces the complete PicFx application features and demonstrates how to use them. It was recorded with the application running in the emulator.

from Vimeo.

Background music is “A Silent Goodbye” by NCThompson

How it works

In the last article, we drilled down from the UI Crust with the Pivot control template and the Windows Phone Application Bar through the UI Mantle with the UI functionality until we finally reached the Effects Core with the image processing algorithms.

The User Interface

As in the first part, we again start our journey on the surface of the application.

Some things have changed on the surface of the app—it still uses the Windows Phone Application Bar, but the open source Pivot control implementation from CodePlex was replaced by the official control from Microsoft. The WrapPanel from the official Silverlight for Windows Phone Toolkit is now also used. As you can see in Figure 1, thumbnails of the two new effects are shown on the second Pivot page.

Figure 1: The Pivot layout of the extented PicFx application

The current MainPage.xaml:

XAML

An Indeterminate ProgressBar was added to the first Pivot item overlaying the Image, which shows the selected picture. The ProgressBar is hidden by default and only made visible when the picture with the full resolution is processed and saved.

The ListBox with the thumbnails of the effects (see Figure 1) is still data-bound to the StaticResource “effects,” an instance of the EffectItems class that consists of EffectItem elements:

public class EffectItems : ObservableCollection
{
   public EffectItems()
   {
      Add(
            new EffectItem(new BlackWhiteEffect(), 
               "data/icons/BlackWhite.png"));
      Add(
         new EffectItem(new SepiaEffect(), 
            "data/icons/Sepia.png"));
      Add(
         new EffectItem(new TiltShiftEffect(), 
            "data/icons/TiltShift.png"));
      Add(
         new EffectItem(new PolaroidEffect(), 
            "data/icons/PolaYellow.png", "Pola"));
   }
}

The two new EffectItems are added and the vintage Polaroid-like effect gets a custom display name—“Pola”—to avoid a mix-up with the original Polaroid brand.

I also added Clint Rutkas' Coding4Fun About control as an Application Bar menu item. This control is a typical about page which provides some information about the app and Coding4Fun.

XAML

The Code Behind

The first part introduced the Windows Phone picture manipulation workflow and explained how to load, resize, take, and save an image. This section will show how to keep the UI responsive by performing the image processing asynchronously.

The two new effects introduced in this article are more computationally expensive. If these would be applied to the original sized picture, the UI thread would get blocked for a few seconds. This is a No Go for a professional application and in order to pass the Marketplace validation, an app has to be responsive and needs to avoid hang-ups. This and other important requirements are defined in the official Windows Phone 7 Application Certification Requirements document.

Asynchronous Processing

To achieve a good responsiveness of the application, the work has to be offloaded from the UI thread to a background thread. Here is where Silverlight's multi-threading strength comes into play.

There is only one problem—due to its base classes, the WriteableBitmap can't be used in a non-UI thread. As we know from the first article, the WriteableBitmap uses the RGB color space to represent the pixels. It's actually just a 32-bit integer array that stores the alpha, red, green, and blue (ARGB) byte components for all the pixels in a 1D array, and stores the width and the height as integer properties. This leads us to the natural solution: perform the whole cascade of image processing effects with an integer array (pixels) along with the width and height and only copy the final result back to WriteableBitmap on the UI thread.

No sooner said than done, the following code is executed when the user hits the Save button:

if (ListBoxEffects.SelectedItem == null)
{
   return;
}// Set Save.. state and get UI parameters
Viewport.Opacity = 0.2;
ProgessBar.Visibility = Visibility.Visible;
var effect = ((EffectItem)ListBoxEffects.SelectedItem).Effect;
var dispatcher = Dispatcher;ThreadPool.QueueUserWorkItem((state) =>
{
   try
   {
      // Apply Effect on int[] since WriteableBitmap 
      // can't be used in background thread
      var width = original.PixelWidth;
      var height = original.PixelHeight;
      var resultPixels = effect.Process(original.Pixels, width, height);      // Convert int[] to WriteabelBitmap
      // WriteableBitmap ctor has to be invoked on the UI thread
      dispatcher.BeginInvoke(() =>
      {
         // Turbo copy the pixels to the WriteableBitmap
         var result = new WriteableBitmap(width, height);
         Buffer.BlockCopy(resultPixels, 
        0, 
        result.Pixels, 
        0, 
        resultPixels.Length * 4);
         
         // Save WriteableBitmap
         var name = String.Format(
        "PicFx_{0:yyyy-MM-dd_hh-mm-ss-tt}.jpg", 
        DateTime.Now);
         result.SaveToMediaLibrary(name);
      });
   }
   finally
   {
      // Set controls to initial state
      dispatcher.BeginInvoke(() =>
      {
         ProgessBar.Visibility = Visibility.Collapsed;
         Viewport.Opacity = 1;
      });
   }
});

The ProgressBar is shown during the asynchronous processing and the Opacity of the Image control is reduced (Figure 2). The actual image processing with the selected effect is performed on a background thread. Using the ThreadPool class and its QueueUserWorkItem method accomplishes this. The ThreadPool provides a pool of threads and the QueueUserWorkItem is used to queue a work operation for processing. The main benefit is that resources aren't unnecessarily hogged—the creation of a thread takes some time and each thread needs certain resources such as its own memory stack. Also note that, for common computational scenarios, it's best to keep a balance between threads and processor cores. A thread pool avoids the creation overhead through a certain amount of threads that are kept alive and all the queued work is executed one after another by these threads.

The IEffect's new Process method overload with the pixels integer array and size parameters is used inside the background thread processing. Read more about the IEffect interface change below.

After the effects processing chain is done, a new WriteableBitmap is then instantiated on the UI thread with the use of the Page's Dispatcher, which executes code on the UI thread. Then the integer pixels array is copied to the WriteableBitmap's Pixels property with the fast BlockCopy. The BlockCopy method copies a block of bytes in one single operation in memory, just like the good ol' memcpy.

The final bitmap is then saved to the picture library/photo album with the SaveToMediaLibrary extension method that was introduced in the first part. Finally, the ProgessBar is again hidden and the Image's opacity is restored.

Figure 2: Saving a picure shows the ProgressBar over the semi-transparent Image

The Effects

Now that we made the image processing asynchronous and the UI is responsive even when complex computations are performed, it's time to leverage this feature for some advanced effects.

The IEffect interface had to be changed for the asynchronous WriteableBitmap-less processing. The new Process method overload expects the pixels as ARGB32 integer array, and the width and height of the bitmap as parameters. The return value is the processed bitmap as integer pixel array of the same size.

Figure 3: The changed IEffect interface

As we learned in the first part, the end user effects are called composite effects (outer core), which are made out of various, reusable base effects (inner core).

The Vintage Polaroid-like Effect

This composite effect gives a picture an old-touch so it looks like it was taken with an old, Polaroid-like camera.

Figure 4: Vintage Polaroid-like effect applied to the sample picture

The Polaroid-like composite effect uses three internal base effects: a Gaussian blur, an effect that adds a black vignette, and the Tint base effects introduced in the first part (Figure 5).

Figure 5: The class diagram of the PolaroidEffect

Old photos weren't as sharp as modern photos and therefore the Blurriness property defines how much the picture will be blurred. The Vignette property controls the size of the round vignette. Additionally, the amount of tinting and the tint color can be changed with properties.

public class PolaroidEffect : IEffect
{
   readonly GaussianBlurEffect blurFx;
   readonly VignetteEffect vignetteFx;
   readonly TintEffect tintFx;
   readonly BitmapMixer mixer;   public string Name { get { return "Vintage"; } }   public float Blurriness 
   {
      get { return blurFx.Sigma; }
      set { blurFx.Sigma = value; }
   }   public float Vignette
   {
      get { return vignetteFx.Size; }
      set { vignetteFx.Size = value; }
   }   public float Tinting
   {
      get { return mixer.Mixture; }
      set { mixer.Mixture = value; }
   }   public Color TintColor
   {
      get { return tintFx.Color; }
      set { tintFx.Color = value; }
   }   public PolaroidEffect()
   {
      blurFx = new GaussianBlurEffect { Sigma = 0.15f };
      vignetteFx = new VignetteEffect();
      tintFx = TintEffect.Sepia;
      mixer = new BitmapMixer { Mixture = 0.5f };
   }   public WriteableBitmap Process(WriteableBitmap input)
   {
      var width = input.PixelWidth;
      var height = input.PixelHeight;
      return Process(input.Pixels, width, height)
          .ToWriteableBitmap(width, height);
   }   public int[] Process(int[] inputPixels, int width, int height)
   {
      var resultPixels = blurFx.Process(inputPixels, width, height);
      resultPixels = vignetteFx.Process(resultPixels, width, height);
      var tintedPixels = tintFx.Process(resultPixels, width, height);
      return mixer.Mix(resultPixels, tintedPixels, width, height);
   }
}

First the input is blurred and the vignette is added. Afterward, a new Sepia-tinted version of the processed image is created. In the last processing step, the non-tinted and the tinted bitmap are mixed together with the use of the new BitmapMixer class. This results in a slight Sepia tint rather than the full Sepia tone.

The New Base Effects

The vintage Polaroid-like effect uses three base effects and a mixer to achieve the old look. Now it's time to see how its Inner Core effects work.

The Blur Effect

There are several different available blur algorithms, and one of the most common is the Gaussian blur. The Gaussian blur applies a Gaussian function to an image in order to smooth it and reduce details. The naïve implementation uses a convolution kernel, which is basically a 2D array of n x n elements. In the case of a Gaussian filter the kernel values represent a discrete 2D Gaussian function, which has the typical bell shape. The usual kernel has a size of 5 x 5, though other kernels range from 7 x 7 on up.

Figure 6: Gaussian blur applied to the sample image

During the actual image processing, a pixel of the input image is multiplied with all of the kernel elements. The products of the pixel-kernel-element multiplication are summed and divided, and then the result is assigned as the output pixel. This is done for all the pixels of the input image.

The disadvantage of this approach is that the computation time increases when the blurring is increased. In order to blur the image more, the kernel size is usually enlarged, thus meaning n x n multiplications need to be performed for each pixel. Fortunately, in 1995 Ian T. Young and Lucas J. van Vliet invented a better algorithm that is independent of the width. They describe the method in detail in their paper, “Recursive implementation of the Gaussian filter.”

It gets even better—Andrew Marshall already implemented the recursive Gaussian filter in C# for his Silverlight and CUDA interop blog post and allowed me the use it. As you can imagine, the implementation is quite complex and could make up an article on its own. In fact, Young & van Vliet already wrote this article by writing their paper. Please read it if you want to know the mathematical details behind the GaussianBlurEffect class.

The Vignette Effect

The effect of vignetting reduces the brightness of the pixels towards the edges. This is done by computing the pixel's distance to the center and multiplying this with the pixel color. This generates the vignette effect as a fadeout to black towards the edges.

Figure 7: A black vignette

The Process method of the VignetteEffect implements the vignetting.

public int[] Process(int[] inputPixels, int width, int height)
{
   // Prepare some variables
   var resultPixels = new int[inputPixels.Length];
   var ratio = width > height ? 
      height * 32768 / width : 
      width * 32768 / height;   // Calculate center, min and max
   var cx = width >> 1;
   var cy = height >> 1;
   var max = cx * cx + cy * cy;
   var min = (int)(max * (1 - Size));
   var diff = max - min;   var index = 0;
   for (int y = 0; y < height; y++)
   {
      for (int x = 0; x < width; x++)
      {
         var c = inputPixels[index];         // Extract color components
         var a = (byte)(c >> 24);
         var r = (byte)(c >> 16);
         var g = (byte)(c >> 8);
         var b = (byte)(c);         // Calculate distance to center 
         // and adapt aspect ratio
         var dx = cx - x;
         var dy = cy - y;
         if (width > height)
         {
            dx = (dx * ratio) >> 15;
         }
         else
         {
            dy = (dy * ratio) >> 15;
         }
         int distSq = dx * dx + dy * dy;         if (distSq > min)
         {
            // Calculate vignette
            var v = ((max - distSq) << 8) / diff;
            v *= v;            // Apply vignette
            var ri = (r * v) >> 16;
            var gi = (g * v) >> 16;
            var bi = (b * v) >> 16;            // Check bounds
            r = (byte)(ri > 255 ? 
              255 : 
              (ri < 0 ? 0 : ri));
            g = (byte)(gi > 255 ? 
              255 : 
              (gi < 0 ? 0 : gi));
            b = (byte)(bi > 255 ? 
              255 : 
              (bi < 0 ? 0 : bi));            // Combine components
            c = (a << 24) | 
               (r << 16) | 
               (g << 8) | 
               b;
         }         resultPixels[index] = c;
         index++;
      }
   }   return resultPixels;
}

The x and y coordinate of the image's center and the aspect ratio are calculated. As you can see, only fast integer operations are used again.

Inside the loop, the color components of each input pixel are extracted and the distance vector to the center is calculated with respect to the picture's aspect ratio. The squared length of the distance vector is tested against the minimum vignette size. If the pixel falls within the range, the scaled distance length is multiplied with each color component. The result is an adapted brightness as described above. The last step ensures that the color components are in the byte range and then combines these to the result integer pixel color.

The BitmapMixer

As the name might imply, the purpose of the BitmapMixer class is to mix two images. The Mix method mixes two ARGB32 integer bitmaps of the same size and returns the mixed bitmap. This is actually an alpha blending operation where the Mixture property defines the opacity of the input2 image. A Mixture value of 0 means input1 is fully visible and a value of 1 means that input2 is shown—everything in between is a mix of both.

public float Mixture { get; set; }public int[] Mix(int[] inputPixels1, 
   int[] inputPixels2, 
   int width, 
   int height)
{
   // Prepare some variables
   var resultPixels = new int[inputPixels1.Length];
   var m = Mixture;
   var mi = 1 - m;   for (var i = 0; i < inputPixels1.Length; i++)
   {
      // Extract color components
      var c1 = inputPixels1[i];
      var a1 = (byte)(c1 >> 24);
      var r1 = (byte)(c1 >> 16);
      var g1 = (byte)(c1 >> 8);
      var b1 = (byte)(c1);      var c2 = inputPixels2[i];
      var a2 = (byte)(c2 >> 24);
      var r2 = (byte)(c2 >> 16);
      var g2 = (byte)(c2 >> 8);
      var b2 = (byte)(c2);      // Mix it!
      var d = ((byte)(a1 * mi + a2 * m) << 24) |
              ((byte)(r1 * mi + r2 * m) << 16) |
              ((byte)(g1 * mi + g2 * m) << 8) |
              ((byte)(b1 * mi + b2 * m));      // Set result color
      resultPixels[i] = d;
   }   return resultPixels;
}

The color components of the two input images are extracted. Each color component of input2 is then multiplied with the Mixture factor and input2 is multiplied with the inverse of the Mixture. Then, both color component products are added and the new values are combined to form the new integer output pixel.

The Tilt Shift Effect

Now that we've learned the details of some of the new Inner Core effects, it's time to use some of them in a different combination and make an interesting Outer Core effect.

The digital tilt shift effect lets a scene look like a miniature scale model. It's quite popular nowadays and you might have seen it applied to video in some ads. It's commonly called miniature faking and produces a nice result if it's applied to a photo that was taken from a high angle.

Figure 8: The tilt shift Effect applied to a photo of Dresden that I have taken from a Ferris wheel

In the first processing stage the TiltShiftEffect increases the contrast of the image with the BrightnessContrastModification effect, which was introduced in the first part. Afterward, the picture gets blurred with the GaussianBlurEffect. The blurred version is then combined with the non-blurred to produce the shallow depth of field of a close-up shot.

Figure 9: The class diagram of the TiltShiftEffect

The UpperFallOff property defines the relative y coordinate where the depth of field (camera focus) is completely faded out. The LowerFadeOff defines the lower focus counterpart:

public float UpperFallOff { get; set; }
public float LowerFallOff { get; set; }private int[] contrastedPixels;
private int[] blurredPixels;public int[] Process(
   int[] inputPixels, 
   int width, 
   int height)
{
   // Increase contrast
   CreateBlurredBitmap(inputPixels, width, height);   // Mix the fade off
   return ProcessOnlyFocusFadeOff(
      inputPixels, 
      width, 
      height);
}private void CreateBlurredBitmap(
   int[] inputPixels, 
   int width, 
   int height)
{
   // Increase contrast
   contrastedPixels = contrastFx.Process(
      inputPixels, 
      width, 
      height);   // Blur 
   blurredPixels = blurFx.Process(
                              contrastedPixels, 
                              width, 
                              height);
}public int[] ProcessOnlyFocusFadeOff(
   int[] inputPixels, 
   int width, 
   int height)
{
   // Check if the cache is empty
   if (contrastedPixels == null || blurredPixels == null)
   {
      CreateBlurredBitmap(inputPixels, width, height);
   }   var resultPixels = blurredPixels;   // If not fully blurred?
   if (UpperFallOff < LowerFallOff)
   {
      // Prepare some variables
      resultPixels = new int[inputPixels.Length];      // Calculate fade area
      var uf = (int)(UpperFallOff * height);
      var lf = (int)(LowerFallOff * height);
      var fo = ((lf - uf) >> 1);
      var mf = uf + fo;
      var mfu = mf;
      var mfl = mf;      // Limit fall off and calc inverse
      if (fo > height * MaxFallOffFactor)
      {
         fo = (int)(height * MaxFallOffFactor);
         mfu = uf + fo;
         mfl = lf - fo;
      }
      var ifo = 1f / fo;
      // Blend
      var index = 0;
      for (var y = 0; y < height; y++)
      {
         for (var x = 0; x < width; x++)
         {
            var c2 = contrastedPixels[index];            // Above or below the fading area
            if (y < mfu || y > mfl)
            {
               var c = blurredPixels[index];               // Inside the fading area, 
               // but not in the focused area
               if (y > uf || y < lf)
               {
                  // Extract color components
                  var a1 = (byte)(c >> 24);
                  var r1 = (byte)(c >> 16);
                  var g1 = (byte)(c >> 8);
                  var b1 = (byte)(c);                  var a2 = (byte)(c2 >> 24);
                  var r2 = (byte)(c2 >> 16);
                  var g2 = (byte)(c2 >> 8);
                  var b2 = (byte)(c2);                  // Calculate blending
                  float m = y < mf ? (mfu - y) : (y - mfl);
                  m *= ifo;
                  if (m > 1)
                  {
                     m = 1f;
                  }
                  var mi = 1 - m;                  // Mix it!
                  c = ((byte)(a1 * m + a2 * mi) << 24) |
                        ((byte)(r1 * m + r2 * mi) << 16) |
                        ((byte)(g1 * m + g2 * mi) << 8) |
                        ((byte)(b1 * m + b2 * mi));
               }               // Set result color
               resultPixels[index] = c;
            }
            else
            {
               resultPixels[index] = c2;
            }
            index++;
         }
      }
   }   return resultPixels;
}

As you can see, the processing is split into three methods and two member variables are used to cache both the contrast-increased result and the blurred result. This is useful when only the FallOff properties are changed interactively in real-time, which is described below.

Figure 10: The simulated depth of field fade out

The actual processing mixes the contrast-increased image and the blurred image by using a linear fading function. Figure 10 illustrates this. The red color represents the blurred version and the gray stands for the contrast-increased image.

This fading uses the FallOff properties, converts these properties into absolute values, and calculates some y coordinates, which are needed for the fade in/out. Inside the loop, the color components of both bitmaps are extracted and the mixture factor is computed. Then the color components are multiplied with the factors like in the BitmapMixer's Mix method. The last step combines the component results and sets the integer pixel of the result image.

Multitouch Focus Fade Out Manipulation

The Windows Phone is a nice multitouch device with very good usability. Its multitouch power is used in the PicFx app to let the user interactively change the FallOff properties of the TiltShiftEffect; therefore, the focused area can be altered in an intuitive way.

Silverlight and the Windows Phone Silverlight version provide the static Touch class, which has only one member, the FrameReported event. This event is fired each time a set of touch points is registered.

An event handler is attached in the Initialize method of the MainPage. Please note that one would actually encapsulate the following code in a separate class like ViewModel for the effect, but I decided to leave this out to keep the code simpler and focused on the nitty gritty.

private void Initialize()
{
   // Attach touch event handler
   Touch.FrameReported += Touch_FrameReported;
   // ...
}private void Touch_FrameReported(
   object sender, 
   TouchFrameEventArgs e)
{
   SetTiltShiftFocus(e.GetTouchPoints(Viewport));
}private void SetTiltShiftFocus(IList points)
{
   IEffect effect = null;
   if (ListBoxEffects != null)
   {
      var item = ListBoxEffects.SelectedItem as EffectItem;
      if (item != null)
      {
         effect = item.Effect;
      }
   }   var tiltFx = effect as TiltShiftEffect;
   if (tiltFx == null)
   {
      return;
   }
   var result = Viewport.Source;
   var isManipulating = points.Any(
      p => p.Action == TouchAction.Down
                  || p.Action == TouchAction.Move);
   if (isManipulating)
   {
      if (points.Count > 1)
      {
         var y1 = (int)points[0].Position.Y;
         var y2 = (int)points[1].Position.Y;         // FallOff is expected as relative coordinate
         var ih = 1f / resized.PixelHeight;         // Topmost point is upper FallOff
         if (y1 < y2)
         {
            tiltFx.UpperFallOff = y1 * ih;
            tiltFx.LowerFallOff = y2 * ih;
         }
         else
         {
            tiltFx.UpperFallOff = y2 * ih;
            tiltFx.LowerFallOff = y1 * ih;
         }         // Apply selected effect
         var processed = 
            tiltFx.ProcessOnlyFocusFadeOff(resized);         // Add FallOff marker lines
         const int markerHeight = 4;
         processed.FillRectangle(
            0, 
            y1 - markerHeight,
            resized.PixelWidth,
            y1 + markerHeight,
            Colors.LightGray);         processed.FillRectangle(
            0, 
            y2 - markerHeight, 
            resized.PixelWidth, 
            y2 + markerHeight, 
            Colors.LightGray);         result = processed;
      }
   }
   else
   {
      // Apply selected effect
      result = tiltFx.Process(resized);
   }   // Show the result
   ShowImage(result);
}

Every time the multitouch event is fired, the SetTiltShiftFocus method gets called. This method converts the absolute coordinates into relative and assigns the values to the appropriate properties. The topmost point is always interpreted as UpperFallOff.

Two small, gray rectangles are drawn at the position of the FallOff values to give the user some feedback. This is done with the WriteableBitmapEx' FillRectangle extension method. To keep the UI responsive, the ProcessOnlyFocusFadeOff method of the TiltShiftEffect is called, and this method uses the cached contrast-increased and blurred images by mixing them. This speeds the process up a lot up.

The Watermark

Now it's time to brand our final image with a custom logo before it gets saved. This watermark is useful to customize or add information to a photo.

Figure 11: Watermark logo applied to the sample image

The Watermarker class has the Watermark property, which represents a WriteableBitmap that is used as watermark logo. The RelativeSize defines the size of the logo relative to the size of the input bitmap it should get applied to:

public class Watermarker
{
   public WriteableBitmap Watermark { get; private set; }
   public float RelativeSize { get; set; }   public Watermarker(string relativeResourcePath)
   {
      Watermark = new WriteableBitmap(0, 0)
         .FromResource(relativeResourcePath);      RelativeSize = 0.4f;
   }   public WriteableBitmap Apply(WriteableBitmap input)
   {
      // Resize watermark
      var w = Watermark.PixelWidth;
      var h = Watermark.PixelHeight;
      var ratio = (float) w / h;
      h = (int) (input.PixelHeight * RelativeSize);
      w = (int) (h * ratio);
      var watermark = Watermark.Resize(
         w, 
         h, 
         WriteableBitmapExtensions.Interpolation.Bilinear);      // Blit watermark into copy of the input 
      // Bottom right corner
      var result = input.Clone();
      var position = new Rect(
         input.PixelWidth - w, 
         input.PixelHeight - h, 
         w, 
         h);      result.Blit(position, watermark, new Rect(0, 0, w, h));      return result;
   }
}

The constructor provides an easy way to pass a bitmap from the resource stream. In the Apply method, the watermark bitmap is scaled with the use of the WriteableBitmapEx' Resize method. After this the position is calculated, the watermark logo is blitted into the bottom right corner of the input image and the result is returned. Note that the WriteableBitmapEx' Blit method is used here.

An instance of the Watermarker class is created in the MainPage.xaml.cs.

private void Initialize()
{
   watermarker = new Watermarker("data/watermark.png");
   // ...
}private void ApplySelectedEffectAndSaveAsync()
{
   // ...
      // Turbo copy the pixels to the WriteableBitmap
      var result = new WriteableBitmap(width, height);
      Buffer.BlockCopy(
         resultPixels, 
         0, 
         result.Pixels, 
         0, 
         resultPixels.Length * 4);
      
      // Apply logo
      result = watermarker.Apply(result);      // Save WriteableBitmap
      var name = String.Format(
         "PicFx_{0:yyyy-MM-dd_hh-mm-ss-tt}.jpg", 
         DateTime.Now);
      result.SaveToMediaLibrary(name);
   // ...
}

The watermark is applied after the image processing was performed and before the picture gets saved to the media library.

Conclusion

In the first part we drilled down from the UI Crust with the Pivot control template and the Windows Phone Application Bar through the UI Mantle. Finally we reached the Effects Core with the Black & White, Sepia, BrightnessContrast, and Tint effects.

In this second part, we again journeyed to the core, starting on the surface in order to learn how to keep the UI responsive with asynchronous processing. We then entered the core and l explained the Polaroid-like vintage, its Gaussian blur, the Vignette effects, and the BitmapMixer. I also demonstrated the miniature faking Tilt Shift effect, including the multitouch manipulation of its parameters. The last step showed how to add a custom logo watermark to the final picture.

This short series, or two articles, if you will, has come to end. Yep, it's over now—BUT Coding4Fun has released this development stage of the PicFx app for free on the Marketplace! Furthermore, I continued my work on this project and shipped it with enhanced effects, without watermark, but with extra features and a bunch of new effects, including essential ones like auto adjust, soften and many more. Check out the app called Pictures Lab aimed to be nothing less than THE image effects addition to the Windows Phone Pictures Hub.

About The Author

René Schulte is a .Net, Silverlight and Windows Phone developer and Microsoft Silverlight MVP passionate about real-time computer graphics, physics, AI, and algorithms. He loves C#, Shaders, Augmented Reality, and computer vision. He started the SLARToolkit, the WriteableBitmapEx, and the Matrix3DEx Silverlight open source projects, and he has a Silverlight website powered by real time soft body physics. He is also a regular author for Microsoft's Coding4Fun. Contact information can be found on his Silverlight website, his blog, or via Twitter.

Three Reasons Developers Should Use Expression Blend

Jeff Brand — Fri, 15 Oct 2010 18:35:16 GMT

Lots of developers are building XAML-based applications today. Be it WPF, Silverlight or Windows Phone 7, I have seen a lot of people struggle with certain tasks in Visual Studio that would be much easier if undertaken in Expression Blend. Blend seems to be somewhat intimidating to developers, especially those that are already wrestling with learning XAML. Having spent time in both tools, I can tell you that Blend can make three things dramatically easier, and you should learn how to do these three things with Blend, even if you never use it for anything else.

Demo code

Window Phone 7 Developer Tools + controls!

Clint Rutkas — Thu, 16 Sep 2010 14:13:00 GMT

Today the Windows Phone team released the final bits for Windows Phone 7! The tooling is free and will integrate with Visual Studio 2010 and Expression Blend 4 if you have them installed as well. Head over to http://www.microsoft.com/downloads/en/details.aspx?FamilyID=04704acf-a63a-4f97-952c-8b51b34b00ce to get the RTM tooling.

Here is also a little list I’ve been keeping with useful controls around the internet!

Controls

Random Resources

Silverlight Tool kit
GestureService/GestureListener
ContextMenu
DatePicker
TimePicker
ToggleSwitch
WrapPanel
http://bit.ly/aBZWSQ

Wheel Control
http://bit.ly/bDcyFL

Swipe Title
http://bit.ly/balUu1

Picker (Combo box)
http://bit.ly/coyJ1F

Progress Bar
http://bit.ly/aAWd4K

More Complex splash screen
http://bit.ly/bGH93w

Touch tilting
http://bit.ly/bptbs9

Clearable Textbox
http://bit.ly/csSidM

Image Caching
http://bit.ly/cktA7N

Great list of resources
http://bit.ly/bVvIRn

Detect if a listbox is done scrolling
http://bit.ly/b1WfPO

Pass data between pages
http://bit.ly/akIzLO

relative date time converter
http://bit.ly/9F0gzP

Phone Styles
accent color would be Style="{StaticResource PhoneAccentBrush}"
http://bit.ly/cUmhGi

PicFx – Windows Phone Picture Effects Application – Part 1

Rene Schulte — Mon, 09 Aug 2010 17:00:52 GMT

At the MIX 2010 conference, Microsoft announced its new mobile strategy with the Windows Phone 7 platform. Windows Phone 7 is a completely new mobile OS, and the best part is that Silverlight is THE technology for Windows Phone 7 application development. Apps are written with a special version of Silverlight based on Silverlight 3 plus some additions. Games with 3D hardware acceleration can be made with the XNA Game Studio 4

Most of the first technical previews have stated that the Windows Phone has a pretty impressive photo application, and we can surely expect some pretty good cameras from the different phone hardware vendors. A Windows Phone 7 is required to have at least a 5 Megapixel camera. Another cool feature requirement of the Windows Phone camera system is called “pocket to picture.” This represents a special hardware button that launches the camera app even if the phone is locked. This feature will be great for capturing all those spontaneous moments in life. How often have you missed such snapshots because you were fumbling to unlock your phone and starting the camera app? I know this has happened to me quite often.

The ability to so quickly take pictures will result in some very cool photos. The original pictures might already look nice, but some will look even better if they are enhanced with a nice image effect. It's in this manner that this article and the PicFx application come into play.

This is the first article in a short series describing how to write picture effects applications for Windows Phone. The first article will show how to create the base Windows Phone application and how to implement some basic effects. Spoiler: The next part will demonstrate how to write some more advanced effects you probably don't want to miss.

The App in Action

The video below demonstrates the application's features and also shows how the application can be used. It was recorded with the application running in the emulator.

How it works

The following sections will describe how this picture effects application was made. We will drill down from the User Interface (UI) Crust through the UI Mantle until we finally reach the Effects Core. Cross your fingers so a leak doesn't stop us.

The User Interface

We start our journey on the surface of the application.

The app uses the so-called Pivot control as the main UI template (Figure 1). Along with the Panorama control, the Pivot control is the dominating UI template used in standard Windows Phone applications / hubs. Both controls usually contain multiple items or views that can be navigated with a flick gesture. You can read more about these controls and the general design of Windows Phone applications in the official Windows Phone UI Design and Interaction Guide.

Since the official Silverlight version of the Pivot and Panorama controls haven't been released yet, we'll use this nice open source implementation from CodePlex by Stephane Crozatier.

Figure 1: The PicFx application layout using the Pivot control

The relevant part from the MainPage.xaml:

XAML

The first Pivot item contains only the Image showing the selected picture. The second view contains a ListBox control with the thumbnails of the effects (see Figure 1). The list is data-bound to the StaticResource “effects,” an instance of the EffectItems class that is derived from ObservableCollection and consists of EffectItem elements:

public class EffectItems : ObservableCollection
{
   public EffectItems()
   {
      Add(new EffectItem(new BlackWhiteEffect(), "data/icons/BlackWhite.png"));
      Add(new EffectItem(new SepiaEffect(), "data/icons/Sepia.png"));
   }
}

public class EffectItem
{
   public IEffect Effect { get; private set; }
   public string Name { get; private set; }
   public ImageSource Thumbnail { get; set; }

   public EffectItem(IEffect effect)
   {
      Effect = effect;
      Name = effect.Name;
   }

   public EffectItem(IEffect effect, string thumbnailRelativeResourcePath)
      : this(effect)
   {
      // Load the thumbnail from the resource stream 
      // using the WriteableBitmapEx lib
      Thumbnail = new WriteableBitmap(0, 0).
            FromResource(thumbnailRelativeResourcePath);
   }
 }

The ListBox.ItemTemplate defines the visual representation of the data (EffectItem). The Image is data-bound to the Thumbnail property and the TextBlock is data-bound to the Name property of the EffectItem. The two controls are stacked together. Each Thumbnail has a size of 128 x 128 pixels and a Margin of 14 is used between the items so they get evenly spaced. Please also note the use of a StaticResource “PhoneFontSizeNormal” rather than a fixed FontSize. You can find all the predefined styles in the file %ProgramFiles%\SDKs\Windows Phone\v7.0\Design\ThemeResources.xaml. These styles, margins, and sizes are important because the Windows Phone is a multi-touch device that supports various themes. The Windows Phone UI Design and Interaction Guide provides more information about this topic.

The small thumbnail image is compiled into the assembly's resources. The WriteableBitmapEx' FromResource extension method is then used to load the actual image data at runtime. The FromResource method takes the relative path of the image and automatically builds the Pack URI that is needed to load data from the assembly's resources. Please note that it's recommended to add larger images as “Content” and not as “Resource” to keep the assembly file small.

The ListBox.ItemsPanel specifies the layout of the items. A WrapPanel is used here so the items are stacked horizontally and wrapped when the panel limit is reached. The ItemsPanelTemplate specifies a StackPanel as default, which wastes precious space here. The WrapPanel originally comes from the Silverlight Toolkit and was ripped by Matthias Shapiro and compiled for the Windows Phone 7.

The Application Bar

The Windows Phone Application Bar is a very useful system control that can contain up to four icon buttons and a set of text menu items. It's normally used as a toolbar to provide quickly accessible functionality. The Application Bar is easy to use and very handy for Windows Phone app development.

Figure 2: The Application Bar from the PicFx app

The relevant part from the MainPage.xaml :

XAML

The MainPage is derived from the PhoneApplicationPage class, which defines the ApplicationBar property. Three ApplicationBarIconButtons are added here. Each one needs to have set a Text and an Icon. Microsoft provides a set of common application bar icons that are used in the PicFx app. The set contains 32 dark and 32 light icons along with the corresponding vector versions.

The Code Behind

The UI is properly set up, the user is able to select an effect and click on the Application Bar buttons, but nothing will actually happen. Now it's time to breathe life into the UI elements.

Choosing a Picture

First of all we need to get a picture. One way to do this is to call the Windows Phone picture hub from our app and let the user select an image from the library. Fortunately, this task is pretty easy when using the Windows Phone Task API:

private void Initialize()
{
   // ...
   // Init tasks
   photoChooserTask = new PhotoChooserTask();
   photoChooserTask.Completed += 
      PhotoProviderTaskCompleted;
   // ...
}

A member variable of the PhotoChooserTask is instantiated in the Initialize method and an event handler for the Completed event is attached. The Initialize method is called in the Loaded event handler of the page:

private void PhotoProviderTaskCompleted
   (object sender, PhotoResult e)
{
   // Load the photo from the task result
   if (e != null && e.TaskResult == TaskResult.OK)
   {
      var bmpi = new BitmapImage();
      bmpi.SetSource(e.ChosenPhoto);
      original = new WriteableBitmap(bmpi);
   }
}

The Chooser's Completed event provides a PhotoResult that contains the TaskResult, the ChosenPhoto as a Stream, and some other properties. If the user hasn't cancelled the operation, the stream is used as the source of a BitmapImage, which is then assigned to a WriteableBitmap member variable.

To launch the picture application, the PhotoChooserTask.Show method is called when the corresponding Application Bar button is clicked:

private void ApplicationBarIconFolderButton_Click
   (object sender, EventArgs e)
{
   photoChooserTask.Show();
}

The Show method launches the Windows Phone picture hub. The current version of the Windows Phone operating system allows only one application to run at the same time, and our app is therefore terminated when the Chooser is started. Here's where the concept of tombstoning comes into play.

After the user selected an image or pressed the back button, the Chooser's Completed event is raised. You might have noticed the black screen that appears after the choose operation when you debug the application. As a result of the app termination, the Visual Studio debugging session is stopped. The Windows Phone 7 emulator detected that the app was started in a debug context and the emulator now waits at the black screen for re-attaching. So, just go back to Visual Studio and hit F5 (“Start Debugging”), then the debugger is reattached and the app continues. Of course, it's also possible to “Start Without Debugging” in Visual Studio.

Taking a Picture

Another way to get a picture into the app is to launch the camera application and let the user take an on-the-fly picture with the phone's camera:

private void Initialize()
{
   // ...
   // Init tasks
   cameraCaptureTask = new CameraCaptureTask();
   cameraCaptureTask.Completed += 
      PhotoProviderTaskCompleted;
   // ...
}

A member variable of the CameraCaptureTask is also instantiated in the Initialize method and the same event handler used for the PhotoChooserTask is attached.

To launch the camera application, the CameraCaptureTask.Show method is called when the corresponding Application Bar button is clicked:

private void ApplicationBarIconCameraButton_Click
   (object sender, EventArgs e)
{
   cameraCaptureTask.Show();
}

Obviously, the CameraCaptureTask API works the same way as the PhotoChooserTask.

The emulator doesn't support the camera application; therefore, the corresponding Application Bar button is disabled in the Initialize method when the app runs in the emulator:

// Disable the camera button if the 
// app runs in the emulator
// The cast is needed since the 
// Buttons property is an IList of objects
var buttons = ApplicationBar.Buttons.Cast();
var btn = buttons.Where(b =>    
                  b.IconUri.ToString().
                     ToLower().Contains("camera")).FirstOrDefault();
if (btn != null)
{
   btn.IsEnabled = 
      (Microsoft.Devices.Environment.DeviceType != DeviceType.Emulator);
}

In the current beta of the Windows Phone developer tools, the ApplicationBar has some limitations since it's rendered by the phone shell and is not at all a Silverlight element. This means that there's no Name property on the ApplicationBarIconButton, x:Name doesn't initialize the member variable, and data binding isn't possible. This is the reason for the above code, which uses the Buttons property and disables the button that has a camera icon if the app is executed in the emulator. As an alternative, the whole Application Bar can be set in the code-behind, including the IsEnabled property, and a working member variable for the button can be initialized.

Resizing a Picture

Both Tasks return the full-sized image. These images can be large, depending on the phone's camera, and as a result the image processing can take quite a long time. Image processing is the operation where the actual effect is applied to an image. Until the picture is saved, however, only the Image control size is needed. That's why a resized version of the picture is used until saving. This speeds the interactive process up a lot:

// From MaingPage.ResizeAndShowImage
// Fast and simple resize by using UIElement rendering
if (Viewport != null)
{
   Viewport.Source = bitmap;
   resized = new WriteableBitmap(Viewport, null);
}

The WriteableBitmap resized member variable is being newly instantiated from the Viewport user control. This means that the Viewport image control is rendered at its actual size and the rendered pixels are used for the new and smaller WriteableBitmap instance where the effect gets applied.

Applying an Effect

When the user selects an effect item in the list, the SelectionChanged event is fired and the following event handler and methods are being called:

// From the MainPage class
private void ListBox_SelectionChanged
   (object sender, SelectionChangedEventArgs e)
{
   if (resized != null)
   {
      // Apply selected effect and show image
      var result = ApplySelectedEffect(resized);
      ShowImage(result);
   }
}

private WriteableBitmap ApplySelectedEffect
   (WriteableBitmap bitmap)
{
   // Apply selected effect
   var result = bitmap;
   if (ListBoxEffects != null)
   {
      var item = ListBoxEffects.SelectedItem as EffectItem;
      if (item != null)
      {
         result = item.Effect.Process(bitmap);
      }
   }
   return result;
}

private void ShowImage(ImageSource result)
{
   // Show image and scroll to start page if needed
   if (Viewport != null)
   {
      Viewport.Source = result;
      if (PivotCtrl.SelectedIndex != 0)
      {
         PivotCtrl.ScrollPrev();
      }
   }
}

The event handler calls the ApplySelectedEffect method with the resized bitmap as parameter. The ApplySelectedEffect method casts the SelectedItem to an EffectItem and then applies the underlying effect to the bitmap. Afterwards, the bitmap is set as source of the Viewport Image control in the ShowImage method. As the last step, the Pivot control's ScrollPrev method is called, the Pivot control is scrolled to the image view, and the user is presented with the applied effect.

Removing an Effect

If the user wants to remove the effect selection and see the original image again, he or she can hit the phone's hardware back button. This functionality is accomplished by attaching an event handler to the page's BackKeyPress event:

private void PhoneApplicationPage_BackKeyPress
   (object sender, CancelEventArgs e)
{
   if (ListBoxEffects != null && 
      ListBoxEffects.SelectedItem != null)
   {
      ListBoxEffects.SelectedItem = null;
      e.Cancel = true;
   }
}

The selected item of the ListBox is set to null which raises the SelectionChanged event (see above). The Cancel

property of the event argument is set to true. Therefore, the app is not closed, which is the default functionality of the back key. The app will be closed if no effect was applied (ListBoxEffects.SelectedItem == null).

Saving a Picture

After the user applied an effect he probably wants to save the result back to the picture library / photo album. But there's nothing like a PhotoSaveTask available in the Silverlight SDK. Fortunately, the Windows Phone's XNA MediaLibrary comes to the rescue. Only a reference to the Microsoft.Xna.Framework assembly is needed to use it in our Windows Phone Silverlight application. To make this task a bit easier, I wrote some reusable extension methods for the WriteableBitmap:

// From the file WriteableBitmapMediaLibraryExtensions.cs
// Saves the WriteableBitmap encoded as JPEG 
// to the Media library.
// The quality for JPEG encoding 
// has to be in the range 0-100, 
// where 100 is the best quality with the largest size.
public static void SaveToMediaLibrary
   (this WriteableBitmap bitmap, string name, int quality)
{
   using (var stream = new MemoryStream())
   {
      // Save the picture to the WP7 media library
      bitmap.SaveJpeg(
         stream, 
         bitmap.PixelWidth, 
         bitmap.PixelHeight, 
         0, 
         quality);
      stream.Seek(0, SeekOrigin.Begin);
      new MediaLibrary().SavePicture(name, stream);
   }
}

The SaveToMediaLibrary method expects a name for the picture and the quality for JPEG encoding. The quality has to be in the range from 0 to 100, where 100 is the best image quality. Though a higher quality yields a larger file size, it's not recommended to use a quality below 70.

The MediaLibrary's SavePicture method expects a stream or a byte array as parameter containing an image encoded in the JPEG format. Therefore, the WriteableBitmap is encoded as JPEG with the built-in SaveJpeg extension method. The SaveJpeg method expects the targetStream, the width and height of the target, the orientation, which is not used at the moment, and the quality. The width and height parameters can be useful when a scaled version of the WriteableBitmap should be saved as JPEG.

The image will be saved when the disk floppy button in the ApplicationBar is clicked:

private void ApplicationBarIconSaveButton_Click
   (object sender, EventArgs e)
{
   var result = ApplySelectedEffect(original);
   var name = String.Format(
      "PicFx_{0:yyyy-MM-dd_hh-mm-ss-tt}.jpg", 
      DateTime.Now);
   result.SaveToMediaLibrary(name);
}

The effect is applied to the original sized bitmap and a filename based on the current date and time is created. This filename is then passed to the SaveToMediaLibrary extension method, which will save the edited picture to the phone's media library / picture hub.

The Effects

Now that we have examined the UI crust and the underlying mantle, it's time to drill further into the core of our application—the image effects.

The effects selectable by the end-user are made out of several base effects, which can be differently combined. Therefore, it's possible to make a wide range of different composite effects (outer core) using various combinations of base effects (inner core). This approach also guarantees high code reusability.

Regardless of whether the effect is a base effect or a composite effect, both implement the same IEffect interface (Figure 3). This interface is quite small. The Process method takes a WriteableBitmap as parameter and returns a WriteableBitmap as result of the image processing.

Figure 3: The IEffect interface

The Black & White Effect

This composite effect converts the input image to a grayscale image and slightly increases the contrast. The classic Black & White effect is often used for portrait photos. Most pictures tend to look better when they're converted to an old school gray image. One might think that's the reason why I use this effect on my profile picture.

Figure 4: The Black & White effect applied to the sample picture

The Black & White composite effect internally uses both the BrightnessContrast and Tint base effects (Figure 5). Therefore, it contains almost no code at all.

Figure 5: The class diagram of the BlackWhiteEffect

This is the complete code of the BlackWhiteEffect class without XML comments:

public class BlackWhiteEffect : IEffect
{
   readonly TintEffect tintFx;
   readonly BrightnessContrastEffect contrastFx;

   public string Name { get { return "Black & White"; } }

   public float ContrastFactor 
   {
      get { return contrastFx.ContrastFactor; }
      set { contrastFx.ContrastFactor = value; }
   }

   public BlackWhiteEffect()
   {
      tintFx = TintEffect.White;
      contrastFx = new BrightnessContrastEffect 
         { ContrastFactor = 0.15f };
   }

   public WriteableBitmap Process(WriteableBitmap input)
   {
      return contrastFx.Process(tintFx.Process(input));
   }
}

The Base Effects

The Black & White effect of the Outer Core doesn't have much code. So, where's all the code? Good question. Let's dig deeper into the Inner Core to see where the magic is happening.

The Tint Effect

The Tint effect converts each pixel to gray and tints it with a parameterized color:

public WriteableBitmap Process(WriteableBitmap input)
{         
   // Prepare some variables
   var result = new WriteableBitmap(
      input.PixelWidth, 
      input.PixelHeight);
   var resultPixels = result.Pixels;
   var inputPixels = input.Pixels;
   var ta = Color.A;
   var tr = Color.R;
   var tg = Color.G;
   var tb = Color.B;

   for (int i = 0; i < inputPixels.Length; i++)
   {
      // Extract color components
      var c = inputPixels[i];
      var a = (byte)(c >> 24);
      var r = (byte)(c >> 16);
      var g = (byte)(c >> 8);
      var b = (byte)(c);

      // Convert to gray with constant factors 
      // 0.2126, 0.7152, 0.0722
      int gray = (r *  6966 + g * 23436 + b *  2366) >> 15;

      // Apply Tint color
      a = (byte)((a    * ta) >> 8);
      r = (byte)((gray * tr) >> 8);
      g = (byte)((gray * tg) >> 8);
      b = (byte)((gray * tb) >> 8);

      // Set result color
      resultPixels[i] = (a << 24) | 
         (r << 16) | 
         (g << 8) | 
         b;
   }

   return result;
}

First, the result WriteableBitmap is initialized with the same size as the input image and the values of the Pixels property are assigned to local variables. Using the local variables inside the processing loop is much faster than using the Pixels property, which means that a method is being called each time. The WriteableBitmap uses the RGB color space to represent the pixels and is actually just a 32 bit integer array that stores the alpha, red, green, and blue (ARGB) byte components for all the pixels in a 1D array.

Inside the processing loop the red, green, and blue color components of each input pixel are extracted. Then, each component is multiplied with a constant factor and the elements are added to a scalar value. The result actually represents the luminance of the pixel. The human eye is known to be more sensitive to green colors, which is the reason why the green component is weighted more.

The factors aren't applied as a floating-point multiplication; instead, the components are multiplied with large integer values in the range 2¹⁵. That's why the result is then divided by 32768 (2¹⁵) using a cheap bit shift operation. Integer operations are usually faster on most non-specialized CPUs, and on mobile CPUs. But this has to be proven in the future with a real Windows Phone device at hand. One thing is clear, the integer operations perform better than floating point operations in the emulator.

In the last processing step the actual tint Color property is applied by multiplying each component of the color with the gray value of the input pixel. Then the byte color components are combined into the result integer pixel. Again, only fast integer operations are used here.

The Black & White effect uses white as tint color, which represents 255, 255, 255 as a byte in the common additive RGB system or 1f, 1f, 1f as a normalized floating point. This means the gray color is used directly and no tinting is actually applied.

The Brightness and Contrast Modification Effect

The second and last base effect from the Black & White effect is the brightness and contrast modification. The Black & White effect only increases the contrast, but the BrightnessContrastEffect can alter contrast and brightness in the same process since both modifications are commonly used together:

public WriteableBitmap Process(WriteableBitmap input)
{         
   // Prepare some variables
   var result = new WriteableBitmap(
      input.PixelWidth, 
      input.PixelHeight);
   var resultPixels = result.Pixels;
   var inputPixels = input.Pixels;
   // Convert to integer factors
   var bfi = (int)(BrightnessFactor * 255);
   var cf = (1f + ContrastFactor) / 1f;
   cf *= cf;
   var cfi = (int)(cf * 32768);

   for (int i = 0; i < inputPixels.Length; i++)
   {
      // Extract color components
      var c = inputPixels[i];
      var a = (byte)(c >> 24);
      var r = (byte)(c >> 16);
      var g = (byte)(c >> 8);
      var b = (byte)(c);
            
      // Modify brightness (addition)
      if (bfi != 0)
      {
         // Add brightness
         int ri = r + bfi;
         int gi = g + bfi;
         int bi = b + bfi;

         // Clamp to byte boundaries
         r = (byte)(ri > 255 ? 255 : (ri < 0 ? 0 : ri));
         g = (byte)(gi > 255 ? 255 : (gi < 0 ? 0 : gi));
         b = (byte)(bi > 255 ? 255 : (bi < 0 ? 0 : bi));
      }
 
      // Modify contrast (multiplication)
      if (cfi != 0)
      {
         // Transform to range [-128, 127]
         int ri = r - 128;
         int gi = g - 128;
         int bi = b - 128;

         // Multiply contrast factor
         ri = (ri * cfi) >> 15;
         gi = (gi * cfi) >> 15;
         bi = (bi * cfi) >> 15;

         // Transform back to range [0, 255]
         ri = ri + 128;
         gi = gi + 128;
         bi = bi + 128;

         // Clamp to byte boundaries
         r = (byte)(ri > 255 ? 255 : (ri < 0 ? 0 : ri));
         g = (byte)(gi > 255 ? 255 : (gi < 0 ? 0 : gi));
         b = (byte)(bi > 255 ? 255 : (bi < 0 ? 0 : bi));
      }  

      // Set result color
      resultPixels[i] = (a << 24) | 
         (r << 16) | 
         (g << 8) | 
         b;
   }

   return result;
}

A with most of the effects, the result WriteableBitmap is first initialized with the same size as the input image and the Pixels property is locally referenced. The range of the ContrastFactor and the BrightnessFactor floating point properties is normalized to [-1, 1], which makes the class easier to use. But floating operations are slower than integer operations; therefore, local, scaled integer variables are initialized for these properties, too.

Brightness

Inside the loop, the color components of each input pixel are again extracted. Then it's determined whether the Brightness should be modified. The Brightness modification is actually an addition or subtraction of the pixel's luminance. In terms of vector arithmetic, it can be described as a translation. But I don't want to bore you with mathematical details and, as always, a picture is worth a thousand words:

Figure 6: The brightness transfer functions from left to right: 1:1, subraction, addition

Figure 6 shows three different brightness transfer functions along with the picture resulting from when the function is applied to the sample image. The y-axis represents the input value and the x-axis represents the corresponding output value for the pixel's luminosity. The left image is the original. The function curve in the middle has a negative offset, which means that a subtraction is performed and the brightness gets decreased. The right curve has a positive offset which means that an addition is performed and the brightness gets increased. So the brightness modification is actually the y-intercept change of the linear luminance transfer function.

Contrast

On the other hand, the Contrast modification is a multiplication of the pixel's luminance. It's a uniform scaling of the color vector (Figure 7). In the above code the value of the pixel components is transformed to the range [-128, 127] and then multiplied with the contrast factor. Due to the range transformation, darker pixels get darker and lighter pixels get lighter when the contrast is increased with a positive factor. Then the pixel is transformed back to the range [0, 255] and the boundaries of the color byte components are checked. The last processing step is the combination of the byte components into the result integer pixel. Again, everything was done with only fast integer operations.

Figure 7: The contrast transfer functions from left to right: 1:1, scale down, scale up

The contrast transfer function in the middle of Figure 7 has a factor below 1, which means the slope is shallower and the contrast gets decreased. The right curve has a factor above 1, which means the slope is steeper and the contrast gets increased. The contrast modification is actually the slope change of the linear luminance transfer function.

The Sepia Effect

After the boring details of the Inner Core effects, it's time to use these base effects in a different combination to make an interesting Outer Core effect.

The Sepia effect is another composite effect that tints the image and changes the contrast. Like the Black & White, the Sepia effect is also a very popular image effect to give a photo the old-touch. Sepia is some kind of a brown color tint.

Figure 8: The Sepia effect applied to the sample picture

The Sepia effect is basically the same as the Black & White effect, only with slightly other parameter values and a different tint color of course. Actually, only the contrast factor is a bit less than the Black & White effect and the tint color is Sepia (230, 179, 77).

Figure 9: The class diagram of the SepiaEffect

The code of the Sepia effect in its whole glory:
C#

public class SepiaEffect : IEffect
{
   readonly TintEffect tintFx;
   readonly BrightnessContrastEffect contrastFx;

   public string Name { get { return "Sepia"; } }

   public float ContrastFactor 
   {
      get { return contrastFx.ContrastFactor; }
      set { contrastFx.ContrastFactor = value; }
   }

   public SepiaEffect()
   {
      tintFx = TintEffect.Sepia;
      contrastFx = new BrightnessContrastEffect 
         { ContrastFactor = 0.05f };
   }

   public WriteableBitmap Process(WriteableBitmap input)
   {
      return contrastFx.Process(tintFx.Process(input));
   }
}

Conclusion

We drilled down from the UI Crust with the Pivot control template and the Windows Phone Application Bar through the UI Mantle with all the IO functionality. Then we drilled further into the Effects Core with the Black & White and Sepia effects. Finally, we reached the Inner Core and learned how the BrightnessContrast and Tint base effects work.

I hope you didn't get lost during our long journey because this here isn't the end. The second article of this series will describe how to implement advanced effects (the cool stuff) and many more.

About The Author

René Schulte is a .Net / Silverlight developer and Microsoft Silverlight MVP passionate about real-time computer graphics, physics, AI, and algorithms. He loves C#, Shaders, Augmented Reality, and computer vision. He started the SLARToolkit, the WriteableBitmapEx, and the Matrix3DEx Silverlight open source projects, and he has a Silverlight website powered by real time soft body physics. He is also a regular author for Microsoft's Coding4Fun. Contact information can be found on his Silverlight website, his blog, or via Twitter.

Creating a Shuffleboard Game using Silverlight

Andy Beaulieu — Tue, 15 Jun 2010 21:23:23 GMT

In this walkthrough, we will create a table shuffleboard style game for Windows Phone 7 using Silverlight. Many bars feature these long wooden table games, in which players slide metal pucks down the length of the table, attempting to get as close as possible to the far end without sliding off the edge.

Multi-Targeting

Windows Phone 7 uses a version of Silverlight 3 with a few bonus features. Because this version of Silverlight is so close to the Web version of Silverlight 3, we'll take the approach of Multitargeting a solution for both platforms. To do so, start with a Silverlight 3 (web) application template, and then add in a Windows Phone project with linked files that re-use the Silverlight 3 solution. This allows us to deploy to many different platforms using the same code base.

Let's get started by creating our Solution in this way.

Creating the Solution and MainPage

In Expression Blend 4, create a new Silverlight Application + Website template named Shuffleboard. Be sure to select “3.0” from the Version dropdown, as this is what is supported by Windows Phone (in a little bit we'll add in the Windows Phone project template as well).
In the Objects and Timeline Panel, select the main UserControl and set its Width to 480 and its Height to 800. This is the size of a Windows Phone UI in Portrait mode.
Select the LayoutRoot Grid and set its Width to 480 and its Height to 800.
For games, a Canvas layout container is better than a Grid, so let's change the LayoutRoot container type. Right-click LayoutRoot and select Change Layout Type/Canvas.
Since some parts of our UI can appear outside of the game area, we want to add a Clip to this main canvas so that the user does not see these outside elements. Add the following just under the LayoutRoot Canvas:
This XAML is snippet “MainPage Clip” inside snippets.txt.
```
<Canvas.Clip>
    <RectangleGeometry Rect="0,0,480,800"/>
Canvas.Clip>
```
We'll be using some pre-built Behaviors that make it easy to introduce physics into Silverlight using the Farseer Physics Library. Right-click the Silverlight project and select Add Reference. Select the following assemblies, located in the sample download:

\ShuffleBoard\Bin\Debug\FarseerPhysics.dll
\ShuffleBoard\Bin\Debug\Spritehand.FarseerHelper.dll
\ShuffleBoard\Bin\Debug\Spritehand.PhysicsBehaviors.dll

NOTE: To learn more about the Physics Helper Library, visit http://physicshelper.codeplex.com

Creating the Game User Control

Next we'll create a separate user control that will contain the core game logic. By creating a separate user control, we can easily target different platforms by placing the user control inside different MainPage elements.

Right-click the Shuffleboard Silverlight project and select Add New Item. Select UserControl and name the control “ucMainGame”.
Change the LayoutRoot element from a Grid to a Canvas.
Set the Width to 480 and the Height to 800 for both the UserControl and LayoutRoot Canvas elements.
Set the Background color to Black for the LayoutRoot Canvas.
Build the project by pressing Ctrl+Shift+B.
Back on MainPage, add an instance of ucMainGame to the page by going to the Assets Panel and expanding Controls/All. Drag an instance of ucMainGame to the artboard.
Rename the ucMainGame control to ucMainGame1.
Set the Left and Top properties of ucMainGame1 to 0.

Creating the Table

We'll use a pre-rendered PNG image for the shuffleboard table.

Create a new subfolder in the Silverlight project named “images”.
Add the following JPG image into the new images subfolder, located in the sample download:
\ShuffleBoard\images\shuffleboardTable.jpg
Open the ucMainGame user control.
Insert a new Canvas element named cnvTable, and set the following attributes:
1. Width = 480
2. Height = 800
3. Left = 0
4. Top = 0
In the Assets Panel, expand the Behaviors category and drag a PhysicsControllerBehavior on the cnvTable. This behavior introduces the core physics simulation into the game. Set the properties of the Physics Contoller as follows (this turns of gravity and sets some other physics parms):
Inside the cnvTable Canvas, add a second Canvas named cnvTableInner, which will hold the table image. Set the following properties on cnvTableInner:
1. Width = 360
2. Height = 1077
3. Left = 60
4. Top = -277
Drag the shuffleboardTable.jpg image from the Projects Panel into cnvTableInner. Set the following properties on the image:
1. Width = 360
2. Height = 1077
3. Left = 0
4. Top = 0
The Objects and Timeline Panel should look like so:
We will need to detect when a puck hits the edge of the table and “falls off.” Let's add in some Rectangle elements and add Physics Behaviors to them.
Add a new Rectangle named rectSensorLeft and size it so that it covers the entire left side of the table. Set the following properties:
1. Width = 60
2. Height = 1190
3. Left = -40
4. Top = -334
5. Opacity = 20%
Drag a PhysicsObjectBehavior from the Assets Panel Behaviors onto rectSensorLeft, and then set its IsStatic property to true.
Add three more Rectangles by copying rectSensorLeft, so that they surround the borders of the table:
1. rectSensorRight
2. rectSensorTop
3. rectSensorBottom
Your artboard should look similar to the following:
Now we'll add in the goal Rectangles at the end of the table. These will be used to determine the number of points a puck receives. Draw out three Rectangles that cover the width of the board and are 100 pixels high. Name these rectPoints3, rectPoints2, and rectPoints1. Set their Stroke to Red and their Fill to No brush.
Add a TextBlock element inside each Rectangle to depict the points. Set the text properties to 3, 2, and 1 so that the artboard looks similar to the following:
We'll also need a Rectangle representing the “slide zone” where players can legally slide a puck (we don't want to allow sliding all of the way down the table!). Add a Rectangle named rectInBounds and position it at the lower end of the table:
1. Width=360
2. Height=292
3. Left = 60
4. Top = 508
5. Fill = No Brush
6. Stroke = Red

Adding the Pucks

For the pucks, we are going to add in an existing control which has the artwork completed.

Right-click the project and select Add Existing Item.
Browse to the following two files in the sample code download:
\ShuffleBoard\ucPuck.xaml
\ShuffleBoard\ucPuck.xaml.cs
Open ucPuck.xaml on the artboard and notice the following in the Objects and Timeline Panel:
1. There is a Canvas named Puck that has a PhysicsObjectBehavior applied to it. This allows each instance of this Canvas to behave like a Physics Object so it animates with velocity and force and participates in collisions. Note that this Behavior has a large MomentOfInertia value. This keeps the object from rotating due to torque and collisions. Also note the RestitutionCoefficient, which gives the object some “bounce.”
2. There is a “cnvInner” Canvas that defines the look of the Puck.
3. There is a StoryBoard defined, sbLostPuck, which we will execute when the puck “falls off the edge” of the table.
4. Open the code-behind file, ucPuck.xaml.cs, and note the get / set property for the color of the puck. This will allow us to create both Red and Blue pucks for each player.
Build the project by hitting Ctrl+Shift+F5 and go back to ucMainGame.
From the Assets Panel, expand Controls/All and find the ucPuck control. Drag an instance of this onto the artboard. Name this bluePuck1.
Copy and paste bluePuck1 twice so that you have three blue pucks. Name the new pucks bluePuck2 and bluePuck3.
Copy and paste a fourth puck and name it redPuck1. In the Properties Panel, go to the Miscellaneous Category and change the ColorHighlight and ColorMain properties to a Red color:
Copy and Paste redPuck1 two times and rename these new pucks redPuck2 and redPuck3.
Let's test our table. Find the PhysicsControllerBehavior just under the cnvTable Canvas in the Objects and Timeline Panel and set the MousePickEnabled property to true.
Run the project by clicking F5. Try dragging some pucks around with the mouse.

Adding the Scoreboard

We need a way of tracking players' scores, so let's add in a simple scoreboard for Blue vs. Red.

Right-click the project and select Add Existing Item.
Browse to the following two files in the download:
\ShuffleBoard\ShuffleBoard\ucScoreBoard.xaml
\ShuffleBoard\ShuffleBoard\ucScoreBoard.xaml.cs
Open ucScoreBoard and notice the following:
1. It has a TextBlock for Red scores and a TextBlock for Blue scores.
2. In the code-behind, there are setters and getters to set the score.
Build the project by selecting Ctrl+Shift+B.
Switch back to ucMainGame.
Drag an instance of ucScoreBoard from the Assets Panel onto into LayoutRoot.
Name the element ucScoreBoard1, and position it at the top left of the Canvas like so:

Adding a Player Up Display

We'll need a simple control that displays which player's turn it is.

Right-click the Silverlight project and select Add/Existing Item.
Browse to and select the following two files in the sample folder:
\ShuffleBoard\ucPlayerUp.xaml
\ShuffleBoard\ucPlayerUp.xaml.cs
Note the following about ucPlayerUp:
1. The code-behind file has a simple property, IsBlueTurn, which shows the appropriate message in the UI.
Build the project by clicking Ctrl+Shift+B
Back on ucMainGame, drag an instance of ucPlayerUp into cnvTableInner.
Name the control ucPlayerUp1 , and set the following properties:

Adding a 3D Look

Let's give our table a bit of a 3D look by adding a Perspective transform so the table appears to go off into the distance.

Create a new StoryBoard named sbRotateTable.
Select the cnvTable Canvas element.
Advance the timeline ahead one second.
In the Properties Panel, under Projection, set the X value to -40.
Your artboard should now look something like this:
Close the Storyboard to end recording.
We want to rotate the table after the PhysicsController is initialized so the Physics Helper can determine the boundaries of the physics objects properly. Start by adding in some Using statements at the top of ucMainGame.xaml.cs:
This code is snippet “ucMainGame Imports” inside snippets.txt.
```
using System.Collections.Generic;
using Spritehand.FarseerHelper;
using FarseerGames.FarseerPhysics.Mathematics;
using System.ComponentModel;
```

Next, let's add in some class-level declarations, which will store the physics controller, list of pucks, and some variables used to track shooting and scoring:
This code is snippet “ucMainGame Declarations” inside snippets.txt.

PhysicsControllerMain _physicsController;
List _pucks = new List();
List _redPucks = new List();
Point _ptStartShot;
bool _draggingPuck;
int _draggingStartTick;

int _currentPuckToShoot = 0;
int _currentPuckShot = -1;
int _gameOverScore = 15;

In the ucMainGame() constructor, add some code to set the MaxFrameRate to 30 (Windows Phone will be limited to 30 FPS) and wire up the Loaded event handler.
This code is snippet “ucMainGame Constructor” inside snippets.txt.
```
this.Loaded += new RoutedEventHandler(ucMainGame_Loaded);
Application.Current.Host.Settings.MaxFrameRate = 30;
```

Implement the ucMainGame_Loaded event handler, which gets a reference to the Physics Controller and wires up our event handlers.
This code is snippet “ucMainGame Loaded” inside snippets.txt.

void ucMainGame_Loaded(object sender, RoutedEventArgs e)
{
    if (DesignerProperties.GetIsInDesignMode(this))
        return;

    _physicsController = 
        cnvTable.GetValue(
            PhysicsControllerMain.PhysicsControllerProperty
        ) as PhysicsControllerMain;
    _physicsController.Initialized += _physicsController_Initialized;
    _physicsController.Collision += _physicsController_Collision;
    _physicsController.TimerLoop += _physicsController_TimerLoop;
}

Next, we'll add in the event handlers that we just wired up in the loaded event. Note that the Initialized event starts the Rotate Table StoryBoard.
This code is “ucMainGame Event Handlers” inside snippets.txt.

void _physicsController_Initialized(object source)
{
    sbRotateTable.Begin();
}

void _physicsController_Collision(string sprite1, string sprite2)
{ }

void _physicsController_TimerLoop(object source)
{ }

Run the Project by clicking F5. Note the 3D look and try manipulating the pucks with the mouse.

Controlling the Pucks

Next, we'll add logic to control the player's turn and control and along with score. Note that, when we implement the Windows Phone version in a bit, we can take advantage of Multitouch Manipulation events. But since these events are not available in the Web version of Silverlight 3, we'll use a simple mouse input mechanism.

Let's turn off the default mouse manipulation. Select the PhysicsControllerBehavior just under the cnvTable Canvas and set the MousePickEnabled property to false.
We need to get references to our Pucks, which the Physics Helper has translated into PhysicsSprite objects. A Physics Sprite contains the XAML UI for the Physics Object, plus the Physics Engine attributes for the underlying physics objects–including boundary shape, mass, velocity, etc.
This code is “ucMainGame Initialized” inside snippets.txt.
Now we need to handle the Mouse events on the pucks in order to control the player's shot. When the player clicks the mouse down on a puck, we track the position along with time that they clicked. When the player moves the mouse, we update the puck position and also check if the player paused or moved backwards. We do this in case the player is just adjusting the puck position and not yet sliding the puck for a shot. Finally, in the Mouse up event, we release the puck in the specified direction and apply an appropriate amount of force to it. Copy in the snippet “Puck Mouse Control” from snippets.txt. Code is not shown here for brevity.

When the Physics Helper Library does its magic, it translates existing UI Elements into PhysicsSprite objects. So what if we want to get at the original controls, perhaps to execute a StoryBoard that we defined on them? We can do this by using the FindName method to get the original user control instance. So, add the code below, which we'll use to get a reference to the Puck Storyboard “sbLostPuck”.

ucPuck GetPuckControl(string spriteName)
{
    ucPuck puck;
    var parent = PhysicsControllerMain.ParentCanvas;
    switch (spriteName)
    {
        case "Puck":
            puck = parent.FindName("bluePuck1") 
                    as ucPuck;
            break;
        case "Puck_1":
            puck = parent.FindName("bluePuck2") 
                    as ucPuck;
            break;
        case "Puck_2":
            puck = parent.FindName("bluePuck3") 
                    as ucPuck;
            break;
        case "Puck_3":
            puck = parent.FindName("redPuck1") 
                    as ucPuck;
            break;
        case "Puck_4":
            puck = parent.FindName("redPuck2") 
                    as ucPuck;
            break;
        default:
            puck = parent.FindName("redPuck3") 
                    as ucPuck;
            break;
    }

    return puck;
}

Finally, to score, we'll determine if the puck lies between any of the Rectangles in the end zone.
This code is the snippet “Get Points for Puck” in snippets.txt.

int GetPointsForPuck(PhysicsSprite puck)
{
    int score = 0;
    Vector2 puckPos = puck.BodyObject.Position;

    double left = Convert.ToDouble(
        rectPoints3.GetValue(Canvas.LeftProperty));
    double top = Convert.ToDouble(
        rectPoints3.GetValue(Canvas.TopProperty));

    if ((puckPos.X > left && puckPos.X < left + rectPoints3.Width) 
     && (puckPos.Y > top && puckPos.Y < top + rectPoints3.Height))
        score = 3;

    left = Convert.ToDouble(rectPoints2.GetValue(Canvas.LeftProperty));
    top = Convert.ToDouble(rectPoints2.GetValue(Canvas.TopProperty));
    if ((puckPos.X > left && puckPos.X < left + rectPoints2.Width) 
     && (puckPos.Y > top && puckPos.Y < top + rectPoints2.Height))
        score = 2;

    left = Convert.ToDouble(rectPoints1.GetValue(Canvas.LeftProperty));
    top = Convert.ToDouble(rectPoints1.GetValue(Canvas.TopProperty));
    if ((puckPos.X > left && puckPos.X < left + rectPoints1.Width) 
     && (puckPos.Y > top && puckPos.Y < top + rectPoints1.Height))
        score = 1;

    return score;
}

Implement the “Game Loop”

Most games are controlled by a “Game Loop” that executes many times per second. Within this Game Loop, we can check for collisions, perform enemy AI, and scoring. The PhysicsController fires an event called “TimerLoop” that we can use for this purpose.

Replace the existing TimerLoop and Collision events with the following code snippet, which checks to see if any pucks have been shot and if we are ready for the next shot. Do this by seeing if the puck velocity has slowed down to nearly a stop…
This code is snippet “Timer Loop” inside snippets.txt.

void _physicsController_TimerLoop(object source)
{
    // check to see if the current shot is completed
    if (_currentPuckShot >= 0)
    {
    var puck = _pucks[_currentPuckShot].BodyObject;

        if (puck.Enabled == false ||
          Math.Abs(puck.LinearVelocity.X) < 3                                   
          && 
          Math.Abs(puck.LinearVelocity.Y) < 3)
        {
            // did the shot clear the end zone?
            if (!PointWithinBounds(
              new Point(puck.Position.X, 
                       puck.Position.Y)))
            {
                _currentPuckShot = -1;
                _currentPuckToShoot++;
                SetupThePuck();
            }
        }
    }
}

void _physicsController_Collision(string sprite1, string sprite2)
{
    // check for puck off sides
    if (sprite1.StartsWith("rectSensor") && sprite2.StartsWith("Puck"))
    {
        ucPuck puck = GetPuckControl(sprite2);

        _physicsController.PhysicsObjects[sprite2].
            BodyObject.Enabled = false;

        puck.sbLostPuck.Begin();
    }
}

Targeting Windows Phone

So far, we've created a Silverlight 3, web-based version of a shuffleboard game. Next we'll quickly port this to Windows Phone, taking advantage of some of the platform's capabilities, such as multitouch. We'll do this by using linked files that point back to our existing Silverlight 3 project.

Right-click the Silverlight solution in Blend and select Add New Project.
Select Windows Phone Application and enter ShuffleBoard.WindowsPhone for the name.
Delete the TitleGrid and ContentGrid elements from the Objects and Timeline Panel.
Convert LayoutRoot to a Canvas by right-clicking it and selecting Change Layout Type/Canvas.
Right-click the project and select Add Reference. Browse to the following assemblies located in the sample download (these are the WindowsPhone versions of the Physics Helper and Farseer):

\ShuffleBoard.WindowsPhone\Bin\Debug\FarseerPhysics.dll
\ShuffleBoard.WindowsPhone\Bin\Debug\Spritehand.FarseerHelper.dll
\ShuffleBoard.WindowsPhone\Bin\Debug\Spritehand.PhysicsBehaviors.dll
We need references to the assemblies used for Behaviors. An easy way to do this is to add a Behavior to an element and then delete it. From the Assets panel, drag a PhysicsControllerBehavior onto LayoutRoot and then delete it. Note that this adds a reference to System.Windows.Interactivity to the project.
Next, we'll add in the linked files from the existing Silverlight 3 project. Right-click the ShuffleBoard.WindowsPhone project and select Add/Link to Existing Item. Select the following files:
1. ucMainGame.xaml
2. ucMainGame.xaml.cs
3. ucPlayerUp.xaml
4. ucPlayerUp.xaml.cs
5. ucPuck.xaml
6. ucPuck.xaml.cs
7. ucScoreBoard.xaml
8. ucScoreBoard.xaml.cs
8. Add a new folder to the project named images.
9. Right-click the images folder and select Link to Existing item, then navigate to the following image in the sample folder:
\ShuffleBoard\images\shuffleboardTable.jpg
Build the project by clicking Ctrl+Shift+B.
From the Assets Panel, under Controls/All, find ucMainGame and drag an instance onto LayoutRoot. Set the Left and Top properties to 0.
Right-click the WindowsPhone project and select “Startup” to set this as the startup project.
Run the project by clicking F5.

Windows Phone Touch Input

So far, we've used a simple mouse-event-based input mechanism for shooting the pucks. But on the Windows Phone 7 platform, we can do better than that by using Multitouch events. These events include an inertia property that will make our puck physics more realistic.

Since we are going to need to support two different platforms now (Web and Windows Phone), we need to introduce a Conditional Compilation Symbol so that the compiler can differentiate between each platform's code.
Open the solution inside Visual Studio by right-clicking it in the Projects Panel and then select “Edit in Visual Studio”
Right-click the ShuffleBoard.WindowsPhone Project and select Properties.
4. Add in a new compilation symbol for WINDOWS_PHONE.
NOTE: Future releases of WP7 Tools will likely define a default compilation symbol, so you may already see one defined here.

Now we'll add in the Windows Phone-specific events for manipulation using touch. Open ucMainGame.xaml.cs and find the _physicsController_Initialized event handler. Replace the events for the mouse events with the following, which will wire up either the manipulation events (for Windows Phone) or the mouse events (for Silverlight Web):
This code is snippet “Manipulation Events” inside snippets.txt.

#if WINDOWS_PHONE
    puck.ManipulationStarted += 
      new EventHandler
      (puck_ManipulationStarted);
    puck.ManipulationCompleted += 
      new EventHandler
      (puck_ManipulationCompleted);
    puck.ManipulationDelta += 
      new EventHandler
      (puck_ManipulationDelta);
#else
    puck.MouseLeftButtonDown += 
      new MouseButtonEventHandler(puck_MouseLeftButtonDown);
    puck.MouseMove += 
      new MouseEventHandler(puck_MouseMove);
    puck.MouseLeftButtonUp += 
      new MouseButtonEventHandler(puck_MouseLeftButtonUp);
#endif

Now we just need to implement those event handlers for manipulation. The main consideration here is that the ManipulationCompleted event passes in a FinalVelocity.LinearVelocity parameter, which we can use to create realistic physics from the user's shot:
Add the code snippet “Manipulation Event Handlers” from snippets.txt
```
Vector2 force = new Vector2(
    (float)(e.FinalVelocities.LinearVelocity.X * scalePower), 
    (float)(e.FinalVelocities.LinearVelocity.Y * scalePower));
```
Run the project by clicking F5, and try sliding some pucks.

Performance

Depending on your configuration, you may experience poor performance for the shuffleboard game when running it in the Windows Phone emulator. There are different reasons for this, including video card drivers and virtualization settings. Please refer to this blog post, which details these performance considerations.

1. Inside the ucMainGame constructor, let's turn on the Frame Rate counter so we can see our current frame rate. This code is snippet “Frame Rate Counter” inside snippets.txt
```
Application.Current.Host.Settings.EnableFrameRateCounter = true;
```
Run the project by hitting F5, and note the current frame rate.
NOTE: Your development configuration may prevent you from having an adequate framerate in the Windows Phone Emulator! Please refer to this blog post for tips on emulator performance.

One performance tweak we can easily make is taking advantage of hardware acceleration. Silverlight enables us to use the video card to render elements, which can greatly increase performance. To do this, we add a Cachemode=”BitmapCache” attribute to any elements we want to hardware accelerate.

Open ucPuck.xaml and note that there is a CacheMode attribute on the Puck Canvas.

Open ucMainGame.xaml and add a CacheMode attribute to the cnvTable Canvas element.

Run the project and note the frame rate change.

Adding Sound

Sound is one area where Windows Phone and Web Silverlight differ a bit. Under Silverlight for Web, we can use the MediaElement class to play back WMA and MP3 format audio. Multiple instances of the MediaElement class can be played simultaneously, and the sound output will be automatically mixed.

However, on Windows Phone we have access to the XNA game libraries, including sound support. This is a much more efficient way to add mixed sound to a Silverlight game on Windows Phone, but it only supports WAV format sound files.

The Physics Helper Library has a useful class wrapper for sounds, which we'll use to play a “hit puck” sound on both platforms.

In the ShuffleBoard (Silverlight Web) project, right-click and select Add Folder.
Name the folder sounds.
Add an existing item to the sounds folder from this location:
\ShuffleBoard\ShuffleBoard\sounds\hitPuck.wma
Set the Build Action of the file to Content.
In the ShuffleBoard.WindowsPhone project, right-click and select Add Folder.
Name the folder sounds.
Add an existing item to the sounds folder from this location:
\ShuffleBoard.WindowsPhone\sounds\hitPuck.wav
Set the Build Action of the file to Content.
Inside ucMainGame.xaml.cs, add a class-level declaration for a SoundMain class (this is defined in the Physics Helper Library):
This snippet is “Declare the Sound” inside snippets.txt.
```
SoundMain _soundPuckHit;
```

10. Inside the ucMainGame_Loaded event, add code to declare the two sounds. Note that Windows Phone uses a WAV format sound without a “/” prefix for the root.
This snippet is “Declare the Sound” inside snippets.txt.

#if WINDOWS_PHONE
    _soundPuckHit = new SoundMain(this.LayoutRoot,
                   "sounds/hitPuck.wav", 2, 0);
#else
    _soundPuckHit = new SoundMain(this.LayoutRoot, 
                   "/sounds/hitPuck.wma", 2, 0);
#endif

Inside the _physicscontroller_collision event, add code to play the sound if a puck-to-puck collision occurs and the velocity is > 10:
This snippet is “Play the Sound” inside snippets.txt.

// check for puck to puck collsion
if (sprite1.StartsWith("Puck") && sprite2.StartsWith("Puck"))
{
    PhysicsSprite sprite = _physicsController.PhysicsObjects[sprite1];

    if (Math.Abs(sprite.BodyObject.LinearVelocity.X) > 10
        || Math.Abs(sprite.BodyObject.LinearVelocity.Y) > 10)
    {
        _soundPuckHit.Play();
    }
}

Run the project and try hitting pucks together.

Summary

Since the 1.1 Alpha release, Silverlight has offered a compelling casual game development environment. With the addition of Windows Phone, along with demos of Silverlight running on other embedded devices, you can bet the future of Silverlight for gaming is bright.

Here are a few resources for more information:

Andy's blog
http://www.andybeaulieu.com

Andy's Silverlight Demos
http://www.spritehand.com

The Physics Helper Library
http://physicshelper.codeplex.com

Great free resource for learning Expression Blend and Silverlight
http://www.microsoft.com/design/toolbox/

Victor Gaudioso talks Silverlight 4 with Murray Gordon at MIX10

John O'Donnell — Tue, 11 May 2010 15:51:00 GMT

Victor Gaudioso talks to Murray Gordon from Microsoft about building compelling user interfaces using Silverlight 4.

Enjoy the show!

John O'Donnell Microsoft Dynamics ISV Architect Evangelist
Microsoft Corporation
http://blogs.msdn.com/jodonnell
http://blogs.msdn.com/usisvde
http://www.twitter.com/jodonnel

MSDN Radio: Expression, Poetry, and the Windows Phone

MSDN Online Media — Mon, 26 Apr 2010 23:09:00 GMT

Modern User Interface design and development has been significantly impacted by the features and capabilities of Microsoft XAML. Fortunately the tools team has been active in providing great solutions for harnessing the power of great design with the release of the Microsoft Expression suite. We talk with Christian Schormann from the Microsoft Expression team about music, poetry, and some great design patterns.

MSDN Radio is a weekly Developer talk-show that helps answer your questions about the latest Microsoft news, solutions, and technologies. We dive into the challenges of deciphering today’s technology stack. Visit www.MSDNRadio.com to register for upcoming shows.

Host and Guest: Mike Benkovich, Senior Developer Evangelist, and Christian Schormann, Program Manager, Microsoft Corporation

Mike Benkovich delivers technical presentations around the U.S. as a developer tools evangelist on the MSDN team at Microsoft. He has worked in a variety of professional roles, including architect, project manager, developer, and technical writer.

You've seen him at MIX, PDC, and other conferences around the world. Christian's a toolmaker out of passion—the right tools give wings to our imagination. When he's not creating great music he's working at Microsoft on Expression Blend. Last year he introduced us to Sketchflow, we can't wait to see what's next!

XAML Playground - A Designer built in Silverlight using Gestalt

Adam Kinney — Fri, 24 Jul 2009 17:00:00 GMT

Karsten Januszewski has posted a write up on his XAML Playground project, a design surface written in Silverlight using Gestalt. The source code is available so you can see a glimpse into the work it takes to create a design tool.

A new version of the Fireworks to XAML Panel is available

Adam Kinney — Fri, 24 Jul 2009 16:00:00 GMT

Grant Hinkson has a published an updated Fireworks to XAML panel which allows to output XAML from your Fireworks designs. The new version includes a new CS4 skin and additional features resulting in much cleaner XAML.

Saving Silverlight XAML to a JPEG using WritableBitmap

Adam Kinney — Thu, 23 Jul 2009 00:14:00 GMT

Blueboxes walks us through the process of Rendering XAML to a JPEG using Silverlight 3 using the WritableBitmap class. Very useful when you wish to "print" the state of an application or something a user has created.

Expression Studio 3 is now available!

Adam Kinney — Wed, 22 Jul 2009 17:32:00 GMT

Expression Studio 3 includes four professional design tools with many worthy features worth checking out. Below I will pick just one new feature for each tool included.

Expression Web 3 - SuperPreview, multi-browser visual debugging

Expression Blend 3 + SketchFlow - SketchFlow along with Silverlight 3 support

Expression Design 3 - Improved Photoshop Import

Expression Encoder 3 - new Screen capture functionality

An Expression Studio 3 Trial Edition is available for download right now.

Gestalt - Nishant Kothary and Joshua Allen

Robert Hess — Tue, 21 Jul 2009 23:55:00 GMT

Not all Microsoft technologies and projects come out of large development teams with huge budgets and equally huge objectives. There are in fact a variety of very useful technologies which are fairly low-key and the result of small development efforts.

"Gestalt" is a technology that allows web developers to easily include ruby, python, and even Silverlight code directly within the html of their websites. No fancy tools are necessary (or available at the moment). It also work cross platform and cross browser. The end result is rich and powerful web applications which are exceedingly easy to develop and deploy.

In this episode I'll be talking with Nishant Kotharny and Joshua Allen to find out exactly why Gestalt is so cool, and after seeing their demo, I dare you not to want to check it out yourself.

You can download Gestalt and kick the tires here:

Gestalt - A MIX Online Lab

XAML in .NET 4

Adam Kinney — Thu, 21 May 2009 14:00:00 GMT

This isn't your Grandpa's XAML!

XAML in .NET 4 is much more than just a Reader and Writer and also is now being consumed by many technologies including Silverlight, WCF, WF and of course WPF. Rob Relyea and Mike Shim came by to talk about what's new in XAML for 2009 and beyond.

For instructions on how to download and install Visual Studio 2010 Beta 1 check out this episode of 10-4.

Druckbetankung - Die Show :: Silverlight Teil IV

Jan Schenk — Fri, 08 May 2009 06:58:00 GMT

Der vierte Teil unserer Silverlight-Serie "Druckbetankung - Die Show" dreht sich um das Aussengerüst einer Silverlight Applikation, und wie dieses dazu gebracht werden mit der eingebetteten Anwendung zu kommunizieren.
Oliver Scheer und ich sprechen über die Parameterübergabe aus der HTML-Seite in Silverlight. Da gibt es einiges zu beachten und viel zu entdecken. So lässt sich am Beispiel unseres RSS-Readers die initial verwendete RSS-Url über die HTML-Seite übergeben, und abhängig davon weitere Elemente im XAML-Code ein- oder ausblenden.

SharePoint for Developers Part 3 - Expression Blend and Silverlight

Kirk Evans — Tue, 28 Apr 2009 18:42:00 GMT

SharePoint developers will likely use a variety of tools to build solutions. In this screencast, Kirk Evans demonstrates how to use Expression Blend 2 to create a Silverlight application from scratch, and how to extend its functionality using Visual Studio 2008. We won't be looking specifically at SharePoint in this screencast, but we will use this application in future screencasts to integrate with SharePoint.

Fireworks to XAML Panel

Adam Kinney — Tue, 31 Mar 2009 22:50:00 GMT

Grant Hinkson, the Director of Experience Design at Infragistics, is a big fan of the creative tool from Adobe called Fireworks. An issue, or some people may say an opportunity, arose 3 years ago when he started to work on WPF projects. How can he use his favorite design tool with this new technology? Resourcefully, he ended up writing his own Panel for Fireworks that solved the problem.

The Fireworks to XAML Panel has since been updated to work with both WPF and Silverlight and is available for free for you to use.

Mike Swanson - XAML Plugin for Adobe Illustrator

Robert Hess — Fri, 27 Mar 2009 13:24:00 GMT

Both of us freshly back from MIX09, Mike Swanson stops in to show us a plug in that he wrote which allows users of Adobe Illustrator to export their designs as XAML for either WPF or Silverlight.

Working Smarter means taking advantage of both the tools and the training that you already know. By using a plugin such as what Mike is illustrating here, it allows Adobe Illustrator users to continue to use their favorite tool while also moving into the world of XAML.

You can download the plug in from Mike's site here:
http://www.mikeswanson.com/xamlexport/

This Week: Martin Woodward, MVP Summit, Web Perf, Show Off, and a VSTS Pep Talk

Dan Fernandez — Sat, 07 Mar 2009 18:45:00 GMT

This week on Channel 9, Dan and Brian are joined by MVP Martin Woodward to discuss this week's news, including:

- Martin talks about the MVP Summit and how hewon the Team System MVP of the year. The prize, a pimp belt
- Phil Haack: ASP.NET MVC RC 2
- Tutorial: How to enable Gzip compression on IIS 6.0 to get ~70% smaller file size
- Viktar Karpach - Getting an "A" Grade with ASP.NET using YSlow and Firebug
- Erik Meijer and Charles Torre interview Anders Hejlsberg on the future of C#
- Michael Kennedy - ubbuzz.com A custom Twitter watcher for .NET developers
- Jamie and Long start the Channel 9 Task Force for bugs and suggestions
- 1 week left for Show Off Contest
- Vincent Rithner - Sobees, A free WPF Social Desktop Aggregator, Beta now available
- Rob Relyea - XAML State of the Union
- Caliburn Application Framework for WPF and Silverlight(via Alvin Ashcraft)
- Tess Ferrandez - 5-part series on building a Silverlight Game
- Live FrameIt SDK - Picasa and Photobucket integration
- Martin's pick of the week: Send a VSTS Pep Talk to your teammates
- Brian's pick of the week: Scott Hanselman's analysis of Quake Live, it isn't a Web game
- Dan's pick of the week: Brian Peek's tip on how to force a 64-bit exe that uses a 32-bit dependencies to load the 32-bit CLR.

Silverlight 2 and the Louis Vuitton Pacific Series

Nigel — Fri, 13 Feb 2009 11:40:00 GMT

It is not everyday that the best sailors on the planet set up shop 150 metres from your work and race each other over a two week period but that is exactly what is happening for me right now.

Check out http://lvps09.com and watch this screencast to learn more . A few things in the end made this application very flexible and extended my experiences with building production code in Silverlight 2. This screencast gets into the nitty gritty details of this project... more details at http://blogs.msdn.com/nigel/archive/2009/02/03/louis-vuitton-pacific-series-2009-auckland-new-zealand-the-silverlight-story.aspx

Custom Slider for Silverlight 2 Media Players available for download

Ben Waggoner — Wed, 26 Nov 2008 01:03:00 GMT

Sorry it's taken so long, but we've now got the Custom Slider for Silverlight 2 Media Players up on MSDN.

Unlike the snippits I included earlier, this is a full project that can be modified. It’s being made available under the Microsoft Public License.

Code Gallery Page
Project Download

Enjoy!

Microsoft .NET Framework: Declarative Programming Using XAML

Adam Kinney — Wed, 29 Oct 2008 16:38:00 GMT

If you're using Windows Presentation Foundation (WPF), Windows Communication Foundation (WCF), or Windows Workflow Foundation (WF), then XAML is your new best friend! Learn how an entire application-from presentation to data to services to workflow--can be authored using simple, declarative XAML notations introduced in the next version of the .NET Framework. Learn about XAML additions like: support for generics, object references, non-default constructors, and more.

Daniel Roth

Daniel Roth has been working on the Windows Communication Foundation and Windows Workflow Foundation for the past four years. He is excited to bring the benefits XAML to the world of webservices and workflows.
Rob Relyea

New Custom Slider for Silverlight 2 media players

Ben Waggoner — Tue, 28 Oct 2008 22:13:00 GMT

My Silverlight teammates Akshay Johar and Andre Michaud have built a new custom slider for use in Silverlight 2 media players.

When you scrub the default slider in a MediaElement today, it generates a whole slew of valueChanged events, resulting in a huge number of seeks per second. This can confuse media playback, particularly when streaming from Windows Media Services, which then gets flooded with many requests a second.

Essentially it detects a “crazy mode” scrub, and quietly ignores it while the “crazy mode” is in place. Once out of this mode, it happily sends and receives a successful seek.

So, the player only fires ValueChanged on mouse up (on the slider thumb or the slider tracker), or the final seek request of a cluster that comes in at once.

It’s also uses Tim Heuer’s absolute value slider.

Now, let me try this new Windows Live Writer plug-in for Insert Code Snippet for the C# code.

(EDIT) A sample project is also now available for download.

 1: using System;

 2: using System.Net;

 3: using System.Windows;

 4: using System.Windows.Controls;

 5: using System.Windows.Documents;

 6: using System.Windows.Ink;

 7: using System.Windows.Input;

 8: using System.Windows.Media;

 9: using System.Windows.Media.Animation;

 10: using System.Windows.Shapes;

 11: using System.Windows.Controls.Primitives;

 12: using System.Windows.Threading;

13:

 14: namespace VirtualizedSlider

 15: {

 16:     public class CustomSlider : Slider

 17:     {

 18:         public Thumb horizontalThumb;

 19:         private FrameworkElement horizontalLeftTrack;

 20:         private FrameworkElement horizontalRightTrack;

 21:         private double oldValue = 0, newValue = 0, prevNewValue = 0;

 22:         public event RoutedPropertyChangedEventHandler<double> MyValueChanged;

 23:         public event RoutedPropertyChangedEventHandler<double> MyValueChangedInDrag;

24:

 25:         private DispatcherTimer dragtimer = new DispatcherTimer();

 26:         private double dragTimeElapsed = 0;

 27:         private const short DragWaitThreshold = 200, DragWaitInterval = 100;

 28:         public Rectangle progressRect = null;

 29:         private bool dragSeekJustFired = false;

30:

 31:         public CustomSlider()

 32:         {

 33:             this.ValueChanged += new RoutedPropertyChangedEventHandler<double>(CustomSlider_ValueChanged);

 34:             dragtimer.Interval = new TimeSpan(0, 0, 0, 0, DragWaitInterval);

 35:             dragtimer.Tick += new EventHandler(dragtimer_Tick);

36:

 37:         }

38:

 39:         void dragtimer_Tick(object sender, EventArgs e)

 40:         {

 41:             dragTimeElapsed += DragWaitInterval;

 42:             if (dragTimeElapsed >= DragWaitThreshold)

 43:             {

 44:                 RoutedPropertyChangedEventHandler<double> handler = MyValueChangedInDrag;

 45:                 if ((handler != null) && (newValue != prevNewValue))

 46:                 {

 47:                     handler(this, new RoutedPropertyChangedEventArgs<double>(oldValue, newValue));

 48:                     dragSeekJustFired = true;

 49:                     prevNewValue = newValue;

 50:                 }

 51:                 dragTimeElapsed = 0;

 52:             }

 53:         }

54:

 55:         void CustomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

 56:         {

 57:             oldValue = e.OldValue;

 58:             newValue = e.NewValue;

 59:             if (horizontalThumb.IsDragging)

 60:             {

 61:                 dragTimeElapsed = 0;

 62:                 dragtimer.Stop();

 63:                 dragtimer.Start();

 64:                 dragSeekJustFired = false;

 65:             }

 66:         }

67:

 68:         public override void OnApplyTemplate()

 69:         {

 70:             base.OnApplyTemplate();

71:

 72:             horizontalThumb = GetTemplateChild("HorizontalThumb") as Thumb;

73:

 74:             horizontalLeftTrack = GetTemplateChild("LeftTrack") as FrameworkElement;

 75:             horizontalRightTrack = GetTemplateChild("RightTrack") as FrameworkElement;

 76:             progressRect = GetTemplateChild("progressRect") as Rectangle;

77:

 78:             if (horizontalLeftTrack != null) horizontalLeftTrack.MouseLeftButtonDown += new MouseButtonEventHandler(OnMoveThumbToMouse);

 79:             if (horizontalRightTrack != null) horizontalRightTrack.MouseLeftButtonDown += new MouseButtonEventHandler(OnMoveThumbToMouse);

80:

 81:             horizontalThumb.DragCompleted += new DragCompletedEventHandler(DragCompleted);

 82:             progressRect.Width = this.Width;

 83:         }

84:

 85:         private void OnMoveThumbToMouse(object sender, MouseButtonEventArgs e)

 86:         {

 87:             e.Handled = true;

 88:             Point p = e.GetPosition(this);

89:

 90:             if (this.Orientation == Orientation.Horizontal)

 91:             {

 92:                 Value = (p.X - (horizontalThumb.ActualWidth / 2)) / (ActualWidth - horizontalThumb.ActualWidth) * Maximum;

 93:             }

 94:             RoutedPropertyChangedEventHandler<double> handler = MyValueChanged;

 95:             if (handler != null)

 96:             {

 97:                 handler(this, new RoutedPropertyChangedEventArgs<double>(oldValue, Value));

 98:             }

 99:         }

 100:

 101:         private void DragCompleted(object sender, DragCompletedEventArgs e)

 102:         {

 103:             dragtimer.Stop();

 104:             dragTimeElapsed = 0;

 105:             RoutedPropertyChangedEventHandler<double> handler = MyValueChanged;

 106:             if ((handler != null) && (!dragSeekJustFired))

 107:             {

 108:                 handler(this, new RoutedPropertyChangedEventArgs<double>(oldValue, this.Value));

 109:             }

 110:         }

 111:     }

 112: }

And here’s the XAML from the progressSliderStyle, demonstrating how the custom slider knows about mouse clicks on the track (the “LeftTrack” and “RightTrack” rectangles inserted in the template handle this):

 1: "Template">

2:

 3:                      "Slider">

 4:                          "Root">

5:

 6:                                  "RepeatButtonTemplate">

 7:                                      "Root" Opacity="0" Background="Transparent"/>

8:

9:

10:

 11:                                  "CommonStates">

 12:                                      "Normal"/>

 13:                                      "MouseOver"/>

 14:                                      "Disabled">

15:

 16:                                              "Root" Storyboard.TargetProperty="(UIElement.Opacity)" To="0.5"/>

17:

18:

19:

20:

21:

22:

 23:                              "HorizontalTemplate" Background="{TemplateBinding Background}">

24:

 25:                                      "Auto"/>

 26:                                      "Auto"/>

 27:                                      "*"/>

28:

29:

30:

 31:                                  "progressRect" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Fill="Red" Grid.Column="0" Grid.ColumnSpan="3" Height="3" Width="5" RadiusX="1" RadiusY="1" Margin="5,0,5,0" Canvas.ZIndex="1" Visibility="Collapsed" HorizontalAlignment="Left" />

 32:                                  "#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Fill="#FFE6EFF7" Grid.Column="0" Grid.ColumnSpan="3" Height="3" RadiusX="1" RadiusY="1" Margin="5,0,5,0"  Canvas.ZIndex="0" />

33:

34:

 35:                                  "HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="0" Canvas.ZIndex="1"/>

 36:                                  "LeftTrack" Grid.Column="0" Fill="#00FFFFFF" Cursor="Hand" Canvas.ZIndex="1"/>

 37:                                  "18" x:Name="HorizontalThumb" Width="11" Grid.Column="1" IsTabStop="True" Canvas.ZIndex="1"/>

 38:                                  "HorizontalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="2" Canvas.ZIndex="1"/>

 39:                                  "RightTrack" Grid.Column="2" Fill="#00FFFFFF" Cursor="Hand" Canvas.ZIndex="1"/>

40:

41:

42:

43:

44: