Alex Yakhnin's Blog

FeedPoint for Windows 8.

Alex Yakhnin-MSFT — Fri, 11 Nov 2011 02:42:00 GMT

I've recently made an early holiday gift for myself - Samsung Series 7 Tablet. It looks great, with the excellent LED screen, good performance and I love it. Since I installed Windows 8 Preview bits on it, I couldn't pass an opportunity to learn the new platform. In order to do this I've decided to port my FeedPoint Windows Phone 7 app to the Windows 8 Metro. I'd assumed that been a Windows Phone developer, a lot of programming paradigms should be really familiar for me when developing Win 8 Metro apps (XAML, tiles, notifications, etc...) and learning curve shouldn't be that steep. So far I can say that my assumptions are correct. The app has been coming along pretty nicely. I am still working out the UX, but here're the screenshots so far:

FeedPoint updated for Mango

Alex Yakhnin-MSFT — Thu, 27 Oct 2011 01:43:57 GMT

I've finally published the update for my FeedPoint app for Mango. It's got a few bug fixes as well as Mango specific functionality such as ability to pin live tiles for your feeds which get updates via a background agent.

The tiles would get updated with the latest post's image as a backround tile. This is how the home screen would look like:

You can find the app in the Marketplace here:

http://www.windowsphone.com/en-US/apps/ec451fcf-7b10-e011-9264-00237de2db9e

ProfileItem control for WP7

Alex Yakhnin-MSFT — Tue, 25 Oct 2011 21:36:00 GMT

In the number of the applications that I'd worked on I had to create a screen to display information about a person such as phone, address, email etc... So the screen essentially'd look like the as profile in the people hub:

So I have created the contro to save a burden of implementing the functionality again and again and called it ProfileItem. Besides displaying the text "call mobile" for example and a phone number I wanted for this control to also support MVVM commanding that would react on when a control is clicked, therefore it'd implement Command property. This is how the XAML for the control looks like:

<UserControl x:Class="ProfileItemTest.Controls.ProfileItem"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
   >
    
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">      
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Name="textBlockTitle" Grid.Row="0" HorizontalAlignment="Left"

 Style="{StaticResource PhoneTextExtraLargeStyle}" Text="engagement"  />
            <TextBlock Name="textBlockValue" Grid.Row="1" HorizontalAlignment="Left" Margin="14,-6,0,6"

 TextWrapping="Wrap" Text="(none)"  FontSize="22" />
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener x:Name="listener"
                       Tap="OnTap"/>
            </toolkit:GestureService.GestureListener>
        </Grid>
    </Grid>
</UserControl>

