Browse by Tags

• App Development
• Blend For Programmers
• Community
• Custom Controls
• Dependency Properties
• Digging Deeper
• Multi-page
• Pocket MFA
• Recommended Resources
• Tags
• Templates
• Tools
• User Interface
• Walk-throughs
• Webcast
• XAML

• Something New Coming – Pocket MFA

  My theory, based entirely on my own experience is that many developers would like to know just a bit more about design (not all developers, and not a lot more, just some developers, and just a bit more). Our reasons include: 1. The bar has been set higher by Silverlight and other application development platforms that set high user expectations 2. Some of us don't have access to professional designers, or don't have access early in our project 3. Some of us are developing prototypes and no designer is involved but we want the prototype to look good enough that the design doesn't "get in the way." In short, we're putting our code in front of others, and while many folks can say they don't care what it looks like, the truth is that good looking (or at least good-enough looking) code makes a very different impact than poor looking applications. Thus, I am taking action. My goals are to provide this information to developers in what I'm calling the Pocket MFA   series. This is an entirely optional set of add-ons to the tutorials, videos, blog entries and other work I do. It will be optional and easy to skip, but my hope is that you'll find value in it. It is an experiment that will last through Q1 and then be reassessed. As a start, I'll be making recommendations on some background reading, but I'm happy to announce that one of our best designers will be adding a brief commentary to my forthcoming videos (at the end so you can skip it if you really don't want to know about this) detailing small changes that I could have made to improve the appearance of my application. These commentaries will run under 5 minutes, but collectively I hope to learn and I hope they will teach, the fundamentals that we can use to bring the appearance of our applications up that notch or two that can make a world of difference. There are three books that I typically state are indispensible to anyone creating software ( The Design of Everyday Things , Why Software Sucks and Don't Make Me Think ).  That said, if we're focusing on design , then I think we may want to start with this gem: Non-Designer's Design Book, The (3rd Edition) (Non Designer's Design Book): Robin Williams: Books ISBN : 0321534042 ISBN-13 : 9780321534040 And while it is not targeted at Silverlight 2, you may well want to get a leg up by watching Arturo's brilliant video from the Fire Starter series. Click on the image below to go to the... Posted Oct 16 2008, 07:15 AM by Jesse Liberty - Silverlight Geek Filed under: User Interface, Recommended Resources, Blend For Programmers, Community, Building Apps, Pocket MFA

• Tag Property – The Diplomatic Pouch of Silverlight

  I received feedback from a few sources recently expressing confusion about the Tag property, which resides in the class FrameworkElement.  Notice, first that Control (the base for all visible controls) derives directly from FrameworkElement and thus every control is-a Framework Element and thus every control has-a Tag. For free. No extra charge. Included. Gratis. The Tag property is like a pocket you can stuff something into and be assured that it will be there when you need it later. It isn't type safe, but it is water-tight. This can be very handy (and can prevent a lot of needless sub-classing). A tech reviewer on my book wrote that it can only hold strings, so I wrote what was supposed to be a quick and dirty program to show that, no, it can hold instances of classes. Worked great except for two problems: Getting it to look nice took too much of the morning After I was done I looked in the documentation and (as an unnamed vp candidate might say) "well shucks, say it ain't so, the docs sure do say it is string only…. dang!" So, I'll walk you through my code, and then I'll come back and tell you that either the docs are wrong (hope, hope) or that I'm wrong and here's why.  The UI looks like this when it comes up: (I've added 4 numbers in blue along the right hand side so that I can refer to areas of the screen) Digression: I really liked Algerian as a font for my drop down but it turns out that it is not a native font for Silverlight, so I had to "embed it" in the application. Blend makes this quite easy to do and it is documented in the Blend User Guide (Help file) – but be sure to read the section that applies to Silverlight 2. Briefly you bring up the Font Manager, check the font you want (in my case, Algerian), check the subset you want (I chose All glyphs) and click OK. When you return to Visual Studio, you'll find a folder in the project named Fonts with your font in it. Very nice. That makes the drop down list go from this to this (which may or may not be an improvement) </digression> How the Tag works Tagging is pretty straight forward; you just assign an object to the control's tag, and you fish it out later, remembering that the Tag is of type object and so you must cast back to the "real" (e.g., runtime) type of whatever you've stored. Setting up a test that will actually mean something is not always trivial. Our test form works like this: you choose to check... Posted Oct 06 2008, 10:51 AM by Jesse Liberty - Silverlight Geek Filed under: User Interface, XAML, Digging Deeper, Building Apps, Tags

