SlideShare ist ein Scribd-Unternehmen logo
1 von 32
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
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
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.
The Interface




Doesn’t this
look like one
of your design
tools
Photoshop,
Illustrator?
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
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.
• 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.
• 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.
The Toolbar
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
This is code for the
 Blue Circle which
 I’ve drawn using
 Ellipse tool from
    the toolbar
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
Grid
• Defines a flexible area that consists of
  columns and rows
Canvas
• Defines an area within which you can explicitly
  position child elements by using co-ordinates
  that are relative to the canvas area
Stack Panel
• Arranges child elements into a single line that
  can be oriented horizontally or vertically


     1                      1     2     3



     2



     3
Scroll Viewer
• Represents a scrollable area that can contain
  other visible elements
Border
• Draws a border, background, and or both
  around another element
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
Tab Control
• Represents a control that contains multiple
  items that share the same space on the screen
        Tab 1     Tab 2     Tab 3
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
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
View Box
• Defines a content decorator that can stretch
  and scale a single child to fill the available
  space.



                 Scale
List Box
• Implements a list of selectable items

             Expression Design
             Expression Web
             Expression Blend
             Expression Encoder
Path ListBox
• Implements a list of items that are laid out
  along one or more paths
Tree View
Represents a control that displays hierarchical
data in a tree structure that has items that can
expand and collapse
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
Expander
• Represents a control that displays a header
  and has a collapsible content window.

        Expand
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.
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.
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
Grid Splitter
• Represents a control that redistributes space
  between the rows or columns of a grid
Thank you.

Weitere ähnliche Inhalte

Andere mochten auch

Orchids and thoughts_
Orchids and thoughts_Orchids and thoughts_
Orchids and thoughts_Malyn Noche
 
El motor de combustió intern
El motor de combustió internEl motor de combustió intern
El motor de combustió internlespinosa1
 
Mobile Second @ NextStep 2014
Mobile Second @ NextStep 2014Mobile Second @ NextStep 2014
Mobile Second @ NextStep 2014Gonçalo Veiga
 
Culminating unit open
Culminating unit openCulminating unit open
Culminating unit opensammblast93
 
Δομισμός 2: Roland Barthes
Δομισμός 2: Roland BarthesΔομισμός 2: Roland Barthes
Δομισμός 2: Roland Barthesgskarp
 
clases de lideres
 clases de lideres clases de lideres
clases de lideresmispracticos
 
정치인 Sns
정치인 Sns정치인 Sns
정치인 Sns현 서
 

Andere mochten auch (10)

Orchids and thoughts_
Orchids and thoughts_Orchids and thoughts_
Orchids and thoughts_
 
El motor de combustió intern
El motor de combustió internEl motor de combustió intern
El motor de combustió intern
 
Mobile Second @ NextStep 2014
Mobile Second @ NextStep 2014Mobile Second @ NextStep 2014
Mobile Second @ NextStep 2014
 
Hypocenter
HypocenterHypocenter
Hypocenter
 
Culminating unit open
Culminating unit openCulminating unit open
Culminating unit open
 
Gsa mailers
Gsa mailersGsa mailers
Gsa mailers
 
Tekno aurkezpena
Tekno aurkezpenaTekno aurkezpena
Tekno aurkezpena
 
Δομισμός 2: Roland Barthes
Δομισμός 2: Roland BarthesΔομισμός 2: Roland Barthes
Δομισμός 2: Roland Barthes
 
clases de lideres
 clases de lideres clases de lideres
clases de lideres
 
정치인 Sns
정치인 Sns정치인 Sns
정치인 Sns
 

Ähnlich wie Basics of expression blend4

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBoxKobkrit Viriyayudhakorn
 
Introduction to silverlight control 3
Introduction to silverlight control  3Introduction to silverlight control  3
Introduction to silverlight control 3msarangam
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersChristian Rokitta
 
Beautiful UI in react native By - nativebase.io
Beautiful UI in react native By - nativebase.ioBeautiful UI in react native By - nativebase.io
Beautiful UI in react native By - nativebase.ioGeekyants
 
Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)Michael Shrove
 
Goodbye Nightmare : Tops and Tricks for creating Layouts
Goodbye Nightmare : Tops and Tricks for creating LayoutsGoodbye Nightmare : Tops and Tricks for creating Layouts
Goodbye Nightmare : Tops and Tricks for creating LayoutsLuc Bors
 
Web development basics (Part-2)
Web development basics (Part-2)Web development basics (Part-2)
Web development basics (Part-2)Rajat Pratap Singh
 
Ch4 creating user interfaces
Ch4 creating user interfacesCh4 creating user interfaces
Ch4 creating user interfacesShih-Hsiang Lin
 
JavaFX Layout Secrets with Amy Fowler
JavaFX Layout Secrets with Amy FowlerJavaFX Layout Secrets with Amy Fowler
JavaFX Layout Secrets with Amy FowlerStephen Chin
 
Session 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 applicationSession 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 applicationVu Tran Lam
 
Consistent UI Across Android Devices
Consistent UI Across Android DevicesConsistent UI Across Android Devices
Consistent UI Across Android DevicesIrene Duke
 
Rich Internet Applications and Flex - 1
Rich Internet Applications and Flex - 1Rich Internet Applications and Flex - 1
Rich Internet Applications and Flex - 1Vijay Kalangi
 
Android webinar class_2
Android webinar class_2Android webinar class_2
Android webinar class_2Edureka!
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition PerspectiveDesign Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition PerspectiveInductive Automation
 
Responsive design with flexbox
Responsive design with flexboxResponsive design with flexbox
Responsive design with flexboxMario Hernandez
 
Designing Windows apps with Xaml
Designing Windows apps with XamlDesigning Windows apps with Xaml
Designing Windows apps with XamlJiri Danihelka
 

Ähnlich wie Basics of expression blend4 (20)

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
 
Introduction to silverlight control 3
Introduction to silverlight control  3Introduction to silverlight control  3
Introduction to silverlight control 3
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX Developers
 
Beautiful UI in react native By - nativebase.io
Beautiful UI in react native By - nativebase.ioBeautiful UI in react native By - nativebase.io
Beautiful UI in react native By - nativebase.io
 
Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)
 
Goodbye Nightmare : Tops and Tricks for creating Layouts
Goodbye Nightmare : Tops and Tricks for creating LayoutsGoodbye Nightmare : Tops and Tricks for creating Layouts
Goodbye Nightmare : Tops and Tricks for creating Layouts
 
Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle A...
Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle A...Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle A...
Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle A...
 
Web development basics (Part-2)
Web development basics (Part-2)Web development basics (Part-2)
Web development basics (Part-2)
 
Ch4 creating user interfaces
Ch4 creating user interfacesCh4 creating user interfaces
Ch4 creating user interfaces
 
JavaFX Layout Secrets with Amy Fowler
JavaFX Layout Secrets with Amy FowlerJavaFX Layout Secrets with Amy Fowler
JavaFX Layout Secrets with Amy Fowler
 
Session 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 applicationSession 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 application
 
Flutter workshop
Flutter workshopFlutter workshop
Flutter workshop
 
Consistent UI Across Android Devices
Consistent UI Across Android DevicesConsistent UI Across Android Devices
Consistent UI Across Android Devices
 
Rich Internet Applications and Flex - 1
Rich Internet Applications and Flex - 1Rich Internet Applications and Flex - 1
Rich Internet Applications and Flex - 1
 
Android webinar class_2
Android webinar class_2Android webinar class_2
Android webinar class_2
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition PerspectiveDesign Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
 
Visual Basic.pptx
Visual Basic.pptxVisual Basic.pptx
Visual Basic.pptx
 
Responsive design with flexbox
Responsive design with flexboxResponsive design with flexbox
Responsive design with flexbox
 
Designing Windows apps with Xaml
Designing Windows apps with XamlDesigning Windows apps with Xaml
Designing Windows apps with Xaml
 

Kürzlich hochgeladen

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 

Kürzlich hochgeladen (19)

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 

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.
  • 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

Hinweis der Redaktion

  1. 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).