locked
Applying a gradiant smoothly over a page RRS feed

  • Question

  • I am just about done with the first page in my first WPF app.  I've got all of the logic, and databinding, it in working the way I want.  In fact, I think it looks great; at least as far as how it behaves.

    What I don't like is the way it looks.  Frankly, it's butt-ugly (I hope I have not offended anyone).  It is all black and white.  I'm hoping to get help from someone else who has artistic abilities, to do better with the design, but at least while I'm still working with it, I thought I would change it up a bit by applying a gradiant brush to the main grid's background.  I saw it yesterday at a MSDN Launch event on a Silverlight app.  It looked great, with a nice, blue background that had a gradiant applied to it.  It was really light blue at one end, and went to a somewhat darker blue at the other end of the page.  So, I decided to get into Expression Blend 3, select the main grid and apply a gradiant brush to it.  Man, was it awful!  It was really dark, all over, except for just one edge where it got a little light where you could at least tell there were controls on the page.  What was in those controls was impossible to read.

    My problem is that I'm going off the map, here, when it comes to designing.  I've no idea what I'm talking about, as far as what "things" are applied with gradiants.  I tried moving some sort of sliders around, and man, if I thought I couldn't read it before, it was impossible after that.  It became nothing more than a black page.  What good is that?  I don't know what I'm doing with these "things".  Let me get into Blend to read off what some of these things are...

    ... OK, there's a "Editor" thingie under the gradiant, with a little bubble in the upper left hand corner.  And its got color. And if I move that bubble thingie, my gradiant gets worse, so I leave it alone.  Then there's this slider under that Editor thing, and its this slider is all gray, except that it's a lighter gray on the right side with a little pencil, and darker on the left side with another little pencil.  Do I do something with that? To the right of the Editor thing, there is some RGB values.  Those RGB values are the only thing I understand, and they're at 255.  OK, so that means that all together each EGB being 255 makes them all white.  OK, I got that, but  then there's an "A" under the RGB, and its 100%.  What's "A"? And why is it 100% of whatever it is?

    But it gets worse, underneath that gray slider thingie with a pencil at each end, there's some really strange stuff.  There's a textbox on the right that has "100%" in it.  Huh?  100% of what? Immediately to the left of that textbox is a pencil with arrows coming out of it.  I have no idea what that is, and what, if anything I'm supposed to do with those arrows.  To the left of that is 3 objects.  The 2 most left objects are what look to me to be 2 monitors.  I don't know why there's 2 monitors, but I see that only one of them is highlighted.  I only have 1 monitor on my PC, is it indicating that with those 2 monitor things?  But the last, and strangest thing of all, is that last thing, immediately to the left of the 2 monitors on the last row of the background brush for the gradiant.  (This is to the left of the pencil with the arrows coming out of it.)  This last thing, I swear, looks like the retweet symbol used on Twitter.  Now, why would I want to retweet my grid's gradiant brush's settings?  Who would care to read about that on Twitter?

    Man, I have no idea what any of this stuff is, except the RGB.  And I certainly have no idea how I could apply a gradiant as a background to the main grid on my page such that the color goes from light to not so light, but still make it possible to easily read whatever text is on a button or in a label or textblock.  How do I do that with the "things" in that brushes panel?

     


    Rod
    Wednesday, May 5, 2010 8:37 PM

