主頁 > 知識(shí)庫 > Silverlightbutton圖片切換樣式實(shí)例代碼

Silverlightbutton圖片切換樣式實(shí)例代碼

熱門標(biāo)簽:手機(jī)地圖標(biāo)注如何刪除 外呼系統(tǒng)費(fèi)用一年 外呼系統(tǒng)代理品牌 怎么給超市做地圖標(biāo)注入駐店 十堰正規(guī)電銷機(jī)器人系統(tǒng) 巫師3為什么地圖標(biāo)注的財(cái)寶沒有 世紀(jì)佳緣地圖標(biāo)注怎么去掉 辦理400電話證件 寧波自動(dòng)外呼系統(tǒng)代理

之前一直做WPF現(xiàn)在開始接觸Slilverlight感觸很多。

今天做一個(gè)Button要求

有兩個(gè)圖片,button默認(rèn)有一個(gè)圖片,鼠標(biāo)over時(shí)用另一個(gè)圖片,

用wpf做的時(shí)候?qū)懸粋€(gè)template很簡單,但silverlight和wpf寫起來不一樣

記錄一下。大概思路是兩個(gè)image鼠標(biāo)MouseOver的時(shí)候一個(gè)Visible一個(gè)Collapsed

寫的是一個(gè)自定義控件,代碼和皮膚分離,很簡單的一個(gè)demo

代碼下載:ImageButtonTest.rar

先寫一個(gè)繼承自button的imagebutton類

復(fù)制代碼 代碼如下:

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));
        //鼠標(biāo)移到上面
        public ImageSource ImageHover
        {
            get { return (ImageSource)GetValue(ImageHoverProperty); }
            set { SetValue(ImageHoverProperty, value); }
        }
        //默認(rèn)圖片
        public ImageSource ImageNormal
        {
            get { return (ImageSource)GetValue(ImageNormalProperty); }
            set { SetValue(ImageNormalProperty, value); }
        }

        public MyImageButton()
        {
            this.DefaultStyleKey = typeof(MyImageButton);
        }
    }
}

一個(gè)是鼠標(biāo)移到上面的imageSource一個(gè)是默認(rèn)的source

看一下它的樣式 用sotryboard控制

鼠標(biāo)MouseOver的時(shí)候一個(gè)Visible一個(gè)Collapsed

復(fù)制代碼 代碼如下:

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>

這樣就可以用了

我們?cè)陧撁嫔险{(diào)用一下

復(fù)制代碼 代碼如下:

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/全屏鼠標(biāo)移上.png" ImageNormal="Images/全屏.png" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center">           
        /local:MyImageButton>
    /Grid>
/UserControl>

您可能感興趣的文章:
  • Silverlight實(shí)現(xiàn)星星閃爍動(dòng)畫
  • Silverlight實(shí)現(xiàn)跑馬燈動(dòng)畫

標(biāo)簽:嘉興 天門 山西 泰州 通遼 景德鎮(zhèn) 牡丹江

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Silverlightbutton圖片切換樣式實(shí)例代碼》,本文關(guān)鍵詞  Silverlightbutton,圖片,切換,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Silverlightbutton圖片切換樣式實(shí)例代碼》相關(guān)的同類信息!
  • 本頁收集關(guān)于Silverlightbutton圖片切換樣式實(shí)例代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章