As businessmen who also happen to be developers, we're constantly on the lookout for technology to help us market and sell our "DrinkMate" product. A DrinkMate, in case you were wondering, is a little plastic clip that slips onto the side of your plate at a party which lets you hold both your plate and your glass in the same hand (Figure 1). Unless you see it or have used one, it is difficult to illustrate what a DrinkMate is, much less for someone to visualize how one might customize it for use in their own event, such as the name of the bride and groom imprinted on a DrinkMate for a wedding.

Figure 1. A Sample DrinkMate (the black widget holding the glass and plate together).

With Microsoft's Silverlight technology, we immediately saw the potential to create a rich interface that would help potential customers customize a DrinkMate and easily preview it before purchase. So in the fall of 2007, one of us (Cal) took the first step to implementing Silverlight on our DrinkMate.com web site. This first use of Silverlight was to allow site visitors the ability to offer proofing for standard imprints onto the DrinkMate itself. It was a useful first effort but it immediately left users—and us—wanting more. (You can see the Silverlight 1.0 project at www.drinkmate.com/standardimprints/.)

Shortly before the Silverlight Standard Imprint project, Cal had created a related feature to offer live proofing of wedding imprints from the DrinkMate website using XBAP (XAML Browser Application Project) technology. A working version of this XBAP is available at www.drinkmate.com/weddingproofs/ (see Figure 2). This project was also the subject of an MSDN Webcast last summer.

Figure 2. Drink Mate Wedding Proofs (original XBAP application).

This XBAP had its shortcomings—namely users were limited to the Windows platform and were required to download and install Version 3.0 or 3.5 of the .NET Framework for the XBAP to work. With the release of Silverlight 2, we saw the ability to migrate the XBAP to a cross-platform run-time environment and eliminate the need for users to have the .NET Framework. We were also very interested to find out how much easier (or more difficult) it would be to use Silverlight 2 than Silverlight 1.0 and likewise to make the same comparison with the full version of WPF which was used when creating the original XBAP application.

With support for managed code in Silverlight 2, we also wanted to add the functionality of allowing users to save and recall their designs for display later. This meant tying Silverlight to a SQL Server database and storing user provided data—which is one of the things for which Silverlight 2 was designed.

Almost all of our DrinkMates are sold with an imprint of some sort. Those which are used at weddings typically include the names of the bride and groom along with the date of the wedding, as is illustrated in Figure 2. The purpose of this Silverlight 2 application is to allow a prospective couple to conveniently preview various combinations of designs with different product and imprint colors, fonts and layout options, save their selections and recall them later on. In this walkthrough, we'll show you how we went about creating this application in Silverlight 2.

Getting Started with Silverlight 2—the Steps
To build this new application in Silverlight 2, we did the following:

• Since we already had a layout of the wedding imprint feature in the earlier XBAP version of this application as well as an alternate layout for a very similar feature in the Drink Mate Standard Imprint viewer, our first step was to choose which design to emulate and then build the selected layout using Silverlight 2.
• Next we built the basic functionality of this application using C# event handlers.
• In order to save design parameters for later retrieval, we designed and built a SQL Server database.
• After creating this database, we built a user interface to save and retrieve designs using Silverlight Popup controls.
• Then we created a WCF Web Service to be hosted by a web application running on our web server which could communicate with our SQL Server database.
• Finally we worked through the process of actually deploying our application to a live remote web server.

To see the actual application in action, you can go to www.drinkmate.com/devx1.

The Normal Beta Software Disclaimer
This project was initially built using Silverlight 2 Beta 1. As with any beta code, later releases often contain breaking changes to bedevil applications written against earlier beta versions. Pursuant to Murphy's Law, Silverlight 2 Beta 2 was released just days before the scheduled publication of this article, so we revised the application (and this article) to make the application fully Beta 2 compliant.

On the bright side, later releases also tend to fix known issues such as an anomaly relating to popup windows using textboxes for user entry. Be sure to check back here for any project updates any time Silverlight 2 gets further updated.

Another issue whenever working with beta software is that not everything works exactly as desired. For example, see the following lists of known Beta 1 issues in articles by Michael Sync, Shawn Wildemuth and Delay. Silverlight Beta 2 known issues can be found in the Silverlight forums, in the comments section of Scott Guthrie's Silverlight Beta 2 post, in the comments sections of these Tim Anderson blog posts Upgrading to Silverlight 2, Silverlight, VS Setup Hassles and in this Tim Heuer blog post.

That said, we found working with Silverlight 2 to be very rewarding. There is no doubt that this is extremely promising technology. And the advantage of delving into Silverlight right now is that it's a technology which Microsoft seems very serious about promoting. The next release is expected to include over a hundred new controls. Market awareness of Silverlight will explode during the 2008 Beijing Summer Olympics when NBC is set to host thousands of hours of interactive videos on their web site using Silverlight. If you care about making yourself a more marketable programmer, learning Silverlight earlier than your peers should be a great strategy.

Layout & UI Design
We began the layout design by choosing to emulate the Standard Imprints design rather than the earlier XBAP design. Notwithstanding the enormously improved XAML designer in Visual Studio 2008, we found Expression Blend (March Preview) indispensable for working with layout. The principal difficulty with using VS 2008 for layout at this time is that its XAML designer is read only and you cannot drag and drop controls from the toolbox to the design surface or reposition the controls once you put them there. While that shortcoming should be rectified in the not-too-distant future when Service Pack 1 is released, it was simply easier to use Blend for this aspect of the project. But when it comes to writing or editing the XAML itself, VS 2008's IntelliSense is a huge advantage, which hopefully will be included in some future release of Blend.

When we built the Standard Imprints project, the set of controls available in Silverlight 1.0 didn't include Borders so we were forced to use Lines to outline the Image controls. This time with Silverlight 2, we were able to use Borders which turned out to be considerably easier than using Lines.

Silverlight 2 Border Example

<Border Grid.Row="2" Grid. Column="2" Width="160" BorderBrush="Black"  BorderThickness
="1,1,2,1" >
    < Grid><!-- Black -->
        <  Image x:Name="BackThumbViewer2"  Width="160" Stretch="Uniform" 
MouseLeftButtonDown="BackThumbViewer2_MouseLeftButtonDown"
            
MouseEnter="ProductColorViewer_MouseEnter" 
MouseLeave="ProductColorViewer_MouseLeave" 
Source="BackgroundImages/BlackLandscape640.jpg"   />
        <  TextBlock x:Name="txbBlack" Text="Black" Margin="0,0,2,0"
            FontSize="14" FontFamily="Comic Sans MS" VerticalAlignment="Bottom" 
Height="20" Width="54" HorizontalAlignment="Right"  />
    </ Grid>
</ Border>

One of the first problems encountered was that at this point the set of controls available in Silverlight 2 does not include a combo box. So Joe built one for us. Here are the steps required to build your own control:

1. Review some relevant tutorials such as:
   • Jesse Liberty's User Control Tutorial
• Chris Sells "Show Me the Template" WPF Visual Studio Project


2. Determine the visual appearance which you want your control to have. A typical combobox, for example, consists of a textbox, a toggle button and a listbox. Joe initially tried using a Popup window but concluded that at this stage Popups are just too buggy, so he chose a listbox instead. The choice of a toggle button (versus a regular button) was to provide a different appearance not just while the IsPressed property is true but also for as long as the list box is displayed. It also made it possible to display or hide the list box by responding to the Checked and Unchecked events of the toggle button.


3. Find the Styles (which also contain the Control Templates) for the controls you wish to integrate into your user control in the Silverlight documentation. To customize these styles, copy the XAML you found in the documentation to the appropriate resource section in your project (making sure to add an x:Key), make the desired changes and then assign the styles via the "Style" property. The majority of changes you likely will wish to make will be contained in the ControlTemplate section of each style.
   
   The following code sample illustrates how the Microsoft ToggleButton Control Template was modified to conform to the needs to integrate it into the custom combobox used in this project. For example, this customized control template includes an arrow (a vector graphic) and different color states for this arrow (eg. black for normal state, red for mouse over and green for pressed). These characteristics emulate the appearance of the button portion of Microsoft DatePicker control.

