asked on 5/14/2011

How to Set the Background Color of a Button without a Gradient Effect in Silverlight 4

I would like to set the background color of a Button as a solid color without any gradient effect, but am unable to do so.
The xaml that I have included is giving me an appearance like in diagram 1, even though I am chosing a solid color brush.
I would like it to appear as in diagram 2.
I would appreciate advice on how to achieve this.

my Current xaml

<Grid x:Name="LayoutRoot" Background="White">
<Grid>

<Grid.RowDefinitions >
<RowDefinition Height ="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="20" />

</Grid.ColumnDefinitions>
<Button Grid.Row="1" Grid.Column="1" Content="Hello" Background="Green"></Button>
</Grid>

</Grid>

ButtonBackground.png

Microsoft Development

Last Comment

saragani

5/14/2011

saragani

5/14/2011

I must say that I also didn't expect it... I was thinking that it in WPF it will look like what you want (no gradient) then it should look the same in Silverlight.

Since you are using Silverlight then it means that you can change the style and template of how things look. For example:

<Button Grid.Row="1" Grid.Column="1" Content="Hello" Background="LightGreen">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="Black">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

ASKER CERTIFIED SOLUTION

saragani

5/14/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

FaheemAhmadGul

5/14/2011

ASKER

This is perfect!
I was just going to ask you a way of doing it so that I do not have to do it for every button and you have given me the answer yourself. It was very helpful. Many thanks.

Regards

saragani

5/14/2011

Hi...
Btw, since we forced a new Template, then you will not see Mouse Over and Mouse Down effects
(The button will look like it is not being clicked).

This can also get "fixed" by Triggers, so if you need help with that then let me know.