And the code behind:

    public partial class ProfileItem : UserControl
    {
        private event EventHandler Click;
 
        public ProfileItem()
        {
            InitializeComponent();
            this.Click += (sender, e) =>
            {
                if (Command != null && Command.CanExecute(CommandParameter))
                    Command.Execute(CommandParameter);
            };
 
            this.Loaded += new RoutedEventHandler(ProfileItem_Loaded);
        }
 
        void ProfileItem_Loaded(object sender, RoutedEventArgs e)
        {
            if (this.Command != null)
            {
                textBlockValue.Foreground = (Brush)Application.Current.Resources["PhoneAccentBrush"];
            }
        }
 
        #region ICommand
 
        public static DependencyProperty CommandProperty =
       DependencyProperty.Register("Command",
                                   typeof(ICommand), typeof(ProfileItem),
                                   new PropertyMetadata(null, CommandChanged));
 
        private static void CommandChanged(DependencyObject source, DependencyPropertyChangedEventArgs args)
        {
            var button = source as ProfileItem;
            if (button == null) return;
 
            button.RegisterCommand(args.OldValue as ICommand, args.NewValue as ICommand);
        }
 
        private void RegisterCommand(ICommand oldCommand, ICommand newCommand)
        {
            if (oldCommand != null)
                oldCommand.CanExecuteChanged -= HandleCanExecuteChanged;
 
            if (newCommand != null)
                newCommand.CanExecuteChanged += HandleCanExecuteChanged;          
 
            HandleCanExecuteChanged(newCommand, EventArgs.Empty);
        }
 
        private void HandleCanExecuteChanged(object sender, EventArgs args)
        {
            if (Command != null)
                IsEnabled = Command.CanExecute(CommandParameter);
        }
 
 
        public ICommand Command
        {
            get { return GetValue(CommandProperty) as ICommand; }
            set { SetValue(CommandProperty, value); }
        }
 
        public static DependencyProperty CommandParameterProperty =
            DependencyProperty.Register("CommandParameter",
                                        typeof(object), typeof(ProfileItem),
                                        new PropertyMetadata(null));
 
        public object CommandParameter
        {
            get { return GetValue(CommandParameterProperty); }
            set { SetValue(CommandParameterProperty, value); }
        }
 
 
        #endregion
 
 
        public static readonly DependencyProperty TitleProperty = DependencyProperty.RegisterAttached("Title", typeof(string), typeof(ProfileItem), new PropertyMetadata(OnTitleValueChanged));
 
        public string Title
        {
            get
            {
                return (string)base.GetValue(TitleProperty);
            }
            set
            {
                base.SetValue(TitleProperty, value);
            }
        }
 
 
        public static readonly DependencyProperty ValueProperty = DependencyProperty.RegisterAttached("Value", typeof(string), typeof(ProfileItem), new PropertyMetadata(OnValueChanged));
 
        public string Value
        {
            get
            {
                return (string)base.GetValue(ValueProperty);
            }
            set
            {
                base.SetValue(ValueProperty, value);
            }
        }
 
 
        private static void OnTitleValueChanged(DependencyObject target, DependencyPropertyChangedEventArgs args)
        {
            ProfileItem item = (ProfileItem)target;
            item.textBlockTitle.Text = (string)args.NewValue;
        }
 
        private static void OnValueChanged(DependencyObject target, DependencyPropertyChangedEventArgs args)
        {
            ProfileItem item = (ProfileItem)target;
            item.textBlockValue.Text = (string)args.NewValue;
        }
 
        private void OnTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            if (this.Click != null)
            {
                this.Click(this, EventArgs.Empty);
            }
        }
 
 
        private class ClickCommandBinding
        {
            private readonly ICommand command;
            private readonly ProfileItem button;
            private readonly Func<object> parameterGetter;
 
            /// <summary>
            /// 
            /// </summary>
            /// <param name="iconButton"></param>
            /// <param name="command"></param>
            /// <param name="parameterGetter"></param>
            public ClickCommandBinding(ProfileItem button, ICommand command, Func<object> parameterGetter)
            {
                this.command = command;
                this.button = button;
                this.parameterGetter = parameterGetter;
                this.button.IsEnabled = this.command.CanExecute(parameterGetter());
 
                this.command.CanExecuteChanged += this.CommandCanExecuteChanged;
                this.button.listener.Tap += this.ButtonClicked;
            }
 
            public void Detach()
            {
                this.button.MouseLeftButtonDown -= this.ButtonClicked;
                this.command.CanExecuteChanged -= this.CommandCanExecuteChanged;
            }
 
            private void ButtonClicked(object s, EventArgs e)
            {
                this.command.Execute(this.parameterGetter());
            }
 
            private void CommandCanExecuteChanged(object s, EventArgs ea)
            {
                this.button.IsEnabled = this.command.CanExecute(this.parameterGetter());
            }
        }
    }

I've also created a sample that would display a contact data on your phone. This is how the screen looks like in the sample:

You can download the code for the control and the sample from here.

Sketchflow for Windows Phone 7.

Alex Yakhnin-MSFT — Thu, 09 Jun 2011 16:48:29 GMT

Would you like to be able to create your scetchflow designs for the Windows Phone 7? Now you can:

http://www.uxmagic.com/blog/post/2011/06/08/Sketchflow-for-Windows-Phone-7.aspx

Reactive for Compact Framework.

Alex Yakhnin-MSFT — Thu, 05 May 2011 01:06:45 GMT

Have you heard about Reactive (Rx) Framework? If you have been developing for Windows Phone 7, Silverlight or a desktop and had to deal with asynchronous code, the Rx Framework has been a life saver for you. I love it's power and flexibilty. However, the Rx Framework has not been available for Compact Framework 3.5 and WM 5.x devices. But we can make this happen. The LiveLabs team responsible for Rx Framework would be able to release the build for .NET CF if enough people requested for it. You can make them to hear you thoughts in the Rx Fx related forum:

