What's new in Expression Blend 4

What's new in Expression Blend 4
With Microsoft Expression Blend 4, you can create websites and applications based on Microsoft Silverlight 3 and Microsoft Silverlight 4, and desktop applications based on Windows Presentation Foundation (WPF) 3.5 with Service Pack 1 (SP1) and WPF 4. We will also be adding support for Windows Phone 7 through a freely available Service Pack.

Expression Blend provides new support for interactivity through behaviors, special Silverlight functionality, on-the-fly sample data generation, and prototyping - a feature offered as part of the Expression Studio 4 Ultimate.

Expression Blend 4, Visual Studio 2010, Silverlight and .NET provide the most compelling design and development workflow on the market today. Ideas are taken from concept to completion with speed and flexibility, challenging you to deliver innovative and compelling applications for your customers with Silverlight and .NET.

Updated Silverlight and WPF support
Silverlight 4 and WPF 4 support
You can create and modify Silverlight 4 and WPF 4 application projects in Expression Blend. You can also upgrade a Silverlight 3 project to target Silverlight 4, or upgrade a WPF 3.5 with Service Pack 1 (SP1) project to target WPF 4.

Compatibility with Silverlight 3 and WPF 3.5 with Service Pack 1 (SP1)
For the first time you can choose to target older versions of the platform, creating and modifying Silverlight 3 and WPF 3.5 with Service Pack 1 (SP1) application projects in Expression Blend.

Interoperability with Visual Studio
Expression Blend and Microsoft Visual Studio 2010 use the same project format. Expression Blend conveniently allows you to convert a Visual Studio 2008 project into a Visual Studio 2010 project.

SketchFlow
SketchFlow, a feature in Expression Studio 4 Ultimate, enables you to model the navigation and composition of an application rapidly in a very visual manner. SketchFlow prototypes can be as simple as a series of sketches, but can evolve to be as real as you need them to be to communicate your design intent. All of the user interface (UI) modeling features of Expression Blend, including Photoshop importing, visual states, behaviors, and sample data, can also be used in prototyping projects.

Publish to SharePoint
Once you have created a SketchFlow project, you can publish your project to a Microsoft SharePoint document library. The SketchFlow project will be available to anyone who has permission to view content on the SharePoint site.

Reviewers can share their feedback with other stakeholders by publishing their feedback to the SharePoint site.

Convert feedback to work items
For teams using Microsoft Team Foundation Server you can now convert reviewer feedback into a TFS work item so that you can take action on it and keep track of it.

SketchFlow animation picker
The PlaySketchFlowAnimationAction behavior is used to play a SketchFlow animation in response to an event. You can use a new picker in the Properties panel to easily pick a SketchFlow animation for the action to control.

SketchStyles
The default Style set for a new SketchFlow project is SketchStyles. You can switch to another Style set at any time.

Naming screens
When creating a new screen or component screen in the SketchFlow map, you can name the screen immediately after creating it.

Pausing and resuming a SketchFlow animation
In Expression Blend, each frame of a SketchFlow animation contains a new Pause button. When enabled, the SketchFlow animation pauses at that frame when playing back in the SketchFlow Player. In the SketchFlow Player, there is a play/pause button that is next to each SketchFlow animation and that can be used to play, pause, or resume that animation.

Graphics and layout
Improvements to Photoshop file importing
In Expression Blend 4 the following layer effects can now be merged with their layers:

•Drop Shadow
•Inner Shadow
•Color Overlay
•Outer Glow
•Inner Glow
•Gradient Overlay
•Bevel & Emboss
•Satin
Pixel-shader effects
Add subtlety to your UIs by taking advantage of the large range of new pixel shader effects that can be animated. Whether you want to manipulate color, add a drop shadow or animate a ripple transition, the extensible range of pixel effects gives you total control, whether you are applying the effect to whole application, or an individual element, so you can create the effect you want to achieve.

Shapes
Expression Blend 4 now includes presets for the easy creation of arcs, arrows, callouts, and polygons. Shapes can be easily switched between sketch-style and regular-style rendering. This feature can be found in the Assets panel under the new Shapes category.

