Browse by Tags

• Animation
• Beta 2
• Blend For Programmers
• Controls and Events
• Data Binding
• Errata
• How Do I Videos
• Learning Silverlight
• Managed Code
• Presentations
• Recommended Resources
• silverlight 2.0
• Silverlight.net
• Styles and Templates
• Templates
• Templates - VSM
• Tools
• tutorials
• VSM
• Webcast
• XAML

• 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

• Digging Deeper: Templates and the Visual State Manager

  There has been a number of requests for videos, tutorials and Webcasts that dive deeper. A few weeks ago I scheduled a Webcast for this Wednesday to cover  the Visual State Manager which presents a good opportunity to do so. During this Webcast I will endeavor to provide a context for skinning in general and the VSM in particular, and to provide a general introduction to the overall Parts and States Model. By the end of the hour you should have a solid understanding of what it takes to re-skin any existing control.  This will be followed by Part II, one month from now, in which we’ll focus on creating Custom Skinnable controls and at that time we’ll dive very deeply into the Parts and States model. If there are issues you are running into with the VSM, with transitions or with skinning controls, please let me know in the next couple days and I’ll try to address them in my presentation.  I look forward to seeing you there. Thanks! Posted Jul 20 2008, 07:27 PM by Jesse Liberty - Silverlight Geek Filed under: Webcast, Digging Deeper, Templates - VSM

• 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

• 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

• 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

• 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

• New Live Presentation Series – Starts 6/25

  I am pleased to announce a new series, blending Conference-quality presentations delivered through Live Meeting via the Live From Redmond Series. Audience, Goal and Purpose Each presentation will provide a thorough overview of a Silverlight 2 topic with a focused  priority of explaining What is this feature and why do you care? What are the most important things you need to know? Where can you learn more? Every presentation will be paired with a blog entry containing links to videos, tutorials, and other resources to complement the material presented. The tutorials and videos will focus on how , but the Presentation will focus on What and Why. While there will be quite a bit of code shown, these are not “How Do I” presentations but rather “What do I need to know and why do I care?” presentations. Each presentations will be provided through Microsoft Webcasts in the “ Live From Redmond ” series and will be recorded for download after processing. Schedule & Registration June 25:   Controls and Events (Subtitle: Programming Silverlight 2 with Expression Blend and Visual Studio 2008). Complete description and registration .  Event ID: 1032381748 July 09: Data-binding, business objects and data sources in Silverlight. Complete description and registration .  Event ID: 1032381750 July 16 – Saruabh Pant Presents: Building Rich Internet Applications Using Microsoft Silverlight 2 July 23: Data Templates in Silverlight. Complete description and registration .  Event ID: 1032381752 August 6 Memory efficient multi-page applications in Silverlight . Complete description and registration .  Event ID: 1032381754 The dates for the next three will be settled very soon. Graphics and Transforms in Silverlight  Visual State Manager, Transitions and Animation in Silverlight Exploring Deep Zoom in Silverlight 2   Fees (none)  and Requirements (Live Meeting) Each presentation is free but you will need to register in advance.  You will also need Microsoft Live Meeting Software to view the presentation (learn more here ). Posted Jun 18 2008, 05:02 PM by Jesse Liberty - Silverlight Geek Filed under: Learning Silverlight, Presentations, Webcast, Digging Deeper, Beta 2

• Who Ate My Mouse Down Event??

  Before I leave, I want to squeeze in one quick note about a problem a lot of folks are running into as they upgrade from Beta 1 to Beta 2. I’ll come back to this in more detail when I get back, but here it is in a nutshell. A breaking change in the Beta 2 upgrade is that all the controls now handle MouseLeftButtonDown/Up/Move, while graphic objects do not. That means that no built in control will pass those events on (bubble them up) anymore. So, if you revisit my example for drag and drop what you’ll find is that if you create a button that has a graphic object inside it, and you drag on the button, it will not move, but if you drag on the graphic object it will! You can see this in (the newly updated) Tutorial #1 (where the image for Drag and Drop is misleading). Dragging on the Very Little Green Man works, dragging on the button he is in, does not. That is because the Very Little Green Man consists of nothing but Graphics (elipses and paths) but the button is a control and the control eats the event. This is why figure 1.9 in the tutorial has to be replaced; you can’t drag the button, you have to drag the green man, Broken image It’s subtle but important, where the mouse is shown, you could not be dragging . Yes, in Beta 1, no in Beta 2. Fixed image Here the mouse is dragging the little green man, and that will work just fine. The full reason for this is to come, but the short explanation is that this helps controls in Silverlight behave more like controls in WPF. Posted Jun 12 2008, 07:54 AM by Jesse Liberty - Silverlight Geek Filed under: silverlight 2.0, Learning Silverlight, Digging Deeper, Beta 2

