Mingfei's Code Block

Building video application on Windows 8 – things you want to know

Mingfei — Sat, 27 Oct 2012 18:32:00 GMT

If you want to build video applications on Windows 8 platform, you may find this blog useful. We (Windows Azure Media Services team) ships Smooth Streaming Client SDK for Windows 8 and Microsoft Media Platform Player framework (MMPPF) in addition to Windows 8 Media Foundation to help you build rich media applications.

Building Video application on Windows 8 - what are supported?

If you are building a video application on Windows 8 and your video source is H.264 (.MP4) for instance:

You could use MediaElement class in XAML application to handle the playback. Code sample:

<MediaElement Source="Media/video1.mp4" AutoPlay="True" />

Or you could use <video> tag in HTML5 application. Code sample:

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4"> </video>

Here is a detail list of video format that Windows 8 playback pipeline support (full details in Windows blog) :

That's what happen when developing an application with .Mp4 URL for instance. Windows 8 Media pipeline has Decorder to decode the video, Renderer to render the image and Decrypter to decrypt the video if it is protected. As long as the video format you provides falls into the category I showed in the table above, Windows 8 Media pipeline will handle for you. Meanwhile, Windows 8 team put in a lot of efforts for optimizing all these operations to achieve battery optimization, hardware acceleration and etc.

Playing Smooth Streaming content using Smooth Streaming Client SDK for Windows 8

Read full blog here ..

What is Windows Azure Media Services

Mingfei — Mon, 27 Aug 2012 19:47:23 GMT

I am a program manager currently working on Windows Azure Media Services(WAMS) team. This blog is my first tempt for trying to explain what WAMS is. We released Windows Azure Media Services Preview in June 2012. Currently we offer a 90 days free trail period for developers. If you are a Azure subscriber, you have up to 1 TB encoding volume per month. And if you are on Azure 90 days free subscription plan, you will have up to 20 GB data in your storage account. You could check out this blog – how to sign up for Windows Azure Media Services.

What is Windows Azure Media Services

Figure 1: Windows Azure Media Services

Windows Azure Media Services offers a collection of components and technologies from Microsoft and third parties to enable end-to-end media solutions, leveraging on Windows Azure platform. If you are looking for end-to-end media solution with the power of cloud computing, Windows Azure Media Services is the right service you should consider.

Read the full article here.

Getting started with Windows Azure Media Services

Mingfei — Sun, 19 Aug 2012 23:49:04 GMT

This blog shows you how to request for Windows Azure Media Services Preview and create an account through Windows Azure portal.

Sign up for the preview

1. Go to windowsazure.com and obtain a free-trail account or login with your own account.

2. Go to https://account.windowsazure.com/PreviewFeatures and that’s where you could request for feature preview.

3. Click on Try it now showed in the picture above. After clicking it, you will see the following screen. Currently we offer three-months free trail and you could click on complete if you want to give it a try.

Continue reading here.

Building Windows Store Apps with Smooth Streaming Client SDK Beta 2

Mingfei — Tue, 14 Aug 2012 19:49:00 GMT

Yesterday we announced the release of Smooth Streaming Client SDK Beta 2 for Windows Store Apps.The Smooth Streaming Client SDK Beta 2 for Windows Store Apps enables developers to build Windows Store applications that can play on-demand and live Smooth Streaming content with or without Microsoft PlayReady protection.

This blog is a walk-through for building a “Hello World” version of Smooth Streaming Windows Store Apps, using JavaScript and HTML5. This sample application uses Smooth Streaming Client SDKs directly. But we also recommend you to take a look at Microsoft Media Platform Player Framework for Windows 8, which is a player framework built on top of client SDKs. It is very easy to use for you to build rich video applications. If you are using earlier version of Client SDK, you could refer to this blog.

Continue reading here.

Smooth Streaming Client v2.0 walkthrough: How to figure out when data chunk failed to be downloaded

Mingfei — Sun, 03 Jun 2012 23:31:00 GMT

This blog belongs to a series of Smooth Streaming Client v2.0 walkthroughs. You could download this latest Smooth Streaming Client SDks here. We have made a few major changes in this version. In this blog, I will introduce to you how to figure out data chunk information while you are downloading it.

While playing smooth streaming content, you could utilize ChunkDownloadedEventArgs to figure out downloaded chunk information, such as whether data chunk is successfully downloaded, what type of data chunk is, what duration the chunk has and etc. This is very useful for you to monitor data chunk download progress. If you find something wrong, you don’t have to wait the downloader to keep retrying, rather you could route to other media source for instance.

Here is all the information you could get from ChunkDownloadedEventArgs:

 public class ChunkDownloadedEventArgs : EventArgs
 {
 public Uri CanonicalUri { get; }
 public ChunkInfo Chunk { get; }
 public ChunkResult.ChunkResultState DownloadResult { get; }
 public ChunkRequestType RequestType { get; }
 public HttpStatusCode StatusCode { get; }
 public TrackInfo Track { get; }
 }

You could refer to the table below for more information.

The way to implement ChunkDownloadedEventArgs is quite straight forward. Firstly, we need to hook up ChunkDownloadedEventArgs with smooth streaming player.

SmoothPlayer.ChunkDownloadFailed += new EventHandler<ChunkDownloadedEventArgs>(SSME_ChunkDownloadFailed);

Here I implement a method to read out all the useful information from the event args.

 private void SSME_ChunkDownloadFailed(object sender, ChunkDownloadedEventArgs args)
 {
 {
 statusTxt.Text = "The actual request type is " + args.RequestType+"\n";
 if (args.Chunk != null)
 {
 statusTxt.Text += "chunk is not null"+"\n";
 statusTxt.Text += "chunk duration is " + args.Chunk.Duration + "\n";
 statusTxt.Text+="chunk time stamp is "+args.Chunk.TimeStamp+"\n";
 statusTxt.Text += "chunk stream is " + args.Chunk.Stream + "\n";
 }
 
 if (args.Chunk.Stream != null)
 {
 statusTxt.Text += "chunk's stream is not null"+"\n";
 }
 statusTxt.Text+="This chunk is "+ args.Chunk.Stream.Type+"\n";
 if (args.Track != null)
 {
 statusTxt.Text += "track is not null"+"\n";
 }
 statusTxt.Text+="The result is "+ args.DownloadResult+"\n";
 statusTxt.Text += "The result is " + args.StatusCode+"\n";
 };
 }

Assign media url in code behind for SmoothStreamingMediaElement

Mingfei — Fri, 11 May 2012 01:07:00 GMT

In this short blog, I will talk about how to assign media url in code behind for SSME: SmoothStreamingMediaElement. For this code sample, I am not using Microsoft Media Platform: Player Framework v2.6. I am building the application from scratch using Silverlight Smooth Streaming Client v1.5. I hope this short blog will help you while debugging.

1. You will need to add the player in .xaml file. I didn't set the streaming source in SmoothStreamingMediaElement in .xaml file.

<SSME:SmoothStreamingMediaElement AutoPlay="false" x:Name="SmoothPlayer" Grid.Row="0" />

2. And go to the code behind, and insert the following code

 public MainPage()
 {
 InitializeComponent();
 
 SmoothPlayer.SmoothStreamingSource = new Uri("http://devplatem.vo.msecnd.net/Sintel/Sintel_VC1.ism/manifest");
 
 SmoothPlayer.MediaOpened += (o, e) =>
 {
 SmoothPlayer.Play();
 };
 }

You will see from the code above, the first step is straight-forward, that we assign the media source URI to SmoothStreamingSource. However, if now, you immediately call SmoothPlayer.Play(), you will get an error. That's because when media source gets set up, Smooth Streaming player will do a bunch of things, such as downloading manifest and downloading some amount of data chunks. Thus, initially I called SmoothPlayer.Play() after ManifestReady() event, that's also wrong. Because Smooth Streaming player still needs to validate the media stream and read the file reader. However, MediaOpened event guaranteed all these. For details, you could read on MediaOpened() MSDN documentations here.

In addition, if you want to read more about how we design different state of the media elements, you could read MSDN documents Media Element State Transitions.

Smooth Streaming Cache Plug-in implementation

Mingfei — Mon, 09 Apr 2012 23:20:00 GMT

When you implement a video player, it is good to use cache to store played video fragments. Therefore, user doesn't need to download manifest or data chunks from server multiple times. It saves network consumption for your users and reduce the latency since they don't need to download from server all the time. Meanwhile, using cache reduces server load for content provider as well. If you use Smooth Streaming Client, here is how you could implement a cache plug-in to cache data.

The IIS Smooth Streaming Client provides the ISmoothStreamingCache interface to support offline scenarios. Here is how it works in high level.

When user starts to play video, Silverlight Smooth Streaming Client will check with Isolated Storage Instance (this isolated storage is within Silverlight player) to see whether there is video manifest or data chunks available to read. If not, Isolated Storage Instance will return a NULL as CacheResponse. Now, client knows there is no cache available for retrieving, then, it will go ahead to talk to server for getting manifest/data chunks, and stored it in the cache for next-time use. Here is a high level diagram for this conversation.

Second time, since we have saved data into cache (isolated storage), when client check with cache using BeginRetrieve(), cache will give back the data in EndRetrieve(). Client won't need to make a request to server in this case.

Here is a detailed documentation on how to implement Cache Plugin-in on MSDN.

I did a simplified version for demo purpose and you could download it here. And let's explain the code in steps.

0. This project is based on Smooth Streaming Client 1.5. For setting up instruction, please refer to my another blog post.

1. In MainPage.xaml, a smooth streaming player is created:

 <SSME:SmoothStreamingMediaElement AutoPlay="false" x:Name="SmoothPlayer" SmoothStreamingSource="http://mediadl.microsoft.com/mediadl/iisnet/smoothmedia/Experience/BigBuckBunny_720p.ism/Manifest" Grid.Row="0" />

2. And in MainPage.xaml, there are only "Play" button, "Stop" button and "Clear Cache" button.

3. Open MainPage.xaml.cs, and here are all the methods listed in this file. (Click to view a larger image)

4. If you open SmoothPlayer_Loaded(obejct sender, RoutedEventArgs e) method, you will see:

 void SmoothPlayer_Loaded(object sender, RoutedEventArgs e)
 {
 cache = new ISO_StorageCache();
 SmoothPlayer.SmoothStreamingCache = cache;
 }

Basically, when ISO_StorageCache getting initialized, we will create a Isolated Storage file for storing manifest and data chunks. The URL/file name pairs stored in the IsolatedStorageSettings.ApplicationSettings object are read into a dictionary object when the cache is instantiated, and the dictionary pairs are used to identify data files in the cache. Here is the code:

 public ISO_StorageCache()
 {
  IsolatedStorageFile isoFileArea = IsolatedStorageFile.GetUserStoreForApplication();
 
 foreach (System.Collections.Generic.KeyValuePair<string, object> pair in IsolatedStorageSettings.ApplicationSettings)
  {
  if (!keyUrls.ContainsValue((string)pair.Value) && isoFileArea.FileExists((string)pair.Value))
   KeyUrls.Add(pair.Key, ((string)pair.Value));
  }
 }

