How Do You Set Background Colors To Buttons In WPF?

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 8472 Views - Last Post: 24 December 2013 - 03:14 AM Rate Topic: -----

#1 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 12
  • View blog
  • Posts: 816
  • Joined: 31-August 11

How Do You Set Background Colors To Buttons In WPF?

Posted 21 December 2013 - 06:34 PM

So I'm highly confused. I understand some of the very basics in changing the looks of controls in WPF but bear with me I'm highly new when it comes to using WPF. So for example I waned to change a background for a button by using a control template and change it to something different than the default when the mouse is over?


So I was working like this:
 <Button Content="testing" Width="35" Height="30" Foreground="White" FontFamily="Verdana" Margin="3">
                <Button.Template>
                    <ControlTemplate>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="Green"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>




Then I was trying to figure out how to set the default property for the background (when the mouse isn't over) so I set Background= in the button part and that did nothing.

Then I looked around for other code on how to do this and I got this


<Style x:Key="NumberPushpinStyle" TargetType="m:Pushpin">
  <Setter Property="BorderBrush" Value="#FFF4F4F5" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Grid>
          <Ellipse Fill="Black" Height="33" Stroke="White" StrokeThickness="2" Width="33" RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>
              <CompositeTransform TranslateX="-16" TranslateY="16" />
            </Ellipse.RenderTransform>
          </Ellipse>
          <TextBlock Foreground="White" Text="{TemplateBinding Content}" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
            <TextBlock.RenderTransform>
              <CompositeTransform TranslateX="-16" TranslateY="15" />
            </TextBlock.RenderTransform>
          </TextBlock>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>



I don't understand what x is? What is the x that you see? What am I doing wrong? How can I do this right and can you explain why it does what it does by showing me the right answer? This WPF is scary and this is why I've avoided tackling WPF but it looks like it's getting to a point where you have to learn this stuff

Is This A Good Question/Topic? 0
  • +

Replies To: How Do You Set Background Colors To Buttons In WPF?

#2 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6505
  • View blog
  • Posts: 14,362
  • Joined: 02-June 10

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 21 December 2013 - 07:13 PM

Quote

so I set Background= in the button part and that did nothing.

Were you expecting intellisense to pop-up with a list of colors? What do you mean by "that did nothing"


You have a trigger right here setting the foreground
<Setter Property="Foreground" Value="Green">

You would do the same thing with the background color
<Setter Property="Background" Value="Black">

But for the default (not mouse over) you have an example of that too

Quote

Foreground="White"


Again, just change the Background property.

If you can avoid setting the width and height you should. One of the expectations of WPF windows is they will self-size to their environment. If someone scales the window, or changes the default magnification for the OS, or changes the default font size for the OS then this control will look bad with the text running off the button. Just let it size itself to the text. Or if it is part of another control and you want all the buttons to size to say... the grid column, then let that happen. We strive to NOT micromanage everything in a WPF window.

Looks like you are stressing, over-thinking the complexity, and looking all over for anything you can copy/paste instead of reading some instructional book or tutorial. Relax. Breathe. Relax.

Reading the style I'd say its a textbox inside an ellipse used as part of drawing a pushpin type thing. The ellipse is black with a white border, that is offset by -16x16 and a textbox with similar placement. So a circle with a textbox. Picture a circled letter B as it might be on a Google Map showing where the pizza hut is.

The two blocks of XAML have nothing to do with each other beyond being XAML code. The second has nothing to do with colorizing a button which is what you are asking about.

Quote

I don't understand what x is?
<TextBlock.RenderTransform>
	              <CompositeTransform TranslateX="-16" TranslateY="15" />
	            </TextBlock.RenderTransform>

That is for the RenderTransform of a textblock. It has nothing whatsoever to do with the color of a button. It is pretty much was it looks like it is for, if you slow down and read the XAML:
Textblock. Transform the rendering. Translate the x by -16. Translate the y by positive 15. As you should already know from nearly any C# programming, X and Y are placement co-ordinates with 0,0 being the upper left. So move the textblock 16 to the left and down by 15.
Was This Post Helpful? 1
  • +
  • -

#3 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 12
  • View blog
  • Posts: 816
  • Joined: 31-August 11

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 22 December 2013 - 02:17 AM

Okay thanks toq. So I got this to work "sort of". The buttons now do change to the color that I ask on mouse over BUT ONLY FOR A SECOND. Now when I mouse over a button it changes green but for a second and then it changes back to the default color of buttons when you mouse over.

This happens when you leave the cursor over the mouse button meaning that you're continuously hovering your mouse over the button. Here is my code now:


<window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Blue" />
            <Setter Property="FontStyle" Value="Normal" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="Foreground" Value="White" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Green" />
                    <Setter Property="Foreground" Value="Orange" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </window.Resources>
    <Grid>
        <Button Content="Testing" Margin="39,58,321,144"/>
    </Grid>
</Window>




Was This Post Helpful? 0
  • +
  • -

#4 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6505
  • View blog
  • Posts: 14,362
  • Joined: 02-June 10

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 22 December 2013 - 10:02 AM

Just so everyone else knows, the DIC parser is playing games. The W in <Window is capitalized, but the parser is showing it lower case. Its not a bug in his XAML or mine.



I see what you mean now. When your mouse enters the button it transitions to green, but then continues to transition into the default value for a button which on my Win7 machine is a kind of two-tone glassy look.

I think what is happening here is that while your style does have its affect, nothing is stopping this control from completing the rest of its default behavior, and that includes the animations and VisualState definitions for a button. Remember that all these things are additive (like object inheritance). The idea is you can make a complex button as "MyBaseButton" then override just the parts you want with things like a different border color for the SupervisorButton than the ClerkButton. The same is happening here. You're starting with the WPF button which has all this fancy behaviors and just overriding a couple things but the rest are still doing their job.

I know what you want seems easy. Its easy enough to describe: "I want a button that changes from blue to green when my mouse is over it." But you'll have to override these other behaviors to get that. If you look at the control template sample for a button on MSDN you can see all these things I'm talking about.

Try copying their control template, then play with the values. Dumb them down, to get the behavior you want. I'll bet you find that once you know you can control these things you won't be satisfied with a simple WinForms looking transition. And frankly, neither with your users. Today's users have become jaded and expect the little things like gentle color transitions, and momentary bright 'flash' effects as feedback that the button was clicked. They see it everywhere from iPhone games to The Weather Channel graphics.

Here's the XAML for your window and button, with the MSDN code integrated. It will give you a working starting point to mess with.

Spoiler

This post has been edited by tlhIn`toq: 22 December 2013 - 10:04 AM

Was This Post Helpful? 1
  • +
  • -

#5 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 12
  • View blog
  • Posts: 816
  • Joined: 31-August 11

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 22 December 2013 - 04:21 PM

toq I have tried to do just that. For example reading and looking at MSDN's example there and even looking at the full downloadable example. The problem is I would say it's very poorly explained and documented. They give you nothing easy to look at first and there's all kinds of static resources referencing something else and then that references something else

etc. etc. and It doesn't even give you the simplest example for example of customizing a button using Style. Can you show me a very base example perhaps somewhere?
Was This Post Helpful? 0
  • +
  • -

#6 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6505
  • View blog
  • Posts: 14,362
  • Joined: 02-June 10

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 22 December 2013 - 04:46 PM

You did see that I gave you code that merged your button with their example, right? Click the SHOW button next to where is says SPOILER in my last post. All you have to do is copy it all and paste it into your program.
Did you play with it? Did you try changing their color definitions to match your needs? They did their sample in blues. Change them to greens and you're three quarters of the way there.

You can't be afraid of playing and learning through hands on experimentation.

I'm sorry if you feel this is not an easy example. XAML is pretty simple English and not tough to read. I just got done mentioning how your XAML doesn't override any of the built-in default behaviors and that's why you are still seeing those behaviors. Did you *read* the XAML in the sample? Did you try to make sense of it? Did you experiment with it by taking out lines one at a time to see what the change was?

Because without having to be told, and without reading up on it I can see a property setter that seems like it might have something to do with what you're doing. Look at line 182: "OverrideDefaultStyles" value = "true"
Does that sound like something that might apply to the situation I described to you: That your style doesn't override the default behaviors you're seeing?

If I were in your shoes (and I was just a couple years ago, and I still am learning new WPF every day, so I *am* in your shoes), I'd try dissecting their example, look for things that match my needs, and experiment. Merge lines that seem related to my earlier code. I haven't done this for your code, but my first experiment would be to take that line at 182 and drop it into my XAML to see if that's enough to turn off the default behavior and just give me a simple color change.

You can't spend all your time looking for instructions that were tailor made for your exact situation. You have to learn and comprehend the material, then apply parts of that new found knowledge where it is needed.

Again, don't be afraid to play and experiment. Comment outlines and re-run. It might take you an hour to dissect a piece of code. But at the end of that hour you'll really understand it.
Was This Post Helpful? 1
  • +
  • -

#7 Skydiver  Icon User is offline

  • Code herder
  • member icon

Reputation: 5831
  • View blog
  • Posts: 19,880
  • Joined: 05-May 12

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 22 December 2013 - 08:32 PM

And if you are afraid of losing "working" code, take full advantage of source control. Check in code as you go along, and feel free to make branches while your experiment. Some people abhor Mercurial's approach to creating experimental branches: simply make clone a working version of the repository, but personally I love it. I love it because it makes cognitive sense to me. I am copying (cloning) working code and tweaking it. None of this esoteric branching that requires applying some brain power to understand, decipher, and explain -- but if you are more familiar with other source control systems like git, Subversion, Perforce, etc. then use what is familiar.
Was This Post Helpful? 1
  • +
  • -

#8 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 12
  • View blog
  • Posts: 816
  • Joined: 31-August 11

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 23 December 2013 - 11:49 AM

I sort of got this button to work now (sort of). Yes I did read all of that code and even though it's English it's EXTREMELY hard to read. XAML is bunched up many times your eyes can miss when a declaration has > or /> at the end reading down a bunch of code.

In short I think it's awful. I'm not here though to drum up a bunch of controversy about WPF but I'm wondering if it's worth my time learning this stuff? How much is WPF going to actually be used for business applications I wonder? Can anyone name some large applications that use WPF?

I have no doubt after reading some articles that WPF is BETTER from a technical standpoint BETTER than WinForms but just because something has better technical capability doesn't mean that it isn't very hard to use (or impractical) for a lot of people or most people for that matter.

I don't mean to be a baby here but as I've gone through this code spending hours of my time trying to change a button color something keeps going through my mind and that is "life is too short". Maybe life is just too short to be bothered by Microsoft's "new" stuff period?

This post has been edited by adn258: 23 December 2013 - 11:50 AM

Was This Post Helpful? 0
  • +
  • -

#9 Skydiver  Icon User is offline

  • Code herder
  • member icon

Reputation: 5831
  • View blog
  • Posts: 19,880
  • Joined: 05-May 12

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 23 December 2013 - 12:30 PM

View Postadn258, on 23 December 2013 - 01:49 PM, said:

Can anyone name some large applications that use WPF?

Yes. Two big ones to start the list: Visual Studio 2010 and onwards. The first version of Blend and all later versions.
Was This Post Helpful? 1
  • +
  • -

#10 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 12
  • View blog
  • Posts: 816
  • Joined: 31-August 11

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 23 December 2013 - 12:41 PM

View PostSkydiver, on 23 December 2013 - 12:30 PM, said:

View Postadn258, on 23 December 2013 - 01:49 PM, said:

Can anyone name some large applications that use WPF?

Yes. Two big ones to start the list: Visual Studio 2010 and onwards. The first version of Blend and all later versions.


Fair enough is it worth learning do you think? Do you use it that often for actual work related job related money related projects SkyDiver? Do most people you know working for money actually use WPF for projects or do they use something else?
Was This Post Helpful? 0
  • +
  • -

#11 Skydiver  Icon User is offline

  • Code herder
  • member icon

Reputation: 5831
  • View blog
  • Posts: 19,880
  • Joined: 05-May 12

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 23 December 2013 - 12:42 PM

A dated but bigger list of apps that use WPF: http://web.archive.o...ationportfolio/

As for your question of what line of business app would use WPF, look at Billy Hollis on Getting Smart with WPF.

I hope the posts above don't make me look like a WPF zealot. I started out as a skeptic as well when I considered Win32 Windows APIs good enough, but after a few medium sized projects for myself and others that I worked on, I was eventually sold on the benefits of WPF over traditional Win32 and WinForms.
Was This Post Helpful? 1
  • +
  • -

#12 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 12
  • View blog
  • Posts: 816
  • Joined: 31-August 11

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 23 December 2013 - 02:21 PM

View PostSkydiver, on 23 December 2013 - 12:42 PM, said:

A dated but bigger list of apps that use WPF: http://web.archive.o...ationportfolio/

As for your question of what line of business app would use WPF, look at Billy Hollis on Getting Smart with WPF.

I hope the posts above don't make me look like a WPF zealot. I started out as a skeptic as well when I considered Win32 Windows APIs good enough, but after a few medium sized projects for myself and others that I worked on, I was eventually sold on the benefits of WPF over traditional Win32 and WinForms.


It didn't but here's my line of thinking and correct me if I'm wrong:

That list of Apps is interesting but I would imagine laughable compared to the larger list of major Win32/Winforms projects out there (and projects that are still being made)?

The even better question for me though is why should I stick with learning a lot of NEW windows stuff at all? Winforms works good enough as you said for 95% of what I would care about in an applications. It seems to me that WPF and now WinRT are Microsoft's attempt at striking against their competition.

PC Sales in general are WAY DOWN and the NEW GOOD TECHNOLOGY seems to be online/cloud based Apps and Mobile apps like Android. In the big scheme of things it seems that eventually PC's in the computing pie will be like 25% and mobile/online apps like 75%.

I find myself more and more using online technologies and languages. For example with CSS3 JQuery/Javascript and HTML5 styling a button how I want is WAAY easier than XAML WPF.

Plus online Apps will run anywhere there's a browser that will support them. That said I think there will ALWAYS be a need for PC's and Windows, but that need is becoming less. So at BEST Wpf will take up probably over half of the 20%. 20% being the major use of PC'S.

Why would I focus my time on this when I can look at the bigger 70-80% for things like Android? When I need/want to make a Windows Application (usually just as a hobby for myself) and I can have it do what I want with WinForms why bother with WPF?

That's why I was saying WPF seems to be a waste of my life at least. Life is short man. I for whatever reason don't really enjoy WPF (especially as a hobby). Then when it comes to money in total I'm seeing more demand again for Android and online Apps/Cloud related stuff (so essentially Javascript HTML5/HTML CSS3) (and Java) which is thanks to Android using that Syntax.

All of these languages (and C# for winForms as a hobby) are way more enjoyable it seems (at least to me) to program in too!

This post has been edited by adn258: 23 December 2013 - 02:22 PM

Was This Post Helpful? 0
  • +
  • -

#13 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6505
  • View blog
  • Posts: 14,362
  • Joined: 02-June 10

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 23 December 2013 - 03:32 PM

Then don't worry about WPF.

If I was being paid to be a Mac programmer and that's all I ever wanted to do then WPF wouldn't help me.

If you want to code for Android, then stick with it. I say over and over here to stick with your passions because life is too short. Seems you are saying the same thing.

Nobody here is going to strong-arm you into learning WPF. You posted a question on how to do something with it, so it seemed it was a direction you were already going. We tried to help you. If you don't have a reason to learn the language, then don't.
Was This Post Helpful? 0
  • +
  • -

#14 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 12
  • View blog
  • Posts: 816
  • Joined: 31-August 11

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 23 December 2013 - 03:46 PM

Good point tlhIn`toq. Let me ask you this though. Do you think winforms for windows will become absolute obsolete?

Lastly the even better question is do you think PC's and therefore windows are slowly being phased away in general thanks to things like html5 and android?

This post has been edited by tlhIn`toq: 23 December 2013 - 04:57 PM
Reason for edit:: I'm sure OP meant 'obsolete' not 'absolute'

Was This Post Helpful? 0
  • +
  • -

#15 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6505
  • View blog
  • Posts: 14,362
  • Joined: 02-June 10

Re: How Do You Set Background Colors To Buttons In WPF?

Posted 23 December 2013 - 05:03 PM

I completely belevie WPF will replace WinForms for 95% of all new projects. But just like VB6 is still out there for legacy programs that have been in place for decades, the same will be true of WinForms. And just like foreign outsourcers are *still* produceing VB6 for new projects for whatever reason 3rd world countries have for using old technology, they will produce in WinForms when the rest of us aren't.

2) If I had a crystal ball then I'd know where to guide my own career. Sorry but I can't really help you predict the future that far. But you have to look at how computers are used. HTML5 applications will not control hardware. So if you want to build a program to control a Canon DSLR camera, you'll still have to make a desktop application. Maybe HTML31 will do it some day.

In general everything dies. Its just a matter of how long the lifespan is. I don't use a Commodore 64 much any more. So you'll be spending the rest of your life chasing a moving target and updating your skills for the new technology, both hardware and software. Just accept it now. Learn today and tomorrow's tech. Next week worry about next month's new tech coming down the pipe. But for now, does it matter if there are Windows computers in 2 decades? You still need to know today's technology if you want to earn a living.

This post has been edited by tlhIn`toq: 24 December 2013 - 10:28 AM

Was This Post Helpful? 1
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2