Controls in Silverlight(Content Controls ..Part2)

In my previous post I wrote how to build simple content controls.

Controls even have states like: Normal,Pressed, MouseOver, Focussed, Disabled etc.

After applying a template to a control,if states have to be retained,then it is important to understand the VisualStateManager class.

Visual State Manager
VisualStateManager gives a standard protocol to define your states and transitions.
You can group your states and give individual behaviour to these states.
Let us look now how to customize a button. Once you set the template of a button,the button loses its states. To get back those states you have to use VisualStateManager and set the behaviors for the states.

Here I have defined two states "Normal" and "MouseOver" for a button.
The button is shaped as ellipse and on mouse over there is a change in its color.

Normal State     MouseOverState

Here is the code to customize the button.

<Button Grid.Row="2">
            <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <ColorAnimation Storyboard.TargetName="btnColorBrush" Storyboard.TargetProperty="Color"
                To="Chocolate" Duration="0:0:0"></ColorAnimation>
            <VisualState x:Name="MouseOver">
            <ColorAnimation Storyboard.TargetName="btnColorBrush" Storyboard.TargetProperty="Color"
                To="DarkMagenta" Duration="0:0:0"></ColorAnimation>   
    <Ellipse Width="100" Height="100">
            <SolidColorBrush Color="Aqua" x:Name="btnColorBrush"></SolidColorBrush>
    <ContentPresenter Content="Hello" HorizontalAlignment="Center"




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s