5. Still looking at SmoothPlayer_Loaded method, "SmoothPlayer.SmoothStreamingCache=cahe". In this line,an ISmoothStreamingCache object is started and a request for data is issued, the Silverlight Smooth Streaming Client will call each of the methods in the order: BeginRetrieve, EndRetrieve, BeginPersist, EndPersist as showed above. And I have explained the use of these four methods at the beginning.

6. At the end, if you want to modify the result(manifest or data chunks) before going into cache, you could catch the CacheResponse before it is saved into Isolated Storage file in EndPersist() method. CacheResponse will give you information for your content type, a response(manifest or data chunks) in stream format and header.

7. I often hit the problem that isoFile size is not enough and you could increase isoFile's size in EndPersist() by adding the following line. Or you could press the clean cache button.

 /*Increase ISOFileArea size*/
 long availbleCacheBytes = isoFileArea.AvailableFreeSpace;
 long saveQuotaNumber = isoFileArea.Quota;
 
 isoFileArea.IncreaseQuotaTo(isoFileArea.Quota + 1048576);

Getting Started for building a smooth streaming client

Mingfei — Sat, 31 Mar 2012 19:30:00 GMT

There are two types of developments for building a Smooth Streaming Client:

IIS Smooth Streaming Client 1.5 APIs : developers could utilize these APIs to build applications on Silverlight platform (runs on desktop,Xbox or Windows phone). These APIs is formally known as "Smooth Streaming Player Development Kit
Microsoft Media Platform - Player Framework v2.6 : a open source framework. It includes sample player and numbers of plugins for developers to get quick started. And MMPPF is based on IIS Smooth Streaming Client APIs.

This blog is for developers who want to build media player based on IIS Smooth Streaming Client APIs, instead of utilizing the framework.

Pre-request:

Install Smooth Streaming APIs: http://www.iis.net/download/SmoothClient
Install Silverlight Development Runtime: http://www.silverlight.net/downloads I installed Silverlight 5 Tool for Visual Studio 2010 SP

Now we will build a Smooth Streaming Client step by step:

1. Open Visual Studio. Select New Project... and Select Siverlight Application under Visual C# section. I choose PlayerDemo1 as the project name.

2. Choose Host the Silverlight application in a new Web site.

3. Now you could see two projects are generated in Solution Explorer. PlayDemo1 is the Silverlight application with XAML files. And PlayerDemo1.Web is a web application project with HTML page, which contain the Silverlight component you built in PlayerDemo1. If you build this application now, you will see a PlayerDemo1.xap get generated in ClientBin under PlayerDemo1.Web project.

4. Right click on References fold under PlayerDemo1 project, choose Add Reference...

5. When you install Smooth Streaming APIs, the APIs are resided at /%SystemDrive%/Program Files(x86)/Microsoft SDKs/IIS Smooth Streaming Client/v1.5/Silverlight. And choose Microsoft.Web.Media.SmoothStreaming.dll.

6. Add namespace in MainPage.xaml under PlayerDemo1 project.

xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"

7. Add XAML for the media player and the whole MainPage.xaml should look like this:

<UserControl x:Class="PlayerDemo1.MainPage"
 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:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming" 
 mc:Ignorable="d"
 d:DesignHeight="640" d:DesignWidth="480">
 
 <Grid x:Name="LayoutRoot">
 <SSME:SmoothStreamingMediaElement AutoPlay="True" x:Name="SmoothPlayer" SmoothStreamingSource="http://streams.smooth.vertigo.com/elephantsdream/Elephants_Dream_1024-h264-st-aac.ism/manifest" Grid.Row="0" />
 </Grid>
 </UserControl>

8. Lastly, press F5 and you will compile the project and see a simple smooth streaming client.

Some useful links:

Smooth Streaming Deployment Guide (Comprehensive and useful): prepare your own media source, config Smooth Streaming Server and deploy media onto your server
IIS Smooth Streaming HD Sample Guide: it provides two media sources in streaming format so you don't need to use Encoder to prepare your media
[Blog]Getting started with IIS Smooth Streaming: Step by Step showing you how to set up a sample Smooth Streaming

Testing Tools for web API

Mingfei — Sat, 30 Jul 2011 10:40:00 GMT

Web API’s have long been used to allow programmers access to functionality via a well defined interface without the need to understand exactly how that functionality is implemented. I was using Hurl and fiddler recently for Web API testing and I hope it is helpful for Web Api developers as well as consumers to test out the services.

Hurl: you can download at http://hurl.it/

Hurl is a Web-based tool for testing APIs. You could choose the request method, customize headers and POST parameters, add basic authorization, and follow redirects. Then view the nicely formatted request and response. It is a very clean and easy tool for testing your APIs.

Here is the Twitter API reference page I used: https://dev.twitter.com/docs/api/1/get/search

HURL provides five HTTP methods: PUT, GET, POST, DELTE, and HEAD. And you could apply HTTP basic access authentication. You could also view request and response body in full size view (a pop up window). Another thing I like Hurl is that for response body, it highlights the contents with different colors, which made it really easy to read.

You could also login and after that, you could view your call history:

By clicking on each URL you will be redirected back to request page with parameters you used previously. And you could repeat the test again or modify on the past test.

Fiddler: you can download at http://www.fiddler2.com/fiddler2/
Fiddler is a free Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. It is a desktop application only runs on Windows Operating System.

There are two parts of Fiddler you may be interested in immediately. Firstly, it is the request builder showed above. You could customize your request. It has almost all types of HTTP methods supported. By pressing the Execute button you will see the response return.

