Design Parameter Storage and Retrieval
Naturally you want every project to improve on any previous version so in this case we decided to add a feature which allows a user to save the parameters for a given design and then later to retrieve that design. Of course, the repository for these design parameters is a SQL Server database.

The database design to store the information required to permit a user to retrieve a stored imprint design is relatively simple. All that was needed was a single table which contained each of the various design parameters (product color, imprint color, font family, etc.)

Figure 5. SQL Server Table for Storing Design Parameters

Silverlight 2 Code for Popup Control

<!-- Popup to display stored links -->
<Popup x:Name="popDisplayStoredLinks">
<Grid x:Name="grdDisplayStoredLinks" Background="#007799aa">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" BorderThickness="2" Background="WhiteSmoke"
CornerRadius="15" Grid.Column="1"
Grid.Row="1">
<StackPanel
Margin="8" Width="330" >
<StackPanel
Orientation="Vertical">
<TextBlock
Margin="5,5,0,5"
HorizontalAlignment="Center"
FontFamily="Comic Sans MS"
FontSize="22" >
Saved Designs for </TextBlock>
<TextBlock
x:Name="txbDisplayStoredLinksUserID"
Margin="0,0,5,5"
HorizontalAlignment="Center"
FontFamily="Comic Sans MS"
FontSize="22"
Text="UserIDHere" />
</StackPanel>
<ListBox x:Name="lstSavedDesigns" SelectionChanged
="lstSavedDesigns_SelectionChanged"
MouseLeftButtonUp="lstSavedDesigns_MouseLeftButtonUp"
Margin="10" />
<Button
x:Name="btnPopCancelDisplayStoredLinks"
Click="btnPopCancelDisplayStoredLinks_Click"
Margin="5"
Content="Cancel" Width="100"
HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</StackPanel>
</Border>
</Grid>
</Popup> }
//This popup window is triggered
by setting its IsOpen property to true
void webService_GetDesignsByUserIdCompleted(object
sender, CustomerDesignsServiceReference.GetDesigns
ByUserIdCompletedEventArgs e)
{
if (_dbOperationsStatus[e.UserState.ToString()] ==
_dbOperationStatus.Canceling)
{
_dbOperationsStatus[e.UserState.ToString()] =
_dbOperationStatus.Canceled;
}
else
{
try
{
RetrievalCircleAnimation.Stop();
brdWaitAnimationRetrieveStoredLinks.Opacity = 0;
m_dtDatabaseRetrievalTimeout.Stop();
//Check to see how many results have
been returned
//If no results, display an error message
in the existing form
if (e.Result.Length < 1)
{
_dbOperationsStatus[e.UserState.ToString()] =
_dbOperationStatus.Selected;
txbRetrieveStoredLinksResults.Text = "No artwork
found for UserID "
+ txtRetrievalUserID.Text;
btnRetrieveStoredLinksMaskClose.Content = "Close";
return;
}
//If there is only one result, just display the
saved design immediately
else if (e.Result.Length == 1)
{
_dbOperationsStatus[e.UserState.ToString()] =
_dbOperationStatus.Selected;
RetrieveStoredLinksMask.Visibility = Visibility.Collapsed;
popRetrieveStoredLinks.IsOpen = false;
m_cdSavedDesigns = e.Result.ToList();
DisplaySavedDesign(0);
}
else if (e.Result.Length > 1)
{
_dbOperationsStatus[e.UserState.ToString()] =
_dbOperationStatus.Selected;
//If there are multiple results, save each record to a
CustomerDesign object and put a link in the
Display Stored Links popup
RetrieveStoredLinksMask.Visibility = Visibility.Collapsed;
m_cdSavedDesigns = e.Result.ToList();
lstSavedDesigns.ItemsSource = m_cdSavedDesigns;
lstSavedDesigns.DisplayMemberPath = "DesignName";
popRetrieveStoredLinks.IsOpen = false;
popDisplayStoredLinks.VerticalOffset =
(MainImageViewer.ActualHeight / 2)
- (174 / 2) + HeaderImage.ActualHeight - 25;
popDisplayStoredLinks.HorizontalOffset =
(HeaderImage.ActualWidth / 2)
- (350 / 2);
popDisplayStoredLinks.IsOpen = true;
txbDisplayStoredLinksUserID.Text = e.Result[0].UserID.ToString();
}
}
catch (System.Exception ex)
{
_dbOperationsStatus[e.UserState.ToString()] = _dbOperationStatus.Failed;
txbRetrieveStoredLinksResults.Text = "An Error occurred while
retrieving your artwork. Please try again.";
btnRetrieveStoredLinksMaskClose.Content = "Close";
btnRetrieveStoredLinksMaskClose.Focus();
Console.WriteLine(ex.Message);
}
}

Wait Animation
Since the process of communicating with a database located on a remote server is subject to the vagaries of the Internet, we decided to build a wait animation to request a user's patience while data is being saved or retrieved. A popular design these days for wait animations involves a series of circles themselves arranged in a circle. Each participating circle changes either its color or opacity in sequence with its partners, giving the effect of a Ferris wheel spinning around.

Figure 7.

Silverlight 2 Wait Animation

<!-- Wait Animation -->
<Grid
x:Name="RetrieveStoredLinksMask" Visibility="Collapsed" >
<Rectangle
Fill="Black" Opacity=".7" RadiusX="13" RadiusY="13"/>
<StackPanel >
<Border x:Name="brdWaitAnimationRetrieveStoredLinks"
BorderThickness="0"
BorderBrush="#FF000000"
Margin="0,40,0,20"
Height="64"
Width="64" >
<Border.Background>
<LinearGradientBrush
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop
Color="#FF7A7777"/>
<GradientStop
Color="#FF181717" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid
ShowGridLines>="False" >
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="Auto" />
<ColumnDefinition
Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition
Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition
Height="Auto" />
<RowDefinition
Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Ellipse x:Name
="waitAnimationCircle1" Grid.Row
="3" Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,-10,0,0"
Height="16" Width="16" Fill="White" />
<Ellipse x:Name="waitAnimationCircle2"
Grid.Row="1"
Grid.Column="0" Margin="6,2,0,0"
Height="16"
Width="16" Fill="#FFA7A6A6" />
<Ellipse x:Name="waitAnimationCircle3"
Grid.Row="0"
Grid.Column="1" 
Grid.ColumnSpan="2"
Margin="0,0,0,-10" Height="16"
Width="16" Fill="#FFA7A6A6" />
<Ellipse x:Name
="waitAnimationCircle4"
Grid.Row="1"
Grid.Column="3"
Margin="0,0,6,0"
Height="16"
Width="16" Fill="#FFA7A6A6" />
<Ellipse x:Name
="waitAnimationCircle5"
Grid.Row="2"
Grid.Column="3"
Margin="0,0,6,0"
Height="16"
Width="16" Fill="#FFA7A6A6" />
<
Ellipse x:Name
="waitAnimationCircle6" Grid.Row="2"
Grid.Column="0"
Margin="6,2,0,0"
Height="16"
Width="16" Fill="#FFA7A6A6" />
</Grid>
</Border>
<Border
Background="White"
CornerRadius="5"
Margin="20" >
<TextBlock
x:Name="txbRetrieveStoredLinksResults"
HorizontalAlignment="Center"
TextWrapping="Wrap"
Text=""
Foreground="Black"
TextAlignment="Center" />
</Border>
<Button x:Name="btnRetrieveStoredLinksMaskClose" Click
="btnRetrieveStoredLinksMaskClose_Click"
HorizontalAlignment="Center" Margin="20"
Width="100" Content="Cancel"></ Button>
</StackPanel>
</Grid><!
--End of Wait Animation -->
//This wait animation can be started by calling its Begin() method
and later stopped by calling its Stop() method. 
RetrievalCircleAnimation.Begin();
...
RetrievalCircleAnimation.Stop();

Building WPF/Silverlight animations is the forte of Expression Blend. In this case, the animation uses keyframes which change the color of the little circles to create the spinning effect. A useful technique for building an animation which will be incorporated into a much larger project is to create a separate Silverlight project with Blend and then once the animation has been refined, to transfer it into the main project.

Figure 8. Expression Blend Timeline for Wait Animation

Expression Blend Animation to Retrieve Designs Popup

<!-- Wait Animation for Retrieve Designs Popup -->
<Storyboard x:Name
="RetrievalCircleAnimation"
RepeatBehavior="Forever"
SpeedRatio=".25">
<ColorAnimationUsingKeyFrames
Storyboard.TargetName
="waitAnimationCircle6"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)"  BeginTime="00:00:00">
<SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#FFFFFFFF"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFA7A6A6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="waitAnimationCircle1"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)"  BeginTime="00:00:00">
<SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#FFA7A6A6"/>
<SplineColorKeyFrame KeyTime="00:00:00.6000000" Value="#FFFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="waitAnimationCircle2"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00">
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFFFFFFF"/>
<SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#FFA7A6A6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="waitAnimationCircle3"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)"  BeginTime="00:00:00">
<SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#FFFFFFFF"/>
< SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFA7A6A6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="waitAnimationCircle4"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)"  BeginTime="00:00:00">
<SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFFFFFFF"/>
<SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFA7A6A6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="waitAnimationCircle5"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00">
<SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFFFFFF"/>
<SplineColorKeyFrame KeyTime="00:00:00.6000000" Value="#FFA7A6A6"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>