Answers

  • In WPF colors, other than named colors, are represented by ARGB which is Alpha, Red, Green, Blue.  Alpha can be viewed as the opacity of the color.  The pencils under the left-to-right sets your stops and they represent a number between 0 and 1.  The 100% in the little box to the right is just a percentage view of that 0 to 1 number.  You will notice that one of the pencils has a black tip and the other white.  The black tipped pencil is the selected one.  And your color picker above is for that point.  You can also click in the middle of the bar to add additional pencils.  Click and drag down to remove one.

    To make your gradient go from White to Almost White - select the pencil at the dark end and use the color selector to pick a gray or something you find pleasing.  If the gradient appears to be going the wrong direction there are several ways to reverse it.  The easiest is to swap your pencils.  Drag the one on the left toward the middle.  Now drag the right hand one all the way to the left.  Go back and grab the pencil you left in the middle and drag it all the way to the right.  If you're new to gradients and this is temporary that should be sufficient.

    The little pencil below with an arrow on either side is used to iterate through each of the spot points. 

    That's just a scratch on the surface.  To get more (and most likely better) information check out this video: http://expression.microsoft.com/en-us/cc188925.aspx 

    -David

    • Marked as answer by Rod at Work Thursday, May 6, 2010 3:09 PM
    Wednesday, May 5, 2010 8:55 PM
  • The video DMartin linked to below will be useful in learning how to edit gradients. Also, all of the controls you were asking about have tooltips if you hover over them for a couple of seconds that say what they do.

    I'll also try to explain what all of the controls are.

    The bubble = the visual representation of the same thing that is in the ARGB fields, so you can pick it visually, it will always match the values in the ARGB fields

    The "2 monitors" - the left one which is an icon of a linear gradient, makes your gradient linear, the other is of a radial gradient, which makes your gradient radial

    The "retweet" icon - reverses the gradient

    The pencil with arrows - changes which gradient stop you are editing

    The "100%" box, sets/shows the position of the current gradient stop you are editing

    The gradient display with pencils - shows the gradient and all of the gradient stops, 1 pencil per stop, you can click these and drag them, or just click them to select each one for editing.

    • Marked as answer by Rod at Work Thursday, May 6, 2010 3:09 PM
    Thursday, May 6, 2010 1:34 PM
    Moderator

All replies

  • In WPF colors, other than named colors, are represented by ARGB which is Alpha, Red, Green, Blue.  Alpha can be viewed as the opacity of the color.  The pencils under the left-to-right sets your stops and they represent a number between 0 and 1.  The 100% in the little box to the right is just a percentage view of that 0 to 1 number.  You will notice that one of the pencils has a black tip and the other white.  The black tipped pencil is the selected one.  And your color picker above is for that point.  You can also click in the middle of the bar to add additional pencils.  Click and drag down to remove one.

    To make your gradient go from White to Almost White - select the pencil at the dark end and use the color selector to pick a gray or something you find pleasing.  If the gradient appears to be going the wrong direction there are several ways to reverse it.  The easiest is to swap your pencils.  Drag the one on the left toward the middle.  Now drag the right hand one all the way to the left.  Go back and grab the pencil you left in the middle and drag it all the way to the right.  If you're new to gradients and this is temporary that should be sufficient.

    The little pencil below with an arrow on either side is used to iterate through each of the spot points. 

    That's just a scratch on the surface.  To get more (and most likely better) information check out this video: http://expression.microsoft.com/en-us/cc188925.aspx 

    -David

    • Marked as answer by Rod at Work Thursday, May 6, 2010 3:09 PM
    Wednesday, May 5, 2010 8:55 PM
  • The video DMartin linked to below will be useful in learning how to edit gradients. Also, all of the controls you were asking about have tooltips if you hover over them for a couple of seconds that say what they do.

    I'll also try to explain what all of the controls are.

    The bubble = the visual representation of the same thing that is in the ARGB fields, so you can pick it visually, it will always match the values in the ARGB fields

    The "2 monitors" - the left one which is an icon of a linear gradient, makes your gradient linear, the other is of a radial gradient, which makes your gradient radial

    The "retweet" icon - reverses the gradient

    The pencil with arrows - changes which gradient stop you are editing

    The "100%" box, sets/shows the position of the current gradient stop you are editing

    The gradient display with pencils - shows the gradient and all of the gradient stops, 1 pencil per stop, you can click these and drag them, or just click them to select each one for editing.

    • Marked as answer by Rod at Work Thursday, May 6, 2010 3:09 PM
    Thursday, May 6, 2010 1:34 PM
    Moderator
  • That video is very useful, thank you!
    Rod
    Thursday, May 6, 2010 3:16 PM
  • Thank you for explaining what the retweet icon is for.  I was sure it couldn't be for retweeting anything, but didn't know what it was about.

     


    Rod
    Thursday, May 6, 2010 3:17 PM