Secondly, it is the Session Inspector. By clicking on the web sessions history on the left side, you could inspect each session individually with details showed up on Inspectors.

Another interesting feature for Fiddler is that it provides Web View, so you could see images that are returned. This allows you to see specifically what was returned to the browser before it was interpreted.

Fiddler is a very powerful tool has much more functions than I introduced. You could refer to Fiddler help document for more information. http://www.fiddler2.com/Fiddler/help/

Power of HTML5 Audio Tag – With IE9, Chrome, Safari, Wp7, iPhone, iPad

Mingfei — Thu, 26 May 2011 14:06:00 GMT

I tried HTML5 Audio Tag myself and simply amazed by how easy this can be implemented. Meanwhile, because it is native to the browser, it works fine on most of browsers (I tired FireFox, IE9, Safari and Chrome) and most of devices (Mango version of Windows Phone, iPhone and iPad). This is my toy site: mbox.cloudapp.net. I may not host it long hence I have printscreen for all the scnarios below, so you could see how Audio Tag rendered in different end devices.

Currently, HTML5 audio element has five attributes:

autoplay: Specifies that the audio should start playing as soon as it is ready.
controls: Specifies that playback controls should be displayed.
loop: Specifies that the audio should start over again, when it is finished.
preload: Specifies whether or not the audio should be loaded when the page loads.
src: Specifies the URL of the audio to play.

This is how to implement HTML5 video tag with one single line of code.

 <audio id="player" src="YOUR_SOURCE_HERE" controls="controls" autoplay></audio>

And you can see the UI rendered like this in IE9. It shows a +30s and -30s when you mouse over the timer on both side. Also, current time and time for the whole song will be displayed as well.

Same Audio tag rendered like this in Chrome 11. It doesn’t show much as IE9, such as overall timing and 30s fast-forward/fast-backward.

This is how Audio Tag looks like on Safari 5. There is no current time and total time. However, you can drop to next song/previous song.

I tired Opera 11 as well. It rendered in the browser but it doesn’t play.Same thing happend to Firefox 4 Beta. Later on i found out it was because they don't support the audio format .Mp3.

I further tested Audio tag on iPhone 4.3 and iPad 4.3.3. It rendered as below. Moreover, when you minimize browser, music will still continue in the background. Double tab you could open the multi-task bar at the bottom of screen, swap right, you could see the native audio player control. I truly like this kind of native integration with HTML5 tag.

I tested Andiord phone as well, both 2.3 and 2.2 version. The Audio bar doesn’t get loaded. Current Windows Phone 7 doesn’t support Audio tag. However, since IE9 will be shipped with next version of Windows Phone 7, obviously, audio tag will be native to Windows Phone 7 browser in the near future as well.

I had a problem with starting a song with a specific timing, such as starting a song from 20 seconds (streaming). Because the song may not be loaded till that point, so if you jump to that point, it will have javascript error. Here is a way to solve it. And you can definitely improve it.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

    function timeMsg(startime) {

        var t = setTimeout("a("+startime+")", 5000);

    }



    function a(startime) {

        $("#player")[0].play();

        $("#player")[0].currentTime = startime;

    }

    function song_onClick(item) {

        var startTime = item.id;

        var songSrc = item.title;

        alert(songSrc + startTime);

        $("#player")[0].pause();

        $("#player")[0].src = songSrc;

        $("#player")[0].load();

        timeMsg(startTime);

     }

 </script>

</head>

<body>

 <audio id="player" src="YOUR_SOURCE_HERE" controls="controls" autoplay></audio>

    <div class="song" title="YOUR_SOURCE_HERE" id="20" onclick="song_onClick(this)">

        Maid with the Flaxen Hair

    </div>

</body>             

</html>

You can see from the code, the ID of the audio element is player.

