Introduction
Expression Blend is a “black unknown tool” for many XAML developers. Many geeks (including myself) tended to say things like “Hey ! I’m happy just coding XAML”, “This is for graphic designers”, “It doesn’t generate clean code”.
In this video article we are going to try to demystify this tool for developers, we will learn some basic features that will show us how we can boost our productivity. As a vehicle to explain the concepts and techniques here exposed we are going to write from scratch the following dummy puzzle app:
Takeaways from this article:
- How to create your UI using Expression Blend without having to manually code a single line of XAML.
- How to assign data binding via properties tab (no more typo-bug when adding a binding).
- How to display sample data to allow you fine tune your layout without having to run the app to check the visual aspect.
- How to drop controls and customize them (ListView + GridView).
- How to visually create and customize controls templates.
- How to assign Converters via properties.
Step 1 – Creating the App + Display the list of pieces
In this step we will check how we can apply data binding and display sample data in design mode. We will start by creating the project, and adding a list with the pieces of the puzzle.
We are going to follow the next steps:
- Create the project (we will use Visual Studio, we are geeks).
- Create an entity that will identify a puzzle piece.
- Create a ViewModel that will hold the list of pieces (we will add to it more properties and methods in later steps).
- Drop a List View.
- Assign Data Context… plus Design Data Context
- Apply Data Binding to a control.
- Modify items template.
- Apply Data Binding to a control template.
- Run the app same results as design.
Step 2 – Adding a canvas to build the puzzle
We are going to learn how to customize a GridView using the properties panel and define custom templates. In order to setup the puzzle canvas, we will drop a GridView control, establish the right size and aspect and setup the data binding.
Note: a GridView won’t be the ideal control to be used for a Puzzle Canvas, but I have rather chosen it to get us familiar with this standard control (the goal of the article is to let us learn about Win 8 + Blendability).
We are going to follow the next steps:
- Add the plumbing in the ViewModel to hold the puzzle canvas info.
- Drop a GridView.
- Configure Items container to hold a 2x2 pieces canvas.
- Configure the Items Template to be binded to a single puzzle slot + binding.
Step 3 – Drag & Drop Behavior
One cool feature that we get when we develop a Windows 8 app it’s the “AllowDrop” “CanDragItems” properties that are already included into the controls. In this snippet we will setup the drag & drop operations for different combinations of controls (puzzle list >> puzzle canvas, puzzle canvas >> puzzle list view, puzzle canvas >> puzzle canvas).
We are going to follow the next steps:
- Create the ViewModel methods to update the puzzle canvas and pieces bucket.
- Add Names for the controls (some code in the view going on).
- Setup Drag & Drop list view.
- Setup Drag & Drop elements of the GridView.
- Drag from the Piece’s available list into the puzzle canvas.
Dragging and Dropping other cases
- Drag & Drop puzzle canvas to puzzle canvas.
- Drag & Drop puzzle canvas to piece’s list view
Step 4 – Notifications, Converters & Blend
In this final step, we will learn how automatically refresh the user interface when a property changes (via INotifyPropertyChange), and how to apply a converter without having to type a single line of code. We will add a boolean property that will notify the user interface when the puzzle has been solved ad we will map the original viewModel property value from bool to visibility (display or hide a textblock).
we are going to follow the next steps:
- ViewModel, create a function to check if the puzzle is solved and expose it via property.
- INotify Property Changed plumbing.
- Adding a Textbox to notify the user… Visibility to Bool?
- Adding a converter, assigning it via properties.
Summary
In this article we have learnt how we developers can take benefit of using Expression Blend, letting us design our user interface by dragging and dropping and having available test data in design mode. Most of the topics covered in this article can be applied to the newest Visual Studio 2012 IDE as well.