The simple application I created can be found at http://jason-mitchell.com/uploads/bingmaps/bingmapstestpage.html

Naturally the first thing that needed to be done was to download and install the Bing Maps Silverlight Control from here.  I also needed to create a Bing Maps Key; see how to do this on MSDN.  During the brief time I spent searching for information on this topic I also came across an “Interactive SDK” provided by Microsoft.  This turned out to be very useful in figuring out how to work the map control and you can find it at http://www.microsoft.com/maps/isdk/silverlight/.

Once this was done I created a new Silverlight application project in Visual Studio 2010 and added the reference to Microsoft.Maps.MapControl.dll that I had just installed.  In my MainPage.xaml markup I added a new namespace inside the UserControl tag by adding:

xmlns:bing="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl

I’m not going to provide a full code listing in this article so if you aren’t sure on how to do this then check out the zip file at the end of this article.

My next step was to add the markup to display the map control in my LayoutRoot.  I was pleasantly surprised when this was just a simple one line tag as shown below:

<bing:Map x:Name="MapControl" CredentialsProvider="your Bing maps key" />

In order to create the functionality in my demo application I added a handler for the Map’s MouseClick event.  This handler will call one of two methods based on what radio button has been checked.  Again I’m not putting the code in the article but it is in the download.

In order to place a push pin it took three lines of code without mushing it all together and not counting the method signature.  See it below:

private void PlacePinOnMap(MapMouseEventArgs e)
{
    Location worldCoords = MapControl.ViewportPointToLocation(e.ViewportPoint);
    Pushpin pushpin = new Pushpin {Location = worldCoords};
 
    MapControl.Children.Add(pushpin);
}

There’s nothing complicated here.  MapMouseEventArgs.ViewportPoint returns the click location on the screen which can then be passed to the MapControl.ViewportPointToLocation method which will convert the click location to a geocode (longitude and latitude) representing the location on the map.   Next I create a new Pushpin control, give it the geocode and add it to the map.  Pretty easy!

In order to get the location information such as street and country we have to use Microsoft’s Geocode web service.  The address for this is :

http://dev.virtualearth.net/webservices/v1/GeocodeService/GeocodeService.svc

I added a new Service Reference to my Silverlight application which pointed to this service.  This will generate a proxy class called GeocodeServiceClient which provides a ReverseGeocodeAsync method which will convert a geocode into a real address.  The proxy class also provides a GeocodeAsync method which presumably converts an address to a geocode (I haven’t tried it).  The code below shows how to get the name of the country that has been clicked on using this web service.

private void GetCountryFromClickLocation(MapMouseEventArgs e)
{
    Location worldCoords = MapControl.ViewportPointToLocation(e.ViewportPoint);
 
    GeocodeServiceClient geocodeClient = new GeocodeServiceClient("BasicHttpBinding_IGeocodeService");
    geocodeClient.ReverseGeocodeCompleted += ReverseGeocodeCompleted;
 
    ReverseGeocodeRequest request = new ReverseGeocodeRequest();
    request.Culture = MapControl.Culture;
    request.Location = worldCoords;
    request.ExecutionOptions = new ExecutionOptions();
    request.ExecutionOptions.SuppressFaults = true;
 
    MapControl.CredentialsProvider.GetCredentials(credentials =>
               {
                  request.Credentials = credentials;
                  geocodeClient.ReverseGeocodeAsync(request);
               });
}
 
private void ReverseGeocodeCompleted(object sender, ReverseGeocodeCompletedEventArgs e)
{
    ResultTextBlock.Text = "Country: " + e.Result.Results[0].Address.CountryRegion;
}

Again we have to convert our click location into a geocode to give to the web service.  This code is pretty straightforward so I’m not going to go through it.

That’s basically it!  Overall I’m very impressed with Microsoft’s Bing Maps support in Silverlight both in terms of the SDK and the documentation available online.  The demo application took no time at all to whip up after a few minutes spent researching.

Demo Project Download: http://www.jason-mitchell.com/Uploads/BingMapsDemo-12_03_11.zip