$(“#player”)[0].src = songSrc; is used to change the song src. So that we can change to the next song.

However, here is the track. If you wanted to start a song from some random point, you have to load the song first (if the song is streamed). Hence, I used setTimeOut method here to delay playing the song for 5 sec and I started play the song from 20 seconds. However, still, if you start more than 20 seconds, 5 seconds may not be long enough. You could design it to times a multiplier.

Hope this post will inspire you to try out your audio application in HTML5, so you could benefit from one code base works for most of browsers and devices!

Microsoft cloud day in Singapore

Mingfei — Thu, 26 May 2011 13:49:30 GMT

Microsoft Cloud Day was held on April 27th 2011 with 170 attendees representing 130 companies. It was a full day event with the aim of updating our community on Windows Azure Platform. We had extensively covered a mix of business and technical contents, from introducing the importance of cloud computing to deploying and monitoring Windows Azure application on the cloud.

Highlights of the event includes the participation of Windows Azure AppFabric product team sharing the roadmap which was beneficial to our customers. We had excellent speakers from our SI Partner aZaaS, NCS and we also invited our customer Yolk for showcasing its Azure solution. All training partner booths (aZaaS, NCS and NetAsset) showcasing MS learning and cloud courses were well received.

We also like to take this opportunity to thank all who attended the event and all who have helped one way or another in making Cloud Day a success. We hope to see you again!

Here’s are the slides link and video on Channel 9:

Keynote by DPE Director Ziriad Saibi

Introduction to Windows Azure platform and real world case study by Azure Platform Strategy Advisor Daniel Bucherer

Building web applications with Azure storage by Lead Consultant, NCS, K.Mohamed Faizal
Understanding and implementing Windows Azure Platform Security by Tan Choon Ngee, Directo, aZaas Pte Ltd.
Windows Azure AppFabric, Comprehensive cloud Middleware platform by Product Unit Manager, Alex Chan
Cloud Computing – A Crash Course for Architects by DPE Platform Strategy Advisor, Darryl Chantry
Deploying and monitoring windows azure applications by Wely Lau, Windows Azure MVP, NCS
Closing Note by Harish Aitharaju, Server & Tool business lead, Microsoft Singaproe

Windows Phone 7 : Style it using Expression Blend

Mingfei — Sun, 03 Oct 2010 10:01:00 GMT

Expression Blend 4 for Windows Phone provides the same streamlined development workflow for Windows Phone 7 that was previously only available for Silverlight and .NET applications. The ability to take your ideas all the way from concept to completion helps accelerate the delivery of innovative applications on Windows Phone. You can download Expression Blend 4 for Windows Phone Beta here. Now I will introduce some simple but useful tips for utilizing Expression Blend 4 for your Windows Phone Application.

Style your page element by using Expression Blend
Add Visual States to a Control
Make an image button and create pressed effect

Firstly, using Expression Blend 4 to style your page element. For example, style your page title.

<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

This is default style of application title in MainPage.xaml when you initiate a new project. Here PhoneTextNormalStyle is applied to application title. Now we will create a new style by using Expression Blend.

1. Right click on MainPage.xaml and select open in Expression Blend...

2. In Expression Blend, choose MY APPLICATION first and you will see a blue color box surrounded this title and it indicates that this object has been selected. Right Click on MY APPLICATION and choose Edit Style -> Create Empty...

3. You will see a dialog appear and key in a name you would like to use for your style. And I named it "MyTitleStyle". The dialog is showed as below:

4. Choose different color scheme or font size from Properties windows. Besides the normal color palette, there is also a Color resources introduced here which provides colors from phone theme, as showed in the screenshot below.

5. After editing the style, close your Expression Blend and open Visual Studio. It will ask you "This file has been modified outside of the source editor. Do you want to reload it?". Click on "Yes to All".

6. Open MainPage.xaml. And you will see your ApplicationTitle line has been modified as:

At the top of the page,you will see the style has been added.

<phone:PhoneApplicationPage.Resources>

<Style x:Key="MyTitleStyle" TargetType="TextBlock">

<Setter Property="Foreground">

<Setter.Value>

<SolidColorBrush Color="{StaticResource PhoneAccentColor}">

</Setter.Value>

</Setter>

<Style> 

</phone:PhoneApplicationPage.Resources>

7. However, now this style can only be used within this page. If you want it to become a global style, you can cut/paste this style into App.xaml section Application.Recources, showed as below:

<Application.Resources>

<Style x:Key="MyTitleStyle" TargetType="TextBlock">

<Setter Property="Foreground">

<Setter.Value>

<SolidColorBrush Color="{StaticResource PhoneAccentColor}">

</Setter.Value>

</Setter>

</style>

</Application.Resources>

or when you try to build a new template, choose the scope as Application.

8. Now this style could be used in entire project. App.xaml's resource section could be used as a global CSS file. As such, you could manage your style more efficiently.

Secondly, we will try to add Visual States to a Control, for instance, add Pressed State effect to a button. There are different common states that a button could have, such as Normal, MouseOver, Pressed, Disabled... It is important to make changes to the states so that user get a sense of the result of his/her action. For example, we could make the button's label transforms.

1. Create a button on the MainPage.xaml. You could drag and drop one button from Toolbox and name it NewBtn with content New. Once you are done, it should be something look like this:

2. Repeat what we have done just now. Right Click on MainPage.xaml and choose to Open In Expression Blend...

3. In Expression Blend, right click on New Button and choose Edit Template ->Edit a Copy... Then you will see in the Objects and Timeline window, button control breaks down into ButtonBackground and ContentContainer.

4. Switch to States Window and you will see different CommonStates and FocusStates here. If you couldn't find the window, go to top menu bar. Under Window->; States. Make sure it is ticked.

5. Click on Pressed States and you may notice on the right top corner, it shows Pressed State recording is on. From Object and Timeline window, there are Background and BorderBrush under ButtonBackground. That's because initially, there is default animation of button control, once user clicks the button, its Background and BorderBrush will change colors.

6. Click on ContentContainer. We want to add an effect to make words transform while user is pressing the button. Find Transform under Properties panal and click on the Scale icon. Change X into -1. Click on Base States to stop recording.

7. Now, press F5 and see how it looks like. Click on New button and you will see the background changes as well as the label transformed. Thirdly, I will show you how to make an image to button and create pressed effect. 1. Prepare two images that used as button later on, as showed below. Right Click on your project name and choose add existing item...

2. Drag and drop the light green check icon onto canvas.

3. Right-click on the check image and select Make Into Control...

4. Choose Control Type Button and type in name checkBtn. Define in this document. Here we are making that image acts like a real button.

5. Select checkBtn and edit Content under Common Properties to Yes. Meanwhile, rearrange the word Yes to the right corner for making the button looks better.

6. Choose Yes Button, right-click and choose Edit template ->; Edit Current

7. Choose [Grid] in Objects and Timeline windows and double click on dark green icon file in Project windows and you will see something like the picture showed below:

8. Click on Dark Green Image and set Opacity to 0%. What I wanted to do here is to show dark green check icon once user clicks on the button. So we will set Opacity back to 100% in the animation later.

9. Click on Pressed in States panel. Click on light green image and change Opacity to 0% and click on dark green image and change Opacity to 100%. Click on Base States to stop recording.

10. Now Press F5, you will see how your image act as a button and animated once user pressed on it.

Windows Phone 7 : How to Store Data and Pass Data between Pages

Mingfei — Sun, 03 Oct 2010 09:36:00 GMT

This is a walk-through tutorial for demonstrating following functions:

Store data on Windows Phone 7 by using Isolated Storage
Pass data through parameter between pages
Dynamic generate data grid, which contains data and related link button
Use XElement, XAttribute as data structure

I will explain related concepts through codes step by step. This application is used as a shopping list. Users will be able to key-in items they want to shop and view the shopping list as well. Add and Open function are implemented and I will leave remove function for you to try out. Before start, You could download sourcecode here. And Windows Phone 7 developer package could be downloaded here.

1. Click on File -> New-> Project ... Let's name the project: ShoppingList_Demo.

2. Open Solution Explorer on the right side and right-click on References -> Add Reference... Here, select System.Xml. Linq. We will use XElement and XAttribute later, which is inside System.Xml.Linq package.

3. We will create a page for inserting shopping list records, so that we could retrieve records later. Right-Click on ShoppingList_Demo and select Add->New Item... Name the new page as AddItem.xaml.

4. Open AddItem.xaml, in TitlePanel, replace the ApplicationTitle as "My Shopping List" and replace Page Title as "New Item". Code is showed as below:

 <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">

            <TextBlock x:Name="ApplicationTitle" Text="My Shopping List" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="New Item" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>

5. Inside ContentGrid panel, put in code showed as below:

 <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" MinHeight="72.5"/>
                <RowDefinition Height="Auto" MinHeight="72.5"/>
                <RowDefinition Height="Auto" MinHeight="72.5"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100*" />
                <ColumnDefinition Width="346*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Grid.Row="0" Text="Name:" HorizontalAlignment="Center" VerticalAlignment="Center" />

            <TextBox Name="nameTxt"  Grid.Column="1" Margin="8" Padding="2" Height="59"  />

            <TextBlock Grid.Column="0" Grid.Row="1" Text="Price:"  HorizontalAlignment="Center" VerticalAlignment="Center" />

            <TextBox x:Name="priceTxt"  Grid.Column="1" Margin="8" Padding="2" Height="59" Grid.Row="1"  />

            <TextBlock Grid.Column="0" Grid.Row="2" Text="Quantity:" HorizontalAlignment="Center" VerticalAlignment="Center" />

            <TextBox Name="quanTxt" Grid.Column="1" Margin="8" Padding="2" Height="59" Grid.Row="2" />

        </Grid>

        <Button x:Name="BtnSave" Content="Save" HorizontalAlignment="Right" Margin="0,0,17,0" Grid.Row="1" VerticalAlignment="Bottom" Click="BtnSave_Click" />

Basically, it helps you to populate a layout showed as below:

Let me explain the code here. Inside a grid, there are two types of definition. One is RowDefinition. As you can see here, we populate three rows with minheight 72.5 and the Grid will auto-fill the last row with proper height. The another one is ColumnDefinition. Here we specify them as 100* and 346*, which means the whole column width was devided by 100+346=446 units and the first column takes 100 units and the second column takes 346 units. In each TextBlock, take the first one as a example. Grid.Row="0" and Grid.Column="0" indicate this TextBlock cell located in the first row and first column of the Grid. The rest components of the UI I believe are quite straight-forward to understand.

6. Choose Save button in the UI and double-click. It will bring you to the code-behind, which is BtnSave_Click method.

7. Add two namespaces that we will be using later.

using System.IO.IsolatedStorage;
using System.Xml.Linq;

8. Insert the following code to BtnSave_Click method:

using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication())
{
XDocument _doc = new XDocument();
XElement _item = new XElement(nameTxt.Text);
XAttribute price = new XAttribute("price", priceTxt.Text);
XAttribute quantity = new XAttribute("quantity", quanTxt.Text);
_item.Add(price, quantity);
_doc = new XDocument(new XDeclaration("1.0", "utf-8", "yes"), _item);
IsolatedStorageFileStream location = new IsolatedStorageFileStream(nameTxt.Text + ".item", System.IO.FileMode.Create, storage);
System.IO.StreamWriter file = new System.IO.StreamWriter(location);
_doc.Save(file);
file.Dispose();
location.Dispose();
NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
}

