Programming4us
         
 
 
Windows Phone

Developing Applications for Windows Phone 7 : XAML Styling (part 1)

11/27/2010 11:48:41 AM
When writing code, it’s common to take common pieces of code and reuse then in a number of common ways including creating base classes, creating static classes or reusable libraries. In XAML, the same need for creating reusability. This reusability though is more about creating a consistent look of the application without having to copy the same code over and over. Consider this common XAML:
<TextBox x:Name="nameBox"
FontSize="36"
FontFamily="Segoe WP"
FontWeight="Black"
BorderBrush="Blue"
Foreground="White"
HorizontalAlignment="Stretch" />
<TextBox x:Name="emailBox"
FontSize="36"
FontFamily="Segoe WP"
FontWeight="Black"
BorderBrush="Blue"
Foreground="White"
HorizontalAlignment="Stretch" />

In this XAML many of the properties are copied from one of the TextBoxes to the other. If we change any of the properties of one, we will have to copy the change to the other to provide consistency of the UI. In addition, the Foreground and BorderBrush are using colors that could or should be part of an overall look and feel. It’s likely that we would want the brushes used there to be consistent not only TextBox to TextBox but across the entire application. That’s where Styling and Resources come in.

Understanding Resources

The first level of consistency has to do with sharing common resources. When creating an application, you often will want to use common colors or brushes across an application. Silverlight allows you to create objects to be used in more than one area by specifying them in a Resource section and identifying it with an x:Key attribute. For example, you could define a SolidColorBrush in a resource section like so:

<Grid x:Name="LayoutRoot">
<Grid.Resources>
<SolidColorBrush x:Key="mainBrush"
Color="Blue" />
</Grid.Resources>
...
</Grid>

Every class that derives from FrameworkElement (which means most XAML elements) supports a collection of Resources. These named elements can be referred to using the StaticResource markup extension like so:

<Grid x:Name="LayoutRoot">
<Grid.Resources>
<SolidColorBrush x:Key="mainBrush"
Color="Blue" />
</Grid.Resources>
<TextBlock Foreground="{StaticResource mainBrush}"
Text="Hello World" />
...
</Grid>

The StaticResource markup extension tells the XAML parser to replace the Foreground with the main brush. You can use the resource in several places which isolates it from changes. So that later when you change main brush to a LinearGradientBrush, it cascades down to wherever the StaticResource was used.

The StaticResource markup extension looks up through the XAML document to find the resource with the correct name (through the hierarchy), it will continue beyond the beginning of the XAML document. Above the XAML document is the App.xaml file in the phone application project. Normally this is where you would place any application-wide resources. For example, if the App.xaml file looked like this:

<Application x:Class="PhoneControls.App"
xmlns="..."
xmlns:x="..."
xmlns:phone="..."
xmlns:shell="...">

<!--Application Resources-->
<Application.Resources>
<SolidColorBrush x:Key="mainBrush"
Color="Blue" />
</Application.Resources>

...

</Application>

The mainBrush is then defined at the application level so any XAML document that wanted to use the brush could do so like so:

<Grid x:Name="LayoutRoot">
<TextBlock Foreground="{StaticResource mainBrush}"
Text="Hello World" />
...
</Grid>

While this example shows a brush (which is a very commonly shared resource), it is not limited to only brushes. Any creatable object can be used in this way. In addition, when you want to share these resources across projects you can accomplish this with ResourceDictionary objects. Resource dictionaries are XAML files that contain shared resources that can be imported into App.xaml using merged dictionaries. These dictionaries can be flat XAML files or contained in separate assemblies that are referenced to your phone application. For more information on merged dictionaries, see the documentation.

Styles

While sharing resources can help define a common look and feel, the styling stack extends this idea by allowing you to specify the default properties for controls in a common place. The Style object allows you to create these default properties:

<Style TargetType="TextBox"
x:Key="mainTextBox">
<Setter Property="FontSize"
Value="18" />
<Setter Property="FontFamily"
Value="Segoe WP Bold" />
</Style>

The Style object takes the type of object it can be applied to then a set of Setter objects that define default values for properties. In this example, the FontSize and FontFamily for a TextBox are supplied. To apply this style to an object, you must map it to the Style property on an element via the StaticResource markup extension like so:

  <TextBox Style="{StaticResource mainTextBox}" />

