WPF后台自定义文字带背景的选择状态按钮

如果要转载请注明来出处（http://www.cnblogs.com/therock），谢谢！

 

描述：可以对按钮的选择或未选择时的文字颜色以及背景图片进行变换。

 

效果如下：

 

 

 

首先是自定义按钮类：

View Code

  public  class TextImageButton:Button
    {
         public TextImageButton()
        {
             this.IsSelectedChanged +=  new IsSelectedChangedEventHandler(TextImageButton_IsSelectedChanged);
        }

         private  void TextImageButton_IsSelectedChanged( object sender, DependencyPropertyChangedEventArgs e)
        {
             if ( this.IsSelected ==  true)
            {
                 this.TextColor = SelectedTextColor;
                 this.Background = SelectedBackground;
            }
             else
            {
                 this.TextColor = UnSelectedTextColor;
                 this.Background = UnSelectedBackground;
            }
        }

         public  delegate  void IsSelectedChangedEventHandler( object sender, DependencyPropertyChangedEventArgs e);
         public  event IsSelectedChangedEventHandler IsSelectedChanged;

         private  bool isSelected =  false;
         public  bool IsSelected
        {
             get{ return isSelected;}
             set
            {
                 if (isSelected != value)
                {
                    isSelected = value;
                    IsSelectedChanged( this, new DependencyPropertyChangedEventArgs());
                }
            }
        }

         public  new  static DependencyProperty BackgroundProperty = DependencyProperty.RegisterAttached
        (
             " Background ",
             typeof(ImageSource),
             typeof(Button)
        );

         public  new ImageSource Background
        {
             get{  return (ImageSource)GetValue(BackgroundProperty);}
             set { SetValue(BackgroundProperty, value); }
        }

         public  static DependencyProperty TextColorProperty = DependencyProperty.RegisterAttached
        (
             " TextColor ",
             typeof(SolidColorBrush),
             typeof(Button)
        );

         public SolidColorBrush TextColor
        {
             get {  return (SolidColorBrush)GetValue(TextColorProperty); }
             set { SetValue(TextColorProperty, value); }
        }

         public  static DependencyProperty TextProperty = DependencyProperty.RegisterAttached
        (
             " Text ",
             typeof( string),
             typeof(Button)
        );

         public  string Text
        {
             get {  return ( string)GetValue(TextProperty); }
             set { SetValue(TextProperty, value); }
        }

         public ImageSource SelectedBackground {  get;  set; }
         public ImageSource UnSelectedBackground {  get;  set; }
         public SolidColorBrush SelectedTextColor {  get;  set; }
         public SolidColorBrush UnSelectedTextColor {  get;  set; }      
    }

 

其次是创建按钮模板：

View Code

     < ControlTemplate  TargetType ="Button"  x:Key ="SelectButton" >
         < Grid  Cursor ="Hand" >
             < Image  Source =" {Binding Path=Background,RelativeSource={RelativeSource TemplatedParent}} " ></ Image >
             < TextBlock  FontFamily ="微软雅黑"  FontSize ="24"  Width ="220"  HorizontalAlignment ="Center"  VerticalAlignment ="Center"  TextAlignment ="Center"  Text =" {Binding Path=Text,RelativeSource={RelativeSource TemplatedParent}} "  Foreground =" {Binding Path=TextColor,RelativeSource={RelativeSource TemplatedParent}} "  TextWrapping ="Wrap" ></ TextBlock >
         </ Grid >
     </ ControlTemplate >

 

最后就可以在后台中直接动态创建：

View Code

            TextImageButton tbi =  new TextImageButton()
            {
                Width =  280,
                Height =  100,
                Template =  this.Resources[ " SelectButton "]  as ControlTemplate,
                Background =  new BitmapImage( new Uri( @" /项目名称;component/Images/UnSelectButton.png ", UriKind.Relative)),
                SelectedBackground =  new BitmapImage( new Uri( @" /项目名称;component/Images/SelectButton.png ", UriKind.Relative)),
                UnSelectedBackground =  new BitmapImage( new Uri( @" /项目名称;component/Images/UnSelectButton.png ", UriKind.Relative)),
                TextColor =  new SolidColorBrush(Color.FromRgb( 51,  51,  51)),
                SelectedTextColor =  new SolidColorBrush(Color.FromRgb( 255,  255,  255)),
                UnSelectedTextColor =  new SolidColorBrush(Color.FromRgb( 51,  51,  51)),
                Name =  " 按钮名称 ",
                Text =  " 按钮内容 "
            };

 变换按钮的状态通过 tbi.IsSelected = true 或 tbi.IsSelected = false 即可