XElement is a class that represents an XML element and the fundamental XML construct.  And XAttribute is used to create attribute for a specific XML element. You could check out details here. Here, we construct a XML as the following output:

<root price="xx" quantity="xx"></root>

To store local data a on a Windows Phone 7 phone, the tool of choice is isolated storage. The reason to use "Isolated" is that all the data saved in one application can only be accessed within that application. You can check out more information here.

using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication())will allocate an instance for IsolatedStorageFile.

 Now, we will need to create a stream to write to. IsolatedStorageFileStream location = new IsolatedStorageFileStream(nameTxt.Text + ".item", System.IO.FileMode.Create, storage);
Here, a new stream is written to file named "xx.item".
After that, you dispose the temp file and location since everything is saved into phone storage. And we return to MainPage.xaml for content display.

9.Add in a navigation from MainPage.html to AddItem.xaml Page. Firstly, insert this code below:

<phone:PhoneApplicationPage.ApplicationBar>

        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

            <shell:ApplicationBar.MenuItems>

                <shell:ApplicationBarMenuItem Text="new" Click="New_Click"/>

            </shell:ApplicationBar.MenuItems>

        </shell:ApplicationBar>

    </phone:PhoneApplicationPage.ApplicationBar>

10. Add a method in MainPage.xaml.cs to navigate to Add New Item page.

private void New_Click(object sender, EventArgs e)
{
NavigationService.Navigate(new Uri("/AddItem.xaml", UriKind.Relative));
}

