Styling and Skinning Controls in Expression Blend 4

Step 1

Start a new project; open Blend and go to File -> New Project.

Select Silverlight  Application + Website as your project type and name the project BasicSkinning. After hitting OK, the new project will be created for you and MainPage will be opened on the Artboard.

Step 2

Add and Style a Button

Select the Button Tool from the left toolbar and draw a Button on the Grid. With the button selected, the Property panel displays the properties you can change to customize or "Style" the look of the button.

Change the background to purple, the BorderBrush to use Green colors as GradientStops, foreground to blue, BorderThickness to 6,1,6,1, FontFamily to Times New Roman and the FontSize to 18pt.

Hit F5 to run the project and mouseover and click the button. By setting the properties on the button you've changed the style of the button, but it is still basically the same interactive rectangle.

In addition, not all properties of the Style are directly accessible. There is no way to change the color of the blue mouseover Rectangle. To do this you need to modify the template or "Skin" the button.

Step 3

Enter the Template

Add another button to the grid and change the background to red.

Right-click the Button and select Edit Template -> Edit a Copy.

Keep the defaults on the Create Style Resource popup and hit OK. Now you are in the Template editing mode.

You can tell this by the breadcrumb menu reading [Button] -> (palette icon) -> Template at the top of the Artboard.

Additionally, the Object panel is displaying the objects that make up the Template.    

Step 4

Find the Background Binding Using the Object panel, as in:

Select Grid -> Background -> Grid.

On the Properties panel you will see that the small white square next to Background is now yellow and there is a Yellow Border around the Color Editor.

This indicates that Brush is bound to a property of the Button Control.

Click the small yellow square and mouseover TemplateBinding.

There you will find the list of bindable properties exposed by the button and find Background as the selected property.

Step 5

Reuse the Background Binding Using the Object panel.

Select Grid -> Background -> Grid -> BackgroundAnimation.

This is the Border Control that becomes visible when you mouseover and click the Button.

Looking at the Background Brush, we've located that mouseover blue color we couldn't change earlier.

Click the small white square next to Background and select TemplateBinding -> Background.

Run the project and now when you mouseover and click the button it will become bright red and not blue.

Rotate contentPresenter 90 degrees.

Step 6

Add Transition Time Now

In the States panel above the Normal State, change the Default transition time from 0 to 0.5. 

Step 7

Add a Custom Transition

Click the "Add transition" arrow icon on the MouseOver State bar and select MouseOver -> Normal.

Change the time on the new Transition from 0.5 to 1 second.

Click the "Easing function" icon next to the time. From the Easing Function popup, select an obvious one like Elastic In.

Note: To see the effects run the project.

Here's the XAML Code:

<UserControl

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"

       x:Class="Styling_Skinning_Controls.MainPage"

       Width="640" Height="480">

    <UserControl.Resources>

        <Style x:Key="ButtonStyle1" TargetType="Button">

            <Setter Property="Background" Value="#FF1F3B53"/>

            <Setter Property="Foreground" Value="#FF000000"/>

            <Setter Property="Padding" Value="3"/>

            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="BorderBrush">

                <Setter.Value>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="#FFA3AEB9" Offset="0"/>

                        <GradientStop Color="#FF8399A9" Offset="0.375"/>

                        <GradientStop Color="#FF718597" Offset="0.375"/>

                        <GradientStop Color="#FF617584" Offset="1"/>

                    </LinearGradientBrush>

                </Setter.Value>

            </Setter>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid>

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualStateGroup.Transitions>

                                        <VisualTransition GeneratedDuration="0" To="Normal"/>

                                        <VisualTransition GeneratedDuration="0" To="MouseOver"/>

                                        <VisualTransition GeneratedDuration="0:0:0.5"/>

                                        <VisualTransition From="MouseOver" GeneratedDuration="0:0:1" To="Normal">

                                            <VisualTransition.GeneratedEasingFunction>

                                                <ElasticEase EasingMode="EaseIn" Oscillations="5"/>

                                            </VisualTransition.GeneratedEasingFunction>

                                        </VisualTransition>

                                    </VisualStateGroup.Transitions>

                                    <VisualState x:Name="Normal"/>

                                    <VisualState x:Name="MouseOver">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>

                                            <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>

                                            <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>

                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>

                                            <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                            <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualState x:Name="Focused">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Unfocused"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">

                                <Grid Background="{TemplateBinding Background}" Margin="1">

                                    <Border x:Name="BackgroundAnimation" Background="{TemplateBinding Background}" Opacity="0"/>

                                    <Rectangle x:Name="BackgroundGradient">

                                        <Rectangle.Fill>

                                            <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">

                                                <GradientStop Color="#FFFFFFFF" Offset="0"/>

                                                <GradientStop Color="#F9FFFFFF" Offset="0.375"/>

                                                <GradientStop Color="#E5FFFFFF" Offset="0.625"/>

                                                <GradientStop Color="#C6FFFFFF" Offset="1"/>

                                            </LinearGradientBrush>

                                        </Rectangle.Fill>

                                    </Rectangle>

                                </Grid>

                            </Border>

                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5">

                                <ContentPresenter.RenderTransform>

                                    <CompositeTransform/>

                                </ContentPresenter.RenderTransform>

                            </ContentPresenter>

                            <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>

                            <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </UserControl.Resources>

 

    <Grid x:Name="LayoutRoot" Background="White">

        <Button Content="Button" Margin="250,140,240,0" Height="50"  Background="#FF7602A3" Foreground="#FF004AFF" BorderThickness="6,1" FontFamily="Times New Roman" FontSize="18" Width="150" VerticalAlignment="Top" d:LayoutOverrides="Height">

            <Button.BorderBrush>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FFA3AEB9" Offset="0"/>

                    <GradientStop Color="#FF8399A9"/>

                    <GradientStop Color="#FF718597" Offset="0"/>

                    <GradientStop Color="#FF03B658" Offset="0"/>

                    <GradientStop Color="#FF2DA370" Offset="0"/>

                </LinearGradientBrush>

            </Button.BorderBrush>

        </Button>

        <Button Content="Button" VerticalAlignment="Bottom" Margin="250,0,240,122" Height="50" Background="#FFBA2807" Style="{StaticResource ButtonStyle1}" d:IsHidden="True"/>

    </Grid>

</UserControl>

 

Summary

 

Through this article we can design a button through Template Binding in Expression Blend 4.