Browse by Tags

• Blend For Programmers
• Digging Deeper
• tutorials
• XAML

• Tutorial on Styles & Templates Now Available

  I’m very pleased to announce that my latest tutorial, on Styles, Templates and the Visual State Manager is now available, in HTML , or as a PDF , and the complete source code is available as well. The Visual State Manager is a very exciting part of the new Parts model that decouples the logic of controls from their UI, leading to the startling realization that every control is lookless and you are free to change the look of every control in the toolbox. This tutorial examines the three fundamental ways you might modify the appearance of a control: In-line style attributes The creation of Style objects (in Xaml by hand or using Blend) The creation of Control templates The Parts and State model is examined and I spend a good bit of time examining the ways in which you can significantly modify the appearance and state transition behavior of a control without changing its event handling. This tutorial, however, is far from the last word (its not even the first word!). I posted  an intro to this tutorial just a few days ago, and I’ll be posting a few videos very soon. On July 23 I’ll be doing a Webcast: Visual State Manager: Transitions and Animation , and then on August 27 we’ll go deeper with a Webcast on Creating Skinnable Custom Controls (and you can, of course, expect videos and blog entries on these topics between now and then).   All in all, templates are an exciting and (to be honest, fun) aspect of Silverlight programming, and I’m not sure we’ve done more than scratch the surface of the creative possibilities. Posted Jul 08 2008, 12:54 PM by Jesse Liberty - Silverlight Geek Filed under: tutorials, Styles and Templates

• 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

• Progressive Metal – And, oh yeah, Silverlight

  Do you have fits of interest? I go through bursts of reading fiction and I’ll find myself reading everything I can get by suddenly favorite authors (lately it has been Ian McEwan , and  Cormac McCarthy ) From time to time I discover a genre of music that has been there a long time but I just wasn’t hip to it. In the 1990s it was jazz and then blues. That lasted a good long while and took me a long time to work my way through and figure out what I liked (as my friend who has been supporting himself as an artist for 50 years says “I don’t know what I like, but that’s art!”).  Starting about a year ago I discovered whatever the generic is for Alternative Rock and Metal, and lately that has focused more on Progressive Metal. I started out with Red Hot Chili Peppers, all of Nine Inch Nails, Nirvana, Foo Fighters, took a big excursion into Smashing Pumpkins, all of Rage Against the Machine, and then spent a lot of time re-discovering Zep. Oh my . But that is not what I’m writing about . If I’m going to write about something that appears to have  nothing to do with Silverlight when I should be busy recording a video, I’m going to write about how my metalMania (which also includes a hopeless devotion to Black Sabbath) has suddenly morphed into a powerful interest in Progressive Metal .       Prog Metal This is not your mama’s rock and roll. So far, and I’ve only just begun, the most interesting music I’ve heard has come from Pain of Salvation and Symphony X        but what is best about this is I’ve only scratched the surface ; there is so much more to find out. Oh yes, Silverlight The norm in a blog like this is to lay out a project and then show you the code. Instead, I’m going to lay out a project, and then…. well I’ll write the code,  but not yet. I’m describing it now, though, because I’m listening to Remedy Lane by Pain of Salvation and the idea and the music are too good together not to write down, and writing it down will commit me to doing it and hey! it’s Sunday and this is more productive than laying on the couch reading the Book Review section of the Times (especially given that my Kindle has three pages of books already).   So here’s the idea: Start with the button I’ve written already , but square it up to the right proportions to show an “album” cover. Get the cover image from a web service (Amazon?) and line up the albums you like or recommend. Mouse over behavior includes swells... Posted Jun 29 2008, 09:58 AM by Jesse Liberty - Silverlight Geek Filed under: Digging Deeper, Styles and Templates

• Look Ma’ No Code

  I have been trying to consolidate.  Most of my work is here, in this blog, and for this site, but I also have a Blog for O’Reilly and a political Blog, and a page where I list the books I’ve written, and a support site and…  About a year ago, I migrated away from my business web site and set up a “ portal ” to all my on-line “presences.” which, frankly, I slapped together.  It is ugly, but its concept is to show an image that is a link to  each site or blog.   Since I’m about to tape a series of videos on Templates and the Visual State Manager to coincide with releasing a tutorial on the subject, I thought I’d “play” with the idea of replacing the static images with buttons. Each image could be hovered over and would grow (and identify itself), could be clicked on, etc. It turned out to be a pretty easy exercise (like many things, a couple hours to figure out, but the next time will take 5 minutes) and will both make a good exercise for the videos and will make my site nicer (once I get around to (a) perfecting the buttons and then (b) switching the rest of the images over!) For now, you are welcome to take a look , (if you do, be sure to hover over a button, and even more fun, click in the control but not on a button and then hit tab, changing focus). Just Xaml The point of this blog post, however, is that a buddy (who is a killer javascript programmer and the best high school math teacher on the planet ) wrote to me and asked “how did you make them spin” and in explaining (briefly) i realized that it might be interesting and surprising that there was no non-declarative code; everything was done in Xaml.  What I’m about to write will make a lot more sense after you read the tutorial and see the videos but I’m going to capture it today as I have it in my head, so forgive me for putting the cart of details before the horse of introduction. Image rotation, and everything else (making it larger, etc.) is just a transition based on the “state” (mouse over, etc.) . There isn’t one line of code in there; it is all declarative Xaml. <vsm:VisualState x:Name= "Focused" > <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime= "00:00:00" Duration= "00:00:00.0010000" Storyboard.TargetName= "thePanel" Storyboard.TargetProperty= "(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" > <SplineDoubleKeyFrame KeyTime= "00:00... Posted Jun 22 2008, 07:43 AM by Jesse Liberty - Silverlight Geek Filed under: Digging Deeper, Styles and Templates