You can convert almost any art object into a Button control if you think it can work, behave, and appear as a button. For example, you could create a template for a button that used the
cloud object for the button’s appearance. I wrote how to draw a Cloud button here. And you can use the built-in Button control template to create a custom Button template.

The Cloud Button style has nice MouseOver and Pressed states. Point to this cute object. The cloud appears to move up, and its shadow gets smaller.

Demo

Download a project

Several years ago I published the Caramel theme for Silverlight controls.  Also there are Cherry, Lime and Pale themes. Well, it’s nice time to update them and I decided to start with the Caramel theme. So we have such changes in comparison with the previous version:

Separating resources for all controls

All colors, shadows, general margins moved to the Colors.xaml file. Besides that, each control has his own resource file and linked to Colors.xaml (don’t forget it!).

A new XAML code

XAML code for all controls was rewrote. The glass effect was optimized for stretching horizontally and vertically.

Convenient names for colors

Names of color resources were renamed.

Shifting accents

Common  and other states were changed so only buttons, tab headers and scrollbars have a convex glass effect. Highlighting for input controls is flat and without border color animation.

Scrollbar styles

Scrollbars don’t have up and down buttons. The width of the vertical scrollbar and the height of the horizontal scrollbar were reduced. The background of scrollbars is flat now.

Compact views

All controls are more compact now with less unnecessary elements.

Line height

All input controls (TextBox, PasswordBox, ComboBox, ListBox) and buttons have a 24px line height so look more smooth and done carefully. You can place the Button control in one line with the TextBox.

Default margins

The 3px MarginDefault resource was added to all controls so they look good in the grid and other layouts.

The Focused state

Thought a lot about the Focus state for all controls. The dark border color was moved from the Normal state to the Focused.

New controls were added

DatePicker and TabControl were added to this theme.

Demo

Download the Caramel theme

Published a fully customized DatePicker control. Looks good with the new calendar icon, gradient strokes and the blue shadow.

Take a look at the demo

Download a sample

In honor of MIX11, happening now in Las Vegas,
you can SAVE 50% on these ebooks from Microsoft Press:

• HTML5 Step by Step
• Microsoft XNA Game Studio 4.0
• JavaScript Step by Step, Second Edition
• Microsoft Expression Blend 4 Step by Step
• Microsoft Expression Web 4 Step by Step
• Microsoft Silverlight 4 Step by Step
• Microsoft Silverlight Edition: Programming Windows Phone 7
• Microsoft XNA Framework Edition: Programming Windows Phone 7
• Windows Phone 7 Developer Guide
• Windows Communication Foundation 4 Step by Step

Find more info here:  oreilly.com

Use discount code DDM5D in the shopping cart.

Coming 2011 is the time of White Rabbit, so be a goody-goody this year :)

Silverlight NY Card

Well, now I’m working for The Frayman Group as UX designer. TFG is a global organization (NY | London | Kiev | Toronto) that’s redefining risk management with innovative technologies and services. I really like my current work because I’m responsible for SketchFlow prototypes and UX/UI development of new Silverlight LOB applications.

Why I’m writing about this in my blog? We are rapidly expanding and looking for highly-motivated, results-driven professionals that thrive in a fast-paced environment. I would like to work with real Silverlight professionals. If you are interesting to work in Ukraine|Kiev, please, write me.

Requirements:

• 2+ years of experience with ASP.NET, ADO.NET
• Silverlight experience is a must
• Solid experience in .NET 3.0-4.0, NUnit, Unity 2.0
• Work experience with LINQ, EF, WCF, WCF Data Services, RIA Services, WF;

And TFG offers:

• Highly competitive salaries, paid in USD
• 24 days of paid vacation
• 10 paid sick days
• Medical insurance
• Flexible work hours
• State of the art equipment and software development environment
• Fast-paced, professional work environment
• Work on patent-pending application software
• Be part of world-class global software company

Here you can find a small set of styled buttons : ArrowLight, ArrowDark, ArrowLightColor, ArrowDarkColor. That best suits for: controlling an image gallery, switching between application pages, detail views, scrolling the list and so on.

Description:

ArrowLight

Uses only one color for background that you can set through Background="White". States change by increasing/decreasing the opacity and/or displaying the white shadow.  This style suits for dark or bright areas.

ArrowDark

Uses only one dark/bright color for background that you can set through the Background property, for example Background="#FFFCCE56". States change by increasing/decreasing the opacity and/or displaying the grey shadow effect.  This style suits for white or light areas.

ArrowLightColor

Uses two colors. Set the Background property for the “Normal” state and “Foreground”  - for the “MouseOver” State (White and  #FF269B7B, for example). States change by increasing/decreasing the opacity of both colors and/or displaying the white shadow.

ArrowDarkColor

Uses two colors. Set the Background property for the “Normal” state and “Foreground”  - for the “MouseOver” State (#FF269D7B and  #FFFCCE56, for example). States change by increasing/decreasing the opacity of both colors and/or displaying the gray shadow. This style suits for white or light areas. Use opposite, bright colors for “Normal” and “MouseOver” states.

Links:

• Demo project
• Download ArrowStyles
• Download demo

That’s really cool collection added to Expression Gallery! Have you thought about visual patterns for your Silverlight and WPF projects? It’s not only graphics or screenshots of good practices. It is a real library of XAML + code samples that demonstrate a unique visual styling for a common visual elements. You can find Pattern Library with subcategories under the list of default Expression Gallery categories. There are:

• Backgrounds and Blends
• Buttons
• Calendars and Time
• Charts, Graphs, and Gauges
• Forms and Dialogs
• Indicators
• Layout
• Lists
• More Patterns
• Navigation
• Pagination
• Ratings
• Touch and Gestures
• Transitions
• Windows Chrome

Particularly, I like these patterns:

• Zig-Zag Stack
• Analog Sweeping Clock – Silverlight
• Menu Callout Drop-down

My best wishes and a small gift – Silverlight New Year Card!

Would you like to extend your navigation panel with new functionality, but haven’t proper icons? I created simple draft set of mini icons for Silverlight Navigation Application and Silverlight Business Application. Open file in Expression Design, choose an icon, export to xaml and use in your project :)

Colors of this set are Black&White and Black&Green. In any case, you can change colors.

List of icons:
Folder, Document, Documents, Tree,
Add to DB, Remove from DB, Edit DB structure, Search in DB,
Down, Up, Right, Left,
Stats, Tools, Filter, Refresh,
Info, Search, Zoom out, Zoom in,
Lock, UnLock, Person, Cloud,
Draw, Measure, Relation, Drag.

100% Zoom preview:

200% Zoom preview:

Custom zoom preview:

View some icons in action

SNA_Mini_icons_v2.zip (68.28 kb)