While the Control Templates for most of the Silverlight 2 controls are available in the help files or in the Microsoft public source code, unfortunately, the Control Template for the TextBox is not. For this reason, Joe decided to use the WatermarkedTextBox instead.

While the WatermarkedTextBox had the advantage of allowing the "Pick a Font" text to be set as the watermark, it also suffered from an anomaly relating to applying a Style. Silverlight 2 only allows you to set the Style property for a control once. Since Microsoft sets the Style property of the WatermarkedTextBox in its constructor, this makes it impossible to apply a custom style by separately setting the Style property. Fortunately, however it is possible to achieve the desired visual effect by using a custom ControlTemplate.

Silverlight 2 Customized ToggleButton Control Template

<!-- ToggleButton Control Template -->
     <ControlTemplate TargetType="ToggleButton">
     <Grid x:Name="RootElement">
     <Grid.Resources>
<!-- Visual constants used by the template -->
     <Color x:Key="BaseColor">#FF003255</Color>
     <Color x:Key="LinearBevelLightStartColor">#FCFFFFFF
     </Color>     <Color x:Key="LinearBevelLightEndColor">#F4FFFFFF</Color>
     <Color x:Key="LinearBevelDarkStartColor">#E0FFFFFF</Color>
     <Color x:Key="LinearBevelDarkEndColor">#B2FFFFFF</Color>
     <Color x:Key="MouseOverLinearBevelDarkEndColor">
          #7FFFFFFF</Color>
     <Color x:Key="HoverLinearBevelLightStartColor">
          #FCFFFFFF</Color>
     <Color x:Key
          ="HoverLinearBevelLightEndColor">
          #EAFFFFFF</Color>
     <Color x:Key="HoverLinearBevelDarkStartColor">#D8FFFFFF</Color>
     <Color x:Key="HoverLinearBevelDarkEndColor">#4CFFFFFF</Color>
     <Color x:Key="CheckedLinearBevelLightStartColor">#FCFFFFFF</Color>
     <Color x:Key="CheckedLinearBevelLightEndColor">#EAFFFFFF</Color>
     <Color x:Key="CheckedLinearBevelDarkStartColor">#D8FFFFFF</Color>
     <Color x:Key="CheckedLinearBevelDarkEndColor">#4CFFFFFF</Color>
     <Color x:Key="CurvedBevelFillStartColor">#B3FFFFFF</Color>
     <Color x:Key="CurvedBevelFillEndColor">#3CFFFFFF</Color>
     <Color x:Key="HoverPressedCurvedBevelFillStartColor">#6FFFFFFF</Color>
     <Color x:Key="HoverPressedCurvedBevelFillEndColor">#39FFFFFF</Color>
     <Color x:Key="ArrowColor">#FF000000</Color>
     <Color x:Key="ArrowActiveColor">#FF00B300</Color>
     <Color x:Key="ArrowHoverColor">#FFFF0000</Color>
     <SolidColorBrush x:Key="BorderBrush" Color="#FF000000" /> 
     <SolidColorBrush x:Key="AccentBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF" />
     <LinearGradientBrush x:Key="FocusedStrokeBrush" 
          StartPoint="0.5,0"Endpoint="0.5,1">
     <GradientStop Color="#B2FFFFFF" Offset="0" />
     <GradientStop Color="#51FFFFFF" Offset="1" />
     <GradientStop Color="#66FFFFFF" Offset="0.325" />
     <GradientStop Color="#1EFFFFFF" Offset="0.325" />
     </LinearGradientBrush>
     </Grid.Resources>
<!-- Visual states of the togglebutton template -->
     <vsm:VisualStateManager.VisualStateGroups>
     <vsm:VisualStateGroup x:Name="CheckedMouseStates">
     <vsm:VisualState x:Name="MouseLeave">
     <Storyboard>
     <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="ArrowBrush" 
     Storyboard.TargetProperty="Color" To="{StaticResource
     ArrowColor}" />
     </Storyboard>
     </vsm:VisualState>

     <vsm:VisualState x:Name="MouseEnter">
     <Storyboard>
     <ColorAnimation Duration="0:0:0.1" 
Storyboard.TargetName="ArrowBrush" 
     Storyboard.TargetProperty="Color" To="{StaticResource 
ArrowHoverColor}" />
     </Storyboard>
     </vsm:VisualState>
     </vsm:VisualStateGroup>
     <vsm:VisualStateGroup x:Name="CommonStates">
     <vsm:VisualStateGroup.Transitions>
     <vsm:VisualTransition To="MouseOver" Duration="0:0:0.2" />
     <vsm:VisualTransition To="Pressed" Duration="0:0:0.1" />
     </vsm:VisualStateGroup.Transitions>
     <vsm:VisualState x:Name="Normal" />

     <vsm:VisualState x:Name="MouseOver">
     <Storyboard>
     <ColorAnimation Storyboard.TargetName="LinearBevelDarkEnd" 
Storyboard.TargetProperty="Color" To="{StaticResource
MouseOverLinearBevelDarkEndColor}"
Duration="0" />
     </Storyboard>
     </vsm:VisualState>
     <vsm:VisualState x:Name="Pressed">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="LinearBevelLightEnd" 
Storyboard.TargetProperty="Offset" To=".2" Duration="0" />
     <ColorAnimation Storyboard.TargetName="LinearBevelLightStart"
Storyboard.TargetProperty="Color" To="{
StaticResource HoverLinearBevelLightEndColor}"
Duration="0" /><ColorAnimation Storyboard.TargetName="LinearBevelLightEnd" 
Storyboard.TargetProperty="Color" To="{
StaticResource
HoverLinearBevelLightEndColor}" 
Duration="0" />
     <ColorAnimation Storyboard.TargetName="LinearBevelDarkStart" 
Storyboard.TargetProperty="Color" To="{
StaticResource HoverLinearBevelDarkStartColor}"Duration="0" />
     <ColorAnimation Storyboard.TargetName="LinearBevelDarkEnd" 
Storyboard.TargetProperty="Color" 
To="{
StaticResource HoverLinearBevelDarkEndColor}" Duration="0" />
      <DoubleAnimation Storyboard.TargetName="DownStroke" 
Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
     </Storyboard>
     </vsm:VisualState>
     <vsm:VisualState x:Name="Disabled">
     <Storyboard>
     <Storyboard.TargetName="DisabledVisual" 
Storyboard.TargetProperty="Opacity" 
To="1" Duration="0" />
     </Storyboard>
     </vsm:VisualState>
     </vsm:VisualStateGroup>
     <vsm:VisualStateGroup x:Name="CheckStates">
     <vsm:VisualStateGroup.Transitions>
     <vsm:VisualTransition Duration="0:0:0.1" />
     </vsm:VisualStateGroup.Transitions>
     <vsm:VisualState x:Name="Checked">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="DownStroke" 
Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
     <DoubleAnimation Storyboard.TargetName="FocusVisualElement" 
Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
     <ColorAnimation  Storyboard.TargetName="ArrowBrush" 
Storyboard.TargetProperty="Color" To="{
StaticResource ArrowActiveColor}" Duration="0"/>
     </Storyboard>
     </vsm:VisualState>
     <vsm:VisualState x:Name="Unchecked">
      <Storyboard>
      <DoubleAnimation Storyboard.TargetName="LinearBevelLightEnd"
Storyboard.TargetProperty ="Offset" To="0.35" Duration="0" />
     </Storyboard>
     </vsm:VisualState>
     <vsm:VisualState x:Name="Indeterminate">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="LinearBevelLightEnd" 
