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">
<Button.Template>
    <ControlTemplate>
    <Grid>
    <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="btnColorBrush" Storyboard.TargetProperty="Color"
                To="Chocolate" Duration="0:0:0"></ColorAnimation>
            </Storyboard>
            </VisualState>
            <VisualState x:Name="MouseOver">
            <Storyboard>
            <ColorAnimation Storyboard.TargetName="btnColorBrush" Storyboard.TargetProperty="Color"
                To="DarkMagenta" Duration="0:0:0"></ColorAnimation>   
                </Storyboard>
            </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    <Ellipse Width="100" Height="100">
        <Ellipse.Fill>
            <SolidColorBrush Color="Aqua" x:Name="btnColorBrush"></SolidColorBrush>
        </Ellipse.Fill>
    </Ellipse>
    <ContentPresenter Content="Hello" HorizontalAlignment="Center"
     VerticalAlignment="Center"/>
        </Grid>

    </ControlTemplate>
</Button.Template>
</Button>

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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