http://social.msdn.microsoft.com/forums/en-us/rx/thread/52276723-EBE1-414F-8295-1C62BAF8B388

FeedPoint updated.

Alex Yakhnin-MSFT — Sun, 17 Apr 2011 20:22:03 GMT

I've updated the FeedPoint app with the a few requested features:

- The feed list screen now has the "mark as read" button. You don't need to expand the menu for this.

- It now allows sorting the feeds by time they were created, such as "sort by newest" and "sort by oldest". This sort is set on the feed level and persisted across the execution of the application.

- You can change the theme from inside of the app itself to be either "light" or "dark".

Get it from here:

http://social.zune.net/redirect?type=phoneApp&id=ec451fcf-7b10-e011-9264-00237de2db9e

Avis app

Alex Yakhnin-MSFT — Tue, 08 Mar 2011 15:55:06 GMT

A few months ago I spend some time with folks from Avis to help them to get started on the development for Windows Phone 7. Their app has recently been published on the marketplace and has already gathered a very good reviews from the users.

The recent release of the Windows Phone Developer Tools January 2011 Update

Alex Yakhnin-MSFT — Mon, 07 Feb 2011 18:10:42 GMT

Here's some useful information from the documentation team:

The recent release of the Windows Phone Developer Tools January 2011 Update includes bug fixes, a new emulator, and utilities. Alongside the release of the tools we have also published an update to MSDN that focuses on documenting key aspects of this release, known issues/limitations and additional content for developers. The highlights of this release are listed below and also available in the What’s New topic on MSDN.

RELEASE HIGHLIGHTS

§ NEW DOCUMENTATION

o Release Notes for the January 2011 Update

o How to: Test Copy and Paste in Windows Phone Emulator

o Deploying and Testing on a Physical Windows Phone Device

o Troubleshooting Windows Phone Developer Tools

o Frame Rate Counters in Windows Phone Emulator

o New VB code samples

§ Keyboard Input Scope Sample

§ Model-View-ViewModel Pattern Sample

§ Silverlight Sound Sample

o Bing Maps Silverlight Control – Working with Pushpins in the Map Control

o Bing Maps Silverlight Control – Setting the Map View

§ UPDATED DOCUMENTATION

o Performance Considerations in Applications for Windows Phone

o Bing Maps APIs are now included in the class library reference

§ Microsoft.Phone.Controls.Maps

§ Microsoft.Phone.Controls.Maps.AutomationPeers

§ Microsoft.Phone.Controls.Maps.Core

§ Microsoft.Phone.Controls.Maps.Design

§ Microsoft.Phone.Controls.Maps.Overlays

§ Microsoft.Phone.Controls.Maps.Platform

Is ANID unique?

Alex Yakhnin-MSFT — Thu, 13 Jan 2011 22:36:00 GMT

When developing the FeedPoint app I needed to encrypt the user credentials in order to store them in the isolated storage. So, I used AesManaged class to encrypt and decrypt the data. As a password key, I've decied to use the anonymous ID that we can retrieve utilizing the UserExtendedProperties class and I used the following code:

string anid = UserExtendedProperties.GetValue("ANID") as string

After my application has been depoyed to the Marketplace, I started receiving reports from users saying that my application would just stop loading, unless it's re-installed. And so I set to try to reproduce the issue. After a few days of starting and closing, activating and deactivating the application I was finally able to reproduce the issue. It seems like my decryption code was failing to decrypt the values. After more digging into the issue I've discovered that value of the "ANID" had suddenly changed! So I've taken look at the MSDN documentation page and saw that "The string returned when querying for the anonymous ID by specifying the “ANID” property name contains the 32 character anonymous identifier as well as other information used by the system." and you need to exctract it like this:

string anid = UserExtendedProperties.GetValue("ANID") as string;
string anonymousUserId = anid.Substring(2, 32);

After I made a change in my app, the problem was gone. So, when using the ANID, please beware of this little nook. And of course RTFM :)

