Thanks to Joe McBride and Jason Alderman, who discovered this technique in some of Microsoft’s theme packs.
I’m trying something a little new… I’m going to post all future Silverlight tutorials on CodeRun, an online IDE. Basically, just follow the link below and click “Run” and you’ll see this in action. You can change the XAML at CodeRun to test it out, which I find exceptionally cool. Let me know if you a) like this or b) hate this.
This is just a little trick to get a nice flexible striped gradient in Silverlight or WPF. Our end product will look like this
Zoomed in:
![clip_image001[5]](https://matthiasshapiro.com/wp-content/uploads/2010/01/clip_image0015.png "clip_image001[5]")
Just adds some nice texture to the app.
First, go to the element you want to apply the gradient to and go to the (you guessed it!) gradient section in the background.
![clip_image001[7]](https://matthiasshapiro.com/wp-content/uploads/2010/01/clip_image0017.png "clip_image001[7]")
This will pull up the default black-to-white gradient that we all know and love. Give it two more gradient stops as close to the center as you can by clicking on the gradient twice. Make the two left stops the color of your stripe. For this example, I’m using a nice blue gradient with some transparency. I think it fits nice with the background. Also make the two right stops fully transparent. Should look something like this:
![clip_image001[11]](https://matthiasshapiro.com/wp-content/uploads/2010/01/clip_image00111.png "clip_image001[11]")
Dandy. Now click on the arrow to expand our options (seen at the bottom of the image above) and a new set of options open up for us to futz with. Let’s go ahead and set the following options:
- StartPoint = 0,0
- EndPoint = 1.5, 1.5
- MappingMode = Absolute
- SpreadMethod = Repeat
![clip_image001[13]](https://matthiasshapiro.com/wp-content/uploads/2010/01/clip_image00113.png "clip_image001[13]")
And that’s it! We can change the visible color to get something a little more appropriate to our background or we can change the EndPoint to make the stripes wider or at a different angle. But that’s all we need.
Here’s the XAML for reference.
<LinearGradientBrush
EndPoint=”1.5,1.5″
MappingMode=”Absolute”
SpreadMethod=”Repeat”
StartPoint=”0,0″>
<GradientStop Color=”#BF125881″/>
<GradientStop Color=”#BE6C9AE0″ Offset=”0.526″/>
<GradientStop Color=”Transparent” Offset=”0.544″/>
<GradientStop Color=”Transparent” Offset=”1″/>
</LinearGradientBrush>
Thank you very much!
Pedro, he’s using Microsoft Expression Blend.
I know this question is really stupid, but what program is that you use to design things? The one with black/gray background.
Thank you!
Man this is an awesome trick! I can’t believe I’ve been using tiled transparent PNGs all this time.
Great tip!
CodeRun seems a bit overkill for this particular example maybe, but still a nice asset.
Keep it up!
CodeRun is certainly no substitute for Visual Studio, but I’m hoping that if more people use it, we can all test out code without having to download and run a project every stinking time. For blogging about code, it’s a dream come true 🙂
Nice trick with the gradient.
The CodeRun thing is very cool indead. The only thing that I’d like to see there is IntelliSense. Other then that it’s very cool.