Export (0) Print
Expand All

Customizing Control Styles



When you use a Microsoft Surface control in your application, the control has a certain default appearance. However, you can use Windows Presentation Foundation (WPF) styles and templates to alter the appearance of Surface controls. This topic describes how to use built-in custom styling for a SurfaceButton control and how to create your own custom styling that you can apply to a SurfaceButton control or to other Surface controls.

Creating Custom Styles

You can define a custom style that is applied to all controls of the specified control type by creating a Style resource and setting its properties to reflect the way that you want the control to appear. If you create the resource in a XAML file, all the controls of the specified type in that XAML file will use the style. If you create the resource in the App.xaml file, all the controls in the application are affected. Alternatively, you can create a resource dictionary in which to store the style, and then share the style between applications. For more information, see Styling and Templating.

In the following example, a Style object is created in the Resources section of the SurfaceWindow control. The Style object applies to all SurfaceButton controls that do not explicitly set a style.


<s:SurfaceWindow x:Class="CreatingCustomControlStyles.SurfaceWindow2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="CreatingCustomControlStyles"
    >

    <s:SurfaceWindow.Resources>
        <Style TargetType="s:SurfaceButton">
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="200"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static s:SurfaceColors.Accent2BrushKey}}"/>
        </Style>
    </s:SurfaceWindow.Resources>

    <Grid>

        <StackPanel Margin="12" Orientation="Horizontal">
            <s:SurfaceButton Content="Button 1"/>
            <s:SurfaceButton Content="Button 2"/>
        </StackPanel>

    </Grid>

</s:SurfaceWindow>

The following illustration shows how the two SurfaceButton controls are rendered in the same custom style.

SurfaceButton - Custom style example

Two SurfaceButton controls with custom styling applied

Control Template

In addition to establishing characteristics of control appearance such as color, font, and font weight, you can define a ControlTemplate object that specifies other aspects of appearance, such as shape and transformations.

In the following example, the Style object sets a ControlTemplate object to be applied to SurfaceButton controls. The ControlTemplate object that is defined places a border with curved corners around the control and sets the RenderTransform property of the ContentPresenter object to display the contents of the control at a small angle.


    <s:SurfaceWindow x:Class="CreatingCustomControlStyles.SurfaceWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="CreatingCustomControlStyles"
    >
    
    <s:SurfaceWindow.Resources>

        <Style 
            TargetType="s:SurfaceButton">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static s:SurfaceColors.Accent1BrushKey}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="s:SurfaceButton">
                        <Border 
                            CornerRadius="20" Margin="5" 
                            Height="64" Width="180"
                            Background="{TemplateBinding Background}">
                            <ContentPresenter 
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center">

                                <ContentPresenter.RenderTransform>
                                    <RotateTransform Angle="-6.0"/>
                                </ContentPresenter.RenderTransform>

                            </ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </s:SurfaceWindow.Resources>

    <Grid>
        
        <StackPanel Margin="12" Orientation="Horizontal">
            <s:SurfaceButton Content="Button 1"/>
            <s:SurfaceButton Content="Button 2"/>
        </StackPanel>
        
    </Grid>

</s:SurfaceWindow>

The following illustration shows how the two SurfaceButton controls are rendered with a custom control template.

SurfaceButton - Custom control template example

Two SurfaceButton controls with a custom control template applied

Defining a Custom Shape

You can also use a ControlTemplate object to create a custom shape for your controls. For information about how to create a custom shape, see Creating a Custom Shape for a ScatterViewItem Control.

Defining Custom Behavior

Changing the behavior of a control, or changing the appearance of a control in different states or when different triggers occur, is a little more complicated. The default code of a control often relies on the parts of a control being named in an expected way. Alternatively, the code might rely on existing storyboards that are named in a specific way. For example, the SurfaceButton has a trigger that is activated when the button is pressed. The trigger starts an animation named Press. The SurfaceScrollBar has a part named PART_Track that is hooked up to the enabled and disabled behavior of the control. If you delete a named part, a named animation, or a trigger when you modify a control's template, you can break the existing functionality of a control. In the case of the SurfaceButton, the button's appearance will not change when a user touches it.

When customizing any existing control, be careful to preserve named objects if you want to preserve default behavior. You can use Microsoft Expression Blend 4 to work with templates and styles more easily than in Visual Studio. The Expression Blend 4 user interface includes panels that display triggers, trigger properties, parts, and states of the selected control when in template-editing mode. Using those panels, you can easily change the appearance of a control in various states or under various triggered conditions. For example, you can create new behaviors by modifying existing triggers to call new animations that you create.

Modying a button template in Expression Blend

Modifying a copy of the SurfaceButton template using the Triggers and States panels in Expression Blend

For more information, see Styling objects in the Expression Blend User Guide.

WarningWarning
Because Expression Blend 4 was released prior to Surface 2.0, the Expression Blend 4 user interface might show a different layout in Design view than you will see when you run your application on a device made for Surface. Additionally, modifying a copy of some control templates, such as the ElementMenu control, might not work as expected.

Did you find this information useful? Please send us your suggestions and comments.

© Microsoft Corporation. All rights reserved.
Show:
© 2015 Microsoft