Now Press Crtl+F5 and you will be able to see something like this while you click on ... in the interface.

11. We add a listBox in MainPage.xaml in order to display all the existing shopping lists. Add the coding below into <Grid x:Name="ContentGrid" ...>

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentGrid" Grid.Row="1">
            <ListBox Grid.Row="0" Margin="10" FontSize="48" Name="Files">
            </ListBox>
</Grid>

12. Now we will retrieve whatever shopping list the user has saved. Insert the following code into MainPage constructor (public MainPage()) right after InitializeComponent().

Loaded += (object sender, RoutedEventArgs e) =>
{
Files.Items.Clear();
using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication())
{
foreach (string filename in storage.GetFileNames("*.item"))
{
	Grid a = new Grid();
	ColumnDefinition col = new ColumnDefinition();
	GridLength gl = new GridLength(200);
	col.Width = gl;
	a.ColumnDefinitions.Add(col);
	ColumnDefinition col2 = new ColumnDefinition();
	GridLength gl2 = new GridLength(200);
	col2.Width = gl;
	a.ColumnDefinitions.Add(col2);
	TextBlock txbx = new TextBlock();
	txbx.Text = filename;
	Grid.SetColumn(txbx, 0);
	HyperlinkButton btn = new HyperlinkButton();
	btn.Width = 100;
	btn.Content = "Show";
	btn.Name = filename;
	btn.NavigateUri = new Uri("/DisplayPage.xaml?item=" + filename, UriKind.Relative);
	Grid.SetColumn(btn, 1);
	a.Children.Add(txbx);
	a.Children.Add(btn);
	Files.Items.Add(a);
	}
	}
};

Here, we are trying to create a dynamic grid layout on fly with two columns. One is for displaying the file name and the other is to display a hyperlinkButton that tight to file name. We will build a DisplayPage.xaml for displaying details of the shopping item later on.

Noticed,

btn.NavigateUri = new Uri("/DisplayPage.xaml?item=" + filename, UriKind.Relative);

Here, we use /DisplayPage.xaml ? item=.. to pass value of that specific item to the next page so that we know which shopping list's information we should display. This is very similar to how we pass parameters between web pages. Files here are the listBox functions as a container where content got displayed.

13. Now go back to MainPage.xaml. Press Ctrl+F5 and try to compile the file. Firstly, try to create some items if you don't have any. And after that, you should be able to see something like this: You could truncate file name to display item name more friendly.

14. Now we will go ahead implement DisplayPage.xaml in order to display each individual item with details. Right-Click on ShoppingList-Demo project choose Add->New Item... and choose Phone Portrait Page and name is DisplayPage.xaml.

15. Insert following code pieces into DisplayPage.xaml right after

 <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">

            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="page name" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentGrid" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" Margin="10,10,10,77" ShowGridLines="True" Width="446" d:LayoutOverrides="GridBox">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto" MinHeight="72.5"/>

                <RowDefinition Height="Auto" MinHeight="72.5"/>

                <RowDefinition Height="Auto" MinHeight="72.5"/>

                <RowDefinition />

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="0.3*" />

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Grid.Row="0" Text="Name:" HorizontalAlignment="Center" VerticalAlignment="Center" />

            <TextBlock Name="nameTxt"  Grid.Column="1" Margin="8" Padding="2" Height="59"  />

            <TextBlock Grid.Row="1" Text="Price:" HorizontalAlignment="Center" VerticalAlignment="Center" />

            <TextBlock x:Name="priceTxt"  Grid.Column="1" Margin="8" Padding="2" Height="59" Grid.Row="1"  />

            <TextBlock Grid.Column="0" Grid.Row="2" Text="Quantity:" HorizontalAlignment="Center" VerticalAlignment="Center" />

            <TextBlock Name="quanTxt" Grid.Column="1" Margin="8" Padding="2" Height="59" Grid.Row="2" />

        </Grid>

        <Button x:Name="BtnBack" Content="Home" HorizontalAlignment="Right" Margin="0,0,17,0" Grid.Row="1" VerticalAlignment="Bottom" Click="BtnBack_Click" />

This page's layout is almost identical to AddItem.xaml. Instead of having TextBox, we have all TextBlocks here to show information.

16. Insert these three namespaces into DisplayPage.xaml.cs file:

using System.IO.IsolatedStorage;
using System.Xml.Linq;
using System.Windows.Navigation;

17. Insert the following code into DisplayPage.xaml.cs:

protected override void OnNavigatedTo(NavigationEventArgs e)

        {
            String itemName = "";
            base.OnNavigatedTo(e);
            bool itemExists = NavigationContext.QueryString.TryGetValue("item", out itemName);
            if (itemExists)
            {
                PageTitle.Text = itemName;
            }
            using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                XElement _xml;
                IsolatedStorageFileStream location = new IsolatedStorageFileStream(itemName, System.IO.FileMode.Open, storage);
                System.IO.StreamReader file = new System.IO.StreamReader(location);
                _xml = XElement.Parse(file.ReadToEnd());   
	             if (_xml.Name.LocalName != null)

                {

                    XAttribute priceTemp = _xml.Attribute("price");
                    priceTxt.Text = priceTemp.Value.ToLower();
                    XAttribute quanTemp = _xml.Attribute("quantity");
                    quanTxt.Text = quanTemp.Value.ToLower();
                    nameTxt.Text = itemName;

                }
                file.Dispose();
                location.Dispose();
            }
        }

Here,

NavigationContext.QueryString.TryGetValue("item", out itemName);

will return a boolean value to show whether this parameter's value has been passed from previous page. If it exists, we change the tile of this page to item name: PageTitle.Text = itemName.