Since the Windows Phone 7 developer tools were released, I have playing around with developing little apps for the phone to get to grips with the basics of app development for the platform.  When I got around to playing with isolated storage on the phone, I quickly got tired of writing the same code over and over again (I like to try and keep my code DRY).  For this reason, I decided to create a short helper class which uses delegates to help reduce the amount of repeated code I was writing.

IsolatedStorageHelper

public static class IsolatedStorageHelper
{
    public static object FileOperation(string fileName, FileMode fileMode, FileAccess fileAccess, Func<Stream, object> fileOperation)
    {
        using (IsolatedStorageFile userStore = IsolatedStorageFile.GetUserStoreForApplication())
        {
            using (IsolatedStorageFileStream stream = new IsolatedStorageFileStream(fileName, fileMode, fileAccess, userStore))
            {
                return fileOperation(stream);
            }
        }
    }
 
    public static void FileOperation(string fileName, FileMode fileMode, FileAccess fileAccess, Action<Stream> fileOperation)
    {
        FileOperation(fileName, fileMode, fileAccess, stream =>
                                                            {
                                                                fileOperation(stream);
                                                                return null;
                                                            });
    }
}

Using this class is pretty simple.  I use it frequently in my test Windows Phone 7 applications to load and save XML.  Here’s an example:

xDoc = IsolatedStorageHelper.FileOperation("myFile.xml", FileMode.Open, FileAccess.Read, stream => XDocument.Load(stream)) as XDocument;

This is just a quick article and since there is nothing too complex here I have just posted the code here:

using System.Collections;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Interactivity;
 
namespace IssueTracker.Actions
{
    [DefaultTrigger(typeof(FrameworkElement), typeof(System.Windows.Interactivity.EventTrigger),
                    "MouseLeftButtonUp")]
    public class ToggleStateAction : TargetedTriggerAction
    {
        public static readonly DependencyProperty OffStateProperty;
        public static readonly DependencyProperty OnStateProperty;
        public static readonly DependencyProperty UseTransitionsProperty;
 
        private bool isOnStateActive;
 
        static ToggleStateAction()
        {
            OffStateProperty = DependencyProperty.Register("OffState", typeof(string), 
                                      typeof(ToggleStateAction), null);
            OnStateProperty = DependencyProperty.Register("OnState", typeof(string), 
                                       typeof(ToggleStateAction), null);
            UseTransitionsProperty = DependencyProperty.Register("UseTransitions", typeof(bool),
                                              typeof(ToggleStateAction), null);
        }
 
        protected override void Invoke(object o)
        {
            Control control = FindTargetElement(Target) as Control;
 
            if (isOnStateActive)
                VisualStateManager.GoToState(control, OffState, UseTransitions);
            else
                VisualStateManager.GoToState(control, OnState, UseTransitions);
 
            isOnStateActive = !isOnStateActive;
        }
 
        private static FrameworkElement FindTargetElement(FrameworkElement element)
        {
            FrameworkElement parent = element;
 
            while (parent != null)
            {
                IList vsgs = VisualStateManager.GetVisualStateGroups(parent);
                if (vsgs != null && vsgs.Count > 0)
                {
                    Control control = parent.Parent as Control;
                    if (control != null)
                        return control;
                    return parent;
                }
                parent = parent.Parent as FrameworkElement;
            }
 
            return null;
        }
 
        public string OffState
        {
            get { return (string)GetValue(OffStateProperty); }
            set { SetValue(OffStateProperty, value); }
        }
 
        public string OnState
        {
            get { return (string)GetValue(OnStateProperty); }
            set { SetValue(OnStateProperty, value); }
        }
 
        public bool UseTransitions
        {
            get { return (bool)GetValue(UseTransitionsProperty); }
            set { SetValue(UseTransitionsProperty, value); }
        }
    }
}

One of the really nice things when using custom actions is that if you are using Expression Blend, the designer will pick up on your properties and provide you with the ability to edit them without needing to touch the XAML.  It’s worth pointing out that I had to add the method “FindTargetElement” to return the control to use in the transition.  In fact, I nabbed this code right out of the source for the GoToState which can be seen at http://expressionblend.codeplex.com.