Lay items out along a path
A new feature of Expression Blend is the ability to lay out items along any path. Items can be arranged along the path according to several settings that can be animated. By animating the Start property, you can also use this feature in motion path scenarios. This is an extremely powerful new feature offering you new ways to answer UI questions visually without the need for code.

Controls
New controls
Expression Blend has tooling support for the RichTextBox control in Silverlight.

Improved control styling
It's not always possible to customize a control in the context of its containing Window, Page or UserControl. When the style of a control is in another document, style editing takes place in that document, away from the context of the control. But with Expression Blend, the control instance, including its size, data context, and other property values, are all carried over to the style or template while editing. Therefore, even in editing mode, the control template looks just like it does in context. This makes editing controls much easier visually than it was in previous versions.

For the technically minded you can edit Styles and Templates that target abstract types or types without a default constructor. Also, any XAML file that derives from such a type can be edited.

Visual states
Common WPF 4 controls are state-aware
When you create or modify a template for many common WPF 4 controls, the States panel is populated with a list of states that are ready for you to design. This is because the following WPF 4 controls are designed to work natively with the Visual State Manager, and they show the States they work with:

•Button
•CalendarButton
•CalendarDayButton
•CalendarItem
•CheckBox
•ComboBox
•ComboBoxItem
•Control
•DataGrid
•DataGridCell
•DataGridColumnHeader
•DataGridRow
•DataGridRowHeader
•DatePicker
•DatePickerTextBox
•Expander
•GridSplitter
•GridViewColumnHeader
•ListBoxItem
•PasswordBox
•ProgressBar
•RadioButton
•RichTextBox
•RepeatButton
•ScrollBar
•Slider
•TabControl
•TabItem
•TextBox
•Thumb
•ToggleButton
•ToolTip
•TreeViewItem
Transitions for pixel-shader effects
You can use pixel-shader effects during state transitions. Just pick an effect as you would pick an easing function, and set its properties. The effect will perform the transition from one state to another. Examples include reveal, wipe, pixelate, ripple, and swirl. This enables you to quickly add another layer of subtlety to your UI designs.

Transitions for entering and exiting ListBox items
You can animate adding items to and removing items from a ListBox, and you can control all the details of those transitions, including easing. If you create your own ItemsControl, you can define these same states on your item container type. If you also apply a FluidMoveBehavior behavior to the items panel of the ListBox, existing items will smoothly make room for entering new items.

View and ViewModel support
Expression Blend offers new sample data, behaviors, and project templates to support the Views and ViewModels.

Using Views and ViewModels is a way to structure a Silverlight or WPF application so that user interface (UI) objects are as decoupled as possible from the application's data and behavior. This makes it easier for design tasks and development tasks to be performed independently and without breaking each other. Essentially, your UI is the View. You bind objects in the View to properties and commands of the ViewModel. The View can also call methods on the ViewModel.

Interactivity
Using Behaviors you can add interactivity to your applications, without having to write code. Behaviors are reusable components that can be directly applied to any object on the artboard, and they are composed of extensible triggers, extensible actions, and other Behaviors.

Behaviors can be selected from the Assets panel, but developers have a rich API that they can use to create their own triggers, actions, and behaviors for use in Silverlight and WPF projects.

You can find more information about creating your own Behaviors in the Expression Blend SDK documentation available on the Help menu.

New Behaviors
Expression Blend includes the new TranslateZoomRotateBehavior multi-touch Behavior, and a PanningItems control that you can use to scroll between items by using touch. Expression Blend also has a new trigger that responds to a frame change or the pausing or completion of a SketchFlow animation, called the SketchFlowAnimationTrigger. Expression Blend has new sets of Behaviors for dragging items between list boxes, for modifying menu navigation, and for preserving screen states, such as SetDataStoreValueAction and DataStoreChangedTrigger.

An exciting enhancement has been made to the FluidMoveBehavior: if you apply it to different views of the same data item, when the item moves from one view to another (for example, from a list view to a details view), it fluidly animates the transition between the two views.

