1. Basics of Expression Blend-4
Introduction, Layout, Panels and Controls from a designer’s point of view
Prepared by Samson Thennela
Visual Designer – User Experience
July, 05, 2011
2. What is Expression Blend?
• It is an interactive, WYSIWYG front-end for
designing XAML based
(Extensible Application Markup Language)
interfaces for Windows Presentation
Foundation and Silverlight applications.
• Key components of Expression Blend includes
Behaviors, Visual State Manager, transition
effects, and SketchFlow
3. Silverlight Vs. WPF
• Silverlight is a MSFT technology, competing
with Adobe Flash and is meant for developing
rich browser based internet applications.
• WPF is a MSFT technology meant for
developing enhanced graphics applications for
desktop platform.
5. From here we can select a new project
When you open
Expression Blend
this window pops
up and you can
select the type of
project you want to
work. Silverlight,
WPF or Windows
Phone 7
6. Types of Projects
• Silverlight
– Silverlight Application + Website: A Project with an associated website for
creating rich cross-platform, web-based applications
– Silverlight Application: A project for creating rich cross-platform, web-based
applications.
– Silverlight Databound Application: A project that uses data and command
bindings to support loose coupling between View and ViewModel.
– Silverlight Control Library: A project for creating custom controls that can be
reused across other silverlight applications.
– Silverlight SketchFlow Application: A project for prototyping rich cross-
platform, web-based applications.
7. • Windows Phone
– Windows Phone Application: A project for creating a Silverlight for
Windows Phone application
– Windows Phone Databound Application: A Silverlight for Windows
Phone project that uses data to support loose coupling between View
and ViewModel.
– Windows Phone Panaroma Application: A Silverlight for Windows
Phone project that uses the Panaroma control to create a panorama-
style application.
– Windows Phone Pivot Application: A Silverlight for Windows Phone
project that uses the Pivot control to create a tabbed-style application.
– Windows Phone Control Library: A project for creating custom
controls that can be reused across other Windows Phone applications.
8. • WPF
– WPF Application: A Project for creating rich desktop applications that run on
Windows.
– WPF Control Library: A Project for creating custom controls that can be reused
across other WPF applications.
– WPF Databound Application: A project that uses data and command bindings
to support loose coupling between View and ViewModel.
– WPF SketchFlow Application: A project for protyping rich desktop applications
that run on Windows.
10. Views
Design View
XAML View
Split View
• In ‘Design view’ you can only
see the design or whatever
you are drawing
• In ‘XAML view’ you can only
see the code
• In ‘split view’ you can see both
11. This is code for the
Blue Circle which
I’ve drawn using
Ellipse tool from
the toolbar
12. Basic Containers we should be aware
to work on Blend
• Grid • Wrap Panel
• Canvas • Tab control
• Stack Panel • Dock Panel
• Scroll Viewer • View Box
• Border • Expander
• Accordion
13. Grid
• Defines a flexible area that consists of
columns and rows
14. Canvas
• Defines an area within which you can explicitly
position child elements by using co-ordinates
that are relative to the canvas area
15. Stack Panel
• Arranges child elements into a single line that
can be oriented horizontally or vertically
1 1 2 3
2
3
17. Border
• Draws a border, background, and or both
around another element
18. Wrap Panel
• Positions child elements sequentially from left
to right or top to bottom. When elements
extend beyond the panel edge, elements are
positioned in the next row or column.
1 2 3 4 1 2
5 6 7 8 3 4
5 6
19. Tab Control
• Represents a control that contains multiple
items that share the same space on the screen
Tab 1 Tab 2 Tab 3
20. Dock Panel
• Arranges child elements around the edges of
the panel. Optionally, last added child element
can occupy the remaining space.
Top
Left Last Child Right
Bottom
21. Difference between StackPanel and DockPanel
• Difference 1: The Dock Panel lets the items inside it
decide which way they stack as opposed to the Stack
panel which can be set to stack either horizontally or
vertically. The benefit of letting the items inside control
how they stack is that they can each stack in different
directions giving you more control.
• Difference 2: The Dock Panel has an additional setting
called ‘LastChildFill’. If this is set to ‘True’ then the last
item in the stack will naturally stretch to fill the
remainder of the Dock Panel’s size
22. View Box
• Defines a content decorator that can stretch
and scale a single child to fill the available
space.
Scale
23. List Box
• Implements a list of selectable items
Expression Design
Expression Web
Expression Blend
Expression Encoder
25. Tree View
Represents a control that displays hierarchical
data in a tree structure that has items that can
expand and collapse
26. Tree View Drag Drop Control
• A drag drop target for the tree view control
• If the tree view is in the Control, we can
change the tree view items positions/
hierarchy by dragging and dropping
27. Expander
• Represents a control that displays a header
and has a collapsible content window.
Expand
28. Expander
• Represents a control that displays a header
and has a collapsible content window.
Collapse
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
tincidunt cursus placerat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
tincidunt cursus placerat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
29. Accordion
• Represents a collection of collapsed and
expanded AccordianItem controls
Expand
Expand
Collapse
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
tincidunt cursus placerat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
tincidunt cursus placerat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
30. Datagrid
• Displays data in a customizable grid.
Picture Description Availability
Some text describes the Yes
image left to it
Some text describes the No
image left to it
Some text describes the Yes
image left to it
Some text describes the Yes
image left to it
XAML is a declarative XML-based language created by Microsoft which is used to initialize structured values and objects. It is available under Microsoft's Open Specification Promise. The acronym originally stood for Extensible Avalon Markup Language - Avalon being the code-name for Windows Presentation Foundation (WPF).
