Silverlightbutton picture Switch Style Instance code _ Practical Tips

have been doing WPF before now start touching slilverlight feeling a lot.

Make a button request today

There are two pictures, button default has a picture, the mouse over when using another picture,

Writing a template in WPF is simple, but Silverlight and WPF write differently

Record it. Probably the idea is two image mouse mouseover when a visible a collapsed

Written is a custom control, code and skin separation, very simple a demo

Code Download: Imagebuttontest.rar

First write a ImageButton class that inherits from the button

Copy Code code 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 mouse over the top
Public ImageSource Imagehover
{
get {return (ImageSource) GetValue (imagehoverproperty);}
set {SetValue (Imagehoverproperty, value);}
}
Default picture
Public ImageSource Imagenormal
{
get {return (ImageSource) GetValue (imagenormalproperty);}
set {SetValue (Imagenormalproperty, value);}
}

Public Myimagebutton ()
{
This. Defaultstylekey = typeof (Myimagebutton);
}
}
}

One is to move the mouse over the ImageSource one is the default source

Take a look at its style with Sotryboard control

The mouse mouseover when a visible a collapsed

Copy Code code 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>Visible</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>

So we can use it.

We call on the page

Copy Code code 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= "D:designwidth=" >

<grid x:name= "LayoutRoot" background= "White" >
<local:myimagebutton margin= "0" imagehover= images/full-screen mouse move. png "imagenormal=" images/full screen. png "width=" "height=" Horizontalalignment= "Center" verticalalignment= "Center" >
</local:MyImageButton>
</Grid>
</UserControl>