New Behaviors for use with applications that use the Model-View-ViewModel pattern include the following: CallMethodAction, InvokeCommandAction, and DataStateBehavior. You can use these Behaviors to invoke behavior on your ViewModels, or to respond to changes to their properties.

Conditional Behaviors and the data store
You can now build conditional logic into your prototypes and production applications without the need to write code. In fact any action can be associated with a set of conditions that must be met in order to execute the action. The new data store feature enables application variables, such as the current user's role, for example, can be read from and written to so that, effectively, different parts of your application can communicate via this shared state.

New behavior components introduced as part of this feature include the conditions editor that appears in the Properties panel for every action, a SetDataStoreValueAction action that allows you to manipulate values in your data store, and a DataStoreChangedTrigger trigger that fires whenever a chosen property inside the data store is changed.

Data and resources
Expression Blend makes it easy to prototype, build, and test data-connected applications even when run-time data and resources are not available.

Design-time data from CLR types
In addition to being able to create sample data based on XML, you can create design-time sample data from your CLR types. Even if a type has no public constructor, or if it has properties with no public setter, it can still be made into design-time sample data with the Create Sample Data From Class command in the Data panel.

The Data panel provides a view of the DataContext of an object, whether design-time or run-time, and lets you drag properties, commands, and methods onto the design surface to bind your UI to them.

Design-time ViewModels
If your application uses Views and ViewModels pattern, you can use the Create Sample Data From Class command in the Data panel to generate design-time sample ViewModels so that you can continue to design your application in the context of this data.

Design-time resources
Sometimes, resources that will resolve at run time don't resolve at design time. In these cases, you can pick a resource dictionary to use at design-time while you're designing your application.

Easier element-to-element property binding
It's easier than ever to use the Advanced options in the Properties panel to bind element properties together.

Animation
Easing functions in WPF 4
Easing functions previously only available in Silverlight projects can now be taken advantage in a WPF 4 project. You can even write custom easing functions and use them in your projects.

No modifier key needed for marquee selection of keyframes
You can marquee-select keyframes in the Timeline more easily with the mouse. Previously, you had to hold down the CTRL key while dragging marquee-selected keyframes.

XAML cleanliness
Like you we try to keep our code concise. Expression Blend generates less XAML with respect to animations and animation-related properties.

Projects
Databound project template
Expression Blend includes a new project template that offers a basic starting point for View and ViewModel applications.

Run project with CTRL+F5
To improve consistency with Visual Studio, you can now invoke the Run Project command by pressing either CTRL+F5 or F5.

Zip support for samples and templates
Expression Blend now supports reading item templates, project templates, and samples from Zip files, in addition to reading them from loose files and folders. This makes it even easier to share these elements between different users.

Source

MVVM For Beginners

I have just started my work using MVVM ( Model-View-View Model ) pattern and many of you may know about this pattern as well.The powerful data-binding support in WPF framework provides the basis for MVVM pattern. In this post I will show you simple example to display data in the view part using the view model. Here is explanation of Model, view and ViewModel.

Model

The Model is defined as in MVC; it is the data or business logic, completely UI independent, that stores the state and does the processing of the problem domain. The Model is written in code or is represented by pure data encoded in relational tables or XML.

View

A View is defined in XAML and should not have any logic in the code-behind. It binds to the view-model by only using data binding.In simple examples, the View is data bound directly to the Model. Parts of the Model are simply displayed in the view by one-way data binding. Other parts of the model can be edited by directly binding controls two-way to the data.

ViewModel

The term means “Model of a View”, and can be thought of as abstraction of the view, but it also provides a specialization of the Model that the View can use for data-binding. In this latter role the ViewModel contains data-transformers that convert Model types into View types, and it contains Commands the View can use to interact with the Model.
The ViewModel exposes public properties, commands, and abstractions. The ViewModel has been likened to a conceptual state of the data as opposed to the real state of the data in the Model.