I had no prior knowledge of the details of MVVM so I needed to do a bit of research.  Thankfully, there seems to be no shortage of information on the web about it.  I found Wikipedia to have a useful article about it at http://en.wikipedia.org/wiki/MVVM (especially the “Pattern Description” section) and also an article on MSDN by Shawn Wildermuth at http://msdn.microsoft.com/en-us/magazine/dd458800.aspx.  The second article is for Silverlight 2 so it’s a little bit outdated, however I still found it incredibly useful.

In this article I’m going to walkthrough the creation of the basic Windows Phone 7 Twitter application pictured to the right.  If you do not have the tools for Windows Phone 7 development, you can find some information about them at the App Hub.  If you have no interest in getting the tools, then you should find that most of the content in this article is applicable to a regular Silverlight project as well.  For this project, I used Expression Blend 4 RC and the Windows Phone add-in (see here for the April 2010 refresh) and Visual Studio 2010 Ultimate (but any version should do).

I created a new Windows Phone Application project in Blend 4 and called it TwitterTimelineDemo and began by making some minor changes to the application and page titles as seen in the picture of my application.  Since this is just a quick application for experimentation, I have simply hardcoded my name into the TextBlock for the page title.

Next I added a simple class called Tweet to represent all tweets in the user’s timeline:

using System;
 
namespace TwitterTimelineDemo
{
    public class Tweet
    {
        public string Status { get; set; }
        public DateTime Date { get; set; }
    }
}

This class would act as the Model in my application.  The Model is an object that represents the content to be displayed.  In this example I am keeping this very basic and only pulling in the user’s status and the date it was posted.

Now we will create our ViewModel class called TweetViewModel.  The ViewModel is an abstraction of our View and will present our Model in a consumable manner appropriate to the View.  Our ViewModel will populate and hold a collection of Tweet objects (our Model) that we can bind to in the View to present them to the user.  Here is the initial code for the basic ViewModel:

using System.Collections.ObjectModel;
 
namespace TwitterTimelineDemo
{
    public class TweetViewModel
    {
        private readonly ObservableCollection<Tweet> tweets = new ObservableCollection<Tweet>();
 
        public ObservableCollection<Tweet> Tweets
        {
            get { return tweets; }
        }
    }
}

Next, I created the View for my application.  The View refers to all our visual elements and will bind to our ViewModel.  At this point, we can now use Blend’s sample data feature to style our View without needing to write any code to download tweets.  This is a great feature for designing an application in Blend.  We can create our sample data from an existing class in our project but first we will need to build it from Blend’s project menu.  Once it has been built, we can open the Data pane on the right-hand side, click the second button from the right, and then select “Create Sample Data from Class…” and then select our TweetViewModel class from the list.

In order to display our sample data, expand the TweetViewModel source and drag the Tweets collection to the controls LayoutRoot grid.  This will create a ListBox containing the sample data; reset it’s margins to make it fill the entire grid.  You can now style the individual list items by editing the ListBox’s ItemTemplate.

Now we need to add our TweetView control to MainPage.xaml.  Drag TweetView from the Project section in the Assets pane on the left-hand side of the screen onto the ContentGrid of MainPage.xaml (if it is not there, try rebuilding the project).  Select the newly added control and reset the width and height, change the horizontal and vertical alignments to stretch and reset the margins so it fills the grid.  I don’t see my sample data when I drag the control to MainPage.xaml and I suspect you can only see it in the control it was added to (any confirmation?).  At this stage, I am now done with MainPage.xaml and my XAML looks like:

<phoneNavigation:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    xmlns:local="clr-namespace:TwitterTimelineDemo"
    x:Class="TwitterTimelineDemo.MainPage"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">
 
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <Grid x:Name="TitleGrid" Grid.Row="0">
            <TextBlock Text="Twitter Timeline" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>
            <TextBlock Text="jmitch18" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>
        </Grid>
 
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <local:TweetView/>
        </Grid>
    </Grid>
 
</phoneNavigation:PhoneApplicationPage>

