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

FaheemAhmadGul
FaheemAhmadGul used Ask the Experts™
on

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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
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>
Commented:
You can also define the template on your Page / Application resources so you will not need to write it for every button:

<UserControl x:Class="SilverlightButton.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    
    
    <UserControl.Resources>
        <ControlTemplate x:Key="FlatButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="Black">
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
        </ControlTemplate>
    </UserControl.Resources>

    <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="LightGreen" Template="{StaticResource FlatButtonTemplate}" />
        </Grid>

    </Grid>
</UserControl>

Open in new window

Author

Commented:
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

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial