Silverlight for Designers (Part II): Powerful Technology
UTILIZE THE HIGHLY CUSTOMIZABLE CONTROLS TO QUICKLY DESIGN A CUSTOM LOOK AND FEEL FOR YOUR APPLICATION WITHOUT BEING FORCED INTO CODE
The online consumer expects a much more dynamic and fluid experience when they use the web today. Silverlight enables designers to deliver distinctive, branded and targeted applications. These allow customers to find the information they need faster, make complex decisions easier and keep them engaged longer, helping companies be more effective at attracting, engaging and retaining their customers.
To build highly customized branded experiences the components used need to be easily customizable by the designer. Silverlight and Expression Blend combine to provide the designer with a quick and powerful way to reach into each control and visually manipulate, change or completely redesign the look and feel of each individual element of the control.
Developers can extend the functionality of the supplied Silverlight controls and expose that extended functionality to designers through the property inspector in Expression Blend.
The Visual State Manager in Silverlight can be leveraged visually by designers through Expression Blend. The Visual State Manager allows states to be triggered from inside of Silverlight control templates enabling designers to control how the control responds to events such as ‘mouse over’ and ‘pressed’.
In addition to the Visual State Manager, designers can use a style to set properties across multiple controls, allowing the designer to quickly be able to design and apply application wide changes.
PRECISELY ARRANGE YOUR CONTENT HOWEVER THE APPLICATION SCALES WITH FLEXIBLE GRIDS AND LAYOUT CONTAINERS
Building great web applications requires the designer to have absolute control over how elements are positioned and resized relative to one another. Layout containers within Silverlight allow the designer to layout their user interface with the pixel perfect precision they need to deliver a professional and compelling user experience. The designer retains complete control over all aspects of how the UI scales and flows which enables them to ensure they deliver an optimum user experience independent of screen size or resolution.
YOUR GRAPHICS AND CONTROLS KEEP FULL FIDELITY WHEN PASSED TO THE DEVELOPER THROUGH THE SEAMLESS USE OF XAML, A POWERFUL MARK-UP FORMAT FOR ALL YOUR GRAPHICS
Previously the designer was never able to guarantee that their graphics and user interface concepts kept their full fidelity through to the end of the application development process. Once the graphics had been passed to the developer the designer essentially lost control of their graphics and the developer now had the impossible task of recreating in code, a representation of the user interface the designer had previously created visually.
Inevitably some subtlety of detail from the designer’s vision was lost; whether through the difficulty in replicating the visual elements in code, or more simply due to time constraints in the production workflow, the finished application would never end up looking how the designer originally intended.
In addition to this, making visual changes to the application was a painful process as this necessitated going through the whole design and development workflow again.
Silverlight solves this problem through XAML, its native text based markup language for describing graphics. Figure 20 shows an example of XAML mark-up for graphics.
<Ellipse HorizontalAlignment="Stretch"
Margin="194,90,109,68"
VerticalAlignment="Stretch" StrokeThickness="20">
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF1F1EF2"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF90B1EC"/>
<GradientStop Color="#FF0F5CE4" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
In Expression Design the designer creates their graphical assets with the same professional illustration and drawing tools they will have used previously in other third party design tools. As graphics are finalized and exported they are saved in Silverlight’s native graphical format, XAML. To add interactivity and bring the graphics and user experience to life the designer imports the XAML file into Expression Blend. Expression Blend shares the same format for graphics, XAML, which allows the designer to import and continue manipulating their graphics at full fidelity.
Once the design process is completed the developer can use the same XAML files directly within their Visual Studio Projects. (Visual Studio and Expression Blend even share the same project file format). The same XAML graphic has been used at full fidelity through the whole application design process.
Designer’s can finally create assets knowing that their fidelity will be maintained throughout the entire designer-developer workflow. From Expression Design through Expression Blend to Visual Studio, graphics, user interface elements and design assets move seamlessly from their initial concepts to the finished product. The designers original vision, fully realized with no compromises.
