Website in 6 steps and no coding
Silverlight is an alternative version from Microsoft, for the Flash platform. Microsoft Expression Blend 3 is a tool that simplifies the way you work with Silverlight, a software WYSIWYG (What you see is What you get).
Today I decided to share you the ease with which you can create a website with a professional design without writing any code in Blend (if you have worked with the Flash platform then you should know that working in blend is almost the same thing at first glance, but the language is a bit changed and Blend has the advantage of providing more to programmers, designers but it also has gaps).
First, let's suppose that you have installed Microsoft Expression 3 (if not, you can not download the trial version from Microsoft).
Let's see what I meant in the title and in the explanation above.
First open Microsoft Expression Blend 3 and create a new project .
We select the Grid model as a way of organizing data (from the top left icon) and divide the artboard into 4 parts (top, browser, content, bottom) as shown below:
We need to create our template on which we will work. I created a simple design that looks something like this (3 buttons and text blocks, the label alternatives in Visual Studio):
We add in the condition window (Windows-> State to be checked) a condition that holds another 4 (one default) by clicking the icon in the bottom right that has a + (plus sign) (1). After we added the main condition we add another 3 by pressing the state add icon similar to above but from the main condition (2).
For each state individually we select the appropriate way of getting the content of the selected button. To do this we select a state, and in the Objects and Timeline window (Windows-> Objects and Timeline) we select the object we want to get in the artboard.
Now comes the interesting part: how to "tie" the button to the content? If you work in flash / flex you must treat an event by writing a few lines of code (or in VisualStudio) but Blend provides a simple way. Let's see how: in the States window we select Base, from the assert window (Windows-> assert) select the Behaviors tab from where we chose GoToStateActions and drag it over the button (drag and drop).
We expand the object [Button] from Objects and Timeline and then select the GoToStateAction, after which from the Properties window (Windows->Porprieties) at the EventName we select Click (we treat the event click) after this in StateName we select the appropriate status of the button (so Blend provides an easier way to treat some events). We repeat these steps for each button on the hand and then press F5 to see the result.
Such as those made by me, you can make a slideshow, etc. (using "behaviors" of the gallery provided by Microsoft and with animation). To see how much you should have coded look at the code generated by Blend selecting the View-> Active DocumentView-> XAML View menu or the 2nd icon above artboard's scroll bar.
| There are no comments on this article. Be the first to say your opinion. |












