Styling Silverlight UI Elements
videos

Styling Silverlight UI Elements

on Sep 10th 2010 with 8 comments
Tutorial Details
  • Difficulty: Beginner
  • Program: Visual Studio with the Silverlight 4 Toolkit, Expression Blend 4
This entry is part 6 of 15 in the Silverlight for Beginners Session
« PreviousNext »

The ability to apply style to user interface elements is something that we’re familiar with from HTML/CSS. Silverlight has some similar mechanisms for applying groups of common properties to parts (or the whole) of your user interface. In this video, we’re going to dive into styling in Silverlight.

We’ll take a brief look at how styles work in Silverlight, how we can apply them either individually or globally and how we often package them into resource collections for re-use and also so that we can swap them dynamically at run time to allow replaceable application “themes”.

What’s Covered?

Here’s a quick breakdown of what’s covered in this screencast:

  • Explicit and Implicit styles
  • Resource collections
  • Picking styles with Visual Studio
  • Defining styles with Expression Blend

View Screencast

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

Useful Links

Mike Taulty Microsoft (UK): http://mtaulty.com: mtaulty@microsoft.com: twitter.com/mtaulty

Tags: Videos
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Mike Taulty works in the Developer and Platform Group at Microsoft in the UK where he has spent the past few years helping developers understand and get the best from the Microsoft platform. Prior to this, Mike spent 3 years with Microsoft Consulting Services as a consultant on developer technologies. You can find more of a complete career history over on LinkedIn.  

Plus Premium
 
 
  • André

    It´s nice to see some silverlight tutorials, since here is not called flash.tutsplus anymore it open this place for another technologies too, Thanks mate!

  • amidude

    Okay…so how do you create a button that doesn’t have hard coded height and width applied to it every time? Every single button you’ve created in this example has a hard-coded height and width based on the word “button”. But if a developer goes in and try to change that word to say “Click Here” in Silverlight, and not Expression Blend or Design, it hides part of the word because it extends further than the defined width set up by Expression Blend. So then the developer has to redefine the width for whatever text they place inside the Button element. Not a very simple or efficient way to develop a button if you ask me.

    Why does Microsoft make things so difficult when they could allow us to import a CSS file into our application much like FLEX does and there would be a separation between the design layer and the application layer.

    Personally, Silverlight is not where it needs to be and I still see no reason to recommend to my clients that it be used in any real-world application. I am however, open to any ideas on how to make this easier for my developers to where they do not need to worry about design and can focus solely on development of the application layer.

    • http://www.vimeo.com/denyodlx/videos Denyo

      without having watched that tutorial..
      when your buttons are defined like this, the button size fits to the text:

      cheers

    • http://www.vimeo.com/denyodlx/videos Denyo

      hmm.. looks like the the code tags haven’t worked, but heres the code:

      <Button Content="lalala" HorizontalAlignment="Right" VerticalAlignment="Center"/

  • http://mtaulty.com Mike
    Author

    amidude,

    Hi – I wasn’t really focusing on layout here. I had a separate video on layout on the site.

    Sorry if you took the wrong impression from the video because Microsoft really didn’t make things difficult here.

    You simply create a Button and set its Content ( which may not be Text, it could be a Video e.g. ) and the Button will size itself to the Content unless you constrain it in some way to not do that ( e.g. by setting Width, Height or by its parent constraining it in some way ).

    It’s fairly rare that you explicitly set Width and Height – I was just using them as example properties here.

    This is just like Denyo says above.

    I ( hope ) I do a better job of this in the layout video as this was more about styles than layout.

    Thanks,

    Mike.

  • amidude

    Thanks for the response guys. I really appreciate it. It helped immensely.

  • amidude

    After having worked with Silverlight and Blend for a few weeks now, I can honestly say that this approach is a dismal failure. There is absolutely no way to separate the presentation layer from the application layer as the styles are all inline. Changes in Blend do not always translate well to the Silverlight environment if at all.

    Unlike FLEX or even XML which uses XSLT, you can’t simply create an external file, (stylesheet), and style your application easily.

    I think when the day comes that Microsoft takes seriously the design needs of organizations looking for an enterprise-level application that you can easily rebrand to fit their current environment, will be the day Silverlight becomes a real contender.

    Before the flames start…let me clarify. Simply adding your logo to an application isn’t considered “rebranding” in all enterprise environments.

    I do appreciate all of your help though.

  • http://mtaulty.com Mike
    Author

    amidude,

    Sorry – I’ve no idea what you’re talking about here.

    Styles in Silverlight are not all in line at all. You build styles. You put them into resource dictionaries. You choose the resource dictionary that you want either at design time or at run time.

    Go to this sample;

    http://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html

    and in the tree on the left hand side select Theming and then you can change themes dynamically to one of around 10 themes.

    Those themes are just resource dictionaries of styles and they are being simply swapped at runtime much like you could swap a style in CSS.

    Make sense?

    Thanks,

    Mike.