title: javascript XAML Flashing background
body: <p>I am trying to modify something someone else wrote.  I don't have very much knowledge of xaml, but my searching and attempts to combine what I have found to try and accomplish this have lead me to what you will see below.  </p>
  
  <p>We have a webpage the uses Silverlight to show several statistics.</p>
  
  <p>I am trying to create an alert that flashes once we change a value in an rss feed.</p>
  
  <p>I have got it so that the background color changes, but doesn't flash.  When I try to un comment my additions to the xaml the rest of the page loads but it gives me an error for this portion.  Any help would be awesome and teach me something I am sure.</p>
  
  <pre><code>    function ContentALRT(comp, sender) {
      var rss = GetRSS(comp.Sources[0]);  //GETRSS() IS IN AJAX.JS
      var xaml = '&lt;Canvas&gt;&lt;TextBlock Text="error" /&gt;&lt;/Canvas&gt;';
      if (rss.error == "") {
          var cGradient = '&lt;Rectangle.Fill&gt;&lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;&lt;GradientStop Color="' + theme.Color.ButtonGradient1 + '" Offset="0.0" /&gt;&lt;GradientStop Color="' + theme.Color.ButtonGradient2 + '" Offset="1.0" /&gt;&lt;/LinearGradientBrush&gt;&lt;/Rectangle.Fill&gt;';
  //  Commented out for future use to preserve gradient   var alertGradient1 = '&lt;Rectangle.Fill&gt;&lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;&lt;GradientStop Color="#C2F0C2" Offset="0.0" /&gt;&lt;GradientStop Color="#248F24" Offset="1.0" /&gt;&lt;/LinearGradientBrush&gt;&lt;/Rectangle.Fill&gt;';
  //  Commented out for future use to preserve gradient   var alertGradient2 = '&lt;Rectangle.Fill&gt;&lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;&lt;GradientStop Color="' + theme.Color.AlertMidGradient + '" Offset="0.0" /&gt;&lt;GradientStop Color="' + theme.Color.AlertDarkGradient + '" Offset="1.0" /&gt;&lt;/LinearGradientBrush&gt;&lt;/Rectangle.Fill&gt;';
  //  Commented out for future use to preserve gradient   var alertGradient3 = '&lt;Rectangle.Fill&gt;&lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;&lt;GradientStop Color="#FFB2B2" Offset="0.0" /&gt;&lt;GradientStop Color="#800000" Offset="1.0" /&gt;&lt;/LinearGradientBrush&gt;&lt;/Rectangle.Fill&gt;';
  //  These gradients are to be used for "Flat" colors
          var alertGradient1 = '&lt;Rectangle.Fill&gt;&lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;&lt;GradientStop Color="#006600" Offset="0.0" /&gt;&lt;GradientStop Color="#006600" Offset="1.0" /&gt;&lt;/LinearGradientBrush&gt;&lt;/Rectangle.Fill&gt;';
          var alertGradient2 = '&lt;Rectangle.Fill&gt;&lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;&lt;GradientStop Color="#E68A00" Offset="0.0" /&gt;&lt;GradientStop Color="#E68A00" Offset="1.0" /&gt;&lt;/LinearGradientBrush&gt;&lt;/Rectangle.Fill&gt;';
          var alertGradient3 = '&lt;Rectangle.Fill&gt;&lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;&lt;GradientStop Color="#B22400" Offset="0.0" /&gt;&lt;GradientStop Color="#B22400" Offset="1.0" /&gt;&lt;/LinearGradientBrush&gt;&lt;/Rectangle.Fill&gt;';
          var glassGradient = '&lt;Rectangle.Fill&gt;&lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;&lt;GradientStop Color="#9FFF" Offset="0.0" /&gt;&lt;GradientStop Color="#2FFF" Offset="1.0" /&gt;&lt;/LinearGradientBrush&gt;&lt;/Rectangle.Fill&gt;';
          var iSlot = sender.findName("Slot" + comp.Slot);
          var iWidth = iSlot.Width - iSlot.Width / 5;
          //var FlashColor1 = "#B22400";
          //var FlashColor2 = theme.Color.ButtonGradient1;
          //comp.Update = "999999";
  
          var aData = rss.items[0].description.split(":");
          var gradient = cGradient;
          var font_color = theme.Color.BodyText;
          var title = rss.items[0].title;
          var alert = parseInt(aData[1]);
          //window.alert(aData[1]);
  
          if (alert &gt; 0) {
              gradient = alertGradient3;
              }
          else{
              gradient = alertGradient1;
              }
  //          
  //          if (parseInt(aData[1].substring(13,14)) &gt; 0) {
  //              //IF CALL HAS BEEN ON HOLD LONGER THAN 0 SECONDS...
  //          
  //              GlobalAlert = true;                     
  //          }
  
          xaml = '&lt;Canvas&gt;';
          xaml += '&lt;Rectangle Height="' + iSlot.Height + '" Width="' + iSlot.Width + '" RadiusX="8" RadiusY="8" Stroke="' + theme.Color.ButtonBorder + '" StrokeThickness="' + theme.Size.BorderSize + '" &gt;';
          xaml += gradient + '&lt;/Rectangle&gt;';
          if (options.glass == "true") {
              xaml += '&lt;Rectangle Canvas.Top="1" Canvas.Left="1" Height="' + (iSlot.Height / 2) + '" Width="' + (iSlot.Width - 2) + '" RadiusX="5" RadiusY="5" &gt;';
              xaml += glassGradient + '&lt;/Rectangle&gt;';
          }
          xaml += '&lt;Canvas Canvas.Top="' + theme.Size.InnerMargin + '" Canvas.Left="' + theme.Size.InnerMargin + '" Width="' + (iSlot.Width - (theme.Size.InnerMargin * 2)) + '" &gt;';
          xaml += '&lt;TextBlock Text="[' + title + ' Queue]" Foreground="' + font_color + '" FontFamily="' + theme.Style.Font + '" FontSize="' + theme.Size.BodyText + '" Loaded="CenterTextHorizontal" /&gt;';
          xaml += '&lt;Canvas Canvas.Top="' + (theme.Size.BodyText * 1.6) + '" Width="' + (iSlot.Width - (theme.Size.InnerMargin * 2)) + '" &gt;';
          for (var j = 0; j &lt; aData.length; j++) {
              xaml += '&lt;Canvas Canvas.Top="' + (theme.Size.TitleText * j) + '" Width="' + (iSlot.Width - (theme.Size.InnerMargin * 2)) + '" &gt;';
              xaml += '&lt;TextBlock Text="' + aData[j] + '" Foreground="' + font_color + '" FontFamily="' + theme.Style.Font + '" FontSize="' + theme.Size.TitleText + '" FontWeight="Bold" Loaded="CenterTextHorizontal" /&gt;';
              xaml += '&lt;/Canvas&gt;';
          }
  
  //      xaml += '&lt;BeginStoryboard&gt;&lt;Storyboard&gt;';
  //      xaml += '&lt;ColorAnimation Storyboard.TargetProperty=("Rectangle") Duration="0:0:0.2" From="' + cGradient + '" To="' + gradient + '" RepeatBehavior="3x" AutoReverse="True"/&gt;';
  //      xaml += '&lt;/Storyboard&gt;&lt;/BeginStoryboard&gt;';
          xaml += '&lt;/Canvas&gt;&lt;/Canvas&gt;&lt;/Canvas&gt;';
      }
      return xaml;
  </code></pre>
  
  <p>}</p>
  
  <p>The last commented out section is what I added.  I i remove the comments I get an error about the xaml being incorrect.</p>