PS: The FeedPoint (version 1.2) the contains this fix has been deployed to the Marketplace. Due to the current bug in the marketplace, if you are using a trial version you will need to uninstall the app and then download and install the latest version

The Best of 2010

Alex Yakhnin-MSFT — Wed, 05 Jan 2011 02:10:00 GMT

It's time for a traditional most popular posts of 2010:

Creating a Splash Screen with a progress bar for WP7 applications.

Creating Scrollable TextBlock for WP7

Creating Progress Dialog for WP7.

Implementing Picker Box functionality on WP7

Creating List Picker for WP7.

Creating Image Round Button for WP7

Creating LINQ Data Provider for WP7

Deep Zoom on WP7

Happy New Year everybody! :)

FeedPoint app has been published.

Alex Yakhnin-MSFT — Wed, 29 Dec 2010 14:09:31 GMT

The feed reader app that I've been talking about in my previous posts has been published on the marketplace:

http://social.zune.net/redirect?type=phoneApp&id=ec451fcf-7b10-e011-9264-00237de2db9e

I've decided not to make it a free app (it just a dollar) due to marketplace restrictions for a free apps. The trial is a fully functional version except for a short message in the beginning. Initially I've created this app just for myself, but one of my friends convinced my to publish it. So here it is :). The latest walkthrough of the functionality is here:

http://www.youtube.com/watch?v=7MBy2mtDfTk

And I am planning to continue adding more features to my app.

Happy New Year and enjoy...

MY FEEDER is available for beta testing.

Alex Yakhnin-MSFT — Thu, 09 Dec 2010 01:59:00 GMT

The feed reader app that I described in my previous post is ready to for beta testing. So if you own a developer unlocked Window Phone 7, have Google Reader account and willing to beta test the app (I named it MY FEEDER) send me email at alex.yakhnin(at)microsoft.com. I've also recorded a short video of the functionality of the application.

(Y)et (A)nother (F)eed (R)eader for WP7

Alex Yakhnin-MSFT — Thu, 02 Dec 2010 19:53:00 GMT

I don't know how about you, but I love the Outlook app on the Windows Phone 7. I like its simplicity, readability, ability to quickly triage the email, etc... I also read feeds every day using the Google Reader on the web. I've been looking through a number of available feed readers for WP7 on the market place, but wasn't able to find the one I really like. So, I've decided to create my own feed reader for WP7 based on the Google reader with the look-n-feel and functionality similar to the WP7 Outlook app. Here's what I've got so far:

When I am done I am planning to publish it as a free app on the marketplace.

Importing Outlook contacts into WP7.

Alex Yakhnin-MSFT — Thu, 18 Nov 2010 14:08:15 GMT

The Windows Phone 7 doesn't sync the contacts from the Outlook without a connection to the Exchachge server. I've seen a few customers asking about the ways to be able to do it. This KB article outlines the way you could do it:

http://support.microsoft.com/kb/2454811

Migrate PickerBox and ListPicker to SL Toolkit.

Alex Yakhnin-MSFT — Sun, 07 Nov 2010 17:10:28 GMT

As you already know, the SL Toolkit team has recently released the update to the Silverlight for Windows Phone Toolkit. This update includes a few controls that I developed in order to fill up the gap - ListPicker and PickerBox controls. So I would recommend to the people who have been using my versions in their applications to migrate to the officially supported controls.

The SL Toolkit team has taken a differrent approach when creating these controls by creating a single control (ListPicker) that will work for both scenarios. This control incorporates ability to set the header and provide your templates for the list items when shown in the "full mode", supports change orientation etc... Overal I think the migration to the toolkit version of the controls should be pretty painless.

The new release of the Silverlight for Windows Phone Toolkit

Alex Yakhnin-MSFT — Tue, 02 Nov 2010 23:59:00 GMT

The Silverlight Toolkit team has just published the new release of the Silverlight for Windows Phone Toolkit. The update includes the following goodings:

AutoCompleteBox (fully themed for Metro)
ListPicker (Works as a ListPicker for <5 items and as PickerBox for more)
LongListSelector (Real jewel - a custom listbox control that allows to have groupings, headers and Quick Jump Grid functionality)
Page Transitions (The real page transition animations that should behave exactly as the native ones)

