By David Espino.
When we start to build a web application with a right interface its necessary to verify and make sure that we understand every requirement given by the client. For a specific situation of the user interface, the best way to transfer our thinking and understanding with the client is via creating screen prototypes.
In some occasions they contain a lot of controls like lists, combos or grids that are based on “dummy” information. They are made not just for making the screen to project the reality of what is going to be the application but also to let the prototype simulate item common elements of selection and editing. Just like the controls that represent information on the “master-detail” scheme.
What Microsoft Expression Blend 3.0 let us to do is to avoid writing the code for filling up that “dummy” information with a tool named “Sample Data”. Sample Data let us create a list of the elements in a quick way via an assistant. Also it let us to make a “Bind” to the controls where we want to show the information.
Here I am going to explain the way to use “Sample Data” with a Silverlight application:
1. The first thing that we need to do for this example is to start the Silverlight Solution. Particularly, Sample Data works with every WPF or Silverlight application designed by Expression Blend 3.0. Here is going to be used a Silverlight 3.0 +Sketchflow application. Once the application is selected we start with our design.
2. Then we need to add some control series that are going to be helpful in representing a “master-detai” information case. In this situation we are going to use a listbox to select de master registry and another textbox for writing the element description. Just like in the following image.
The XAML generated by these controls is the following:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="SampleSketchScreens.Screen_1"
Width="640" Height="480">
3. The next step is to define new sample data. For this we would select in the Data Panel the option for adding a new data source “Sample Data”:
4. Now, a configuration window is going to appear for changing the basic properties of our database. We should input the name of the data source and select to add the project or document depending on its availability. The last “check” should be checked so it enables the sample data when the application is running.
5. Once the Datasources is created, the page is going to show to us the structure of the collection formed by default properties.
Additionally, inside our project we would see created a new folder with the name of “Sample Data”. The files inside that folder are:
· A XAML file with an items list that are added automatically to the collection.
· A CS file that lets you access to the public properties of each Datasource element.
· A XSD file that represents the scheme of Datasource definition.
6. The next step is to add more properties into our Datasource. To do this we need to use the “+” button localized on the right side. There are quite different types of simple properties. For the course example we added the following properties.
Every property, depending on the kind of data used, presents different options. When an image property is defined the Datasource of Sample Data generates a predetermined images list or presents an option for indicating the physical source from where the images are going to be obtained. For text properties the program lets you format the number of letters per word and the maximum number of words per field.
7. The next thing we need to do is a “Bind” between each of the screen properties and controls. We are going to do this by Drag and Drop. Blend supports two different ways to do Drag and Drop: List Mode and Details Mode. The buttons for changing this way of doing the Blind are located on the upper part of the Datasource.
8. In this example we used the List Mode to drag the “Name” property and the “Image” property to the List Box and then we used the Details Mod to drag the Description property to the TextBox.
9. For the picture we need to modify the Stack Panel orientation of the auto generated Item Template for the listbox by dragging the properties.
10. Once we do this we can compile and visualize our application. Automatically, by changing of element from the list, the item description is going to be shown on the description field.
Symmetrical balance is achieved by placing elements in the design evenly. If you place a large, heavy element on the right side, you will have a matching heavy element on the left. Centering is the easiest way to get a symmetrically balanced page. But be careful, as it can be difficult to create a centered design that doesn’t look flat. For symmetrically balanced design, it is better to create the balance with different elements — an image on the left and a large block of text to the right of it, for example.
Rhythm — Rhythm in design is also known as repetition — a pattern created by repeating elements that are varied, allowing your designs to develop an internal consistency that makes it easier for your customers to understand. Once the brain recognizes the pattern in the rhythm it can relax and understand the whole design.
Emphasis — Emphasis (or dominance) in design provides the focal point for the piece, enabling the most important design element to stand out. To draw the reader to the important part of the piece, every layout needs a focal point.
Unity — Unity (or proximity) helps all the elements look like they belong together. Readers need visual cues to let them know an article is one unit — the text, headline, photographs, graphic images and captions all go together. Elements that are positioned close to one another are related while elements that are farther apart are less so.