Storyboard.TargetProperty ="Offset" To="0.2" 
Duration="0" />
     <DoubleAnimation Storyboard.TargetName
="IndeterminateNormal" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
     </Storyboard>
      </vsm:VisualState>
     </vsm:VisualStateGroup>
     <vsm:VisualStateGroup x:Name="FocusStates">
     <vsm:VisualState x:Name="Focused">
     <Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName
="FocusVisualElement" 
Storyboard.TargetProperty="Visibility"Duration="0">
     <DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
     </DiscreteObjectKeyFrame>
     </ObjectAnimationUsingKeyFrames>
     </Storyboard>
     </vsm:VisualState>
     <vsm:VisualState x:Name="Unfocused">
     <Storyboard>
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName
="FocusVisualElement" 
Storyboard.TargetProperty="Visibility"Duration="0">
     <DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value><Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
     </ObjectAnimationUsingKeyFrames>
     </Storyboard>
     </vsm:VisualState>
     </vsm:VisualStateGroup>
     </vsm:VisualStateManager.VisualStateGroups>
     <Rectangle RadiusX="1" 
RadiusY="1" Margin="1,2,1.5,2" StrokeThickness="1">
     <Rectangle.Fill>
     <LinearGradientBrush StartPoint="0.7,0" Endpoint="0.7,1">
     <GradientStop x:Name="LinearBevelLightStart" Color="{
StaticResource LinearBevelLightStartColor}" Offset="0" />
     <GradientStop x:Name="LinearBevelLightEnd" Color="{
StaticResource LinearBevelLightEndColor}" Offset="0.35" />
     <GradientStop x:Name="LinearBevelDarkStart" Color="{
StaticResource LinearBevelDarkStartColor}" Offset="0.35" />
     <GradientStop x:Name="LinearBevelDarkEnd" 
Color="{
StaticResource LinearBevelDarkEndColor}" Offset="1" />
     </LinearGradientBrush>
     </Rectangle.Fill>
     </Rectangle>
     <Grid x:Name="CurvedBevelScale" Margin="2">
     <Grid.RowDefinitions>
     <RowDefinition Height="7*" />
     <RowDefinition Height="3*" />
     </Grid.RowDefinitions>
      <Path x:Name="CurvedBevel" Stretch="Fill" Margin="1.5,1,1.5,2" 
Data="F1 M0,0.02 L0,0.15 
C0.15,0.22 0.3,0.25 0.5,0.25 0.7,0.25 0.85,
0.22 1,0.15 L1,0.02 1,0 0.02,0 0,0.02 z">
     <Path.Fill>
      <LinearGradientBrush StartPoint="0.5,0" Endpoint="0.5,1">
     <GradientStop x:Name="CurvedBevelFillStart" Color="{
StaticResource CurvedBevelFillStartColor}" Offset="0" />
     <GradientStop x:Name="CurvedBevelFillEnd" Color="{
StaticResource CurvedBevelFillEndColor}" Offset="1" />
     </LinearGradientBrush>
     </Path.Fill>
     </Path>
     </Grid>
     <Grid x:Name
="FocusVisualElement" Visibility="Collapsed">
     </Grid>
     <Grid x:Name="CheckedNormal" Opacity="0">
     <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2.5,1.5,1.5" />
     <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2.25,1.5,1.5" />
     <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2,1.5,1.5" />
     <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,1.75,1.5,1.5" />
     <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="1" Margin="1" />
      <Rectangle RadiusX="1" 
RadiusY="1" StrokeThickness="1" Margin="1" >
     <Rectangle.Stroke>
     <LinearGradientBrush Endpoint="0.5,1" StartPoint="0.5,0">
     <GradientStop Color="#A5FFFFFF" Offset="0" />
     <GradientStop Color="#FFFFFFFF" Offset="1" />
     </LinearGradientBrush>
     </Rectangle.Stroke>
     </Rectangle>
     </Grid>
     <Grid x:Name="CheckedPressed" Opacity="0">
     <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2.5,1.5,1.5" />
     <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2.25,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2,1.5,1.5" />
     <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,1.75,1.5,1.5" />
     <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="1" Margin="1" />
     <Rectangle RadiusX="1" 
