Picture toggle style for Silverlight button

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

First write a ImageButton class that inherits from the button

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 Myimageb Utton:button {public static readonly dependencyproperty Imagenormalproperty = Depe
                                        Ndencyproperty.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 mouse over public imagesource Imagehover {get {return (ImageSource) GetValue (imagehoverproperty );
        } set {SetValue (Imagehoverproperty, value);} ///default picture public ImageSource Imagenormal {get {return (ImageSource) GetValue (imagenorm Alproperty);
        } set {SetValue (Imagenormalproperty, value);} Public Myimagebutton () {this.
        Defaultstylekey = typeof (Myimagebutton); }
    }
}

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

More Wonderful content: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/Silverlight/

Take a look at its style with Sotryboard control

The mouse mouseover when a visible a collapsed

<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=" Templ
                    Ate "> <Setter.Value> <controltemplate targettype=" Local:myimagebutton "> <grid background= "{templatebinding Background}" > <visualstatemanager.visuals
                                    
                                tategroups> <visualstategroup x:name= "CommonStates" >  <visualstate x:name= "Normal"/> <visualstate X:name= "MouseOver" >; Storyboard> <objectanimationusingkeyframes storyboard.targetproperty= "(Uiele ment. Visibility) "Storyboard.targetname=" Mouseoverimage "> <discreteobjectkeyf
                                                    Rame 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</visibil
                                            Ity> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </objectanimationusingkeyframes
                                > </Storyboard> </VisualState> <visualstate x:name= "pressed"/> <visualstate x:name= "Dis abled "/> </VisualStateGroup> </visualstatemanager.visuals tategroups> <image x:name= "Normalimage" source= "{templatebinding Imagenormal}" stretch= "Fill "/> <image x:name=" Mouseoverimage "source=" {templatebinding Imagehover} "stretch=" Fill "Vis Ibility= "collapsed"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </ Style> </ResourceDictionary>

So we can use it.

We call on the page

<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:i Magebuttontest "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 over. png" imagenormal= "images/full screen. png" width= "height=" horizontalalignment= "" Center " Verticalalignment= "Center" >            
        </local:MyImageButton>
    </Grid>
</UserControl>

Author: Li Peng

Source: http://www.cnblogs.com/li-peng/

Code Download: Imagebuttontest.rar