See Dave's blog post with more details and screenshots.

Enjoy!

OData client source and binaries for WP7.

Alex Yakhnin-MSFT — Fri, 29 Oct 2010 19:54:00 GMT

The OData client library as well as its source are available for download from the codeplex. The download also includes the sample app utlilizing the Northwind database.

Free ebook: Programming Windows Phone 7.

Alex Yakhnin-MSFT — Thu, 28 Oct 2010 17:02:02 GMT

The full version of the book: Programming Windows Phone 7, by Charles Petzold is available for download.

Sync Framework for WP7.

Alex Yakhnin-MSFT — Thu, 28 Oct 2010 14:03:00 GMT

The Sync Framework 4.0 (they jumped over the v3) October CTP is available for download. This framework is built on a top a standard protocol - OData and implements an "assymetric" syncing - meaning that most of the synchronization logic will be running on the service side. The release includes server and client components that make it easy to build offline applications on Silverlight for desktop and WP7 platforms. The CTP also ships with samples that show how to use the framework in Silverlight, WP7, WM 6.5 and HTML5. In a few weeks there will be a refresh to this release that will add some tooling as well as the sample for IPhone.

Enjoy:

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=afd89099-d589-423c-9762-78096aa95ac2&displaylang=en

http://msdn.microsoft.com/en-us/library/gg299051(v=SQL.110).aspx

Great performance tips when creating WP7 apps.

Alex Yakhnin-MSFT — Wed, 27 Oct 2010 13:29:00 GMT

Kevin, from Clarity has started a blog post series on the tips when developing WP7 applications. Hist first post dives into the nitty gritty details on how to improve performance of your applications. Must read!.

Update to the Progress Dialog.

Alex Yakhnin-MSFT — Fri, 24 Sep 2010 16:29:18 GMT

I've made some refactoring to the Progress Dialog code:

First of all I changed the name. Now it's ProgressIndicator.

Second, this class is now a custom control derived from ContentControl. And last, I twicked the styles and the code so it matches the look-n-feel of the native progress indicator functionality. Such as displaying a status label next to the progress bar and also do not show the dialog full screen when the progress displayed on the top of the page. In this case it will satisfy the requirement that the UI should stay responsive when this is happenning. The download is at the MSDN code galleries (ProgressIndicator).

Creating Progress Dialog for WP7.

Alex Yakhnin-MSFT — Mon, 20 Sep 2010 19:18:00 GMT

When creating Windows Phone 7 applications we'll inevitably encounter the situation when a certain procedure takes some time to complete. In this cases it's a good practice to show a progress indicator to the user. The UI Design and Interaction Guide specifies two major types of the progress indicator - indeterminate and determinate. If you don't know exactly how long your operation is going to take you should use the indeterminate progress indicator. Both types are implemented by the ProgressBar control in the WPDT. When using the WP7 device or emulator you will notice that the progress bar could be located at the top of page or in the middle:

Of course we can easily add the ProgressBar control to our pages, but as my favorite saying goes: "devil is in the details". First of all when progress indicator is shown in the middle of the page the background could be either a current theme's chrome color or would get semi transparent. Secondly, there also could be a status shown next to the progress indicator. So I thought that better approach would be to create a Progress Dialog that could be shown without messing with the page's design. The easiest way to approach this task is to create a UserControl, place ProgressBar and TextBox on it and use this user control as a child for the Popup. And so I created ProgressDialog UserControl and this is how the LayoutRoot looks like:

<Grid x:Name="LayoutRoot" Background="Transparent" Width="480" Height="800">
     <Rectangle x:Name="backgroundRect" Grid.Row="0" Fill="{StaticResource PhoneChromeBrush}" />
     <Image x:Name="screenShot"  />
     <StackPanel x:Name="stackPanel" Orientation="Vertical" VerticalAlignment="Center">
         <ProgressBar Opacity="1" Height="4" HorizontalAlignment="Left" VerticalAlignment="Center"  
                  Name="progressBar" Style="{StaticResource PerformanceProgressBar}"
                  Foreground="{StaticResource PhoneForegroundBrush}"
                  Width="480" />
         <TextBlock Opacity="1" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" 
                  Name="textBlockStatus" Text="Loading..." />
      </StackPanel>
 </Grid>