Furthermore,

IsolatedStorageFileStream location = new IsolatedStorageFileStream(itemName, System.IO.FileMode.Open, storage);

opens file "itemName" in local storage. You may want to improve the code to check whether the file is there or not. For demonstration purpose, I try to simplify the process.However, this is a line that may cause problem if the system couldn't find the file.

System.IO.StreamReader file = new System.IO.StreamReader(location);_xml = XElement.Parse(file.ReadToEnd());

This is the code to parse file into XML elements and the following code is used to break down XML by elements and attributes.

XAttribute priceTemp = _xml.Attribute("price");

Lastly, we dispose the file and location created temporarily.

18. Double-Click on the Home button in DisplayPage.xaml and a BtnBack_Click method will be auto-generated in DisplayPage.xaml. Insert the following code in to navigate this page:

private void BtnBack_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
        }

19. Now Press Ctrl+F5 and you will be able to navigate between different pages with data stored and retrieved. Happy Shopping! :)

Deploying Existing Silverlight Application (Deep Zoom) on Windows Azure

Mingfei — Sun, 03 Oct 2010 08:46:00 GMT

In this blog, I will introduce several Microsoft Technologies showed as below and you could view live demo on http://tibet.cloudapp.net/

Using Deep Zoom Composer to develop a Silverlight based photo gallery (You could use your existing Silverlight Application here)
Migrate Existing Silverlight Application onto Windows Azure
Deploy Windows Azure Application on Cloud

Here, I will showcase how easily you could compose a Silverlight-based Deep Zoom applications onto cloud. You can skip part I if you plan to use your existing Silverlight application. Here, I will introduce a very powerful tool called Deep Zoom Composer in part I. If you have a lot of pictures to show, you can compose a Silverlight application easily for you to browser all the photos. You can check Hardrock café example here.

Firstly, let's walk-through how to use Deep Zoom Composer to develop Siverlight based photo gallery.

1. You need to download Deep Zoom Composer here. This is a tool to allow the preparation of images for use with the Deep Zoom feature in Silverlight. Hard Rock is using Deep Zoom technology to feature their site, and you could take a look here.

2. After installation and open the tool. Select File - New Project...

3. You will see a Add images button in the right up corner. By clicking it, you could upload photos from your local drives.

4. Next, click on Compose Icon on the Top Navigation Bar and you could compose your imagines on canvas by drag-and-drop. Noted, you could zoom in/out canvas to place photos with different sizes. Meanwhile, noted there are several functions lined up in the right side of the tool, such as Slide Show, Menu, Internal Links, External Links. You could drag photos from right sides into Slide show to compose the sequences of your slide show. Also, you could do the same for the rest. For internal/external links, you could specify link and when user clicks on the photo, he/she will be re-directed to the page that your link specified.

5. Now, click on Export Icon from the top navigation bar. Type in the name of your Deep Zoom application and choose location for your files as well. There are several templates you could choose from. And here, I will select Deep Zoom Navigation. And you could further customize your image settings. Click on Export.

6. After exporting successfully, you will be able to either viewing your silverlight application in web browser or browse files in local folders.

Secondly, we will see how to Migrate Existing Silverlight Application onto Windows Azure.

7. Download Windows Azure SDK and Tools for Visual Studio here.

8. Open Visual Studio as administrator. Current I am using Visual Studio 2010 for this example.

9. Select File –> New –> Project… Select Windows Azure Cloud Service in Visual C# Category.

9. Right click on Role Folder under TibetDemo project and select New Web Role Project…

10. Select ASP.NET Web Role and to Cloud service solution and rename it as tibetWeb showed as below:

11. Now, copy over files from XX\Documents\Expression\Deep Zoom Composer Projects\Tibet-Demo\Exported Data\tibet_demo (you may look for your own file directory) under this project. A quick way is to right click on tibetWeb and open folder in windows explorer. 12. Click on Icon [Show all Files] showed below and you will see folder GeneratedImages showed in a dash line. Right-Click and select Included in the project.

13. Open Web.Config and add in codes showed below to set the default starting page as Test.html. You need to modify the web.config file and add the following setting in the <system.Webserver> section:

14. Now compile and build your page. You could set Test.html as Start page by right clicking Test.html and test your Silverlight page locally.

15. Right Click on TibetDemo Cloud project and select Publish… and Select Create Service Package Only… You will be able to see a folder pop up with all the publish documents.

Lastly, we will show you how to Deploy Windows Azure Application on Cloud.

16. You need to go and register here for a Azure account if you don’t have one.

17. Create a new service under your Cloud server, choose Hosted Service showed as below:

18. Type in a Service Label and Service Description showed as below to create a new service. Click on Next.

19. Fill in Public Service Name, this will be the url to access your cloud application. Also, you could choose your server location as well. Click on Create once you have filled in all the information.

20. You will be able to see this screen showed below. Click on the arrow besides Production Cube, you could see Staging Cube. Grey color indicates cloud service is not running on cloud and hence you are not charged at this point of time.

21. Click on Deploy… and you will see a dialog showed as below. Select the folder where you Published your Cloud Service just now. Choose Application Package for the first Browse Button and choose configuration settings for the second Browse Button. Click on Deploy and application is deploying to the Cloud for you now.

22. After Click Deploy, click on Run and you will see the status of the application becomes Initializing. You need to wait for a while to see your page up. Basically, the status needs to be Ready with a green dot.

23. Remember that the computing hour is counted once the tube is blue. You need to click on suspend to stop the service. Now you can see the app up and running! Check out http://tibet.cloudapp.net/ to see this up and running demo!