Mario Guzzi's blog

Using simple styles is a great way to dig into template editing. You can learn a lot about customizing controls byt using them. There is great document within the help file that describes in detail how simple styles work, I would highly encourage people to read that. 

After playing with simples styles for while, when you are learning and playing with simple styles in your project there is a point when you probably would want to get a clean start since you know have a good idea of what you want to do. The way simple styles work is whenever you instantiate a control from the simple style resource dictionary; Blend will make a copy of that resource dictionary locally in the project you are working on. If you want to go back to initial state of the simple styles resource dictionary there is a way to force an reset through the Asset Palette. In the picture below you can the a dropdown from the SimpleStyle item that has an option to Reset. This option will only show up after making an edit to a resource in the Resource Dictionary. After you reset the Resource Dictionary the file is copied over so you are back to the starting point, having in mind that you will loose all the edits that you did to SimpleStyles.xaml. Which in many cases is what you want to do.

We've just finish our March CTP, check out directions as to how to get it on the expression blog here.

Enjoy!

-M/\RIO

Here is my attempt to create a control that contains some animations and could be used to give the XBox 'ring of light' effect using EID. I did it by creating a new template for a control and adding a timeline to the control template that would start on the Control's Loaded event. Then I template bound some properties like background and foreground of the control so that you can change them and you are done.
I've attached a resource dictionary that has the template for the control, to use it in your app here are the steps you have to do in Interactive Designer:

1. Add a Project Item and select the resource dictionary ("RingOfLightControl.xaml")
2. From the resource palette click on the button that says "Link to resources" and select the resource dictionary
3. Then just instantiate a couple of Controls (of type Control) from the Library palette and apply the template (Right click on the control | Edit Template | Apply Resource and select RingOfLightTemplate

1. File | New | Resource Dictionary
2. In the resources palette click on Link to resources and select the dictionary you just added
3. In the scene now create a control (of type Control) from the library palette
4. Right click on the control | Edit Template | Create Empty Template
5. In the resource creation dialog slect the radio button that says "Other document" and select the resource diationary you created
6. Add a grid into the template using the library palette
7. Draw some ellipses into the grid
8. Now create a timeline
9. Create some scale animation and opacity animation for the ellipse at different times
10. Select the template node (may called "value")
11. In the timeline properties palette add a trigger, the trigger should look like [TargetElement][Loaded][Begin]

At this point you are done with the animation inside the template, some other details you can add

1. Switch back to the None tab in the timeline
2. Select the Grid and from the properties palette click on background | Template Binding | Background (this will add a template binding so that when you change the background property of the control it'll get reflected on the grid)
3. Do the same thing for each ellipse you created but the template binding should be done with the property foreground.

Now you can switch back to the scene and create many controls and re-use this template

Using Expression Interactive Designer things like creating a listbox which scrolls horizontally become really easy. Below I've detailed the steps of achieving this by editing the listbox's ItemsPanel Template (ItemsPanel template determines the panel that will control layout for listbox items).

Steps:

1.  Create a listbox from the library palette
   
2. Add a couple of items to the listbox, in EID you can easily do this by right clicking on the listbox and selecting the "AddListboxItem" menu option
    Note: so far the listbox looks, and scrolls like any traditional listbox
   
3. From the Format menu select Other templates | ItemsPanel and choose to make a copy of the item template
    Note: you are now editing the panel that will hold the items in the listbox and be responsible for the layout of the listboxitems
4. You'll notice that the ItemsPanel template contains a VirtualizingStackPanel, select it and from the properties palette change orientation to be Horizontal
5. Scope up to the root (using the timeline scope up button) to finish editing the template

At this point you are done your listbox now contains a custom ItemsPanel that holds items horizontally instead of vertically.

Let me introduce myself, I'm an SDET (Software Design Engineer in Test) at Microsoft, currently working on Microsoft Expression Interactive Designer. I've working at Microsoft for 6 years; I started out in Microsoft Office for the Mac and then moved to work on Expression about 3 years ago.

I'll be mostly using this blog to talk about Expression and share some cool app ideas and tricks, I work with control editing and styling a lot so expect to see samples and code in this area.

This week we have released our first public build of Interactive Designer so I look forward to hearing feedback from people.

Cheers,

-M/\RIO