Another effect that we can create for our controls is that of a glowing appearance, as if a light were shining outward from inside the control. We'll need another LinearGradientBrush instance and UI element to paint it on. A Rectangle element suits this role well, as it's very lightweight. We should define these resources in the application resources in the App.xaml file to enable every View to use them:
<TransformGroup x:Key="GlowTransformGroup">
<ScaleTransform CenterX="0.5" CenterY="0.85" ScaleY="1.8" />
<TranslateTransform Y="0.278" />
</TransformGroup>
<RadialGradientBrush x:Key="GreenGlow" Center="0.5,0.848"
GradientOrigin="0.5,0.818" RadiusX="-1.424" RadiusY="-0.622"
RelativeTransform="{StaticResource GlowTransformGroup}">
<GradientStop Color="#CF65FF00" Offset="0.168" />
<GradientStop Color="#4B65FF00" Offset="0.478" />
<GradientStop Color="#0065FF00" Offset="1" />
</RadialGradientBrush>
<Style x:Key="GlowingButtonStyle" TargetType="{x:Type Button}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="White" BorderThickness="1"
Background="DarkGray" CornerRadius="3">
<Grid>
<Rectangle IsHitTestVisible="False" RadiusX="2"
RadiusY="2" Fill="{StaticResource GreenGlow}" />
<ContentPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Border.Effect>
<DropShadowEffect Color="#FF65FF00" ShadowDepth="4"
Opacity="0.4" Direction="270" BlurRadius="10" />
</Border.Effect>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
We start off by declaring a TransformGroup element that enables us to group one or more transform objects together. Inside it, we define a ScaleTransform element that scales applied elements vertically by the default factor of 1 and horizontally by a factor of 1.8. We specify the center of this transformation using its CenterX and CenterY properties. Next, we declare a TranslateTransform element that moves applied elements downwards by a small amount.
After this, we define a RadialGradientBrush object that will represent the glow in our design. We use the RadiusX and RadiusY properties to shape the brush element and specify the Center and GradientOrigin properties to dictate the center and focal point of the radial gradient.
We then set the TransformGroup element to the RelativeTransform property of the brush to apply the transforms to it. Note that the three GradientStop elements all use the same R, G and B values, and just differ in the alpha channel, or opacity values.
Next, we declare the GlowingButtonStyle style for type Button, setting the SnapsToDevicePixels property to true, to keep its lines crisp and sharp. In the Template property, we define a ControlTemplate element with a white Border element that has slightly rounded corners.
Inside the border, we declare a Grid panel containing a Rectangle and a ContentPresenter element. Again, the RadiusX and RadiusY properties of the rectangle are set to a smaller value than that of the CornerRadius property of the parent border control to ensure that it fits evenly within it. Our RadialGradientBrush resource is assigned as the rectangle's Fill property.
The ContentPresenter object is centered to ensure that the content of the button will be rendered in its center. Returning to the Border element, we see a DropShadowEffect is declared within its Effect property. However, this element is not here to create a shadow effect; this class is multi-functional and can also render glowing effects as well as shadow effects.
The trick is to set its Color property to a color other than black and its BlurRadius property to a larger value than we would typically use when creating a shadow effect. In this particular case, we set the Direction property to 270 and the ShadowDepth property to 4 in order to position the glow effect toward the bottom of the border, where the light is supposed to be coming from.
Unfortunately, this effect does not translate to grayscale and paper well, so the glowing effect is somewhat lost when not viewed in color and on screen. For readers of the e-book version of this book, here is what the glowing effect from our example looks like:
