Miscellaneous Styling Tips
Here are a few miscellaneous tips that you may find useful when designing your style resources.
Defining Constants in XAML
In instances where you want to maintain a set of constant values that can be used by multiple controls or style resources but that can be maintained in a single location, you can simply define those values as resources. For example, here we are defining a color constant that we can use:
<SolidColorBrush x:Key="BackgroundColorResource" Color="LemonChiffon "/>
You can then assign this resource directly to a control by using the StaticResource markup extension:
<TextBox Background="{StaticResource BackgroundColorResource}" />
Or you can use it in a style resource definition:
<Style x:Key="UserFieldsStyleBase" TargetType="TextBox">
<Setter Property="Margin" Value="2" />
<Setter Property="Background"
Value="{StaticResource BackgroundColorResource}" />
</Style>
This tip can be particularly useful when defining theme files, where you may define a core color scheme using constants that you can maintain in one place and simply change their values between theme files.
Visual Studio provides a function that helps streamline the process of defining a value as a resource. Select a control in the XAML designer. In the property editor tool window, you'll note that there are little icons to the left of the property values. Clicking an icon will show a context menu, with functions you can perform on that property, as shown in Figure 9-3. Open the context menu for the property whose value you want to turn into a resource, and select the Extract Value to Resource item. This will show a dialog where you can enter the key for the resource and the location that it should be defined. Clicking the OK button will create the resource for you and wire the control's property to it.
Figure 9-3. Extracting a value to a resource, using Visual Studio's Properties tool window
Finding a Control's Style Definition
When making extensive use of styles in your project, finding where a particular style is defined can become difficult. If a control is using the style, go to the Properties tool window, and show the context menu for the Style property, as detailed in the previous section. The “Go to Value Definition” menu item should be enabled, and clicking it will open the file where the style's defined and select it in the XAML editor.
Note This tip also applies to finding the definition of a resource that's applied to a property of a control.
Applying a Style to a Control Using the XAML Designer
When you have many styles defined in your project, you may not recall the name of the style that you want to use. You can select the control's Style property in the Properties tool window, show the context menu for the property, and select the Apply Resource menu item. This will display a list of resources matching the control type that you can select from and apply to the control.
Note This tip also applies to applying an existing resource to a property of a control.
Restoring a Control's Default Style
If you have an implicit style being applied to a control that you do not wish to have any styling applied, you can stop the style being applied by setting the Style property of the control to null, for example:
<TextBox Style="{x:Null}" />
This control will now use its default style instead of the implicit style.
Binding in Style Setters
A new feature in Silverlight 5 is the ability to apply a binding to a property setter in a style. Perhaps you want to bind the property to a resource string (such as when making your application multilingual), or to a property on an object that specifies global settings.
For example, say you have a class named GlobalSettings, containing a property named CompanyName:
public class GlobalSettings
{
public GlobalSettings()
{
// Hardcode a default value to demonstrate the binding
CompanyName = "Apress";
}
public string CompanyName { get; set; }
}
And it has been defined as a resource in your application's resources:
<app:GlobalSettings x:Key="settings" />
Say you also have TextBlock controls throughout your application in which you want to display the value of the CompanyName property. All these TextBlock controls use the CompanyNameTextBlockStyle style, like so:
<TextBlock Style="{StaticResource CompanyNameTextBlockStyle}" />
Therefore, ideally you'd add a setter to the style for the Text property and bind it to the CompanyName property on the GlobalSettings object to implement this requirement, rather than applying the binding to each individual TextBlock control. This was not possible in previous versions of Silverlight, as Silverlight didn't allow the use of bindings in styles. Silverlight 5 does allow this now, so we can implement the binding like so:
<Style x:Key="CompanyNameTextBlockStyle" TargetType="TextBlock">
<Setter Property="Text"
Value="{Binding CompanyName, Source={StaticResource settings}}" />
</Style>