By setting this TextBox’s Style property using the StaticResource markup extension, the default property values of the TextBox will be set using the Style. Styles are just named resources so you would typically place them in the App.xaml file along with other resources. In addition, you can use resources inside your styles as well like so:

<Application.Resources>
<SolidColorBrush x:Key="mainBrush"
Color="Blue" />
<Style TargetType="TextBox"
x:Key="mainTextBox">
<Setter Property="FontSize"
Value="18" />
<Setter Property="FontFamily"
Value="Segoe WP Bold" />
<Setter Property="Foreground"
Value="{StaticResource mainBrush}" />
</Style>
</Application.Resources>

In this way the shared resources can cascade down into the styling stack. In addition, the Styles themselves can be cascaded by using the BasedOn property:

<Application.Resources>
<SolidColorBrush x:Key="mainBrush"
Color="Blue" />
<Style TargetType="TextBox"
x:Name="baseTextBox">
<Setter Property="FontSize"
Value="18" />
<Setter Property="FontFamily"
Value="Segoe WP Bold" />
</Style>
<Style TargetType="TextBox"
x:Key="mainTextBox"
BasedOn="{StaticResource baseTextBox}">
<Setter Property="Foreground"
Value="{StaticResource mainBrush}" />
</Style>
</Application.Resources>

Finally, styles can be polymorphic. In other words, the TargetType may apply to a base class and be applied to all objects of that type. For example:

<Application.Resources>
<SolidColorBrush x:Key="mainBrush"
Color="Blue" />
<Style TargetType="Control"
x:Name="baseControl">
<Setter Property="BorderBrush"
Value="Black" />
</Style>
<Style TargetType="TextBox"
x:Key="mainTextBox"
BasedOn="{StaticResource baseControl}">
<Setter Property="FontSize"
Value="18" />
<Setter Property="FontFamily"
Value="Segoe WP Bold" />
<Setter Property="Foreground"
Value="{StaticResource mainBrush}" />
</Style>
</Application.Resources>

Since the TargetType of the base style was Control, it could be used as the BasedOn for any controls (or even the Style for any control that derived from the Control class).

While property-based styling is very powerful, it may not let you change the look of the controls in dramatic ways. That is where Control Templates come in.

Other -----------------
- Developing Applications for Windows Phone 7 : Data Binding (part 2)
- Developing Applications for Windows Phone 7 : Data Binding (part 1)
- Developing Applications for Windows Phone 7 : Transformations and Animations
- Developing Applications for Windows Phone 7 : Controls
- Developing Applications for Windows Phone 7 : Visual Grammar
- Developing Applications for Windows Phone 7 : Visual Containers
- Developing Applications for Windows Phone 7 : What is XAML?
- Windows Phone 7 : Connecting a Bluetooth Headset
- Windows Phone 7 : Turning On Airplane Mode
- Windows Phone 7 : Updating Your Phone Software
- Windows Phone 7 : Finding a Lost Phone
- Windows Phone 7 : Locking Your Phone
- Windows Phone 7 : Importing Contacts from a SIM Card
- Windows Phone 7 : Silencing Your Phone
- Windows Phone 7 with Silverlight : Working with the Phone
- Writing Your First Phone Application - Adding Code (part 2)
- Writing Your First Phone Application - Adding Code (part 1)
- Developing Applications for Windows Phone 7 : Designing with Blend
- Developing Applications for Windows Phone 7 : Creating a New Project
- Developing Applications for Windows Phone 7 with Silverlight : Preparing Your Machine
 
 
Most View
- SQL Server 2008 : Managing Security - Security and SQL Agent
- SQL server 2008 : Handling Errors (part 1)
- Windows Server 2008 : Working with NAP (part 2)
- SharePoint 2010 : Create Permission Levels for a Site
- Windows 7 : Removing an Icon from Control Panel
- SharePoint 2010 : Creating and Managing Files - Upload a File from an Office Application
- BizTalk Server 2009 : Using asynchronous services in WCF (part 2)
- Excel Capabilities on SharePoint 2010
- Windows Server 2008 : Configuring Windows Media Services (part 8) - Using the Unicast Announcement Wizard
- Configuring SQL Server 2008 : Database Mail
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS