Category Archives: Blend

Fluid UI

This simple application present an introduction to Fluid UI.

1* Create a new project with Blend4

2*Draw a Rectangle and change the Fill property to the color of your choice:

3*In the States panel, click the Add state group button (Add state group button) to add a new state group.

4*Click the Add state button (Add state button) to add a new state.

5*Change the state’s name to “NowYouSeeMe”.

6*Add another state and change the name to “NowYouDont”.

7*Select the Rectangle and change the Visibility property to “Collapsed”.

8*Toggle between the two states to see the rectangle disappear and reappear.

It’s only an introduction,i’ll let you discover how FluidLayout can be usefull 🙂

Fluid UI

The concept of “Fluid UI” represents the idea that visual elements in an interface should move and appear in a smooth manner, allowing the user to track and observe changes rather than be confused and startled. In practice, this can be difficult to implement when dealing with very discrete properties, such as Row and Column coordinates in a Grid. In an effort to help you make more “fluid” interfaces, the Expression Blend and Silverlight teams have made available a few features to make the work needed much simpler.

In Blend 4, Fluid Layout has many new tricks. You can now define layout animations between a master list and a detail view and animate things that move between lists. You can also animate the process of items being added to and removed from a ListBox.

An exciting enhancement has been made to the FluidMoveBehavior.

By using FluidMoveBehavior together with FluidMoveSetTagBehavior, you can animate a transition from a specified starting point, even if that initial location is specified only by a reference to the data that is displayed in your application and may exist in a different scope. Data tagged by FluidMoveSetTagBehavior is available for use with FluidMoveBehavior by using a hidden data store.

FluidMoveBehavior is optimized for two main scenarios: animating from a master list to a detail view and animating list items from one list to another.

In my next serie of posts, we will see some simple applications to better understand this concept : Fluid UI.

Microsoft Expression Blend4’s new features

I’am trying to learn about the new features of Blend4 and i want to share this with all of you 🙂

let’s start with the PathListBox:

The PathListBox is a new control included in the Expression Blend 4 SDK that builds on the original functionality of the ListBox, displaying multiple items and item selection, and new functionality enabling path-based layout. The PathListBox provides many areas of customization through properties and a custom child container control, the PathListBoxItem.

The following application  will explore some techniques using the PathListBox:

  • Step1:

Start a new  Silverlight project in Microsoft Expression Blend4 .

  • Step2:

Draw your path: choose the shape that you want to use as path.

I’am going to choose for example the ellipse.Then, double click on ellipse in the objects and timeline window–>Path–>make layout path.

In the Properties window,brushes–> fill : no brush so your path will be invisible.

will notice that another element is added to your objects: a PathListBox.

We should move the PathListBox below the Ellipse in the objects and timeline window.

Select the PathListBox and in the properties window go to layout Paths –>Distribution:Padded , Padding -20

  • Step3:

Now, we have to add items to our PathListBox.We either add them directly,either we use a Sample Data.

For the moment, we will add items directly.

*Select your project’s name in the Projects window–> add existing items.

*Select PathListBox and double click on your items. They will be automatically added as items to your PathlistBox.

  • Step4:

Now, we are going to add an animation :

  1. Add a new Storyboard in the Objects and Timeline panel.
  2. Hit OK on the Create Storyboard Resource dialog.
  3. Position the playhead at the one second mark.
  4. Change the Padding value to spread the items evenly along the ellipse.
  5. Hit play in the Objects panel and watch the items slide into place.

It’s just an initiation to the PathListBox, and we will try  to explore all its possibilities.

I hope you like this post 🙂