As you can see I've got the StackPanel with ProgressBar and TexBlock to display status. You'll probably notice the Rectangle and the Image. Rectangle would be filled with the current theme's chrome color and will play an important role of show a transparent background without changing the transparency of the ProgressBar and the TextBlock. The Image (with the obvious name "screenShot") will be used to display a screen shot image that we are going to make of the current RootVisual. We need to do it because the whole layout of the controls would be shifted when we hide the SystemTray which presents an unpleasant gittering in the UI.

To make the ProgressDialog developer friendly I have also created the followig enum:

 public enum ProgressTypes
 {
     IndeterminateMiddle,
     IndeterminateTop,
     DeterminateMiddle,
     DeterminateTop,
     CustomMiddle,
 }

This enum will be used to predermine some standard locations for the ProgressBar and its type. The obvious method to make the dialog to show its content is:

 public void Show()
 {
      if (this.ChildWindowPopup == null)
      {
           this.ChildWindowPopup = new Popup();
           try
           {
               this.ChildWindowPopup.Child = this;
           }
           catch (ArgumentException)
           {
               throw new InvalidOperationException("The control is already shown.");
           }
      }
 
      if (this.ChildWindowPopup != null && Application.Current.RootVisual != null)
      {
           // Configure accordingly to the type
           InitializeProgressType();
           // Show popup
           this.ChildWindowPopup.IsOpen = true;
      }
 }

The patter that you see in this Show method should be already familiar for you from the PickerBox control. In this method above we create and instance of the Popup, assign the ProgressDialog control to its child, initialize the positions and the visibility for the ProgressBar and the status TextBlock and then display the Popup. Now let's take a look at the InitializeProgressType method:

