Sunday 30 March 2008

Windows Live Style WPF Gradient Fade

I have been playing with different gradients for an application that I am writing a wpf front end for.

After a lot of experimenting, I found the two gradients below look pretty awesome.

This first one creates a metalic or reflective style effect similar to the title bar on Windows Live, the border itself has rounded corners at the top giving it a tab header like quality.

<LinearGradientBrush MappingMode="RelativeToBoundingBox"
StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="#7eb2d2" />
<GradientStop Offset="0.1" Color="#7eb2d2" />
<GradientStop Offset="0.11" Color="#7aafd1" />
<GradientStop Offset=".35" Color="#5599c4" />
<GradientStop Offset=".49" Color="#3586b9" />
<GradientStop Offset=".5" Color="#005c96" />
<GradientStop Offset=".65" Color="#005c96" />
<GradientStop Offset=".75" Color="#166a9f" />
<GradientStop Offset=".99" Color="#6aa4c5" />
<GradientStop Offset="1" Color="#7eb2d2" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>


This next one creates a nice relatively light blue shadow at the top of the area, allowing you to remove the total whiteness of an area without distracting from the fields etc on it...

<LinearGradientBrush MappingMode="RelativeToBoundingBox"
StartPoint="0,0"
EndPoint="0,1"/>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="0.001" Color="White" />
<GradientStop Offset="0.0011" Color="#72a3d6" />
<GradientStop Offset="0.0125" Color="#aac7e5" />
<GradientStop Offset="0.025" Color="#d3e5f7" />
<GradientStop Offset="0.04" Color="#eaf3fd" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

No comments: