Browse by Tags

• Animation
• Beta 2
• Building Apps
• Data Binding
• Digging Deeper
• How Do I Videos
• Learning Silverlight
• Managed Code
• Multi-page
• Presentations
• Recommended Resources
• silverlight 2.0
• Styles and Templates
• Templates
• Templates - VSM
• Tools
• tutorials
• Visual State Manager
• VSM
• Webcast
• XAML

• A third way to handle Templated Buttons & Images

  In yesterday’s blog post I suggested that there were two solutions to crating a templated button that used an image. One was to create a different template for each image (yuck) and the other was to create a custom temlpated button. A third, and excellent alternative was suggested to me by email by Justin Angel, and that is to set the images as Resources in Expression Blend. Then, you can add buttons to your pages, and apply the template (which will control such things as how they behavior in response to a mouse over, and you can apply the Resource as a background. Very nice. Here is how I did it to get the effect I wanted. (NB: this will all be shown in detail in a forthcoming video, and is summarized here very quickly): 1. I copied the source code from the previous project to my new project as a starting point I threw away the button templates I added four stock photos to my project and one by one added them to the design surface, and clicked on them and then selected Tools –> Make Brush Resource –> Make Brush Resource and when presented with the dialog box gave each a name, and made it an application resource… Thus I ended up with four resources, each usable as a background. 4. Next I created a single template for my button, but this time instead of making a template from scratch, a made a copy of the existing template. A little spelunking and I was able to discard the cowl that made the background hard to see, and I changed the mouse-over behavior to bounce like a silly Mac-dock entry and I modified the pressed behavior as well. 1: <vsm:VisualState x:Name= "MouseOver" > 2: <Storyboard AutoReverse= "True" RepeatBehavior= "Forever" > 3: 4: <DoubleAnimationUsingKeyFrames BeginTime= "00:00:00" 5: Storyboard.TargetName= "Background" 6: Storyboard.TargetProperty= "(UIElement.RenderTransform). 7: (TransformGroup.Children)[3].(TranslateTransform.Y)" > 8: <SplineDoubleKeyFrame KeyTime= "00:00:00" Value= "-10" /> 9: <SplineDoubleKeyFrame KeyTime= "00:00:00.3000000" Value= "0" /> 10: </DoubleAnimationUsingKeyFrames> 11: <!-- you get the idea --> 12: <Storyboard.TargetName= "CurvedBevel" 13: <Storyboard.TargetName= "Accent" 14: <Storyboard.TargetName= "contentPresenter" 15: </Storyboard> 16: </vsm:VisualState> Finally, I added a stack panel to hold the buttons and added... Posted Aug 07 2008, 10:16 AM by Jesse Liberty - Silverlight Geek Filed under: XAML, Webcast, Digging Deeper, Blend For Programmers, Templates, Multi-page, Building Apps

• New Tutorial: DataBinding and Data Templates

  I’m pleased to announce that we’ve posted a new tutorial: DataBinding and Data Templates Using Expression Blend available in HTML and pdf with source code.   This should nicely complement the three new videos on DataBinding An overview of Databinding and Data Templates using Expression Blend DataBinding and Data Templates in Xaml DataBinding and DataTemplates with Expression Blend     I hope you find them useful. Posted Jul 30 2008, 03:53 PM by Jesse Liberty - Silverlight Geek Filed under: tutorials, Recommended Resources, How Do I Videos, Data Binding, Digging Deeper, Blend For Programmers

• In-State Animation In A Nutshell

  I’ll be covering this in videos and tutorials in depth, but I’ve come to realize that in-state animation is so straight forward that it can be explained in a quick blog entry. In fact, the really hard part is explaining what it is viz: the Visual State Manager uses animation (story boards) move from one state (e.g., MouseOver) to another state (e.g., MouseDown). In-state Animation allows you to add animation whilst (I’m going to the UK soon) you are in a state. An example: When teaching templates I show how to have a button “swell” when you mouse over, and then I show how to have that swelling be non-instantaneous (by setting the transition time to non zero). You can see all that in this tutorial or in this video .  If however, you’d like your button not only to swell, but then to pulse gently while you hold the mouse over it, you need a bit of in-state animation. Fortunately, this is incredibly easy to do. Start With The Tutorial Code To keep this as simple as possible, I’m going to start with the code from the tutorial which I’ll open in Blend. There is quite a bit here, but I don’t care about any of it except modifying the template for the Button – specifically the Mouse-Over behavior. Thus I’ll click on the Resources tab, turn the triangle to reveal what is in App.xaml and double-click on RoundButton, putting Blend into Template Editing.  In the Objects and Timeline I can see the contents of the Round Button (the Ellipse and the Text). I’ll click on MouseOver which is the state I want to change and I see that both are already being changed (they swell) and in properties / Transform I can see that the Ellipse and the Text are increased to 1.2 (120%) of their normal size. Great, ready to go. To begin the in-state animation, I click on the Show Timeline button: This immediately causes the timeline to slide out from behind the Objects and Timeline window. There are two ovals at time 0 indicating that what I’m looking at in the properties window is the state of the ButtonEllipse and ButtonText the instant the button is fully in MosueOver state (that is, once the transition completes). I’ll click on 1 second which will light that line yellow and set the properties that I want at 1 second; specifically that the ButtonEllipse and the ButtonText will have shrunk to 0.8.  A connection appears between 0 and 1 second indicating that the time between will be filled for me with the intermediate values, and sure enough if I click on one of the ticks between... Posted Jul 26 2008, 07:52 PM by Jesse Liberty - Silverlight Geek Filed under: Animation, Digging Deeper, Blend For Programmers, Templates

• Templates and Animation Webcast – Follow up

  I had the pleasure of presenting a Webcast on Templates and Animation today, and as promised, here is the answer to an open question, and the set of links that were mentioned. The videos that may be of help as background information are here Here is the  Tutorial introduction to Styles and Templates. available in HTML or pdf Here is the list of upcoming Webcasts , complete with full descriptions and an opportunity to register. Link to Karen Corby’s excellent 4 part series on the Parts & State Model (great preparation for the August 27 Webcast ) Why couldn’t we animate the Border? You will remember that I was unable to animate the border thickness in my impromptu demonstration of in-state animation. Had I looked at the documentation, I would quickly have found that the border thickness is read-only! Fortunately we were able to animate the opacity which actually gave a more satisfying effect. Source Code The complete source code for today’s web cast is available here. Posted Jul 23 2008, 10:42 AM by Jesse Liberty - Silverlight Geek Filed under: Animation, Webcast, Digging Deeper, Blend For Programmers, Templates, VSM

• Webcast schedule has been updated

  The Webcast schedule has been updated slightly. You can find it here . You can always find it in the sidebar as well: The key change is this September 10 Silverlight Animation and Expression Blend Posted Jul 18 2008, 07:42 AM by Jesse Liberty - Silverlight Geek Filed under: Webcast, Blend For Programmers

• Three New Videos On Data Binding

  I’m pleased to announce that we’ve posted three new videos on DataBinding and on DataTemplates (creating templates that control the display of a collection of data in a list control such as a list box) Unfortunately, we swapped the images for the Blend video and the Xaml video which is a bit confusing but we’ll get that fixed. And, while the three videos do stand alone, watching them in the order 37 –>39 -> 38 will make a good bit more sense <smile>. In any case, I hope you find them interesting and useful. The first, An Overview… explains the fundamental concepts of DataBinding and ListTemplates. The “second”, DataBinding and DataTemplates in Xaml shows how to bind the properties of business objects to Silverlight controls in Xaml and how to create DataTemplates by hand. Finally, the “third”, DataBidning and DataTemplates With Expression Blend recreates that same work using Expresion Blend (and note that it is 9 minutes vs. 22!). Posted Jul 17 2008, 06:47 PM by Jesse Liberty - Silverlight Geek Filed under: XAML, How Do I Videos, Data Binding, Digging Deeper, Blend For Programmers

• Styles and Templates - Three Videos

  I’m very pleased to announce a three part video series (currently listed in reverse order) as companions to my new tutorial ). The three videos are Creating Styles Templates without Visual State Manager Templates and Visual State Manager   The new Visual State Manager and Parts model are very exciting and I’ll be following this up with a good bit more, including two up-coming Webcasts: July 23: Visual State Manager, Transitions and Animation in Silverlight August 27: Creating Skinnable Custom Controls in Silverlight (Designing for the Parts model and VSM) Posted Jul 11 2008, 06:11 AM by Jesse Liberty - Silverlight Geek Filed under: Recommended Resources, Digging Deeper, Blend For Programmers, Templates - VSM

• Green Eggs and Blend

  I’m pleased to say that the accident of not recording my first ( new series ) Webcast led to the opportunity to reformulate it as a video, which is now available for viewing or download. This is a brief, somewhat  tongue in cheek overview of  why I gave up a 15 year commitment to working in a single Integrated Development Environment and came to discover I do so Like Expression Blend . Posted Jul 11 2008, 05:57 AM by Jesse Liberty - Silverlight Geek Filed under: Recommended Resources, Presentations, How Do I Videos, Blend For Programmers

• Styles and Templates

  I’m about to release a tutorial and a few videos on Styles and Templates. To set the stage, I wanted to discuss one aspect of templating in Silverlight that is in some ways revolutionary. The designers of the Silverlight 2 control libraries established from the outset that there would be an absolute decoupling of the control logic (as implemented by event handlers) from the User Interface . This allows the UI to be dictated entirely by Tempolates, (and the Visual State Machine) and in turn that allows templates to be written entirely in Xaml and to consist of a combination of graphic primitives and story boards (transitions). This means that every control is lookless .  The appearance of all the controls in the toolbox is just the appearance provided by the “out of the box” template assigned to it  by the control creator. It has no more intrinsic validity than any other skin you might put on the control. Say what? That means you are absolutely and 100% free to use the button as is, or to make it look like a dog, and have it bark when pressed. Or, consider the images shown here. Both sets show buttons being before and after being clicked. Other than aesthetics and convention, there is nothing that makes one set more correct than the other.   The Possible States are Defined and Embedded in Metadata Both “looks” are equally valid, and both buttons send exactly the same click event.  Since the designer of the out of the box button was kind enough to embed all the button’s state information in the button’s meta-data (e.g., “I have the states Normal, MouseOver, MouseDown, Disabled, Focus and NotFocused), and since Expression Blend reads that meta data and makes editing the appearance and behavior astonishingly easy, it is not only valid to change it to a round, spinning,  dipping shape,  it is (to be honest) fun. Three Ways To Modify Controls As you will see in the tutorial to be release within the next day or so, I distinguish among three ways to modify the look of a control: 1. “In line” attributes 2. Style objects 3. Templates In Line Attributes Very briefly, the first of these we all do all the time. This is as simple as adding such UI controlling attributes as HorizontalAlignment="Left" to the Xaml.  It is fielder’s choice as to whether you set these attributes directly in Xaml or let Blend set them for you as you create your UI Styles The second is a more formal approach in which you create a Style object that can... Posted Jul 05 2008, 05:36 AM by Jesse Liberty - Silverlight Geek Filed under: XAML, Digging Deeper, Blend For Programmers, Styles and Templates