Now, we need to populate the ViewModel’s tweet collection with real data.  Twitter feeds are downloaded in an XML format so I used LINQ to extract Tweets.  I added a project reference to System.Xml.Linq and created the following method called GetTwitterEntries in TweetViewModel.cs to return my tweets.  Be sure to add “using System.Linq;” and any other required using statements at the top of the class to prevent build errors.

private IEnumerable<Tweet> GetTwitterEntries(string twitterFeed)
{
    XNamespace atomNS = "http://www.w3.org/2005/Atom";
    XDocument feed = XDocument.Parse(twitterFeed);
 
    IEnumerable<Tweet> entries = from tweet in feed.Descendants(atomNS + "entry")
                                 select new Tweet
                                 {
                                     Status = (string)tweet.Element(atomNS + "title"),
                                     Date = DateTime.Parse((string)tweet.Element(atomNS + "published"))
                                 };
 
    return entries;
}

To get tweets for my username (jmitch18) I would use the URL http://search.twitter.com/search.atom?q=from%3Ajmitch18.  To get tweets for any other user, just replace my name.  In production code, we would get the username from some more dynamic source, but for the purposes of experimentation I have opted for hard coding it.  I added the following constructor and event handler to my TweetViewModel class to populate it’s collection with real data:

public TweetViewModel()
{
    WebClient webClient = new WebClient();
    webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(DownloadStringCompleted);
    webClient.DownloadStringAsync(new Uri("http://search.twitter.com/search.atom?q=from%3Ajmitch18", UriKind.Absolute));
}
 
private void DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    foreach (Tweet tweet in GetTwitterEntries(e.Result))
        tweets.Add(tweet);
}

The last required step is to bind the ViewModel to the View.  I opened TweetView.xaml in Blend and selected it’s LayoutRoot grid in the Objects pane.  Under the Common Properties section on the Properties pane, you will see a heading “DataContext”; click the “New” button next to it and select TweetViewModel from the list.  Now if you run the application, after a brief second for loading, you should see a list of real tweets displayed.

This article is based on my current understanding of the MVVM pattern.  I would not say this code is production ready but I am open to constructive feedback and suggested improvements on the topic of this article.  Please feel free to contact me or use the comments section.

Sample project: http://www.jason-mitchell.com/uploads/TwitterTimelineDemo.zip

1. Create a new Silverlight 3 + website project (obviously) in Blend 3
2. Create 3 rows in the default grid layout
3. Add MediaElement control to top row
4. Add Slider control to middle row
5. Add two Button controls to bottom row
6. Set Slider maximum value to 360
7. Set MediaElement source to your video
   • Embedded in project or…
   • web address
8. Select Slider control, open Common Properties pane, right click Value textbox, select Data Binding
9. Select Element Property tab, click MediaElement control from left-hand list
10. Check “Use custom path expression” box and enter Projection.RotationY into the textbox
11. Expand Data Binding window and select TwoWay from the Binding Direction radio buttons
12. Select MediaElement, open Transform pane and make sure the X centre of rotation is 0.5 and Y is 1
13. Run application and you should be able to turn the video using the slider
14. Create a new storyboard called Down
15. Move to 1.5 seconds on timeline and set X value of Projection of the MediaElement to –90
16. Click the key frame on the time line to open the Easing pane
17. Select Bounce Out from drop down list
18. Select a Button control and open it’s event pane (small icon in the top left with a lightning bolt)
19. Enter FallDown into the Click text box and press enter
20. Type “Down.Begin();” in the new method
21. Run application and click the button to make the video fall over
22. Create a new storyboard called Up
23. Move to 1.5 second on timeline and set X value of Projection of the MediaElement to 0
    • If this is already 0, click the Add New Key Frame button on the timeline
24. Add a Bounce Out easing effect
25. Select the second Button control and create a click event for it and enter “Up.Begin();” into the new method

And there you have it!  25 steps to create a useless and impractical video player, at least I hope its only 25!

