Hello World WP7 – Silverlight Style Mobile Tools Team Windows Phone Developer Tools Team Blog

If you are a Silverlight programmer, you already know a lot about Windows Phone 7 programming. If you are new to Silverlight or to Windows Phone 7, don’t worry, we will go over several easy to use concepts using this fun littleHello Word application, Silverlight style. What do I mean by that you might ask? We are bored of the Hello World apps. Let us create an exciting simple video player that will rotate as our Hello World application, Silverlight Style.

Let us get started. First install the Windows Phone Developer Tools Beta. You will get everything you need to get started with Windows Phone 7 development. Even if you are new to Microsoft platforms or tools, follow along with this step by step guide. Final solution is attached at the bottom of this page.

Step1 : Create a new Windows Phone Application

Open Microsoft Visual Studio 2010 Express for Windows Phone or VS2010 pro/premium/ultimate. I am using Visual Studio 2010 Express for Windows Phone. Also, I have enabled Expert Settings under Tools > Settings > Expert Settings. Select File > Create New Project (Ctrl+Shift+N). Select the Windows Phone Application template and give the application name as CrazyVideoApp.

You will see Designer where the Application UI is displayed, XAML editor that shows the UI definition and several tool windows around.

Step2: Customize UI

Select page name TextBlock in the designer and edit the name in the Property tool window. If the Property tool window is not visible, you can right click in the designer and select Properties. Change the Text property to crazy video. Similarly change the MY APPLICATION to DATA BINDING.

Step3: Add Video clip

From the Toolbox window, drag and drop a MediaElement control (at runtime plays a video) on to the designer. Resize it so that it is a little bigger. If the Toolbox window is not visible, you can select it from the View menu.

Now that we have a MediaElement that can play a video, let us add a video clip. Right click on the Project and select Add -> Existing Item.

In this case I am picking a movie.wmv file on the desktop. You can download this in the attached source code. Currently we support the following video format and codecs on the Emulator: WMV (VC1 – Main and Simple profile). The video provided in the solution is encoded as WMV (VC1-Main profile).  Now we need to wire up the MediaElement to the media file we added. We can do that by simply selecting the MediaElement we added in the designer and changing the Source property to movie.wmv

By default the MediaElement control will start playing the media once the application is launched.

Step 4: Debug It

Let us run it (in debug mode) by hitting F5. You will see the Windows Phone Emulator launch and the app get deployed to it. Then, you will see the app running in the Emulator and the Visual Studio goes into Debug mode.

Step 5: Lets go crazy

Silverlight does not support complete 3D. It supports what is 2.5D through Perspective Transforms to simulate 3D. Let us add some perspective transform to make our video rotate in 3D. Add the following code in the XAML.

<MediaElement Height=”233″ HorizontalAlignment=”Left” Margin=”24,33,0,0″ Name=”mediaElement1″ VerticalAlignment=”Top” Width=”383″ Source=”movie.wmv”>
<MediaElement.Projection>
<PlaneProjection x:Name=”projector” />
</MediaElement.Projection>
</MediaElement>

All we are doing here is setting up a Plane Projection called projector that we will use to rotate the video in the 3D space.

Add a Slider control below the MediaElement and set its Maximum to 360 so that we can rotate from 0 to 360 degrees.

We want to rotate the MediaElement when we drag the slider. So we use Element to Element Databinding to do this trick easily.

Let us use the Property editor to app databinding. Select the little square next to the Value property and selectApply Data Binding… option.

In the popup window, select ElementName in the first listbox and projector in the second listbox.

Now select Path: expandable property shown above and Select RotationY property. This will generate the following code in the Slider XAML tag: Value=”{Binding Path=RotationY, Mode=TwoWay, ElementName=projector}”

What we did so far is to tell SL engine “Whenever the slider1’s Value property changes, take that value and set it as the projector’s RotationY property”. So, when we drag the slider, the video rotates on tis Y Axis.

Add another slider next to the MediaElement, set the Orientation to Vertical and instead of binding Value toRotationY, bind it to RotationX.

 

Hit F5 to see our crazy video app. Drag the sliders to see the video rotate on X and Y axis.

Advertisement