• ux musings

    Rough Skin for Silverlight Beta 2 Is Easy to Customize

    • 5 Comments

    One thing that I forgot to mention about the Silverlight beta 2 rough skin is that it is very easy to customize now. At the top of the Page.xaml file in my sample project are several resources that can be used to quickly change the colors for all controls. In the example below I have changed the BaseColroBrush and HyperlinkBrush to Tomato and I've changed the HoverBrush to WhiteSmoke, and the controls all update nicely to reflect the new color theme...

    <!-- Resources -->

    <SolidColorBrush x:Key="BaseColorBrush" Color="Tomato"/>

    <SolidColorBrush x:Key="BorderBrush" Color="#FF333333"/>

    <SolidColorBrush x:Key="ForegroundBrush" Color="#FF333333"/>

    <SolidColorBrush x:Key="HoverBrush" Color="WhiteSmoke"/>

    <SolidColorBrush x:Key="HyperlinkBrush" Color="Tomato"/>

     

  • ux musings

    Rough Skin Updated for Silverlight Beta 2

    • 5 Comments

    I finished updating the rough skin to beta 2. If you would like to use this skin feel free to download and use my sample project using the link below, and you can view it live if you'd like too...

    Rough Skin
    View live...
    Download skin...

     

  • ux musings

    Previous Post's Application Using Live Data Services

    • 5 Comments

    All of the code for the sample application described in my previous post is updated and working in Silverlight 2 beta 2 now, and it is using live data services from various places on the web including MSN Video, Flickr, Digg, and Ebay. My passion is not coding, so the code is not perfect by any means, but it works reasonably well.

    You can download my sample project or view the application live using the following links...

  • ux musings

    Bubbly Skin Updated for Beta 2

    • 12 Comments

    I finally had a bit of free time to update the bubbly skin to beta 2. If you would like to use this skin feel free to download and use my sample project using the link below, and you can view it live if you'd like too...

    Bubbly Skin
    View live...
    Download skin...

     

  • ux musings

    Red and Flat Skins Updated for Beta 2

    • 17 Comments

    Silverlight 2 beta 2 was just released on June 6th with lots of new features and functionality (check out Scott Guthrie's blog for specific details). Control skinning has changed slightly since in beta 1, and I just finished updating my red and flat skins for beta 2. In this update, I've template bound most of the control colors and added resources for these colors as well to make it very easy to customize the appearance for a particular need. There are several ways you can do this. One way would be to use Blend...

    • Create a new Silverlight 2 project in Blend
    • Copy and paste my style xaml (from Page.xaml) into your Page.xaml <UserControl.Resources>... or Application.xaml <Application.Resources>...
      *Do not include DatePicker or Calendar style xaml in this step as these controls cannot be styled in Blend at this time and will prevent your UI from rendering at all if included
    • Add a control to the design surface from the toolbox
    • In the Objects and Timeline tool window, select the control you've just added to the design surface, and right click and select Edit Control Parts (Template) -> Apply Resource -> "select the appropriate style resource associated with the control"
    • The control will now have the style applied to it and if you switch to "Design" view you will see this
    • With the control selected, open the Properties tool window and you can change the Background, BorderBrush, or Foreground colors as desired (if they were set in my style)

    Another way would be to...

    • Create a new Silverlight 2 project in Visual Studio
    • Copy and paste my style xaml (from Page.xaml) into your Page.xaml <UserControl.Resources>... or Application.xaml <Application.Resources>...
    • Add a control to the design surface from the toolbox
    • Manually add a style reference to the appropriate style xaml
    • Modify the color resources found in Page.xaml (near the top of the page)

    Here's an example of how you might do this. In this case, I'm changing the colors of all Flat controls to pink hues by simply changing three color resources.

    <!-- Resources -->

    <SolidColorBrush x:Key="BaseColorBrush" Color="Pink"/>

    <SolidColorBrush x:Key="HoverBrush" Color="PaleVioletRed"/>

    <SolidColorBrush x:Key="HyperlinkBrush" Color="PaleVioletRed"/>

    And, this is what the controls would look like with these simple changes...

    Flat Style in Pink

     

    In this case, I'm changing the colors of all Red controls to blue and purple hues by simply changing the three color resources you see below.

    <!-- Resources -->

    <SolidColorBrush x:Key="BaseColorBrush" Color="CadetBlue"/>

    <SolidColorBrush x:Key="HoverBrush" Color="Purple"/>

    <SolidColorBrush x:Key="HyperlinkBrush" Color="Plum"/>

    And, this is what the controls would look like with these simple changes...

    RedSkin in Blue and Purple

     

    Below you'll find a link to live versions of each control set and access to my sample projects. There are a few things to keep in mind when you start digging into the projects. First, the Calendar control requires some code in order to hook up to the day and month button styles (this issue will be fixed in the future). This code is found in Page.xaml.cs. Second, the Calendar control will not template bind to colors and nor will it use global resources, so you will have to go into the Calendar style xaml and manually update each color to your desired color (this issue will be fixed in the future). Next, ToolTip is no longer stylable. I plan to create my own ToolTip control that is stylable in the near future, but until then you'll have to make due with the default style we provide for you. Lastly, you cannot style the Calendar, DatePicker, or DataGrid controls in Blend. In fact, you can't include style xaml for Calendar and DatePicker in a project you plan to open in Blend or none of the UI will render (this problem will be fixed in the future).

    If you check out these styles, I'd love to know what you think about the ability to tweak the control colors, and I'd also like to know what other sorts of customizations you would like to do along these same lines. Also, is the ability to style ToolTip important to you? I can't wait to hear your feedback!

    Red Skin
    View live...
    Download skin...

    Red Skin


    Flat Skin
    View live...
    Download skin...

    Flat Skin


    One last thing, I'm working on updating the two other styles and hope to have these up within the next two weeks.

     

Page 3 of 4 (20 items) 1234