To make this application, I used Expression Blend 3 although since Silverlight is based on XAML, it is entirely possible to do this just from Visual Studio.  Personally, I don’t really like writing XAML unless I really have to and prefer to use the automatically generated code from Expression Blend.

The first step in creating this application was to give the default grid layout three rows, one for the video, one for the slider and one for the up and down buttons.  For this example, this step isn’t all that important but I did it anyway! The layout for this application is very straightforward to create; we need to add a MediaElement control to the top row, a Slider control to the second row finally two Button controls to the bottom row.  If you don’t know where to find the MediaElement and Slider controls, you can search for them in the assets dialog box which is shown in the image to the right.  Once you have added the Slider to your application, you can change the minimum and maximum values in the Common Properties pane.  I set mine to go from 0 to 360 so the Slider will spin the MediaElement around fully.  You will also want to set the media source for the MediaElement control, you can embed a video in the project and reference it in the Source box, however this will create a very large XAP package that will take some time to download.  To solve this you can specify a web address to use as your video source which is what I have done.

Next, we want to link the value of my Slider control, to the Projection.RotationY property to rotate the video around the Y-axis.  This is really simple to do , in Blend if you select the Slider control, open the Common Properties pane, right click on Value and select Data Binding you will see a new dialog box on the screen allowing to create a new data binding.  We want to bind the Slider value to the property of another element in the application so select the Element Property tab at the top of this window.  You should now see two lists, one that displays the elements in your application and another that displays the element properties.  Select your MediaElement control from the list on the left (I called mine mediaElement).  Unfortunately we can’t select the RotationY property from the second list so we need to check the box below the lists that say “Use a custom path expression” and enter Projection.RotationY.  We need to set the binding direction option to TwoWay, so click the arrow below the custom expression box and select TwoWay then click ok.  To make the MediaElement rotate about it’s centre, we need to change it’s centre of rotation in the Transform pane; make sure that the value of X is 0.5 (the range goes from 0 to 1).   Now if you build and run the application you should be able to rotate the video using the Slider.

Now we need to make the buttons make the MediaElement fall down and come back up again.  First step is to make another change to it’s centre of rotation, so if we open the Transform pane again and set it’s Y value to 1 to indicate that we want it to rotate on the X-axis around the bottom of the element.  In order to create the animations we need to use Storyboards, you can create a new storyboard by clicking the “+” in the Objects and Timeline pane.  Name your storyboard “Down”, we will use this to to make the MediaElement rotate and make it look like it fell over.  Once you create your storyboard, the timeline should automatically open; move the yellow marker to 1.5 seconds and with the MediaElement selected, go to the Transform pane and set the value of X under Projection to –90.  Now click play on the timeline and you should see the MediaElement “fall “ down….but it doesn’t look very realistic!!  To make this animation look a bit better, we can use something called Easing, a feature new to Silverlight 3. Click on the key frame in the timeline and the Easing pane should open up (by default this appears on the right hand side of the screen).  The Easing pane contains a drop down list with all the different types of easing, you should definitely have a play about with these and see their effects.  For my example, I chose Bounce Out to make it look as if the MediaElement has actually hit something that’s stopping it falling further.  Click play on the timeline and see what happens!

We now need to tell our application when to play this animation.  So select the button you want to use to make the video fall and open the events pane (little icon in the top right of the window with a lightning bolt on it).  In the Click box, type MoveDown and press enter (oh look Blend 3 has a built-in code editor), this will automatically hook up the event and create the method to handle it.  In your method type in “Down.Begin();” this will tell the storyboard to begin playing.

Creating the Up animation is similar to the Down animation.  Create a new storyboard and call it Up, then in the timeline move the yellow marker to 1.5 seconds and this time click the Record Keyframe button.  You MediaElement should already be displayed in the up-right position so we don’t need to change any properties.  If it isn’t upright, then set the X value for Projection in the Transform pane to 0.  Follow the same steps to add an Easing effect to this animation.  I used a Bounce Out effect again and set it’s bounces to 1 and bounciness to 23.  Don’t forget to set the event to your Up button!

Boy that was a lot of waffling, thinking back I should have maybe just made a numbered list of steps; maybe I will do that later!