• Green Eggs and Ham Webcast Presentation

  I presented the first of a new series of live web casts today in which a number of resources were mentioned. As promised, here are links to all of them Silverlight.net Getting Started Page Learn Page Silverlight Microblog Scott Guthries’s blog entry on Expression Blend for Programmers Three videos on Blend For Programmers. One , Two , Three . Tutorial on Blend for Programmers Tutorial on Skinning and Styling Controls in Blend (to be posted soon) Register for next presentation on data binding with Blend The Traffic Light Video (silent!) Source Code For Traffic Light Posted Jun 25 2008, 12:03 PM by Jesse Liberty - Silverlight Geek Filed under: Learning Silverlight, Recommended Resources, Presentations, Webcast, Digging Deeper, Blend For Programmers

• Beta 2 Month

  Beta 2 has been announced, and as you know from Tim’s post and Karen Corby’s , one of the big and wonderful additions to Beta 2 is a new model for skinning Silverlight controls. This is so exciting, and so important, that my plan is to make it a central (but not quite exclusive) focus for the month of June. The timing is good, because I just finished updating all the tutorials for Beta 2 (watch for them to be posted shortly after Beta 2 is available) and the one I did not update is #3 Styles and Templates. I chose not to update that one because the new model is so much better there was no point in fixing up a tutorial on typewriters when computers are about to land on your desk. The Plan During this month I’ll be releasing A new tutorial that covers Styles, Templates and the VSM in great detail How Do I videos on Styles, Templates, Visual State Manager, and tying it all together Multiple “digging deeper” blog posts and… June 18 - Round Buttons with Visual State Manager The first in my new series of Web casts unlike any I’ve tried before: much higher value, much more information, much more use of the medium. This should just be a blast. So, sign up for the June 18 WebCast and don’t forget to join SLMicroBlog to be kept up to date. Posted Jun 04 2008, 04:28 PM by Jesse Liberty - Silverlight Geek Filed under: tutorials, silverlight 2.0, Learning Silverlight, Webcast, How Do I Videos, Blend For Programmers, Beta 2, Visual State Manager

• Blend, VS, Events and C#

  From now until the summer I'll be working on videos , tutorials , presentations and blogging, but I'll also be writing Programming Silverlight 2 with Tim Heuer . Rather than convincing you that I'm continually hawking my book, I'd rather use the process of writing it as an opportunity to provide good, free, and I hope interesting material for this blog. (Write to me if I get the balance wrong!). As an example, I ran into a bit of C# in what I'm writing in the first chapter that I thought made for an interesting example of how a Silverlight 2 programmer can? must? juggle the three principle technologies of (a) Visual Studio and (b) Blend and (c) a programming language of choice (which I can't quite understand why that wouldn't be C# or VB but I do know lots of folks disagree, and that in itself will make an interesting blog entry!) So this blog entry may be of interest only for those of you who enjoy a bit of C#. The context This is early in the book and I'm laying out 9 checkboxes, used to designate search criteria. The first checkbox is "Any". If that is clicked the others are invisible,   If Any is unchecked, all the other criteria appear,     The book then goes on to show a number of things, including how to create the refining characteristics panels and how to overlay them, etc. etc. but the part I want to focus on here is a tiny detail: how you set the visibility flag on the check boxes.  Here is the code I used. private void AnyPropertyCheckBox_Click( object sender, RoutedEventArgs e) { bool ? isVisible = !AnyPropertyCheckBox.IsChecked; foreach (UIElement uie in LayoutRoot.Children) { CheckBox cb = uie as CheckBox; if (cb != null ) { if (cb.Tag != null && cb.Tag.ToString().ToUpper() == "SEARCHCRITERIA" ) { cb.Visibility = isVisible == true ? Visibility.Visible : Visibility.Collapsed; } // end if tag match } // end if check box } // end for each element } // end method   I'll walk through the entire method in just a second, but the key c# construct here is the use of the ternary operator (?:) cb.Visibility = isVisible == true ? Visibility.Visible : Visibility.Collapsed; This operator (?:) is called ternary as it is the only operator that takes three parts. Here is how you read it (inside out).  First you evaluate the truth part  (isVisible==true).  This could have been written as !AnyPropertyCheckBox.IsChecked == true or AnyPropertyCheckBox != IsChecked... Posted May 18 2008, 05:56 AM by Jesse Liberty - Silverlight Geek Filed under: silverlight 2.0, Learning Silverlight, Digging Deeper, Blend For Programmers, Managed Code

• Expression Blend for Programmers

  I have set out on an integrated set of videos, tutorials and blog posts on the subject of using Expression Blend from the point of view of Silverlight 2 Programmers.  To get things going, I created a 3 part video series based on ScottGu's extended blog tutorial and I have a tutorial on the topic due to publish early next week. I am now in the process of creating more videos in which I will be exploring how Blend can make certain tasks far easier for the Silverlight programmer; keep an eye out for my video on Blend and Data binding. I will express a certain resistance to starting this, and I've been trying to figure out why. Part of it is that I'm very comfortable in Visual Studio and much of it is that nearly all the books on Blend are targeted at Designers rather than at Programmers. It is my goal to overcome those concerns for developers who share these concerns, and to integrate Blend into my toolset; using Blend for its strengths, and Visual Studio where it is stronger, and, eventually, to think of them as two faces of a single semi-integrated tool. I'm not sure what will happen when Visual Studio's design surface is fully read/write. I think by then I'll be so comfortable using Blend's features that I'll continue to do so for some tasks. I'd be interested in your experiences as well. Posted May 16 2008, 06:17 AM by Jesse Liberty - Silverlight Geek Filed under: silverlight 2.0, Learning Silverlight, Tools, Blend For Programmers