• Dependency Properties – Background for Custom Controls

  In  a previous post I began talking about Custom Controls, and I will continue that discussion over the next few days and weeks even as I start producing videos on the topic. It turns out that the more you look at Custom Controls, the deeper you get into the Silverlight UI architecture, and there is much to see. As an example of this phenomenon, in writing about Custom Controls, you quickly realize that sooner or later you must describe and explain the Dependency Properties System in Silverlight. This brings great joy to my heart, because it is one of the more interesting and one of the less discussed aspects of Silverlight programming So this evening I'm going to leap ahead (a bit out of order) and introduce this system, though by no means cover it in depth in one blog post.  (Written late Tuesday, posted early Wednesday) Understanding Our Roots Traditional C# classes consist of Methods Events Member Variables Properties You can easily view these in the Object Browser in Visual Studio (all but the member variables, which are almost always marked private and not shown). [Note, image cut down to save space] C++  did not have properties (nor running water, nor electricity). Back in those dark days, if we wanted to provide access to the value of a member variable, we created methods to do so. Thus, you ended up with funny looking code like this: overallApproval = jesse.GetApprovalAverage() + tim.GetApprovalAverage(); Rather than the more natural, overallApproval = jesse.Approval + tim.Approval; Properties were brilliant . They looked to the class author just like methods, but they looked to the class consumer just like variables. This was crucial. The class author was free to continue to obtain the actual value from backing variables or anywhere else: 1: private double approval = .4; 2: public double Approval 3: { 4: get 5: { 6: if ( currentViewer.ID == "ScottGu" ) 7: return .9; 8: else 9: return approval; 10: } 11: } In practical experience, most properties are backed by member variables, though that is by no means universal – some are backed by values in persistent storage, and some are computed dynamically. But some very large percentage are backed by member variables, which is why Auto-implemented properties were invented (and they are also brilliant). Prior to C# 3.0 my code was peppered with annoying properties that looked like this: 1: private int myMember; 2: public int MyProperty 3: { 4: get { return myMember; } 5: set { myMember... Posted Sep 17 2008, 06:00 AM by Jesse Liberty - Silverlight Geek Filed under: XAML, Digging Deeper, Templates, Building Apps, Custom Controls, Dependency Properties

• Throwing Together An Application

  Creating a Quick and Dirty App in Silverlight There comes a point, usually within 3-6 months after I commit to a new technology, when it becomes my platform of choice for throwing together quick applications… when I just find it easier to think in terms of the new technology than one of the old. I also find that it usually comes in two stages: first, it is easier to use the new technology for small illustrative programs, then it is easier for creating quick and dirty utilities, apps, whatever it is I need to get done. Today I had my first such opportunity when my daughter needed a stop watch for her Mac. Rather than looking for one (I'm sure there are hundreds) it just seemed easier to throw it together using Silverlight. Total development time, including thinking, napkin design, layout in Blend, coding, debugging, and testing on Windows and Mac… 20 minutes. Not too bad. One of the things I enjoyed about this project was that it reminded me how very cross-platform Silverlight really is. This was, of course, written and tested on Vista, and yet, when I ran it on the Mac, it looked just like a Mac program should look. I had to go back and run it on Vista to remind myself that it started out life looking like a Vista program! That was kind of neat. Start In Expression Creating the program itself was painfully simple. I started out in Blend, and created a grid, then filled in the heading with a Textblock, added a row with three buttons, then four more text blocks. Once you get over the idea that Blend "really isn't for our kind" – it is a gas. I make a point of using Comic Sans MS as I'm told it is a clear signal to any designer that I don't have a clue what I'm doing design-wise; it's the design equivalent of wearing a button that says "what is an object, anyway?" …Proceed To Visual Studio With the UI in place, and all the little UI objects named, I flipped over to Visual Studio to write the code to support the timer. I won't walk you through every detail (unless you need the sleep) but briefly… I gave each button its own event handler (I'd probably consolidate this to a single handler if the program were any larger). Taking them easy to harder… The Pause button calls Pause( true) which disables the Pause button (so you can't press it twice), and sets a paused flag. The Stop button disables both the pause and the stop button and sets the started flag to false and turns off the timer (timer is explained in... Posted Sep 14 2008, 09:17 PM by Jesse Liberty - Silverlight Geek Filed under: XAML, Tools, Blend For Programmers, Building Apps, Walk-throughs, App Development

• 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