Walker Fenton and Brian Reischl of Sepial Labs talk with ISV Architect Evangelist Bruce Kyle about why they chose Windows Azure to connect to the various phones. Brian explains how they used WCF using REST on Windows Azure. They do a demo of each phone using Azure to process messages across phone platforms using notifications. They show how you can sharie photos, videos, and locations.

For more information about the technologies used by Sepia Labs, see:

• Azure Table Encryption via Attribute
• REST on WCF
• Windows Azure Toolkit for Windows Phone

About Glassboard

Glassboard is an app for sharing privately with groups (or 'boards' as we call them). With Glassboard you can message a group of people quickly & easily (looks like a text on your phone but it isn't!), share photos and videos, and even show your location when appropriate. Everything within a board is _completely_ private. Only the board chair can invite you to a board, and there is no way for someone not invited to search or discover a board. It's your own private corner of the Internet. 

Sepia Labs is a spinoff from NewsGator, from SharePoint partner of Social Sites.

Recorded live as part of Silverlight Firestarter 2010 in Redmond, WA on Dec 2nd 2010

Download all sessions source code and slides

Silverlight Firestarter Agenda
- Silverlight Firestarter 2010 Keynote with Scott Guthrie
- Session 1 - Data Binding Strategies with Silverlight and WP7 by Jesse Liberty
- Session 2 - Building Compelling Apps with WCF using REST and LINQ by Yavor Georgiev
- Session 3 - Building Feature Rich Business Apps Today with RIA Services by Dan Wahlin
- Session 4 - MVVM: Why and How? Tips and Patterns using MVVM and Service Patterns with Silverlight and WP7 by John Papa
- Session 5 - Tips and Tricks for a Great Installation Experience by Tim Heuer
- Session 6 - Tune Your Application: Profiling and Performance Tips by Mike Cook & Jossef Goldberg
- Session 7 - Performance Tips for Silverlight Windows Phone 7 by Jaime Rodriguez
- Session 8 - The Roadmap for Media with Silverlight

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

<tr>
    <td>CURRENCY</td>
    <td style=”text-align:right”><a SOMETHING>VALUE_IN_USD</a></td>
    <td style=”text-align:right”><a SOMETHING>VALUE_PER_USD</a></td>
</tr>

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

C#

private static Regex _resultRegex = 
    new Regex("<tr><td>(?<currency>[^<>]+)</td><td style=""text-align:right"">.*?>(?<value>[0-9.,]+)</a></td></tr>");

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:

C#

using System;public interface ICurrencyExchangeService
{
    ICurrency[] Currencies { get; }    ICurrency BaseCurrency { get; }    void ExchangeCurrency(double amount, ICurrency fromCurrency, ICurrency toCurrency, Action<ICurrencyExchangeResult> callback);    void UpdateCachedExchangeRates(Action<CachedExchangeRatesUpdateResult> 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:

C#

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(@"<tr><td>(?<currency>[^<>]+)</td><td style=""text-align:right"">.*?>(?<value>[0-9.,]+)</a></td></tr>");    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<ICurrencyExchangeResult> 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<ICurrencyExchangeResult> 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<CachedExchangeRatesUpdateResult> 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<Match>())
                    {
                        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):

C#

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

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,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>
        <TextBlock Margin="25, 0, 0, 0" Style="{StaticResource PhoneTextTitle1Style}" Text="{Binding ExchangedAmount}"></TextBlock>
        <TextBlock Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding ExchangedTimeStamp}" TextWrapping="Wrap" TextAlignment="Right"></TextBlock>
    </StackPanel>
</StackPanel>

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

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Images/appbar.money.usd.png" Text="Exchange" Click="ExchangeIconButton_Click" />
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="update exchange rates" Click="UpdateExchangeRatesMenuItem_Click" />
            <shell:ApplicationBarMenuItem Text="about" Click="AboutMenuItem_Click" />
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

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

C#

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!

About Roberto Leiton

About Tim Huckaby

Roberto Leiton and Tim Huckaby recommend you check out

• ArtinSoft Home Page
• ArtinSoft free 10,000 lines of code license for MSDN readers offer
• ArtinSoft’s Visual Basic Upgrade Companion (VBUC)
• ArtinSoft’s Visual Basic 6.0 and ASP Assessment Tool
• Windows Azure
• Microsoft .NET Framework
• Microsoft .NET Framework 4 Download
• Silverlight
• Microsoft Silverlight 4 download
• Silverlight Team Blog
• Silverlight How Do I? Videos

• Creating an Azure Cloud Service
• Linking WCF RIA Services to Azure
• Deciding on the appropriate Azure trust settings
• Publishing the package to Azure

Relevant links:

• John's blog and on Twitter (@john_papa)
• Saurabh on Twitter (@SaurabhPant)
• More about RIA Services 
• RIA Services Forums

Follow us on Twitter @SilverlightTV or on the web at http://silverlight.tv

About Shawn Wildermuth

About Tim Huckaby

Shawn Wildermuth and Tim Huckaby recommend you check out

• Shawn Wildermuth, Microsoft MVP (C#), Author, Trainer and Speaker
• Agilitrain
• Silverlight
• The Silverlight Tour is coming to a city near you!
• Microsoft® Silverlight™ 4 SDK
• Silverlight Team Blog
• Silverlight How Do I? Videos
• Download the Windows Phone 7 developer tools
• Register for Marketplace and upload your app
• App Hub Windows Phone 7 Developer Portal
• Learn more about Windows Phone 7 development with "How Do I" videos

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.

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

<phoneCtrls:Pivot Name="PivotCtrl" Title="PicFx" >   <phoneCtrls:PivotItem Name="PivotItemPic" Header="Pic" >
      <Grid Height="510" VerticalAlignment="Top" >
         <Image Name="Viewport" Stretch="Uniform" />
         <ProgressBar Name="ProgessBar" 
             IsIndeterminate="True" 
             Height="20" Width="200" 
                     Visibility="Collapsed" 
                     HorizontalAlignment="Center" 
                     VerticalAlignment="Center" 
                     />
      </Grid>
   </phoneCtrls:PivotItem>   <phoneCtrls:PivotItem  Name="PivotItemFx" Header="Effects" >
      <phoneCtrls:PivotItem.Resources>
         <vm:EffectItems x:Key="effects"/>
      </phoneCtrls:PivotItem.Resources>
      <ListBox Name="ListBoxEffects" SelectionMode="Single" 
                              ItemsSource="{StaticResource effects}" 
                              SelectionChanged="ListBox_SelectionChanged" >
         <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
               <controlsToolkit:WrapPanel Width="480" />
            </ItemsPanelTemplate>
         </ListBox.ItemsPanel>
         <ListBox.ItemTemplate>
           <DataTemplate>
              <StackPanel Orientation="Vertical" Margin="14" >
                <Image Source="{Binding Thumbnail}" Width="128" Height="128" />
                <TextBlock Text="{Binding Name}" 
                          FontSize="{StaticResource PhoneFontSizeNormal}" 
                          VerticalAlignment="Center" 
                           HorizontalAlignment="Center" />
               </StackPanel>
            </DataTemplate>
         </ListBox.ItemTemplate>
      </ListBox>
   </phoneCtrls:PivotItem>
         
</phoneCtrls:PivotControl>

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:

C#

public class EffectItems : ObservableCollection<EffectItem>
{
   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

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True">
        <shell:ApplicationBarIconButton Text="Choose" 
            IconUri="/data/appbar/appbar.folder.rest.png" 
            Click="ApplicationBarIconFolderButton_Click"/>
        <shell:ApplicationBarIconButton Text="Take" 
            IconUri="/data/appbar/appbar.feature.camera.rest.png" 
            Click="ApplicationBarIconCameraButton_Click"/>
        <shell:ApplicationBarIconButton Text="Save" 
            IconUri="/data/appbar/appbar.save.rest.png" 
            Click="ApplicationBarIconSaveButton_Click"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="About" 
               Click="ApplicationBarMenuItemAbout_Click" />
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

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:

C#

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.

C#

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.

C#

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.

C#

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:

C#

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.

C#

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<TouchPoint> 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:

C#

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.

C#

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.

About Todd Anglin

Todd Anglin is Chief Evangelist for Telerik, a provider of development tools and user interface components for .NET. Before joining Telerik, he worked for a large Fortune 200 financial services company IT shop where he learned the way of the "Enterprise" - big budgets, big projects, legacy systems, and incessant measurement. He now leverages this Enterprise experience to help Telerik make components that make the lives of all developers as easy as possible. Todd is an active author and speaker in the .NET community, focusing on web development technologies, a Microsoft MVP, founder and President of the North Houston .NET Users Group, and an O'Reilly author.

About Zain Naboulsi

For over 15 years Zain has been working with the latest Microsoft technologies. He's been a consultant and trainer since 1995. He currently creates the Visual Studio Tips and Tricks series. Also, he created Online Community Evangelism; which is an effort to build communities in virtual places like LinkedIn, Facebook, and elsewhere. He is not only a proponent of the community aspect of online environments but also is a supporter of the myriad business applications that these new mediums offer.
Zain's efforts have been featured by eWeek, Redmond Developer News, and many others. He has been interviewed by Forrester Research, Gartner, and the Science Channel for his work. He is a frequent speaker at events in LinkedIn, Facebook, and other online venues. Zain also lectures world-wide on a variety of developer topics.

Todd Anglin and Zain Naboulsi recommend you check out

For this episode, I’ve invited Eric Schmidt to talk to us about the brand new “viewer” he’s been working on for PDC10 which is being specifically designed to make sure those developers who couldn’t attend in person, will still be able to get a lot of value from the material being presented. Like always, we’ll be streaming the Keynote live, but we will also be streaming all of the in-person seminars live as well! We will also be preparing a great collection of pre-recorded seminars specifically for the PDC, and all of those sessions will be available online as soon as the PDC starts. Our media player is being built with the specific needs of our online audience in mind, with some very exciting features and capabilities.

Oh, and don't be concerned about Eric's mention of the PDC starting on Oct 29th near the end of this episode... he hadn't had his morning coffee yet, and really intended to say "Oct 28th".

Here are some additional links you may find useful:

• http://www.MicrosoftPDC.com
  For the latest details and information on the PDC.

• http://www.MicrosoftPDC.com/local
  For information on special viewing events in your area.

• Windows Phone Blog - Terry Myerson - Windows Phone 7 RTM'd
• Dave Anson - LayoutTransformer assembly enables WPF-style layout transformations in WP7
• Indy from Oz - Windows Phone 7 Listbox pagination with MVVM Light and Application Bar
• LessThanDot - Lazy DBA Series shows how to easily import Excel data via SQL Server wizards, via Alvin Ashcraft
• SDL Team blog - Microsoft Security Development Lifecycle to be licensed under Creative Commons
• IE Team Blog - Performance profiling different browser subsystems for popular Web sites
• Coding4Fun - Peter Brownstein & Peter Juchniewicz - Building WEIShare, the Windows and Web app to share Windows Experience Index scores
• Brad Becker - The Future of Silverlight
• Web Camps TV - OData Overview with Jonathan Carter 
• Rudi Grobler - Timeslot Panel - an Outlook-like Calendar, now ported to Silverlight

• Dan's pick: The .NET 4.0 MEF FAQ with hilarious drawings
• Brian's pick: Trossen Robotics - Interbotix Robot Turrets

Relevant links:

• John's blog and on Twitter (@john_papa)

Follow us on Twitter @SilverlightTV or on the web at http://silverlight.tv/ 


 

Are you developing with Windows Phone 7? You can pre-order Learning Windows Phone Programming today, by Jaime Rodriguez, Yochay Kiriaty and John Papa! Or check out the book's web site.

• Tim Heuer's blog
• Follow Tim on Twitter
• Tim's Bytes by MSDN interview at PDC09
• Learn more about Silverlight development
• Download Silverlight 4
• Silverlight 4 - A guide to the new features
• Silverlight "How Do I?" Videos
• Silverlight Blogs
• Web PI Download

Victor has over 10 years experience in the Web and software development industries and has worked with large Fortune 500 companies such as Microsoft, Universal, Warner Bros., Disney, Mattel, and Paramount Pictures. Victor has worked on some of the most cutting edge WPF and Silverlight applications that have been developed to date; including the Microsoft Surface Winebar CES demo, Surface Air Hockey with simulated physics, and the Surface EventPhotos application which both debuted at PDC in 2008. Victor was also part of the team that launched the Microsoft Silverlight Entertainment Tonight Emmy mini-site, one of the very first Silverlight applications to market. 

In his spare time Victor continues to write books under the Friends of ED flagship Foundation series in hopes of presenting the powerful new Microsoft technologies of WPF and Silverlight to developers and designers around the globe. Along with development and writing books, Victor reaches out to the community by teaching WPF and Silverlight in the way of traditional classroom courses at the Rich Media Institute in Venice, California. Victor produces video tutorials on his personal blog and recently for Microsoft in the form of Expression Starter Kits. Victor holds online interactive workshops as well as public speaking engagements (most recently Flashapoolozastock IV in October 2009). Victor recently co-founded the first Los Angeles Silverlight user group (LASLUG) with Microsoft.

About Tim

Tim Huckaby is the Founder of InterKnowlogy, experts in Microsoft .NET and Microsoft Platforms, and has 25+ years experience including serving on a Microsoft product team as a development lead on an architecture team. Tim is a Microsoft Regional Director, an MVP and serves on multiple Microsoft councils and boards. Currently, Tim is focused on RIA & Rich Client Technologies like WPF, VSTO, Surface, Silverlight, Windows 7 Touch, and Windows Phone 7. He has been called a "Pioneer of the Smart Client Revolution" by the press. Tim has been awarded multiple times for the highest-rated keynote for Microsoft and numerous other technology conferences around the world and is consistently rated in the top 10% of all speakers at these events. Tim has also done keynote demos for numerous Microsoft executives including Bill Gates and Steve Ballmer.

Stuff Victor and Tim recommend you check out

• Watch Scott Guthrie's keynote at MIX10
• Web PI Download
• Download Silverlight 4
• Silverlight 4 - A guide to the new features
• Silverlight 4 - "How Do I?" videos
• Visual Studio 2010 Download

• Rocky's blog
• Magenic Technologies, Inc.
• Download Visual Studio 2010 and .NET Framework 4 Beta 2!
• Visual Studio 2010 and .NET Framework 4 Walkthrough
• Visual Studio 2010 and .NET Framework 4 Training Course
• Silverlight 4 Beta 2 Announcement
• Download Silverlight 4 SDK Beta!
• Silverlight 4 - "How Do I?" videos
• WPF Apps Model-View-ViewModel

• .NET For Devices
• ALTEN PTS
• Maarten's twitter page
• Windows Phone 7 site
• Windows Phone 7 Developers Site
• Getting started guide for developing for Windows Phone
• Windows Phone 7 code samples
• Windows Phone 7 team blog
• Mobile App Match

• Tribal DDB
• Chip's twitter page
• Download Silverlight 4
• Windows Azure Tools for Microsoft Visual Studio
• Visual Studio Downloads
• Windows Azure Site

• Jet Pack
• Cosmopolitan
• Windows 7
• AccentColor

She also takes a deep look at the cosmopolitan theme and shows how you can customize it, if need be. Tsitsi wraps up by demonstrating some tips you can use to maintain design consistency in your application, including how to apply a simple behavior to your TextBox and content presenters. Tsitsi drops a ton of great design tips throughout this episode—you don't want to miss it.

Relevant links:

• John's blog and on Twitter (@john_papa)

• Tsitsi's blog post

Follow us on Twitter @SilverlightTV or on the web at http://silverlight.tv 

 

Are you developing with Windows Phone 7? You can pre-order Learning Windows Phone Programming, by Jaime Rodriguez, Yochay Kiriaty, and John Papa, today! Or, check out the book's web site.

The Windows Phone 7 Jump Start video training is for all developers interested in developing applications or games for the new Windows Phone 7 Platform. The ~14 ½ hour course is based on the Microsoft Windows Phone 7 Developer Training Kit and taught by Microsoft MVP's and Microsoft Press Authors, Andy Wigley and Rob S. Miles. The Designing for Windows Phone 7 session is taught my Microsoft Design experts, Jon Harris and Bryan Agnetta.  The training is wrapped up with an audio podcast with a panel of Microsoft experts answering the questions posed throughout the training.

Watch these entertaining sessions and complete the labs found on Channel 9 (http://channel9.msdn.com/learn/courses/WP7TrainingKit/) to gain development skills using both Microsoft XNA and Microsoft Silverlight.

For copies of the student files and links to demo code, you can go to the Windows Phone 7 Born To Learn Forum (http://borntolearn.mslearn.net/wp7/m/default.aspx).

Updated! Session 1: Introduction
Session 2: Building a Silverlight Application, Part 1
Session 3: Building a Silverlight Application, Part 2
Updated! Session 4: The Application Bar
Session 5: Building XNA Games for the Windows Phone 7 Platform, Part 1
Session 6: Building XNA Games for the Windows Phone 7 Platform, Part 2
Updated! Session 7: Isolation Storage
Updated! Session 8: The Application Lifecycle
Updated! Session 9: Launchers and Choosers
Updated! Session 10: Push Notifications
Session 11: Marketing your Windows Phone Applications
Session 12: Working with Media

New Sessions:
Session 13: Panorama and Pivots
Session 14: XNA Deep Dive, Part 1
Session 15: XNA Deep Dive, Part 2
Session 16: Location and Bing Maps
Session 17: Optimizing for Performance
Session 18: Designing Apps Using Expression Blend & Metro
Session 19: Ask the Experts podcast

The Windows Phone 7 Jump Start video training is for all developers interested in developing applications or games for the new Windows Phone 7 Platform. The ~14 ½ hour course is based on the Microsoft Windows Phone 7 Developer Training Kit and taught by Microsoft MVP's and Microsoft Press Authors, Andy Wigley and Rob S. Miles. The Designing for Windows Phone 7 session is taught my Microsoft Design experts, Jon Harris and Bryan Agnetta.  The training is wrapped up with an audio podcast with a panel of Microsoft experts answering the questions posed throughout the training.

Watch these entertaining sessions and complete the labs found on Channel 9 (http://channel9.msdn.com/learn/courses/WP7TrainingKit/) to gain development skills using both Microsoft XNA and Microsoft Silverlight.

For copies of the student files and links to demo code, you can go to the Windows Phone 7 Born To Learn Forum (http://borntolearn.mslearn.net/wp7/m/default.aspx).

Updated! Session 1: Introduction
Session 2: Building a Silverlight Application, Part 1
Session 3: Building a Silverlight Application, Part 2
Updated! Session 4: The Application Bar
Session 5: Building XNA Games for the Windows Phone 7 Platform, Part 1
Session 6: Building XNA Games for the Windows Phone 7 Platform, Part 2
Updated! Session 7: Isolation Storage
Updated! Session 8: The Application Lifecycle
Updated! Session 9: Launchers and Choosers
Updated! Session 10: Push Notifications
Session 11: Marketing your Windows Phone Applications
Session 12: Working with Media

New Sessions:
Session 13: Panorama and Pivots
Session 14: XNA Deep Dive, Part 1
Session 15: XNA Deep Dive, Part 2
Session 16: Location and Bing Maps
Session 17: Optimizing for Performance
Session 18: Designing Apps Using Expression Blend & Metro
Session 19: Ask the Experts podcast

The Windows Phone 7 Jump Start video training is for all developers interested in developing applications or games for the new Windows Phone 7 Platform. The ~14 ½ hour course is based on the Microsoft Windows Phone 7 Developer Training Kit and taught by Microsoft MVP's and Microsoft Press Authors, Andy Wigley and Rob S. Miles. The Designing for Windows Phone 7 session is taught my Microsoft Design experts, Jon Harris and Bryan Agnetta.  The training is wrapped up with an audio podcast with a panel of Microsoft experts answering the questions posed throughout the training.

Watch these entertaining sessions and complete the labs found on Channel 9 (http://channel9.msdn.com/learn/courses/WP7TrainingKit/) to gain development skills using both Microsoft XNA and Microsoft Silverlight.

For copies of the student files and links to demo code, you can go to the Windows Phone 7 Born To Learn Forum (http://borntolearn.mslearn.net/wp7/m/default.aspx).

Updated! Session 1: Introduction
Session 2: Building a Silverlight Application, Part 1
Session 3: Building a Silverlight Application, Part 2
Updated! Session 4: The Application Bar
Session 5: Building XNA Games for the Windows Phone 7 Platform, Part 1
Session 6: Building XNA Games for the Windows Phone 7 Platform, Part 2
Updated! Session 7: Isolation Storage
Updated! Session 8: The Application Lifecycle
Updated! Session 9: Launchers and Choosers
Updated! Session 10: Push Notifications
Session 11: Marketing your Windows Phone Applications
Session 12: Working with Media

New Sessions:
Session 13: Panorama and Pivots
Session 14: XNA Deep Dive, Part 1
Session 15: XNA Deep Dive, Part 2
Session 16: Location and Bing Maps
Session 17: Optimizing for Performance
Session 18: Designing Apps Using Expression Blend & Metro
Session 19: Ask the Experts podcast

Watch these entertaining sessions and complete the labs found on Channel 9 (http://channel9.msdn.com/learn/courses/WP7TrainingKit/) to gain development skills using both Microsoft XNA and Microsoft Silverlight.

For copies of the student files and links to demo code, you can go to the Windows Phone 7 Born To Learn Forum (http://borntolearn.mslearn.net/wp7/m/default.aspx).

Updated! Session 1: Introduction
Session 2: Building a Silverlight Application, Part 1
Session 3: Building a Silverlight Application, Part 2
Updated! Session 4: The Application Bar
Session 5: Building XNA Games for the Windows Phone 7 Platform, Part 1
Session 6: Building XNA Games for the Windows Phone 7 Platform, Part 2
Updated! Session 7: Isolation Storage
Updated! Session 8: The Application Lifecycle
Updated! Session 9: Launchers and Choosers
Updated! Session 10: Push Notifications
Session 11: Marketing your Windows Phone Applications
Session 12: Working with Media

New Sessions:
Session 13: Panorama and Pivots
Session 14: XNA Deep Dive, Part 1
Session 15: XNA Deep Dive, Part 2
Session 16: Location and Bing Maps
Session 17: Optimizing for Performance
Session 18: Designing Apps Using Expression Blend & Metro
Session 19: Ask the Experts podcast

Watch these entertaining sessions and complete the labs found on Channel 9 (http://channel9.msdn.com/learn/courses/WP7TrainingKit/) to gain development skills using both Microsoft XNA and Microsoft Silverlight.

For copies of the student files and links to demo code, you can go to the Windows Phone 7 Born To Learn Forum (http://borntolearn.mslearn.net/wp7/m/default.aspx).

Updated! Session 1: Introduction
Session 2: Building a Silverlight Application, Part 1
Session 3: Building a Silverlight Application, Part 2
Updated! Session 4: The Application Bar
Session 5: Building XNA Games for the Windows Phone 7 Platform, Part 1
Session 6: Building XNA Games for the Windows Phone 7 Platform, Part 2
Updated! Session 7: Isolation Storage
Updated! Session 8: The Application Lifecycle
Updated! Session 9: Launchers and Choosers
Updated! Session 10: Push Notifications
Session 11: Marketing your Windows Phone Applications
Session 12: Working with Media

New Sessions:
Session 13: Panorama and Pivots
Session 14: XNA Deep Dive, Part 1
Session 15: XNA Deep Dive, Part 2
Session 16: Location and Bing Maps
Session 17: Optimizing for Performance
Session 18: Designing Apps Using Expression Blend & Metro
Session 19: Ask the Experts podcast

Watch these entertaining sessions and complete the labs found on Channel 9 (http://channel9.msdn.com/learn/courses/WP7TrainingKit/) to gain development skills using both Microsoft XNA and Microsoft Silverlight.

For copies of the student files and links to demo code, you can go to the Windows Phone 7 Born To Learn Forum (http://borntolearn.mslearn.net/wp7/m/default.aspx).

Updated! Session 1: Introduction
Session 2: Building a Silverlight Application, Part 1
Session 3: Building a Silverlight Application, Part 2
Updated! Session 4: The Application Bar
Session 5: Building XNA Games for the Windows Phone 7 Platform, Part 1
Session 6: Building XNA Games for the Windows Phone 7 Platform, Part 2
Updated! Session 7: Isolation Storage
Updated! Session 8: The Application Lifecycle
Updated! Session 9: Launchers and Choosers
Updated! Session 10: Push Notifications
Session 11: Marketing your Windows Phone Applications
Session 12: Working with Media

New Sessions:
Session 13: Panorama and Pivots
Session 14: XNA Deep Dive, Part 1
Session 15: XNA Deep Dive, Part 2
Session 16: Location and Bing Maps
Session 17: Optimizing for Performance
Session 18: Designing Apps Using Expression Blend & Metro
Session 19: Ask the Experts podcast