silverlight之自定义控件

完全用一个类自定义的控件 不需要样式文件 前台直接引用一下就可以调用了

这是领导给我安排的一个自定义button任务,做的差不多了也顺手拿出来分享下

直接上代码

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Effects;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace ButtonStyle.Control
{
    public class ImageButtonControl : ContentControl
    {
        #region 公共属性
        // 主按钮图片
        public Image bg_Img = new Image();
        // 倒影
        public Image re_Img = new Image();
        // 内容
        public Grid content = new Grid();
        // 鼠标悬浮样式----镜片
        public Rectangle rct = new Rectangle();
        // 鼠标悬浮样式----玻璃框
        public Border bgBorder = new Border();
        // 添加模糊效果属性
        public BlurEffect bEffect = new BlurEffect()
        {
            Radius = 5
        };
        // 设置常量 --- 大部分样式的背景默认透明
        public Color normalColor = Colors.Transparent;
        // Height 以及 Width
        public static double inverteHeight;
        public static double inverteWeight;
        
        #endregion

        #region 自定义属性
        // 图片路径属性
        public string JP_Source
        {
            get { return (string)GetValue(JP_SourceProperty); }
            set { SetValue(JP_SourceProperty, value); }
        }

        // Using a DependencyProperty as the backing store for JP_Source.  This enables animation, styling, binding, etc...
        // 默认图片地址为空
        public static readonly DependencyProperty JP_SourceProperty =
            DependencyProperty.Register("JP_Source", typeof(string), typeof(ImageButtonControl), new PropertyMetadata("", new PropertyChangedCallback(GetNewValue)));

        private static void GetNewValue(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ((ImageButtonControl)d).JP_Source = (string)e.NewValue;
        }
        #endregion

        #region 页面加载时执行
        public ImageButtonControl() {

            // 当控件完全加载完成后,在把路径赋值给Image,这样就OK了
            this.Loaded += ImageButtonControl_Loaded;
            // 悬浮状态
            bg_Img.MouseMove += ImageButtonControl_MouseMove;
            bg_Img.MouseLeave += ImageButtonControl_MouseLeave;

            // 鼠标按下和抬起
            bg_Img.MouseLeftButtonDown += ImageButtonControl_MouseLeftButtonDown;
            bg_Img.MouseLeftButtonUp += ImageButtonControl_MouseLeftButtonUp;

        }
        void ImageButtonControl_Loaded(object sender, RoutedEventArgs e)
        {
            this.SizeChanged += ImageButtonControl_SizeChanged;
        }

        void ImageButtonControl_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            // 获取控件长度和宽度
            inverteHeight = this.ActualHeight;
            inverteWeight = this.ActualWidth;
            // 初始化背景
            initRectangle(inverteHeight-3, inverteWeight-3);
            
            // 接收传递的图片地址
            bg_Img.Source = new BitmapImage(new Uri(JP_Source, UriKind.RelativeOrAbsolute));
            bg_Img.Height = inverteHeight - 5;
            bg_Img.Width = inverteWeight - 5;

            // 添加阴影效果 --- 貌似模糊和阴影俩种效果只能2选1
            //DropShadowEffect dsEffect = new DropShadowEffect() { 
                
            //};
            //bg_Img.Effect = dsEffect;
            //re_Img.Effect = dsEffect;

            // 将图片添加到控件上
            content.Children.Add(bg_Img);
            
            // 倒影按钮的设置
            re_Img.Source = new BitmapImage(new Uri(JP_Source, UriKind.RelativeOrAbsolute));
            re_Img.Height = inverteHeight - 5;
            re_Img.Width = inverteWeight - 5;
            content.Children.Add(re_Img);
            InvertedImg(re_Img, inverteHeight);
            
            bg_Img.Effect = bEffect;
            re_Img.Effect = bEffect;

            // 将内容添加到控件中
            this.Content = content;
        }
        #endregion

        #region 鼠标悬浮样式
        void ImageButtonControl_MouseMove(object sender, MouseEventArgs e)
        {
            BtnOverStyle(bg_Img).Begin();
            BtnOverToChange(bg_Img,true);
            BtnOverBg();
            bEffect.Radius = 0;
            
        }
        public Storyboard BtnOverStyle(UIElement ui) 
        {
            Storyboard sb = new Storyboard();
            DoubleAnimation da = new DoubleAnimation() 
            {
                // 动画的开始
                From = 0.9,
                // 动画结束
                To = 0.3,
                Duration = TimeSpan.FromSeconds(1),
                // 设置动画执行此时
                RepeatBehavior = RepeatBehavior.Forever,
                // 设置动画结束之后是否按照之前动画原路返回
                AutoReverse = true
            };
            Storyboard.SetTarget(da, ui);
            Storyboard.SetTargetProperty(da, new PropertyPath("UIElement.Opacity"));
            sb.Children.Add(da);
            return sb;
        }
        


        // 鼠标进入样式 | 离开样式
        private void BtnOverToChange(UIElement button,bool b) {
            button.Projection = new PlaneProjection() { 
                LocalOffsetZ = b ? 50 : 0
                
            };
        }
        // 鼠标悬浮Rectangle 和 Border样式
        private void BtnOverBg() {
            // Rectangle的镜片效果
            GradientStop gs1 = new GradientStop();
            gs1.Offset = 0.0;
            gs1.Color = ConvertToColor("#33FFFFFF");
            GradientStop gs2 = new GradientStop();
            gs2.Offset = 0.287;
            gs2.Color = ConvertToColor("#C0FFFFFF");
            GradientStop gs3 = new GradientStop();
            gs3.Offset = 0.687;
            gs3.Color = ConvertToColor("#4011322D");
            GradientStop gs4 = new GradientStop();
            gs4.Offset = 1;
            gs4.Color = ConvertToColor("#33FFFFFF");
            LinearGradientBrush lgb = new LinearGradientBrush();
            lgb.StartPoint = new Point(0.75, 1);
            lgb.EndPoint = new Point(0.25, 0);
            lgb.GradientStops.Add(gs1);
            lgb.GradientStops.Add(gs2);
            lgb.GradientStops.Add(gs3);
            lgb.GradientStops.Add(gs4);
            rct.Fill = lgb;


            // Border 的镜框效果
            GradientStop bgs1 = new GradientStop();
            bgs1.Offset = 0.0;
            bgs1.Color = ConvertToColor("#5811322D");
            GradientStop bgs2 = new GradientStop();
            bgs2.Offset = 0.25;
            bgs2.Color = ConvertToColor("#3EFFFFFF");
            GradientStop bgs3 = new GradientStop();
            bgs3.Offset = 0.5;
            bgs3.Color = ConvertToColor("#FFFFFFFF");
            GradientStop bgs4 = new GradientStop();
            bgs4.Offset = 0.75;
            bgs4.Color = ConvertToColor("#3EFFFFFF");
            GradientStop bgs5 = new GradientStop();
            bgs5.Offset = 1;
            bgs5.Color = ConvertToColor("#BFFFFFFF");
            LinearGradientBrush blgb = new LinearGradientBrush();
            blgb.StartPoint = new Point(0.5, 1);
            blgb.EndPoint = new Point(0.5, 0);
            blgb.GradientStops.Add(bgs1);
            blgb.GradientStops.Add(bgs2);
            blgb.GradientStops.Add(bgs3);
            blgb.GradientStops.Add(bgs4);
            blgb.GradientStops.Add(bgs5);
            bgBorder.BorderBrush = blgb;
        }
        // 加载背景Rectangle 和 Border
        private void initRectangle(double height, double width)
        {
            rct.Height = height;
            rct.Width = width;
            rct.Fill = new SolidColorBrush(Colors.Transparent);
            // 设置边框宽度
            bgBorder.BorderThickness = new Thickness(3);
            // 初始化设置边框颜色为透明
            bgBorder.BorderBrush = new SolidColorBrush(normalColor);
            // 设置边框弧度
            bgBorder.CornerRadius = new CornerRadius(3);
            // 将举行镶嵌到Border内部
            bgBorder.Child = rct;
            // 加入母板
            content.Children.Add(bgBorder);
        }
        #endregion

        #region 鼠标离开样式
        void ImageButtonControl_MouseLeave(object sender, MouseEventArgs e)
        {
            BtnLeaveStyle(bg_Img).Begin();
            BtnOverToChange(bg_Img,false);
            normalBtnStyle();
        }

        private void normalBtnStyle() {
            // 设置 Rectangle的填充色为透明
            rct.Fill = new SolidColorBrush(normalColor);
            // 设置 Border的填充色为透明
            bgBorder.BorderBrush = new SolidColorBrush(normalColor);
            // 还远模糊程度为 5
            bEffect.Radius = 5;
        }
        public Storyboard BtnLeaveStyle(UIElement ui)
        {
            Storyboard sb = new Storyboard();
            DoubleAnimation da = new DoubleAnimation()
            {
                From = 0.9,
                To = 1,
                Duration = TimeSpan.FromSeconds(0.1),
            };
            Storyboard.SetTarget(da, ui);
            Storyboard.SetTargetProperty(da, new PropertyPath("UIElement.Opacity"));
            sb.Children.Add(da);
            return sb;
        }
        #endregion

        #region 鼠标按下样式
        void ImageButtonControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            BtnDownStyle(bg_Img);
        }
        public void BtnDownStyle(UIElement button)
        {
            button.Projection = new PlaneProjection()
            {
                LocalOffsetZ = -100
                
            };
        }
        #endregion

        #region 鼠标抬起样式
        void ImageButtonControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            BtnNormalStyle(bg_Img);
        }
        public void BtnNormalStyle(UIElement button)
        {
            button.Projection = new PlaneProjection()
            {
                LocalOffsetZ = 50
            };
        }
        #endregion

        #region 倒影效果
        public void InvertedImg(Image img,double height)
        {
            img.Projection = new PlaneProjection()
            {
                RotationY = 0,
                LocalOffsetY = -(2.3 * height)
            };
            img.RenderTransform = new ScaleTransform()
            {
                ScaleY = -0.7
            };
            GradientStop gs1 = new GradientStop();
            gs1.Offset = 0.0;
            gs1.Color = Colors.Black;
            GradientStop gs2 = new GradientStop();
            gs2.Offset = 1;
            gs2.Color = Colors.Transparent;
            LinearGradientBrush lgb = new LinearGradientBrush();
            lgb.StartPoint = new Point(0.5, 1);
            lgb.EndPoint = new Point(0.5, 0);
            lgb.GradientStops.Add(gs1);
            lgb.GradientStops.Add(gs2);
            img.OpacityMask = lgb;
        }
        #endregion

        #region 将十六进制颜色转换成Color对象
        public static Color ConvertToColor(string colorName)
        {
            if (colorName.StartsWith("#"))
                colorName = colorName.Replace("#", string.Empty);
            int v = int.Parse(colorName, System.Globalization.NumberStyles.HexNumber);
            return new Color()
            {
                A = Convert.ToByte((v >> 24) & 255),
                R = Convert.ToByte((v >> 16) & 255),
                G = Convert.ToByte((v >> 8) & 255),
                B = Convert.ToByte((v >> 0) & 255)
            };
        }
        #endregion
    }
}

前台引用 命名控件

 xmlns:IBC="clr-namespace:ButtonStyle.Control"

代码段

<Grid x:Name="LayoutRoot" Background="Silver" HorizontalAlignment="Center" Width="1600">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_previous.png"></IBC:ImageButtonControl>
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_next.png"></IBC:ImageButtonControl>
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_pan.png"></IBC:ImageButtonControl>
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/alert.png"></IBC:ImageButtonControl>
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_clear.png"></IBC:ImageButtonControl>
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_feature.png"></IBC:ImageButtonControl>
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_fullextent.png"></IBC:ImageButtonControl>
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_layers.png"></IBC:ImageButtonControl>
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/people.png"></IBC:ImageButtonControl>
            <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/sysinfo.png"></IBC:ImageButtonControl>
        </StackPanel>
   </Grid>

效果图：