This page is viewable only by Team members.

Learn the basics of XAML with Microsoft Expression Blend 2

Basics of XAML

Install MS Expression Blend

• It's recommended to use MS Blend 2. It can be found as a free download for students at: https://www.dreamspark.com/ or purchased at http://www.microsoft.com/expression/

Create a new WPF Application EXE project

• Use the welcome screen to create a new WPF Application EXE project or the file menu.

Learn the layout controls

• Play around with the layout controls and learn especially about the different container panels like DockPanel, Grids, WrapPanel, StackPanel and Border. Make sure you get the differences between them and how they works when the screen is resized.
• One hint: In WPF you'll need to place all layout controls inside a canvas for correct resizing, MPF handles this for you. So to emulate the MPF behavior place your root element into a canvas in Blend.

Start designing vector objects

• Start to play around with vector objects like rectangles, ellipses and lines. Play around with the fills, strokes, opacity masks and other properties for those objects.

Place your objects in diffrent layout containers

• Place your objects in different grids, dockpanels etc to learn about the behaviors of those unique containers.

XAML animations

Start animating with triggers and storyboard.

• This works just like in Adobe Flash. You have a time based time line saved as a storyboard with a specific name. Then you got a trigger that starts your storyboard at an event.

Create a trigger

• Create a new trigger in Blend using the +Event button in the triggers toolbar. Use for example the trigger Window.Loaded

Create a storyboard

• Create a new storyboard that uses that trigger.

Change the Blend workspace layout

• Change to the animation workspace using the Window menu

Start animating

• Start animate using keyframes and changing objects properties and placements. Make sure the red record label is visible at the top of the screen.

Tips and useful links

• Now when you got the basics of XAML, start to learn the XAML code for every change you do and you'll understand the logic. Try to change the layout of your object using only code. Search on Google or MSDN.com for every object or property you don't understand.
• Other useful tips is to watch screencasts from channel9, goto Channel 9 and browse by the tags "XAML", "WPF" and "Avalon"
• More links to be posted here...

Templating and styling objects

Start to understand the concept of styles and templates

• This is is quite like coding css for a html page. You define styles for all objects of one type or for just some objects with an unique name (x:name). MPII skinning system is constructed with styles and this part is very important to understand.

Set up a new project

• Open a new project in Blend. Create a new label in your empty window.

Create a new style for a label

• Right click the label -> Edit Control Parts (Template) -> Edit a copy -> Now you see how the label is contructed in the controls tree at the left toolbar. It has an ?ContentPresenter with a border as parent. The ?ContentPresenter is where the actual content (in this case the text for the label) will be presented. As borders just can hold one child, try to add a grid inside the border and place multiple objects in it. Don't forget to add the ?ContentPresenter if you replaced it with a grid.

Understand the code

• Now, look at the XAML code to understand how this style is connected to the label by the "?TargetType="{x:Type Label}"

Tips and useful links

• Use Google to learn more about the basics of templates and styles.
• More links to be posted here...

Get started to design MP 2

System Requirements

.Net Framework

• You have to have installed a version of the .net framework (>= 2.0)

Direct X

• You need to install the latest DirectX Redist (August 2008).

Get the latest MPII build

• Get the latest MPII build installed on your computer:

From IRC

• Calling the !privatebuildmp2 command in IRC...

Compile it yourself with VS2008

1. Get a current SVN version of the MP-II application. The SVN URL is:

2. https://mediaportal.svn.sourceforge.net/svnroot/mediaportal/trunk/MP-2

3. Building with Visual Studio:
4. MP 2 require Visual Studio 2008 or newer to be compiled.
5. Open the solution file MediaPortal-VS2008.sln. Then choose the project MediaPortal.Main as main project and run the application.
6. Building with MSBuild: To build with MSBuild, you can use one of the build scripts in the Build directory.

Get the latest test skin

• Download mikael's latest test skin

Install the test skin

1. Unpack the ?ExampleSkinPlugin folder into the MPII Plugins folder.
2. Open up MPII and change the skin to my test skin: settings -> appearance -> skin -> change skin.

Open the skin XAML files in a text editor

• Now, open the test skin XAML files in a text editor (for example MS Expression Web 2, ?NotePad or ?DreamWeaver).

Start editing the skin

• Copy the XAML code for the object you want to change into your test application in Blend and start working. When you're done with an object, copy the code from blend and paste it back to the skin file. You can also code the changes directly into the skin XAML file for less complex changes. Save the XAML files and relaunch MPII to see your progress.

Edit more parts of the MPII GUI

• Now browse the skinbase directory in your MPII install folder and find more screens you may want to edit in your skin. You just have to have your changed XAML files in your skin, the other properties will get automatically inheirted from the skinbase.

Tips and useful links

I also know that several team members have XAML tutorials in their member folders at the team ftp. Ask in IRC for more help how to access them. You can also contact mikael or Albert with skinning questions