RadiusY="1" StrokeThickness="1" Margin="1">
     <Rectangle.Stroke>
     <LinearGradientBrush Endpoint="0.5,1" StartPoint="0.5,0">
     <GradientStop Color="#A5FFFFFF" Offset="0" />
     <GradientStop Color="#FFFFFFFF" Offset="1" />
     </LinearGradientBrush>
      </Rectangle.Stroke>
      </Rectangle>
     </Grid>
     <Grid x:Name="IndeterminateNormal" Opacity="0">
      <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2.5,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2.25,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,1.75,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="1" Margin="1" />
     <Rectangle RadiusX="1" 
RadiusY="1" StrokeThickness="1" Margin="1">
     <Rectangle.Stroke>
     <LinearGradientBrush Endpoint="0.5,1" StartPoint="0.5,0">
     <GradientStop Color="#A5FFFFFF" Offset="0" />
      <GradientStop Color="#FFFFFFFF" Offset="1" />
      </LinearGradientBrush>
      </Rectangle.Stroke>
      </Rectangle>
       </Grid>
       <Grid x:Name="IndeterminatePressed" Opacity="0">
      <Rectangle Stroke="{TemplateBinding Background}"  RadiusX="1" 
RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2.5,1.5,1.5" />
     <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1"
RadiusY="1"StrokeThickness="1"Opacity="0.05" Margin="1.5,2.25,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1"
RadiusY="1"StrokeThickness="1"Opacity="0.05" Margin="1.5,2,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1"
RadiusY="1"StrokeThickness="1"Opacity="0.05" Margin="1.5,1.75,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1"
RadiusY="1"StrokeThickness="1"Opacity="1"Margin="1" />
     <Rectangle RadiusX="1"
RadiusY="1"StrokeThickness="1"Margin="1">
      <Rectangle.Stroke>
      <LinearGradientBrush Endpoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#A5FFFFFF" Offset="0" />
      <GradientStop Color="#FFFFFFFF" Offset="1" />
      </LinearGradientBrush>
      </Rectangle.Stroke>
      </Rectangle>
      </Grid>
      <Grid x:Name="DownStroke" Opacity="0">
      <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1"
RadiusY="1"StrokeThickness="1"Opacity="0.05" Margin="1.5,2.5,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1"
RadiusY="1"StrokeThickness="1"Opacity="0.05" Margin="1.5,2.25,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1"
RadiusY="1"StrokeThickness="1"Opacity="0.05" Margin="1.5,2,1.5,1.5" />
     <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1"
RadiusY="1"StrokeThickness="1"Opacity="0.05" Margin="1.5,1.75,1.5,1.5" />
      <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1"
RadiusY="1"StrokeThickness="1"Opacity="1" Margin="1" />
     <Rectangle RadiusX="1" 
RadiusY="1" StrokeThickness="1" Margin="1">
     <Rectangle.Stroke>
     <LinearGradientBrush Endpoint="0.5,1" StartPoint="0.5,0">
     <GradientStop Color="#A5FFFFFF" Offset="0" />
     <GradientStop Color="#FFFFFFFF" Offset="1" />
     </LinearGradientBrush>
     </Rectangle.Stroke>
     </Rectangle>
     </Grid>
<!-- ToggleButton content -->
     <Grid>
      <Path Margin="0,0,0,0" HorizontalAlignment="Center" 
VerticalAlignment="Center" Data="M 0,0 L 3.5,4 L 7,0 Z">
      <Path.Fill>
     <SolidColorBrush x:Name="ArrowBrush" Color="{
StaticResource ArrowColor}"/>
     </Path.Fill>
      </Path>
      </Grid>
     </Grid>
      </ControlTemplate>