Basics of expression blend4
1 like759 views
Expression Blend is an interactive design tool for creating XAML-based interfaces for WPF and Silverlight applications. It features visual design tools like behaviors, visual state manager, and transitions. Silverlight is for rich browser apps while WPF is for desktop apps. The interface is similar to Photoshop with design and code views. Common containers include grids, canvases, stack panels, and dock panels. Other controls include listboxes, trees, expanders, and data grids.
Basics of expression blend4
- 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.
- 4. The Interface Doesn’t this look like one of your design tools Photoshop, Illustrator?
- 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.
- 9. The Toolbar
- 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
- 16. Scroll Viewer • Represents a scrollable area that can contain other visible elements
- 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
- 24. Path ListBox • Implements a list of items that are laid out along one or more paths
- 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
- 31. Grid Splitter • Represents a control that redistributes space between the rows or columns of a grid
- 32. Thank you.
Editor's Notes
- #3: 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).