Setting background & opacity to button but not affecting it's content

Question

I am working with WPF, and what I want to do is to set opacity and background color of my button but I dont want to affect content inside my button. I tried few ways but unfortunately that did not work.

I found this style and I would like to apply something like that:

This is my numeric keyboard: ( I AM TRYING TO EDIT BTN 7) :

As you can see guys, unfortunately I could not set opacity of my button without affecting the content inside.

Here is my XAML code (focus on btn 7):

<StackPanel Height="50" Orientation="Horizontal" Margin="0,0,0,5">
                <Button  FontSize="15" FontWeight="Bold" x:Name="btn7" Foreground="#83D744" Click="btn7_Click" BorderBrush="#83D744" BorderThickness="0.5" Content="7" Width="80" RenderTransformOrigin="0.557,0.693" d:LayoutOverrides="HorizontalAlignment" Background="Black" Opacity="0.2" Margin="0,0,5,0" />
                <Button  FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn8" Click="btn8_Click" Content="8" Width="80" Background="#FF50504F" Margin="0,0,5,0"/>
                <Button  FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn9" Click="btn9_Click" Content="9" Width="80" d:LayoutOverrides="HorizontalAlignment" Background="#FF50504F"/>
</StackPanel>

So could anyone help me please how to solve this thing.. Thanks!

ASh · Accepted Answer · 2016-10-28T13:01:02.890

6

add transparency to a brush used for Background

hex code for Black color is #000000

change alpha channel to make it semi-transparent (Background="#50000000") and remove Opacity="0.2"

<Button x:Name="btn7"
        FontSize="15" FontWeight="Bold" Foreground="#83D744" 
        Click="btn7_Click" 
        BorderBrush="#83D744" BorderThickness="0.5" 
        Content="7" Width="80" RenderTransformOrigin="0.557,0.693"
        d:LayoutOverrides="HorizontalAlignment" 
        Background="#50000000" Margin="0,0,5,0" />

edited Oct 28 '16 at 13:01

answered Oct 28 '16 at 12:54

ASh

34,632
9
60
82

could you give me example how that might look in my case please(on btn7)? – Oct 28 '16 at 12:58
as much as I can see they only thing you added is Background="#50000000", and can you explain it a little bit..? + What about border thickness mate as you can see I set 0.5 but that did not apply to my button it looks like its thickness is 2-3px – Oct 28 '16 at 13:12
1

@billy_56, in your original code `Background="Black" Opacity="0.2"`. that mean Button will use SolidColorBrush (black) to render itself and also be 80% transparent. you can do exactly the same using hex code: `Background="#000000" Opacity="0.2"` or `Background="#FF000000" Opacity="0.2"`. FF is alpha channel value, you can reduce it to create transparent brush (`#50000000`). you need to remove `Opacity="0.2"` to keep everything else non-transparent – ASh Oct 28 '16 at 13:20
@billy_56, about BorderThickness: i suspect this property is not used in default button Template – ASh Oct 28 '16 at 13:21
thanks mate, so what is your advice how to solve this with Border, should I open new question and leave you a link..? Thanks again – Oct 28 '16 at 13:23
@billy_56, i suggest you to start by checking actual button template (see this post how to do it - http://stackoverflow.com/questions/8825030/how-to-extract-default-control-template-in-visual-studio) and add `BorderThickness` binding in that tempate – ASh Oct 28 '16 at 13:29

score -1 · Answer 2 · answered Oct 28 '16 at 12:46

-1

Make the opacity of the button 0.2 to 1

answered Oct 28 '16 at 12:46

abidsplanet

510
5
10

Thats not solution than my button background will be 100% black and I want background opacity.. – Oct 28 '16 at 12:47
But the first photo you have attached has black background. isn't it? – abidsplanet Oct 28 '16 at 12:50

Setting background & opacity to button but not affecting it's content

2 Answers2