Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Programmers Intro To Blend


Published on

This Intertech ( Oxygen Blast was delivered at Microsoft.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Programmers Intro To Blend

  1. 1. Expression Blend for the Artistically Challenged…<br />Introducing Blend for Developers<br />No.<br /> Yes!<br />
  2. 2. Overview of Presentation<br />The Need for Expression Blend<br />The Basics of the Blend IDE<br />Designing Complex Control Content<br />Shapes, Brushes, Transformations, Resources<br />The Blend Animation Editor<br />Generating Buttons / UserControls on the Fly<br />Editing Templates / Triggers<br />A Look at Blend 3.0<br />
  3. 3. The Need For Expression Blend<br />WPF and Silverlight applications require a healthy does of XAML markup.<br />While technically optional, few programmers would ever want to omit XAML from their projects. <br />Visual Studio 2008 only has very, very basic support for generating XAML via the IDE.<br />Limited designer support (especially with Silverlight…read only designer!)<br />If you were to only use VS to generate XAML, you would have massive hand cramps… <br />The VS 2008 XAML <br />editor is very limited. <br />It is far better suited for <br />tweaking XAML<br />generated elsewhere.<br />VS 2008 has no visual support to <br />define custom brushes, <br />edit templates, <br />design complex content, <br />create animations, etc. <br />
  4. 4. The Need For Expression Blend<br />Expression Blend is an IDE which will generate massive amounts of XAML on your behalf. <br />In fact, unless you go actively looking for it, Blend hides the generated markup by default.<br />While you could manually type XAML using Blend 2.0, the IDE lacks XAML IntelliSense. <br />Blend 2.0 is *not* a code editor. <br />You cannot use Blend 2.0 to author C# / VB code. <br />Blend 3.0 changes this story a bit….more info later. <br />A Blend 2.0 project has an identical format to a Visual Studio 2008 project.<br />Therefore, the same project can be edited in both tools. <br />Obviously this helps out quite a bit with collaboration between programmers and graphic artists. <br />The Blend IDE was designed with graphical artists in mind. <br />The services of the Blend IDE are similar to other design tools on the market. <br />As a programmer, do not assume Blend will basically be a ‘better VS editor’.<br />In reality, Blend has its own terminology, its own designer story, etc. <br />
  5. 5. The Need For Expression Blend<br />In this talk, you will be given a guided tour of various features of Blend. <br />However, this talk will *not* to turn you into a full-fledged graphic artist. <br />Rather we will focus on the key aspects of Blend which will be helpful for software developers. <br />If you wish to deepen your understanding of Blend, F1 is only a key-press away.<br />The Blend User Guide provides numerous FAQs, walkthroughs and tutorials. <br />As well, the Expression web site, provides a number of video tutorials. <br />
  6. 6. Expression Blend IDE Basics<br />Demo!<br />Design / XAML view<br />To begin, let’s dive into the building blocks of the IDE itself. <br />WPF and Silverlight projects will all share these core features.<br />Properties<br />Editor, divided into several categories<br />Toolbox<br />and <br />Asset Library (the &gt;&gt; button)<br />Objects and Timeline<br />
  7. 7. Expression Blend IDE Basics<br />A few things to remember about the core IDE:<br />If you wish to have the compiler create a member variable of a XAML element, you must give it a name. <br />To do so in Blend, set the Name property via the Properties window.<br />By default, items added to the LayoutRoot will not have a Name value!<br />The lightening bolt <br />icon allows you to <br />add events to the <br />selected item….but<br />using this in Blend 2.0<br />will launch VS…<br />Unnamed XAML<br />elements will not <br />result in a member<br />variable added to <br />the compiler <br />generated files. <br />
  8. 8. Expression Blend IDE Basics<br />A few things to remember about the core IDE:<br />You can right click on any layout manager in the Objects and Timeline window to change the underlying type. <br />By default, all new WPF / Silverlight projects give you a Grid as your initial layout root. <br />
  9. 9. Expression Blend IDE Basics<br />A few things to remember about the core IDE:<br />Layout managers can be ‘double clicked’ in the Objects and Timeline window (or via the Selection tool) to pick the active container. <br />You’ll see a yellow outline on the designer (and Objects and Timeline window) to denote this. <br />Items added from the Toolbox will become part of the selected container. <br />Items which <br />contain child items <br />(layout managers or<br />controls with complex<br />content) can be marked <br />for selection. <br />
  10. 10. Expression Blend IDE Basics<br />A few things to remember about the core IDE:<br />The ‘eyeball’ icons on the Objects and Timeline window allows you to temporarily hide items on your designer. <br />This can be helpful when you wish to remove clutter to focus on the task at hand. <br />When you do so, the root layout manager will adjust content positioning! <br />As well, the ‘padlock’ icon<br />can be clicked to ensure that <br />an item can not be edited. <br />
  11. 11. Complex Control Content<br />Demo!<br />As you know, WPF/Silverlight support a control content model. <br />The Content property can be assigned to any set of UI elements. <br />This makes it very simple to fill the interior of a widget with unique, custom data.<br /> To add complex content to a ContentControl in Blend…<br />Direct Select the item for editing (via a double click) in the Objects and Timeline editor.<br />Zoom in, add objects!<br />
  12. 12. Shapes, Brushes, Transformations, Resources<br />The System.Windows.Shapes namespace (WPF and Silverlight) contains a set of 2D graphical classes.<br />Because these types extend UIElement and FrameworkElement, Shape derived classes are fully interactive. <br />Shapes support a number of common UI events, which simplify hit-testing, drag and drop, etc. <br />As well, Shape types can be easily configured with tooltips, content sensitive menus, etc. <br />Shapes are building blocks for UI data <br />(custom content, animations, themes,<br />control templates, etc) <br />
  13. 13. Shapes, Brushes, Transformations, Resources<br />Demo!<br />Ellipse, Rectangle and Line objects can be configured via the Blend Toolbox using identically named icons. <br />Simply select an item, and draw it on the designer surface.<br />Polylines and Polygons are configured using Pen and Pencil types. <br />Pen = Polyline (represented as a Path object)<br />Pencil = Polygon (represented as a Path object)<br />All shapes can be combined, <br />in various ways to build new Paths.<br />The brush of the *last selected* will be used<br />For the new shape.<br />
  14. 14. Shapes, Brushes, Transformations, Resources<br />Most Shape types require a Brush object assigned to the Fill property.<br />WPF/Silverlight both ship with a large number of brushes (solid colors, gradients, image and video brushes).<br />SolidColorBrush objects can be configured via string names or hex values. <br />Gradient brushes require a set of ‘gradient stops’ to control when a color blends to the next.<br />Consider the following Ellipse. <br />&lt;Ellipse x:Name=&quot;myCircle&quot; Stroke=&quot;Black&quot; Margin=&quot;75,69,0,0&quot; Width=&quot;110&quot; <br />HorizontalAlignment=&quot;Left&quot; VerticalAlignment=&quot;Top&quot; <br /> Height=&quot;110&quot; StrokeThickness=“1&quot; StrokeDashArray=&quot;1&quot;&gt;<br /> &lt;Ellipse.Fill&gt;<br /> &lt;RadialGradientBrushGradientOrigin=&quot;0.709,0.688&quot; RadiusX=&quot;0.473&quot; RadiusY=&quot;0.473&quot;&gt;<br /> &lt;GradientStop Color=&quot;#FFA535BB&quot; Offset=&quot;0.194&quot;/&gt;<br /> &lt;GradientStop Color=&quot;#FFA7ADD4&quot; Offset=&quot;0.871&quot;/&gt;<br /> &lt;GradientStop Color=&quot;#FF444FC5&quot; Offset=&quot;0.56&quot;/&gt;<br /> &lt;/RadialGradientBrush&gt;<br /> &lt;/Ellipse.Fill&gt;<br />&lt;/Ellipse&gt;<br />
  15. 15. Shapes, Brushes, Transformations, Resources<br />Demo!<br />Blend has a very useful ‘brush editor’.<br />You can define gradient brushes and gradient stops very easily. <br />You can also control the gradient origin by selecting the Shape and pressing the G key.<br />You can also easily convert the brush into a custom resource. <br />G key!<br />Select brush type here.<br />Select color here.<br />Convert brush to a new <br />Resource here.<br />Add / remove / configure <br />gradient stops here.<br />
  16. 16. Shapes, Brushes, Transformations, Resources<br />Demo!<br />WPF/Silverlight each support graphical transformations. <br />UIElements can be transformed via the RenderTransform property. <br />Numerous Transform derived types exist (angles, scaling, rotations, etc).<br />The Transformations area of Blend allows you to apply any number of transformations to a type.<br />You can also apply some transformations directly via the designer. <br />In either case, the designer surfaces updates real time.<br />
  17. 17. Shapes, Brushes, Transformations, Resources<br />Demo!<br />A few things to remember about working with Shapes (<br />A ‘Direct Selection’ (A) allows you to select individual pieces of a complex blob of content. <br />For example, a Path composed of several pieces of content, a Button with complex content, etc. <br />A ‘Selection’ (V) allows you to simply pick the current container. <br />Selection (V) : Allows you <br />to pick the current <br />item to position in the container. <br />Direct Selection (A) : Allows you <br />to pick internal complex content <br />for editing (useful for custom<br />controls, geometries). <br />
  18. 18. Shapes, Brushes, Transformations, Resources<br />A few things to remember about working with Shapes (<br />You can easily move existing resources to a new level. <br />For example, a Window level resource can be moved to the Application level. <br />Simply perform a drag and drop operation within the Resources editor. <br />You can also make<br />A new resource<br />dictionary from this <br />editor….<br />….You do know Silverlight 3.0 will support resource dictionaries, right?<br />
  19. 19. Shapes, Brushes, Transformations, Resources<br />When drawing with Shapes, the previously used brush will be used to Fill new geometries. <br />You can ‘delete’ this by selecting the No Brush option on the Brushes editor. <br />
  20. 20. Animations with Blend<br />Demo!<br />WPF/Silverlight support a feature rich animation system. <br />Recall, that a dependency property may receive input via animation objects. <br />Blend does not allow you to work with all possible animations. <br />However, it does provide excellent support for ‘keyframe animations’<br />Keyframes allow you to smoothly cycle through a series of values over time. <br />The Objects and<br />Timeline area allows<br />You to create a <br />‘storyboard’ which <br />Contains animation logic.<br />Storyboards are connected<br />To a given object on your<br />Designer. <br />F6 to position here!<br />
  21. 21. Buttons and Controls on the Fly<br />One (very) helpful aspect of Blend is that you can quickly transform a Shape into a new UserControl or Button type! <br />Typically, a custom shape (with fancy brushes & transformations) is the starting point for a custom control. <br />Using Blend, you can build a new UIElement with the click of a button (or two).<br />This option generates<br />A new UserControl.<br />This option generates a <br />new Button style.<br />
  22. 22. Buttons and Controls on the Fly<br />Assume you have drawn a simple Ellipse.<br />The Fill property has been set to a solid colored brush. <br />Now assume you have selected the Tools | Make Button… menu option.<br />You will be asked where to store your new Style resource. <br />&lt;Ellipse Fill=&quot;#FF1B19EC&quot; Stroke=&quot;#FF000000&quot; Margin=&quot;232,136,248,164&quot;/&gt;<br />
  23. 23. Buttons and Controls on the Fly<br />The generated XAML will:<br />Define a new named style resource.<br />Define a set of triggers for the new style (which can be edited later…)<br />The ‘Make Button’ option generates a new<br />Basic style….<br />….which can be spruced up by editing the <br />template!<br />
  24. 24. Buttons and Controls on the Fly<br />Demo!<br />Once you elect to edit the template, you can then add actions for key triggers.<br />This can be done via the Interaction editor. <br />Silverlight projects would take a similar approach using the Visual State Manager editor. <br />
  25. 25. Buttons and Controls on the Fly<br />Demo!<br />While building new styles is great, you may wish to isolate content to a new UserControl. Once you have done so:<br />The IDE will replace the existing markup to reference the new UserControl.<br />You can add triggers (VSM) using the IDE.<br />
  26. 26. A Preview of Blend 3.0<br />Demo!<br />Blend 3.0 (currently in beta) adds a number of new features to the IDE (and cleans up a few shortcomings).<br />Blend 3.0 adds<br />A number of new<br />Features to the<br />IDE, perhaps the <br />Exciting is….<br />A code editor!<br />
  27. 27. Wrap up!<br />Blend is a fancy XAML generation tool, used when building WPF / Silverlight applications. <br />UIs can be constructed using a designer surface, the Asset Library and a Properties window. <br />The System.Windows.Shapes types have full designer support. <br />Brushes can be configured via the Blend IDE, and converted to resources. <br />Shapes can be converted into new Buttons/UserControls on the fly. <br />Complex content and custom animations can be authored within the IDE.<br />Blend 3.0 (currently in beta) adds a code editor, simplified selecting and a slew of additional features. <br />
  28. 28. Extra: Creating UserControl Libraries. <br />In VS, create a new WPF (or Silverlight) Control Library.<br />Delete all the starter code. <br />Add new UserControls via Project menu. <br />Make some useful controls ;-)<br />Compile your *.dll<br />To use your controls in a new application:<br />Reference the external *.dll as usual. <br />Create a custom XMLNS for your tag prefix.<br />Declare a control in markup using tag prefix. <br />(VS and Blend both have some IntelliSense for this)<br />