Mingfei Yan

I presented Silverlight technology at Rich Media rocks 2010 event on Oct 25th 2010 in Singapore. And here is a recap of some cases I showed yesterday. For more examples, you could visit here. For more information, you could contact me at yanmf@Microsoft.com, Or follow my twitter @mingfeiy. The presentation slides could be downloaded here. Demo One: Hard Rock Cafe Memorabilia http://memorabilia.hardrock.com/?src=homepage_memobox_headergraphic Hard Rock Cafe is the haven for true rock n’ roll fans, offering a full rock experience through our cafes, hotels, casinos, memorabilia and music venues all over the world. They have a lot of collections of artists displayed in hard-rock cafes, hotels, casinos and etc, from Madonna’s gloves worn on The Girlie Show tour displayed in Hard Rock Cafe Cayman Islands to Queen’s “Red Speical” Guitar displayed in Hard Rock Cafe in Vegas. There is a special item in this collection to demonstrate the power of Silverlight Deep Zoom technology. It is the 13th item on the fourth row. You will see one envelope there with four letters. That’s Item 043311- Paul McCartney - The Beatles Letter from Paul and Beatles autographs. Below are the screen shots of zoom-in effects. You could zoom till you see the last picture displayed above. Deep Zoom technology is very different from traditional zoom-in. It will bring in new level of details while you zoom into the pictures. It brings users brand new experiences! ...

[youtube]http://www.youtube.com/watch?v=COeOEvd0ioY[/youtube] Guess what she (the lady below) is saying and get creative to stand a chance to win a Kinect! Update: Here are the winners for the limited edition WP7 notepads! To receive your notepad, email us your mailing address: innovativesg@live.com @Metabaron @Luke2375 @vitcott @anuj89 @jont87 @xsurycx @JeffWeber @icelava @xxkyzerxx @GaryPretty @tanjohnny @vertongen @flazm @trydis @chillfire @luxurytravelled @umay @oscarprawata @paramitta @limguohong @sebng @oysts @JLancaster3 @KayJayThwaps @TMGaming @gbmutley @MissDMeaner @michaelsync @VeryKross @swfdougherty @ivonnelestarti @ferrygun @pinkrody28 @jordanclark @ginatan28 @DANGO547 @tikrung @alvintangsc @supersuf @oscarprawata @everlasting86 @benjaminhuang @dreamtcs @jordan_clark Terms and Conditions: ...

In this tutorial, we will move a existing static websites onto a Razor syntax-based dynamic webistes with a product database. That’s a case often happens. For instance, a bakery shop hires a designer for designing a online bakery shopping website. However, after a while, the shop owner decides to add in more products dynamically through database. And here, I will show you how to do it through WebMatrix in a easy and fast way. 1. Firstly, download html-based bakery online shopping cart web project here. Unzip it onto your hard disk. 2. Open WebMatrix and select Site From Folder. Select files from folder where you unzip Bakery_Final. After clicking ok, you will see all the files laying out in the left corner. 3. Click on Default.html and click Run. You will see the Fourth Coffee pages showed as below. There are three pages here: Home, Our Products and About Us. Noticed that the headers and footers of all sites are the same. And product information are all static. Next step, we will try to move all the duplicated parts into one single file. 4. Click on New on the menu bar and choose cshtml. Name it _Layout.html. Noticed here we use _ before the file name. It indicates that this file can’t be used to browse directly. This is similar to master page in ASP.NET. 5. Copy all the code from About.html to CSHtml. Remove code block showed below. This is the content part varies for each page. 6. Replaced the code block above with the following code: (Razor Syntax is case-sensitive. So please be careful of the upper-case). [cc] ...

What’s Razor Syntax and Why WebMatrix? Microsoft wants to provide a simple and light way for students, hobbyist, inline script developers or web developers in general to develop websites fast. They will be able to start webpages from scratch or from some open source templates, such as WordPress or Joomla. WebMatrix is a stack under 50 MB, if you have .Net 4 installed, it will be under 15 MB. And you will get ASP.NET Razor Syntax along with WebMatrix. We want to give people an alternative to develop webpages in a lightweight and low-concept way. WebMatrix is composed by four parts: ...

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 XXDocumentsExpressionDeep Zoom Composer ProjectsTibet-DemoExported Datatibet_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. ...

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. ...

August 27th 2010, Singapore Management University hosts Microsoft’s Overview of Windows Phone 7 session. Within this two-hours session, Microsoft introduces the usage of Visual Studio and Expression Blend to students with working-through demo. Meanwhile, a lot of existing Silverlight and XNA applications are introduced to illustrate new level of functionality Windows Phone 7 could achieve . Most of students saw Windows Phone 7 for the first time and they checked it out after the session. ...

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 ...

Microsoft Image Composite Editor is an advanced panoramic image stitcher. Given a set of overlapping photographs of a scene shot from a single camera location, the application creates a high-resolution panorama that seamlessly combines the original images. The stitched panorama can be shared with friends and viewed in 3D by uploading it to the Photosynth web site. Or the panorama can be saved in a wide variety of image formats, from common formats like JPEG and TIFF to the multiresolution tiled format used by Silverlight’s Deep Zoom and by the HD View and HD View SL panorama viewers. ...

Microsoft provides Virtual Earth Integration Kit for PHP to integrate Bing Map Applition into PHP pages. Microsoft’s Virtual Earth is an example of an element of the Microsoft platform which can be consumed by and integrated into PHP web sites. The Virtual Earth API is exposed through a Javascript library making it straightforward to integrate into any web based application. There are multiple choices for environment set up: Linux/Apache, Windows/Apache or Windows/IIS. Both IIS and Apache use port 80 as default port. Therefore, if you have both server running on your machine, you may want to change one of the port to avoid conflict. Also, you will need PHP 5.2 and MySql for set-up. ...