• Popup Control

  Beta 2 includes a wealth of new controls including the Popup (that is new, right? It’s not that I just didn’t notice it before?). I received an email today asking if I’d do a short How Do I video on creating a Popup and I certainly will, but here is a wicked fast tutorial for those of you who can’t wait…. There are three approaches. 1. Create the Popup as Xaml, most easily in Blend 2. Create the Popup dynamically, most easily in Visual Studio 3. Create the Popup as a User Control (the right answer, once you’re comfortable with how Popups are created Creating the Popup in Xaml Here is a picture of what we’re going to build. The basic Silverlight control will have a button and an image….. The button’s event handler makes the Popup visible. If you are old enough to get the reference, from having watched it when it was first on, remind me to buy you a glass of milk the next time we’re at a conference together There are two important things to notice: the Popup covers any elements that are at its location (when you create it you give it a vertical and horizontal offset from the upper left of the control) and the Popup is entirely within the Silverlight control. Method 1 - Xaml Create your basic project with the Click Me button and the Image in Blend. Set their properties as usual. Then select a Popup from the Asset Library and place that inside your Grid as well. Make the Popup the container by double clicking on it, and you are ready to add the border and StackPanel. Double click on the panel to make it the container and add the TextBlock and Button. Set all the properties. Once you have the controls set, it is time to save all the files and edit in Visual Studio. Your Xaml file will look more or less like this: <UserControl xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" x:Class= "PopUpControl.Page" xmlns:d= "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable= "d" Width= "640" Height= "480" > <Grid x:Name= "LayoutRoot" Background= "White" > <Grid.RowDefinitions> <RowDefinition Height= "0.15*" /> <RowDefinition Height= "0.85*" /> </Grid.RowDefinitions> <Button x:Name= "ShowPopupButton" Height= "40" HorizontalAlignment= "Left"... Posted Jun 06 2008, 08:32 AM by Jesse Liberty - Silverlight Geek Filed under: XAML, silverlight 2.0, Learning Silverlight, Digging Deeper, Controls and Events, Beta 2

• Beta 2 Event Bubbling

  There are many great changes in Beta 2, and some are designed to make Silverlight more like WPF. One side effect of this is that event bubbling has changed just a bit and that bit breaks some of the examples I love to use. In Beta 1, the distinction was that all the controls handled their own click events but the more primitive events such as many of the mouse events were allowed to bubble. This allowed for interesting if not terribly useful demonstrations in which I placed a check box inside a button and was able to demonstrate that if I were to use the click event on the check box the button would never see the click, but if I used a MouseLeftButtonDown, hey! Presto! the button did see the event. This has now changed in Beta 2 to make Silverlight behave more like WPF. By and large (other than breaking my demo) this is a good thing.  The consistency now is that objects that directly derive from UI element do support event bubbling for the mouse events (that is,  Ellipse, Glyphs, Image, InkPresenter, Line, MediaElement, Path, Polygon, Polyline, Rectangle and TextBlock.)  In addition, the container classes do. Thus, if you set up the following bizarre application in which you have a grid, with a grid in it, that contains a stack panel that in turn contains a rectangle, a TextBlock, a check box, a button and a listbox (the last to show the results)… <UserControl x:Class= "EventBubbling.Page" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" Width= "400" Height= "800" > <Grid x:Name= "LayoutRoot" Background= "White" > <Grid x:Name= "InterimGrid" > <StackPanel x:Name= "myStackPanel" Orientation= "Vertical" > <Rectangle x:Name= "myRect" Width= "30" Height= "30" Fill= "Blue" Stroke= "Red" StrokeThickness= "2" Margin= "0,10,0,10" /> <TextBlock x:Name= "myTextBlock" Text= "Hello" HorizontalAlignment= "Center" FontSize= "14" Margin= "0,10,0,10" /> <CheckBox x:Name= "myCheckBox" Content= "Check Me" Width= "80" Height= "40" Margin= "0,10,0,10" HorizontalAlignment= "Center" /> <Button x:Name= "myButton" Content= "TinyButton" Height= "30"... Posted Jun 03 2008, 12:57 PM by Jesse Liberty - Silverlight Geek Filed under: silverlight 2.0, Learning Silverlight, Digging Deeper, Controls and Events, Beta 2

• Creating a Project from xaml and xaml.cs files

  I posted the code for the PageSwitcher app described in a previous blog post , but to save space and to make the download faster, I didn't include anything but the code (no solution or project files). A reader wrote asking how to create a project and it is a more than fair question as the answer is not obvious until you've done it a couple times, so let's walk through that example. When you download the code, you'll receive a zip file named  PageSwitcher .zip. Unzip that and you'll have a folder named PageSwitcher,   Open a new Visual Studio project and to make this example as clear as possible, let's name it something else (myPageSwitcher) and locate it in a different directory. Open Page.xaml in your new project and note the name of the project (MyPageSwitcher) <UserControl x:Class= "MyPageSwitcher.Page" Open Page.xaml.cs and note the namespace namespace MyPageSwitcher This is the information you need to hold on to for the rest of this exercise. Ready To Go There are many ways to do this, but the easiest is to delete Page.xaml, Page.xaml.cs and App.xaml and App.xaml.cs from your new project. (Don't panic!) Next, right-click on the project and choose Add->Existing items and navigate to the downloaded files and add them all. They are now in your new project. Click on all 4 xaml files and change the name of the project in the x:Class tag. Click on all 4 .cs files and change the name of the namespace (ignore the smart tag) If you want to get rid of the smart tag, use Build->Clean. Build->Rebuild Solution. You're all set Here is your new PageSwitcher.xaml <UserControl x:Class= "MyPageSwitcher.PageSwitcher" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" Width= "400" Height= "300" > </UserControl>   And here is your new PageSwitcher.xaml.cs using System.Windows.Controls; namespace MyPageSwitcher { public partial class PageSwitcher : UserControl { public PageSwitcher() { InitializeComponent(); if ( this .Content == null ) { this .Content = new Page(); } } public void Navigate(UserControl nextPage) { this .Content = nextPage; } } }   Don't forget, once your code compiles, you can right click on the using statements and choose Organize Usings -> Remove Unused Using  which greatly cleans up your code. Posted May 31 2008, 06:12 PM by Jesse Liberty - Silverlight Geek Filed under: tutorials, silverlight 2.0, Learning Silverlight, Silverlight.net, Recommended Resources, Tools, How Do I Videos, Digging Deeper

• Multi-Page Applications in Silverlight

  I wanted to build a multi-page (Search - Results) application when I realized that isn't really our model. Fortunately, I wrote to Ashish Shetty , who combines enormous knowledge with enormous kindness, and even though he is in the middle of blogging about this, he agreed that I could blog about it as well. Since I will be creating an HDI Video on this as one of my first Beta 2 videos (RSN) and since I think his solution is wicked cool, here is how you do it 1. Create a new Silverlight 2 project in Visual Studio , (I named mine, MultiPage). 2. You want to have at least three pages. Let's use the default Page.xaml as the first. Add any content you like but but include a button with a name and set the content to something like "Switch" 3. Right click on the project and click Add New Item, and add a second User Control. Name the new user control anything you want and give it any content you want. I'll call mine Page2.xaml and give it content to make it distinct: <UserControl x:Class= "MultiPage.Page2" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" Width= "400" Height= "300" > <Grid x:Name= "LayoutRoot" Background= "Beige" > <StackPanel Orientation= "Horizontal" > <TextBlock Text= "This is Page2" FontFamily= "Comic Sans MS" FontSize= "48" VerticalAlignment= "Center" /> <Button x:Name= "SwitcherooButton" Content= "Switcheroo" Height= "40" Width= "80" Background= "Red" FontSize= "14" Margin= "20,0,0,0" /> </StackPanel> </Grid> </UserControl> Note that again I have a button for switching pages. Here is where the magic happens 4. Add a third page (I named mine PageSwitch.xaml.) Put nothing in the xaml file, because the content will be the page you want to display , but in the code-behind file add this method: public void Navigate(UserControl nextPage) { this .Content = nextPage; } 5. Wire up the buttons on all of your pages to invoke the Navigate method, passing in the page you want to navigate to. So, in Page.xaml.cs you'll add this code, public Page() { InitializeComponent(); SwitchButton.Click += new RoutedEventHandler(SwitchButton_Click); } void SwitchButton_Click( object sender, RoutedEventArgs e) { PageSwitcher ps = this .Parent... Posted May 31 2008, 07:40 AM by Jesse Liberty - Silverlight Geek Filed under: silverlight 2.0, Learning Silverlight, Digging Deeper

• In Silverlight, Tags are just strings...

  Tim Binkley-Jones sent in a Tip of the Day that custom attached properties make a superior choice to Tags because, in Silverlight, Tags can only be strings . This is not what I've been saying, but he is right; I was wrong. He provides this excellent blog entry in which he explains the problem and the solution: custom attached properties . His Parthian Shot: "A custom attached property is the tool of a Silverlight/WPF developer.  Not as clumsy or random as a Tag, but an elegant tool for a more civilized technology." Ouch. Posted May 19 2008, 10:49 AM by Jesse Liberty - Silverlight Geek Filed under: silverlight 2.0, Learning Silverlight, Digging Deeper, Errata