Let us start with our example of the MVVM which is simple one. I have created three folder in my project with names Model, view and viewModel so that I have Placed my model class in the model folder and View in the view folder and viewModel class in the viewModel folder. As I have added class in the respective folder the namespace is append with view, model and viewModel.In the model folder I have on one class with the name of customer which define the properties of the customer like user ID, first name, last name, email ID, contact number and date of birth. The customer class is inherit from the INotifyPropertyChanged interface which is used to notify whenever there is any changed in the property value which I will show you later. In the View Model folder I have one class names CustomerViewModel which contains property for the customer class in the model folder and also a viewTitle property.

View:

Let us start to design the view of the application. Below is the xaml of the view I have created for the example code.

<Window.DataContext >
<local:CustomerViewModal> </local:CustomerViewModal>
</Window.DataContext>
<GroupBox  Header="{Binding Path=ViewTitle}">
<Grid DataContext="{Binding Path=Customers}">
<Grid.RowDefinitions >
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="75*"/>
</Grid.ColumnDefinitions>

<TextBlock Text="User ID :" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="1" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=UserID, Mode=TwoWay}"> </TextBox>

<TextBlock Text="Frist Name :" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="2" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=FirstName, Mode=TwoWay}"> </TextBox>

<TextBlock Text="Last Name :" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="3" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=LastName,Mode=TwoWay}"> </TextBox>

<TextBlock Text="Email Address :" Grid.Row="4" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="4" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=EmailID,Mode=TwoWay}"> </TextBox>

<TextBlock Text="Contact No. :" Grid.Row="5" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="5" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=ContactNumber, Mode=TwoWay}"> </TextBox>

<TextBlock Text="Date Of Birth :" Grid.Row="6" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<my:DatePicker Grid.Column="1" Grid.Row="6" Margin="2,3,2,3"  Text="{Binding Path=DateOfBirth, Mode=TwoWay}" />

<Button Content="Save" Grid.Row="7" Grid.Column="1" Width="75" Margin="0,3,80,3" HorizontalAlignment="Right"> </Button>
<Button Content="Close" Grid.Row="7" Grid.Column="1" Width="75" Margin="0,3,-1,3" HorizontalAlignment="Right" > </Button>

</Grid>
</GroupBox>

And here is the output of the design.Here I have used the used two controls one is the textBox and the second one is the DatePicker control and two buttons controls which are not working in this example. I will try to discuss the working of the buttons in the MVVM pattern.

Now Let us discuss the view in depth.If you see the xaml for each of the textBox then you will see that I have bind each of the textbox text property, and I have used the two way binding mode which mean to notify the any change in the value of the property from the view to the view model or model. If you don't have any idea about the binding then here is some detail about the binding mode.The Mode (which is of type BindingMode) is an enumeration with three possible values as

OneTime:

Binding sets the target and then the binding is completed. This is great for displaying data that rarely or never changes

OneWay:

Binding sets the target and keeps it up to date as the source changes. This is great for displaying data that the user is not permitted to change.

TwoWay:
Binding sets the target and keeps the target up to date as the source changes and keeps the source up to date as the user changes the target or changes something else in the application that will cause your application to change the source.

As I have set the binding mode to twoWay so if any change in the the value of the property is done in the view will be send back to the data source as well.

ViewModel

In the viewmodel I have class with only two properties one for the ViewTitle and the second one is the Customers which is of type Customer the class defined in the model. And I have Initialize the both the properties in the constructor of the viewModel class. I have also bind the Customers class to the grid which hold the textBox and the date picker control so that the Properties of the Customer can be bind to the text properties of the textBox.

Model:

In the Model class I have only defined the properties of the Customer which is inherits from the INotifyPropertyChanged interface.This interface requires only one thing: that the class have an event of type PropertyChangedEventHandler (named PropertyChanged by convention), Implicit in supporting binding, however, is that your business object must, by convention, fire the PropertyChanged event when any property that is tied to a UI control is changed (and the most common way to change it, is to set its value). I have also raise the RaisePropertyChanged event for the first name and last name. whenever values of these two properties changes in the view they will be notify in the model as well.

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!