private void InitializeProgressType()
{
      this.HideSystemTray();
 
      switch (this.progressType)
      {
          case ProgressTypes.IndeterminateMiddle:
               this.Opacity = 1;
               this.screenShot.Visibility = System.Windows.Visibility.Collapsed;
               this.stackPanel.VerticalAlignment = System.Windows.VerticalAlignment.Center;
               this.progressBar.Foreground = (Brush)Application.Current.Resources["PhoneForegroundBrush"];
               this.textBlockStatus.Text = defaultText;
               this.textBlockStatus.Visibility = System.Windows.Visibility.Visible;                  
               this.progressBar.IsIndeterminate = true;
               break;
          case ProgressTypes.DeterminateMiddle:
               this.Opacity = 1;
               this.screenShot.Visibility = System.Windows.Visibility.Collapsed;
               this.stackPanel.VerticalAlignment = System.Windows.VerticalAlignment.Center;
               this.progressBar.Foreground = (Brush)Application.Current.Resources["PhoneForegroundBrush"];
               this.textBlockStatus.Text = defaultText;
               this.textBlockStatus.Visibility = System.Windows.Visibility.Visible;                             
               break;

           //... THERE'S SOME MORE CODE

}

In this method we check which progress type was set and appropriate adjustments to our controls. You can take a look at the full implementation in the download on the MSDN code galleries.

OK, let's take a look at how we can use this dalog in our applicatins. To demonstrate its functionality I've got the following page in the test project:

And here's a code snip from the button's event handler:

 // Create instance of the progress dialog
 if (this.progress == null)
 {
      this.progress = new ProgressDialog();
 }
 
 // Initiaze background worker
 if (backgroundWorker == null)
 {
       backgroundWorker = new BackgroundWorker();
       backgroundWorker.DoWork += new DoWorkEventHandler(backgroundWorker_DoWork);
       backgroundWorker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(backgroundWorker_RunWorkerCompleted);
       backgroundWorker.ProgressChanged += new ProgressChangedEventHandler(backgroundWorker_ProgressChanged);
 
  }     
            
 if (radioButtonMiddle.IsChecked.Value)
 {
      // Set the progress type
      progress.ProgressType = ProgressTypes.IndeterminateMiddle;
      backgroundWorker.WorkerReportsProgress = false;
 }
 
 if (radioButtonTop.IsChecked.Value)
 {
      progress.ProgressType = ProgressTypes.IndeterminateTop;
      backgroundWorker.WorkerReportsProgress = false;
 }

...

 // Show dialog
 progress.Show();
 // Start some long running process
 backgroundWorker.RunWorkerAsync();

In this code above I create an instance of the ProgressDialog, set a ProgressType depending on the radionbutton selected on the page and then show it. I also use the BackgroundWorker class to emulate some long running process:

  void backgroundWorker_ProgressChanged(object sender, ProgressChangedEventArgs e)
{
    Dispatcher.BeginInvoke(() =>
    {
        // Change the progress bar
        progress.ProgressBar.Value = e.ProgressPercentage;
    }
    );
}

 void backgroundWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
 {
     Dispatcher.BeginInvoke(() =>
     {
         // Close the Progress Dialog
         progress.Hide();
     }
     );
 
 }
 
 void backgroundWorker_DoWork(object sender, DoWorkEventArgs e)
 {
     if (progress.ProgressType == ProgressTypes.CustomMiddle || progress.ProgressType == ProgressTypes.DeterminateTop || progress.ProgressType == ProgressTypes.DeterminateMiddle)
     {
          for (int i = 0; i < 100; i++)
          {
              i += 20;
              backgroundWorker.ReportProgress(i);
              Thread.Sleep(1000);
          }
     }
     else
     {
          // Emulate some work by sleeping
          Thread.Sleep(7000);
     }
}

And here are a few screenshots of the different types of the progress from the sample app:

You can download the full source code from MSDN code galleries resource page.

Windows Phone Training Kit has been updated.

Alex Yakhnin-MSFT — Fri, 17 Sep 2010 20:39:07 GMT

The Windows Phone Training Kit has been updated with the RTM bits.

It's gotten even bigger with 5 new labs:

Using Silverlight Map Control and Bing Services
Building Silverlight Applications Using Panorama and Pivot Controls
Catapult Wars - A 2D Physics Game
Using Choosers and Handling Tombstone in XNA Framework Games
3D Game Development with XNA Framework

Customizing Picker Box dialog.

Alex Yakhnin-MSFT — Fri, 17 Sep 2010 15:53:37 GMT

Today I am going to show you how you can customize the Picker Box dialog to display a color picking dialog similar to the one that you see in the Settings\theme applet in the emulator instead of just a list of strings:

In order to be able to display the colored rectangle and the text we need to implement appropriate binding source for the ListBox inside of the dialog. So I've added the following ColorItem class:

  public class ColorItem
  {
      public string Text { get; set; }
      public Color Color { get; set; }
  }

Looks pretty innocent and simple. The next step is to modify the template for the ListBox in the PickerBoxDialog to display the colored rectangle and the binding, So I've copied tand modified the XAML from the generic.xaml into the Resources section of the MainPage.xaml:

  <Style TargetType="control:PickerBoxDialog" x:Key="Custom">
            <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
            <Setter Property="Width" Value="480" />
            <Setter Property="Height" Value="800" />
            <Setter Property="Margin" Value="0" />
 
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="control:PickerBoxDialog">
                        <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
 
                            <!--TitlePanel contains the name of the application and page title-->
                            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,30,0,40">
                                <TextBlock x:Name="DialogTitle" Text="MY DIALOG TITLE" Style="{StaticResource PhoneTextNormalStyle}" />
                            </StackPanel>
 
                            <!--ContentPanel - place additional content here-->
                            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"  >
                                <ListBox Name="listBox" >
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel x:Name="item" Orientation="Horizontal" Margin="5, 25, 0, 25">
                                                <Rectangle Fill="{Binding Color, Converter={StaticResource ColorToBrushConverter}}" Width="42" Height="42" />
                                                <TextBlock Margin="15, 0, 0, 0" Text="{Binding Text}" FontSize="40" TextWrapping="Wrap" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

We will also need to converter that'd do a conversion of the Color to Brush for the Fill property binding:

 public class ColorToBrushConverter : IValueConverter
 {
 
     #region IValueConverter Members

     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
     {
         if (value != null)
         {
             return new SolidColorBrush((Color)(value));
         }
 
         return null;
     }
 
     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
     {
         throw new NotImplementedException();
     }
 
     #endregion
}

And don't forget to declare this converter in xaml:

<local:ColorToBrushConverter x:Name="ColorToBrushConverter" />

The next step is to add the button on the screen that will show the PickerBox dialog and display the selected color:

<Button Name="buttonColor" Background="{StaticResource PhoneTextBoxBrush}" 
        Click="buttonColor_Click"  BorderThickness="0" Height="72" Style="{StaticResource PickerBoxButton}"
        HorizontalAlignment="Left" Margin="12,200,0,0"  VerticalAlignment="Top" Width="438">
        <StackPanel Orientation="Horizontal" Width="362">
             <Rectangle Fill="{Binding Color, Converter={StaticResource ColorToBrushConverter}}" Margin="-15, 2, 0 0" Width="26" Height="26" />
                 <TextBlock Margin="15, 0, 0, 0" Foreground="{StaticResource PhoneTextBoxForegroundBrush}" 
                             Text="{Binding Text}"  />
             </StackPanel>

 </Button>

We are using the same bindings as we did for the ListBox data template to display the selected ColorItem.

Now we should be ready to jump in to the code. First we need to create a data source that will contain an array of ColorItems. So I added the DialogViewModel class:

public class DialogViewModel
{
     public DialogViewModel()
     {
         this.Items = new List<ColorItem>()
         {
             new ColorItem() {Text="orange", Color = Colors.Orange},
             new ColorItem() {Text="red", Color = Colors.Red},
             new ColorItem() {Text="blue", Color = Colors.Blue},
             new ColorItem() {Text="magenta", Color = Colors.Magenta},
             new ColorItem() {Text="purple", Color = Colors.Purple},
             new ColorItem() {Text="green", Color = Colors.Green},
             new ColorItem() {Text="cyan", Color = Colors.Cyan},                      
             new ColorItem() {Text="brown", Color = Colors.Brown},
             new ColorItem() {Text="yellow", Color = Colors.Yellow},
         };
    }
 
    public List<ColorItem> Items
    {
        get;
        set;
    }
}

This is how we initialize our custom PickerBox:

 private void InitCustomPickerDialog()
 {
      // Initialize viewmodel
      this.viewModel = new DialogViewModel();
      this.currentColorItem = viewModel.Items[0];
 
      // Assing it to the page's DataContext
      this.DataContext = currentColorItem;
      this.customDialog = new PickerBoxDialog();
      this.customDialog.Title = "ACCENTS";
 
      // Assign our style to the dialog
      this.customDialog.Style = this.Resources["Custom"] as Style;
      this.customDialog.ItemSource = viewModel.Items;
      this.customDialog.Closed += new EventHandler(customDialog_Closed);
 }

In the method above we initialize view model, create an instance of the custom dialog, assign the style that we declared before and ItemSource from the viewmodel. The customDialog_Closed looks like this:

 void customDialog_Closed(object sender, EventArgs e)
 {
      this.currentColorItem = (ColorItem)this.customDialog.SelectedItem;
      this.DataContext = currentColorItem;
 }

In this event handler we get the currently selected item from the dialog and assing it to page's data context.

And that is all what's required to have color picker dialog:

You can download the latest version of the PickerBox control and this sample from here.

One more thing that I wanted to mention is that I consolidated all the WP7 controls and components in place now. I created a resource on MSDN code galleries that contains the latest versions for the List Picker, Scrollable TextBlock and PickerBox.

Windows Phone Developer Tools RTM'ed!

Alex Yakhnin-MSFT — Thu, 16 Sep 2010 17:49:00 GMT

The WPDT has gone gold and available for download:

Windows Phone Developer Tools

The tools include the Panorama, Pivot and Bing Map control.

Also the team has released the Silverlight for Windows Phone Toolkit which includes the controls and components that are not included in the WPDT:

· ContextMenu

· DatePicker/TimePicker

· Gesture Recognizer

· ToggleSwitch

· WrapPanel

Here's another jam - you can download the Microsoft Advertising SDK for Windows Phone 7!

Enjoy!