• ux musings

    Silverlight 2 Control Skins

    • 36 Comments

    Last week, Silverlight 2 beta one was the hot topic at the Mix 08 conference that took place in Las Vegas, and rightly so, as it now has even more great functionality to offer, and you can find out about specific details on Silverlight.net or on Scott Guthrie's blog. Scott's blog also contains several very informative walkthroughs detailing how to use much of the new functionality, and I highly recommend checking it out.

    One of the new aspects of Silverlight 2 that I'm most psyched about right now is the new set of controls that it has to offer; which includes...

    • Button
    • Toggle Button
    • Radio Button
    • Checkbox
    • Texbox
    • Tooltip
    • Hyperlink
    • Slider
    • ScrollViewer
    • Calendar
    • Datepicker
    • DataGrid
    • ListBox
    • etc…

    The default controls look great as is, but I need variety, so a designer friend of mine and I decided to put together a few new sets of styles for the controls listed above. We now have three different sets that are ready for you to check out and two more that will be ready for consumption within the next two weeks. Here’s what we have now, and you can view the styled controls in action or download them to add to your project (Page.xaml contains my sample page layout and App.xaml contains the style definitions)….

    The download for the Flat set of styles also contains a Page.xaml.cs, and a Page.xaml.vb file. The reason these files are there is because I'm auto generating my columns in my data grid and the only way I can control the styles for the column content is through code (I'm changing fontfamily and fontsize). If I weren't autogenerating the columns I could control the style for the column content in the way I have for every other control (in the case of datagrid, I would use ElementStyle and EditingElementStyle).

     

    The following set of steps describe some of the ways that you can apply these styles to your project.

     

    Apply Styles Globally

    To use the styles globally in your project, open your App.xaml file and replace your <Application.Resources>...</Application.Resources> with my <Application.Resources>...</Application.Resources> for the set of styles that you are interested in using.

    Then, you can utilize the styles for controls throughout your project by adding a reference to the style of interest. For example, for button you would add the bold text below to the button tag,

    <Button Content="hi" Style="{StaticResource buttonStyle}"/>

     

    Apply Styles to a Particular XAML Page

    To use the styles in a particular XAML page, open the page and add the following below the opening UserControl tag, <UserControl.Resources></UserControl.Resources>, and then copy and paste my styles from App.xaml into the tag (minus <Application.Resources></Application.Resources>)

    Then, you can utilize the styles for controls throughout the XAML page by adding a reference to the style of interest. For example, for button you would do exactly as described in the previous example, and add the bolded text below to the button tag,

    <Button Content="hi" Style="{StaticResource buttonStyle}"/>

     

    Apply a Style to a Particular Control Inline

    To use a style for a particular control inline, place the style directly in the control of interest. For example, for button you would add the following to your button tag (you also need to remove the x:Key attribute from the style tag as shown in the comment below)

    <Button Content="hi">

    <Button.Style>

    <!-- Button -->

    <!-- ORIGINAL STYLE TAG NEEDS X:KEY REMOVED AS SHOWN BELOW, HERE'S THE ORIGINAL TAG ----> <Style x:Key="buttonStyle" TargetType="Button">-->

    <Style TargetType="Button">

    <REST OF STYLE HERE BUT I'M NOT SHOWING IT :)-->

    </Style>

    </Button.Style>

    </Button>

    Please ping me with questions if anything is unclear.

  • ux musings

    A New Set of Control Skins

    • 21 Comments

    One more set of control skins is up and ready for you to use. I had hoped to have two ready, but one set needed some additional tweaking work that I haven’t been able to finish while on vacation in Thailand, and I’m going to stop trying until I return to Seattle on 4/14.

    This new set is very rough and organic in appearance, but it can still work on various sites or it can be used in early mockups of a site to give the mockups a rough and sketched appearance. I take this sort of approach to many of my early mockups; especially, if I don’t want reviewers to focus on design details.

    Here’s a screen shot of the new set of controls.

    Screen shot

    You can also view a live version of the controls or download the Page.xaml, Page.xaml.cs/Page.xaml.vb, and App.xaml, so you can apply the style to your own site.

    For those of you who are interested in designing your own control skins, there is a good walkthrough of how you might do this on LiquidBoy’s blog (at the start of this post there is a link to a walkthrough on creating a button control skin called “Skinning a button – 4 different ways and counting”), and you can download a Beta version of Blend to use for creating your skins on Silverlight.net (along with all of the other tools you might need).

    Enjoy the new skin!

  • ux musings

    Silverlight 2 Public Release Candidate is Available Now

    • 13 Comments

    The first public release candidate for Silverlight 2 is available now, so please download it and start updating your applications as soon as you get a chance! You can download the release candidate and accompanying Visual Studio and Blend support for it here.

    I've started updating my applications; starting with my Red control skin. The Red skin is now ready for you to start using, and it even include styles for many of the new Silverlight 2 controls (ComboBox, Progress Bar, and Tab Control). Just as I did for beta 2, I've template bound most of the control colors and added resources for these colors as well. This makes it easy to customize the appearance of the controls for a particular need, and the xaml below shows how you might do this. In this case, I'm changing the colors of all controls to green hues by simply modifying the five color resources listed below (these resources are found at the top of the associated App.xaml file - see the link to the sample project below for more details).

     <!-- Resources -->

    <SolidColorBrush x:Key="BaseColorBrush" Color="#FF9FD752"/>

    <SolidColorBrush x:Key="BaseColorBrushFaint" Color="#269FD752"/>

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

    <SolidColorBrush x:Key="HoverBrush" Color="#7FFBF445"/>

    <SolidColorBrush x:Key="HyperlinkBrush" Color="#FF74AF22"/>

     

    Feel free to check out a live version of these controls or download my sample project using the links below. If you have comments, questions, issues, or concerns that you wouldn't mind sharing with me, please don't hesitate to shoot me an email using the email link at left. I can't wait to hear your feedback!

    **There is a styling bug in the DataGrid's column headers that is being addressed. You will notice this bug if there are too few columns to fill the width of the DataGrid, and basically it prevents the filler column header from picking up the new style.

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

     

  • 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 1 of 4 (20 items) 1234