Silverlightbutton image switching style instance code

I 've been working on WPF and now I feel a lot about Slilverlight.

A Button is required today.

There are two images. The button has one image by default. When the mouse is over, use another image,

It is very easy to write a template when using wpf, but silverlight is different from wpf.

Record it. The general idea is that when two images are mouse MouseOver, one is Visible and the other is Collapsed.

Write a custom control, code and skin separation, a simple demo

Download the code: ImageButtonTest.rar

First, write an imagebutton class inherited from the button.

Copy codeThe Code is as follows:
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Net;
Using System. Windows;
Using System. Windows. Controls;
Using System. Windows. Documents;
Using System. Windows. Input;
Using System. Windows. Media;
Using System. Windows. Media. Animation;
Using System. Windows. Shapes;

Namespace ImageButtonTest
{
/// <Summary>
/// Build by lp
/// </Summary>
Public class MyImageButton: Button
{

Public static readonly DependencyProperty ImageNormalProperty =
DependencyProperty. Register ("ImageNormal ",
Typeof (ImageSource ),
Typeof (MyImageButton ),
New PropertyMetadata (null ));

Public static readonly DependencyProperty ImageHoverProperty =
DependencyProperty. Register ("ImageHover ",
Typeof (ImageSource ),
Typeof (MyImageButton ),
New PropertyMetadata (null ));
// Move the cursor over
Public ImageSource ImageHover
{
Get {return (ImageSource) GetValue (ImageHoverProperty );}
Set {SetValue (ImageHoverProperty, value );}
}
// Default image
Public ImageSource ImageNormal
{
Get {return (ImageSource) GetValue (ImageNormalProperty );}
Set {SetValue (ImageNormalProperty, value );}
}

Public MyImageButton ()
{
This. defastystylekey = typeof (MyImageButton );
}
}
}

One is the imageSource that moves the mouse over it, and the other is the default source.

Take a look at its style controlled by sotryboard

When the mouse is MouseOver, a Visible and a Collapsed

Copy codeThe Code is as follows:
<ResourceDictionary
Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Xmlns: local = "clr-namespace: ImageButtonTest" xmlns: d = "http://schemas.microsoft.com/expression/blend/2008" xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" mc: Ignorable = "d">

<Style TargetType = "local: MyImageButton">
<Setter Property = "Template">
<Setter. Value>
<ControlTemplate TargetType = "local: MyImageButton">
<Grid Background = "{TemplateBinding Background}">
<VisualStateManager. VisualStateGroups>
<VisualStateGroup x: Name = "CommonStates">

<VisualState x: Name = "Normal"/>
<VisualState x: Name = "MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard. TargetProperty = "(UIElement. Visibility)" Storyboard. TargetName = "mouseOverImage">
<DiscreteObjectKeyFrame KeyTime = "0">
<DiscreteObjectKeyFrame. Value>
<Visibility> Visibility </Visibility>
</DiscreteObjectKeyFrame. Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard. TargetProperty = "(UIElement. Visibility)" Storyboard. TargetName = "normalImage">
<DiscreteObjectKeyFrame KeyTime = "0">
<DiscreteObjectKeyFrame. Value>
<Visibility> Collapsed </Visibility>
</DiscreteObjectKeyFrame. Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x: Name = "Pressed"/>
<VisualState x: Name = "Disabled"/>
</VisualStateGroup>
</VisualStateManager. VisualStateGroups>
<Image x: Name = "normalImage" Source = "{TemplateBinding ImageNormal}" Stretch = "Fill"/>
<Image x: Name = "mouseOverImage" Source = "{TemplateBinding ImageHover}" Stretch = "Fill" Visibility = "Collapsed"/>
</Grid>
</ControlTemplate>
</Setter. Value>
</Setter>
</Style>
</ResourceDictionary>

In this way, you can use

Let's call it on the page.

Copy codeThe Code is as follows:
<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"
Xmlns: local = "clr-namespace: ImageButtonTest" x: Class = "ImageButtonTest. MainPage"
Mc: Ignorable = "d"
D: DesignHeight = "300" d: DesignWidth = "400">

<Grid x: Name = "LayoutRoot" Background = "White">
<Local: myImageButton Margin = "0" ImageHover = "Images/full screen mouse transfer .png" ImageNormal = "Images/full screen .png" Width = "100" Height = "100" placement = "Center" VerticalAlignment = "Center">
</Local: MyImageButton>
</Grid>
</UserControl>