A managed Silverlight button that resembles the underlying operating system
October 1, 2007
Talking with designers, there’s sometimes a need to differentiate your experience based on the underlying platform. When I was working on some Silverlight v1.1 CTP app building before the last MIX conference, I created a managed Button control that resembles the underlying OS’s button styling.
A classic example of this need is the Office (for Windows) vs. Office Mac experience—both are completely different interfaces, with different ashetics. The ability to create subtly different styling by platform is most useful for the RIA/LOB space where users expect a certain level of familiarity. In Vista, there’s the ‘Command Link’ concept of a large button coupled within a wizard experience. On Macs, the experience is often refined and minimalistic.
Here’s a simple Silverlight v1.1 control. The canvas has two managed buttons on it which lookup the environment settings to determine how to render...
Safari and Apple OS X 10.4:
Windows Vista and Windows Internet Explorer 7:
To accomplish this, the XAML I generated using Expression Blend was that of a Vista-style “Aero” button, complete with styled gradient fill. Simply setting the rounded corner radius on the border rectangle to a much higher number gave the buttons that half-circle edge that Apple OS X buttons have. For this exercise, I didn’t worry about customizing the gradients, creating XP-style buttons for older platforms, or anything fancy—this was just a proof of concept for me really.
Switch using System.Environment.OSVersion:
// Mac OS X: Rounder buttons
if (Environment.OSVersion.Platform == PlatformID.MacOSX)
{
ConvertToOSXButtons();
}
Change the radius of the rectangles. In my prototype Button implementation, I had separate rectangles for each state (mouse over, mouse down, default), so I have to make sure to change the radius on all of them to maintain consistency:
/// <summary>
/// Convert the rectangles for the button border into OS X-style
/// rounded corners (very rounded)
/// </summary>
private void ConvertToOSXButtons()
{
ConvertToOSXButton("ButtonStandard");
ConvertToOSXButton("ButtonMouseOver");
ConvertToOSXButton("ButtonMouseDown");
}
/// <summary>
/// Find the rectangle, set the rounded corner radius if it
/// exists
/// </summary>
private void ConvertToOSXButton(string rectangleName)
{
Rectangle rectangle = FindNameInControl(rectangleName) as Rectangle;
if (rectangle != null) {
rectangle.SetValue(Rectangle.RadiusXProperty, 11);
rectangle.SetValue(Rectangle.RadiusYProperty, 11);
}
}
If a designer wanted a really special experience, you could even load completely separate XAML assets based on platform, or reference a platform-specific factory and assembly That, however, is left as an exercise for the reader!
The platform information could also be used to provide customized instructions for common tasks on the visitor’s computer, such as selecting files and interacting with other programs If you’re developing Silverlight v1.0 apps, you can use the information that the browser exposes about the platform to do similar swapping.
Let me know if you do anything interesting like this within your managed samples & prototypes!
Windows Vista and Windows Internet Explorer 7:
To accomplish this, the XAML I generated using Expression Blend was that of a Vista-style “Aero” button, complete with styled gradient fill. Simply setting the rounded corner radius on the border rectangle to a much higher number gave the buttons that half-circle edge that Apple OS X buttons have. For this exercise, I didn’t worry about customizing the gradients, creating XP-style buttons for older platforms, or anything fancy—this was just a proof of concept for me really.
Switch using System.Environment.OSVersion:
// Mac OS X: Rounder buttons
if (Environment.OSVersion.Platform == PlatformID.MacOSX)
{
ConvertToOSXButtons();
}
Change the radius of the rectangles. In my prototype Button implementation, I had separate rectangles for each state (mouse over, mouse down, default), so I have to make sure to change the radius on all of them to maintain consistency:
/// <summary>
/// Convert the rectangles for the button border into OS X-style
/// rounded corners (very rounded)
/// </summary>
private void ConvertToOSXButtons()
{
ConvertToOSXButton("ButtonStandard");
ConvertToOSXButton("ButtonMouseOver");
ConvertToOSXButton("ButtonMouseDown");
}
/// <summary>
/// Find the rectangle, set the rounded corner radius if it
/// exists
/// </summary>
private void ConvertToOSXButton(string rectangleName)
{
Rectangle rectangle = FindNameInControl(rectangleName) as Rectangle;
if (rectangle != null) {
rectangle.SetValue(Rectangle.RadiusXProperty, 11);
rectangle.SetValue(Rectangle.RadiusYProperty, 11);
}
}
If a designer wanted a really special experience, you could even load completely separate XAML assets based on platform, or reference a platform-specific factory and assembly That, however, is left as an exercise for the reader!
The platform information could also be used to provide customized instructions for common tasks on the visitor’s computer, such as selecting files and interacting with other programs If you’re developing Silverlight v1.0 apps, you can use the information that the browser exposes about the platform to do similar swapping.
Let me know if you do anything interesting like this within your managed samples & prototypes!