Silverlight:Change Button Background color


It is really hard when you want to remove the gradient effect in silverlight button control using designer mode.
I have struggled a lot to achieve this and finally I could solve this issue and thought of sharing this to every one.
By Default the if you try to create a button control and change the background color it look some thing like below

<Button x:Name=”btnTest” Content=”Default Background Color” Background=”Orange” Width=”170″ Height=”30″ HorizontalAlignment=”Left”>

I was expecting a orange color as the background of the button and I got in gradient effect..

So how do I get rid of this gradient effect.. The Below code resolve this issue

<Button Width=”100″ Height=”30″ Content=”Click Me !!!” Foreground=”White” >
<Button.Template>
<ControlTemplate TargetType=”Button”>
<Border x:Name=”Border” Background=”Orange”>
<ContentPresenter VerticalAlignment=”Center” HorizontalAlignment=”Center” />
</Border>
</ControlTemplate>
</Button.Template>
</Button>

and produces the following output.

Again if you want to customize some thing like rounded curve button you may need to add a attribute called CornerRadius.

<Button Width=”100″ Height=”30″ Content=”Click Me !!!” Foreground=”White” >
<Button.Template>
<ControlTemplate TargetType=”Button”>
<Border x:Name=”Border” Background=”Orange”
CornerRadius=”4″>
<ContentPresenter VerticalAlignment=”Center” HorizontalAlignment=”Center” />
</Border>
</ControlTemplate>
</Button.Template>
</Button>

and produces the following output.

Create button background from codebehind

StringBuilder sb = new StringBuilder();
sb.Append( "<ControlTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ");
sb.Append("xmlns:data='clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data'
xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' ");
sb.Append("TargetType='Button' >");
sb.Append("<Border x:Name=\"Border\" Background=\"Orange\" CornerRadius=\"4\"><ContentPresenter VerticalAlignment=\"Center\" HorizontalAlignment=\"Center\" /></Border> ");
sb.Append("</ControlTemplate> ");

Button btn = new Button();
btn.Width = width;
btn.Height = height;
btn.Content = content;
btn.Foreground = new SolidColorBrush(Colors.White);

ControlTemplate ct = XamlReader.Load(sb.ToString()) as ControlTemplate;
btn.Template = ct;
cnvParent.Children.Add(btn);

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu

Advertisements

23 thoughts on “Silverlight:Change Button Background color

    1. Well Martin, You can achieve this using TemplateBinding Background like below

      Background=”{TemplateBinding Background}”

      So lets modify the button Xaml code like below

      <Button Width="100" Height="30" Content="Click Me !!!" Name="btnOrange" Foreground="White" >
      <Button.Template>
      <ControlTemplate TargetType="Button">
      <Border Name="btnBorder" Background="{TemplateBinding Background}" CornerRadius="4">
      <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
      </Border>
      </ControlTemplate>
      </Button.Template>
      </Button>

      From code behind you can simply change buttonName.background = color

      For ex : btnOrange.Background = new SolidColorBrush(Colors.Red);

      IF you wan to use the custom color code or Hexabased colors (#005E91) use the following way.

      btnOrange.Background = new SolidColorBrush(FromHex("#005E91"));

      public Color FromHex(string hex)
      {
      string v = hex.TrimStart('#');
      if(v.Length > Eight) //replace with number 8
      return Colors.Blue;
      if(v.Length == 6)
      v = "FF" + v; // Add Alpha value
      if(v.Length < Six) //replace with number 6
      v = "FF" + v;
      while(v.Length < Eight) //replace with number 8
      v += "0";
      Color c = new Color();
      c.A = (byte)System.Convert.ToInt32(v.Substring(0, 2), 16);
      c.R = (byte)System.Convert.ToInt32(v.Substring(2, 2), 16);
      c.G = (byte)System.Convert.ToInt32(v.Substring(4, 2), 16);
      c.B = (byte)System.Convert.ToInt32(v.Substring(6, 2), 16);
      return c;
      }

      See the attached screen short for the above method

      View Color code method

      Hope this helps
      Deepu

  1. Hi Deepu,

    Very useful example — thanks! However, I’m not able to add a border around the solid color button (for example, BorderThickness=”1″ with a BorderBrush set to a black brush.

    Any idea how I can get the border to appear?

    1. Try some thing like below

      For ex : buttonControlId.Background = new SolidColorBrush(Colors.Red);

      IF you wan to use the custom color code or Hexabased colors (#005E91) use the following way.

      buttonControlId.Background = new SolidColorBrush(FromHex(“#005E91”));

      public Color FromHex(string hex)
      {
      string v = hex.TrimStart(‘#’);
      if(v.Length > Eight) //replace with number 8
      return Colors.Blue;
      if(v.Length == 6)
      v = “FF” + v; // Add Alpha value
      if(v.Length < Six) //replace with number 6
      v = "FF" + v;
      while(v.Length < Eight) //replace with number 8
      v += "0";
      Color c = new Color();
      c.A = (byte)System.Convert.ToInt32(v.Substring(0, 2), 16);
      c.R = (byte)System.Convert.ToInt32(v.Substring(2, 2), 16);
      c.G = (byte)System.Convert.ToInt32(v.Substring(4, 2), 16);
      c.B = (byte)System.Convert.ToInt32(v.Substring(6, 2), 16);
      return c;
      }

      Hope this helps
      Thanks
      Deepu

  2. Is there a way to get the white inner border/ Grey outer border look of the Telerik buttons? I have tried everything and it just won’t work for me. Am I going to have to write my own control?

    1. Hi Jákup W. Hansen,

      Try this

      CreateButton(100,30,”Click Me !!”);

      void CreateButton(double width,double height,string content)
      {
      StringBuilder sb = new StringBuilder();
      sb.Append( “<ControlTemplate xmlns=’http://schemas.microsoft.com/winfx/2006/xaml/presentation’ xmlns:x=’http://schemas.microsoft.com/winfx/2006/xaml’ “);
      sb.Append(“xmlns:data=’clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data’ xmlns:mc=’http://schemas.openxmlformats.org/markup-compatibility/2006′ “);
      sb.Append(“TargetType=’Button’ >”);
      sb.Append(“<Border x:Name=\”Border\” Background=\”Orange\” CornerRadius=\”4\”><ContentPresenter VerticalAlignment=\”Center\” HorizontalAlignment=\”Center\” / ></Border >”);
      sb.Append(“</ControlTemplate >”);

      Button btn = new Button();
      btn.Width = width;
      btn.Height = height;
      btn.Content = content;
      btn.Foreground = new SolidColorBrush(Colors.White);

      ControlTemplate ct = XamlReader.Load(sb.ToString()) as ControlTemplate;
      btn.Template = ct;
      cnvParent.Children.Add(btn);
      }

      Hope this helps

      Thanks
      Deepu

  3. I can not get it to work in the code behind even using your code. Is it possible the headers are wrong and can you do it another way besides using the XamlReader. also is there any using statements I am missing besides the one for the XAMLreader.

  4. Thanks deepu, I am using this in WP7 app but I am not getting Tap effect. I want to change background color when user taps on button.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s