Your SlideShare is downloading. ×
Basics of expression blend4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Basics of expression blend4

396
views

Published on

Published in: Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
396
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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).
  • Transcript

    • 1. Basics of Expression Blend-4Introduction, 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 InterfaceDoesn’t thislook like oneof your designtoolsPhotoshop,Illustrator?
    • 5. From here we can select a new projectWhen you openExpression Blendthis window popsup and you canselect the type ofproject you want towork. Silverlight,WPF or WindowsPhone 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. ViewsDesign 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 ViewRepresents a control that displays hierarchicaldata in a tree structure that has items that canexpand 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.