XAML Graphics Series - Part 2 Silverlight 2.0 Desktop Art Animation

Article Index Rating:
- Developer            (5) of 5      (Intermediate)
- Architect             (2.86) of 5  (Beginner)
- Graphic Designer   (2.38) of 5  (Beginner)

• Download Article_Demo.zip - 2.28 MB
• Download Article_Src.zip - 555.15 KB
• Download Common - 1.1 MB

Table of Contents

• Introduction
• Break Down of Series
• Use Case - Lights! Camera! Action!
• Architectural Design Rules
• Graphic Designer's Actions
• Developer's Actions
• Architect's Actions
• Mock Code Review
• Refectory Steps
• Lessons Learned
• Points of Interest
• External links
• XAML Overlay Prototype Research
• Revision history

Introduction

   In the previous article in this series some goals were outlined.  The main goal of the series is to bridge the gap between all the stakeholders an application under development.  The stakeholders in this scenario are the employees of a low budget  startup company trying to raise capital thru various resources.  These resources are not in the scope of this article and the company has no management to report to.  Due to the limited funds our starving Artist, Developer, and Architect are utilizing rapid application development methodologies for their vapor wear product.  The products purpose is to create a paradigm shift for artists by creating interactive digital works of art for the internet community to consume.

  This series is divided up into sections for: Beginner (no programming experience needed), Intermediate (some programming knowledge helpful), and Advanced (advanced knowledge of programming concepts very helpful) audiences.

Break Down of Series:

  Beginner Series:
  1. Silverlight 1.0 Desktop Art Animation
  2. Silverlight 2.0 Desktop Art Animation
  3. XAML 2d Graphics Concepts
  4. XAML 3d Graphics Concepts

  Intermediate Series:
  5. Dynamic XAML
  6. WPF Application Design and Architecture
  7. Silverlight Application Design and Architecture
  8. Introduction to Advanced Concepts: DirectX, OpenGL, and Filtering

  Advanced Series:
  9. Anatomy of a GPU and how XAML is Optimized for GPU's
  10. GPU Optimization Techniques
  11. Mixing it all Up: DirectX, OpenGL, and More
  12. Bringing Everything Together, an Approach on Designing Custom Graphics Engines

Use Case - Lights! Camera! Action!

 Now the the stage is set for our actors the architecture of the prototype application can be discovered.  In a previous meeting of our actors they identified the graphic designer as the weakest link in their workflow.  Instead of out casting the weakest link 'as seen on TV' they decide to build the application around the designer as they have also identified their role as the principle for the application under development.  The designer tested the tools the company purchased for the development of this application and found that it was not easy to use, as some other tools are.  The designer's chief complaint was the inability to easily take the design and integrate it with the application.  The architect and developer sympathized with the designer and proposed a solution which would maximize the designers effectiveness in being a productive team member.  In this scenario the designer has a background in design and web development as a web master of a popular web site.  The team agrees upon investing resources to develop an in house shell based script utility the designer can use to rapidly integrate their designs into the prototype application base.

Architectural Design Rules

Architectural Rules:
• Code Behind Isolation - No code behind for base XAML (page, window) (host Layer)
• Code Behind Isolation - Code behind preference on resource dictionaries (logic layer)
• Code Behind Isolation - Code behind for user controls event routing preference (event routing)
• Vectorized Image Isolation - Vectorized raster images will be isolated in separate resource dictionaries
• Layer abstraction - Ability to define rules for all abstractions. (code policy enforcement)
• Resource Identity - Resources will be strictly typed in XAML using the x:Type attribute
• RAD - Tools for RAD will automate code and XAML stubs. Generators parse designer level XAML.

Designer Rules:
• Layer abstraction - Ability to graphically isolate custom code thru layer definition
• Shell scripting - Interface for applying code generators via shell script

Developer Rules:
• Layer abstraction - Ability to convert XAML to resources.
• Layer abstraction - Ability to define custom code transformations

Graphic Designer's Actions

Developer's Actions

Architect's ActionsMock Code Review

  After looking over the code the architect notices that the developer made some clumsey mistakes.  First mistake is that the code does not correctly dynamically generate the reference class.  The result is that the reflections code generated the same class over and over agian.  The second mistake is using int(s) for precision math.  Ratios can not be correctly caculated unless floating point precision is used.  The architect also added more code to further understand the dependancies and relationships of the classes in the assembly.  Here is the corrected listing:

/**
 * 
 * XAMLBox.Localizer Class
 * 
 * This class is used for testing the localization and isolation of Framework classes
 * 
 */
 
using System;using System.Threading;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Reflection;
using System.Windows;
 
namespace XAMLBox
{
    
    class Localizer
    {
        static Thread STAThread = new Thread(CastingHitCounter);
        static void Main(string[] args)
        {
 
            STAThread.SetApartmentState(ApartmentState.STA);
            STAThread.Start();
 
        }
 
        private static void CastingHitCounter()
        {
            
            //Create an instance if a base class object in the framwork
            FrameworkElement fe = new FrameworkElement();
            FrameworkContentElement fce = new FrameworkContentElement();
 
            //Get a refrence to the Type to reflect on
            Type t = Type.GetType(fe.GetType().AssemblyQualifiedName);
 
            //Get a refrence to the assembly containing the Type 't' (System.Windows.FrameworkElement)
            Assembly FrameWork = Assembly.GetAssembly(t);
 
            //Create a box for our reflected Class to be used in a loop.
            Object RefClass = new Object();
 
            //Create a box for our reflected Class to be used in a loop.
            Type BaseType;
 
            //Get all types defined in the assembly..
            Type[] TypeArr = FrameWork.GetTypes();
 
            //List of unique base types..
            ArrayList UBaseTypes = new ArrayList(250);
 
            //Total qualified types reported by the assembly...
            double qualifiedTypes = TypeArr.Length;
 
            //Total Class instances created..
            double classCount = 0;
 
            //Total unique base types..
            double baseTypeCount = 0;
 
            //Total Direct FrameworkElement Decendants..
            double fwDdCount = 0;
 
            //Total Direct FrameworkContentElement Decendants..
            double fwcDdCount = 0;
 
            //Total anserstoral FrameworkElements..
            double fwAnsestorCount = 0;
 
            //Total anserstoral FrameworkContentElements..
            double fwcAnsestorCount = 0;
 
            //Sealed Classes..
            double sealedClasses = 0;
 
            //Abstract Classes..
            double abstractClasses = 0;
 
            //Total bad refrence counts..
            double badInstance = 0;
 
            //Total FrameworkElement casts..
            double feCount = 0;
 
            //Total FrameworkContentElement casts..
            double fceCount = 0;
 
            //Total Framework castable classes..
            double castCount = 0;
 
            //Total missed Framework counts..
            double missCount = 0;
 
            //Loop through each Type in the reflected assembly and count casting hits.
            foreach (Type thisType in TypeArr)
            {
                try
                {
                    //Discover ansestory..
                    BaseType = thisType.BaseType;
                    if (UBaseTypes.IndexOf(BaseType) == -1)
                    {
                        UBaseTypes.Add(BaseType);
                        baseTypeCount++;
                    }
 
                    if (thisType.FullName.ToString() == "System.Windows.FrameworkElement")
                        fwDdCount++;
 
                    if (thisType.FullName.ToString() == "System.Windows.FrameworkContentElement")
                        fwcDdCount++;
 
                    if (thisType.IsSubclassOf(fe.GetType()))
                        fwAnsestorCount++;
 
                    if (thisType.IsSubclassOf(fce.GetType()))
                        fwcAnsestorCount++;
 
                    if (thisType.IsSealed)
                        sealedClasses++;
 
                    if (thisType.IsAbstract)
                        abstractClasses++;
 
                    //Create an instance of a the reflected Type
                    Thread.BeginCriticalRegion();
                    RefClass = FrameWork.CreateInstance(thisType.FullName.ToString());
                    
                    try
                    {
                        //Try to cast the reflected type to a FrameworkElement..
                        RefClass = (FrameworkElement)RefClass;
                        
                        //Incriment our counters..
                        feCount++; 
                        castCount++;
 
                        //Try to cast the reflected type to a FrameworkContentElement..
                        RefClass = FrameWork.CreateInstance(thisType.FullName.ToString());
                        RefClass = (FrameworkContentElement)RefClass;
 
                        //Incriment our counters..
                        fceCount++;
                        castCount++;
                    }
                    catch (Exception e)
                    {
                        try
                        {
                            //We missed a reference of type FrameworkElement try to cast it to a FrameworkContentElement..
                            RefClass = (FrameworkContentElement)RefClass;
 
                            //Increment our counters..
                            fceCount++;
                            castCount++;
                        }
                        catch (Exception ex)
                        {
                            //Unable to cast to a Framework type, increment our counter..
                            missCount++;
                        }
                    }
                    finally
                    {
                        //Clean up our box..
                        RefClass = null;
 
                        //Increment Class counter..
                        classCount++;
                    }
                    Thread.EndCriticalRegion();
                }
                catch (Exception e)
                {
                    //Increment Class counter..
                    classCount++;
 
                    //This is not an instance class, increment the counter..
                    badInstance++;
                }
            }
 
            //Report the statistics:
            Console.Out.WriteLine("Total Qualified Types: " + qualifiedTypes);
            Console.Out.WriteLine("Total Qualified Classes: " + classCount);
            Console.Out.WriteLine("Total Cast able FrameWork Types: " + castCount);
            Console.Out.WriteLine("Total Cast able FrameworkElements: " + feCount);
            Console.Out.WriteLine("Total Cast able FrameworkContentElements: " + fceCount);
            Console.Out.WriteLine("Total Unique Base Classes: " + UBaseTypes.Count);
 
            Console.Out.WriteLine("\nTotal Missed Types: " + missCount);
            Console.Out.WriteLine("Total Bad Instances: " + badInstance);
 
            Console.Out.WriteLine("\nTotal Direct Decendants of FrameworkElement: " + fwDdCount);
            Console.Out.WriteLine("Total Direct Decendants of FrameworkContentElement: " + fwcDdCount);
            Console.Out.WriteLine("Total Ansestors of FrameworkElement: " + fwAnsestorCount);
            Console.Out.WriteLine("Total Ansestors of FrameworkContentElement: " + fwcAnsestorCount);
            Console.Out.WriteLine("Total Sealed Classes: " + sealedClasses);
            Console.Out.WriteLine("Total Abstract Classes: " + abstractClasses);
            
            Console.Out.WriteLine("\nQualified Type to Missed Type Ratio: " + ((missCount / qualifiedTypes) * 100));
            Console.Out.WriteLine("FrameworkElement to Qualified Class Ratio: " + ((feCount / classCount) * 100));
            Console.Out.WriteLine("FrameworkContentElement to Qualified Class Ratio: " + ((fceCount / classCount) * 100));
            Console.Out.WriteLine("Bad Instance to Qualified Class Ratio: " + ((badInstance / classCount) * 100));
 
            Console.Out.WriteLine("\nUnique Base Type to Qualified Class Ratio: " + ((UBaseTypes.Count / classCount) * 100));
            
            Console.Out.WriteLine("\nDirect Decendants of FrameworkElement to ClassCount: " + ((fwDdCount / classCount) * 100));
            Console.Out.WriteLine("Direct Decendants of FrameworkContentElement to ClassCount: " + ((fwcDdCount / classCount) * 100));
            Console.Out.WriteLine("Direct Decendants of FrameworkElement to Unique Base Types: " + ((fwDdCount / UBaseTypes.Count) * 100));
            Console.Out.WriteLine("Direct Decendants of FrameworkContentElement to Unique Base Types: " + ((fwcDdCount / UBaseTypes.Count) * 100));
            
            Console.Out.WriteLine("\nAnsestors of FrameworkElement to ClassCount: " + ((fwAnsestorCount / classCount) * 100));
            Console.Out.WriteLine("Ansestors of FrameworkContentElement to ClassCount: " + ((fwcAnsestorCount / classCount) * 100));
            Console.Out.WriteLine("Ansestors of FrameworkElement to Unique Base Types: " + ((fwAnsestorCount / UBaseTypes.Count) * 100));
            Console.Out.WriteLine("Ansestors of FrameworkContentElement to Unique Base Types: " + ((fwcAnsestorCount / UBaseTypes.Count) * 100));
 
            Console.Out.WriteLine("\nError Ratio: " + (((badInstance + missCount) / classCount) * 100));
                //Set brekpodouble here to view the results..
            Console.Out.WriteLine("End of Report");
        }
    }
}
 

 The use of the sparkle effect caused many problems for performance.  However using Silverlight it is not possible to sample any of the colors in the generated image the browser displays.  So it was necessary to create a special filter using Joe Stegman's EditableImage and PngEncode classes.  Link to Joe's WebBlog.  The SparkleFilter class uses 4 image buffers for image processing: AlphaBuffer, SparkleBuffer, Back Buffer, and Cache Buffer.  The alpha buffer contains the instructions for applying an alpha filter, the sparkle buffer contains instructions for applying luminance factors, the back buffer is where the animation is rendered and the cache buffer contains a copy of the original image which is copied to the back buffer at the beginning of each frame to refresh the source image.  A Dictionary<Color, EditableImage> is used to cache composite sparkle buffers for the same colors.  Here is the code for test page:

<UserControl Name="UserControl1" x:Class="SilverlightTestApp.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="500" Height="500" Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <SolidColorBrush x:Key="GreenBrush" Color="#FF00FF00"/>
        <ImageBrush x:Key="IBrushRandom" ImageFailed="ImageBrush_ImageFailed" />
        <SolidColorBrush x:Key="IBrushSparkle1" Color="Red" />
		<SolidColorBrush x:Key="IBrushSparkle2" Color="Blue" />
		<SolidColorBrush x:Key="IBrushSparkle3" Color="Green" />
		<SolidColorBrush x:Key="IBrushSparkle4" Color="#70ff0000" />
		<SolidColorBrush x:Key="IBrushSparkle5" Color="#7000ff00" />
		<SolidColorBrush x:Key="IBrushSparkle6" Color="#700000ff" />
    </UserControl.Resources>

    <Canvas Height="500" Width="500">
		<Rectangle Height="500" Width="500" Fill="#FF000000" Stroke="#FF000000"/>
		<Grid Height="500" Width="500">
			<StackPanel Margin="3,3,0,0">
				<TextBlock x:Name="GreenFade"
					Canvas.Left="5" Canvas.Top="200"  
					FontFamily="Verdana" FontSize="70" FontWeight="Bold" 
					Text="Green Fade" Foreground="{StaticResource GreenBrush}"/>
			    
				<TextBlock x:Name="RandomPixels"
					Canvas.Left="5" Canvas.Top="200"  
					FontFamily="Verdana" FontSize="50" FontWeight="Bold" 
					Text="Random Pixels" Foreground="{StaticResource IBrushRandom}"/>
		
				<TextBlock x:Name="SparkleText1"
					Canvas.Left="5" Canvas.Top="200"  
					FontFamily="Verdana" FontSize="20" FontWeight="Bold" 
					Text="Sparkle" Foreground="{StaticResource IBrushSparkle1}"/>
				
				<TextBlock x:Name="SparkleText2"
					Canvas.Left="5" Canvas.Top="200"  
					FontFamily="Verdana" FontSize="40" FontWeight="Bold" 
					Text="Sparkle" Foreground="{StaticResource IBrushSparkle2}"/>
				
				<TextBlock x:Name="SparkleText3"
					Canvas.Left="5" Canvas.Top="200"  
					FontFamily="Verdana" FontSize="80" FontWeight="Bold" 
					Text="Sparkle" Foreground="{StaticResource IBrushSparkle3}"/>
			</StackPanel>
			<Canvas Height="174" VerticalAlignment="Bottom">
				<Rectangle Height="174" Width="500" Stroke="#FF000000">
					<Rectangle.Fill>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF000000"/>
							<GradientStop Color="#FFFFFFFF" Offset="1"/>
						</LinearGradientBrush>
					</Rectangle.Fill>
				</Rectangle>
				<Canvas Canvas.Top="35" Canvas.Left="145" Height="154" Width="190">
					<Ellipse Name="BlueCircle" Canvas.Top="45" Canvas.Left="80" Height="90" Width="90" Fill="{StaticResource IBrushSparkle6}"/>
					<Ellipse Name="GreenCircle" Canvas.Top="45" Canvas.Left="20" Height="90" Width="90" Fill="{StaticResource IBrushSparkle5}"/>
					<Ellipse Name="RedCircle" Canvas.Left="50" Height="90" Width="90" Fill="{StaticResource IBrushSparkle4}"/>
				</Canvas>
			</Canvas>
		</Grid>

	</Canvas>

</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Windows.Threading;
using System.Windows.Browser;

using Silverlight.Samples;
namespace SilverlightTestApp
{
    public partial class Page : UserControl
    {
        private EditableImage image;

        public Page()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            // Set timer for changing the first image
            DispatcherTimer   dt = new DispatcherTimer();

            //Set Sparkle Filters
            SparkleFilter sf1 = new SparkleFilter(SparkleText1, "Foreground", null);
            SparkleFilter sf2 = new SparkleFilter(SparkleText2, "Foreground", null);
            SparkleFilter sf3 = new SparkleFilter(SparkleText3, "Foreground", null);
            SparkleFilter sf4 = new SparkleFilter(RedCircle, "Fill", null);
            SparkleFilter sf5 = new SparkleFilter(GreenCircle, "Fill", null);
            SparkleFilter sf6 = new SparkleFilter(BlueCircle, "Fill", null);

            //Set Main Timer Intrerval
            dt.Interval = new TimeSpan(0, 0, 0, 0, 100);

            //Add all event handlers for timers
            dt.Tick += new EventHandler(dt_Tick1);
            dt.Tick += new EventHandler(dt_Tick2);
            dt.Tick += new EventHandler(sf1.TimerTick);
            dt.Tick += new EventHandler(sf2.TimerTick);
            dt.Tick += new EventHandler(sf3.TimerTick);
            dt.Tick += new EventHandler(sf4.TimerTick);
            dt.Tick += new EventHandler(sf5.TimerTick);
            dt.Tick += new EventHandler(sf6.TimerTick);

            //Set dispatch timer for each Sparkle filter
            sf1.Timer = dt;
            sf2.Timer = dt;
            sf3.Timer = dt;
            sf4.Timer = dt;
            sf5.Timer = dt;
            sf6.Timer = dt;

            // Start the timer, only need to start the first one since they all share the same dispatcher.
            sf1.StartDispatcher();
        }

        bool peak = true;
        byte b;
        void dt_Tick1(object sender, EventArgs e)
        {
            if (((SolidColorBrush)this.GreenFade.Foreground).Color.G == 255) peak = true;
            else if (((SolidColorBrush)this.GreenFade.Foreground).Color.G == 0) peak = false;

            b = ((SolidColorBrush)this.GreenFade.Foreground).Color.G;

            if (peak)
                ((SolidColorBrush)this.GreenFade.Foreground).Color = Color.FromArgb(255, 0, --b, 0);
            else ((SolidColorBrush)this.GreenFade.Foreground).Color = Color.FromArgb(255, 0, ++b, 0); ;
        }

        void dt_Tick2(object sender, EventArgs e)
        {
            BitmapImage bm = new BitmapImage();
            Random rand = new Random();
            int height = 128;
            int width = 128;
            bool first = true;

            // Re-use a single EditableImage
            if (null == image)
            {
                image = new EditableImage(height, width);
            }

            // Generate a random image that changes every tick
            for (int idx = 0; idx < height; idx++)      // Height (y)
            {
                for (int jdx = 0; jdx < width; jdx++)     // Width (x)
                {
                    image.SetPixel(jdx, idx, (byte)rand.Next(255), (byte)rand.Next(255), (byte)rand.Next(255), 255);
                }
            }

            // Get stream and set image source
            bm.SetSource(image.GetStream);
            RandomPixels.Foreground = new ImageBrush();

            ((ImageBrush)RandomPixels.Foreground).Stretch = System.Windows.Media.Stretch.UniformToFill;
            ((ImageBrush)RandomPixels.Foreground).ImageSource = bm;

            if (first)
            {
                //img.InvalidateMeasure();
                first = false;
            }
        }

        private void ImageBrush_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {
            HtmlPage.Window.Alert(e.ErrorException.Message);
        }

    }
}

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Windows.Threading;
using System.Windows.Browser;

using Silverlight.Samples;
namespace SilverlightTestApp
{
    public class SparkleFilter
    {
        private EditableImage _ei;
        private EditableImage _eiCache;
        private EditableImage _backBuffer;
        private BitmapImage _bm;
        private Dictionary ColorMap = new Dictionary();

        public SparkleFilter(FrameworkElement ReferenceElement, String ReferenceProperty, EditableImage ImageIn)
        {
            try
            {
                _backBuffer = new EditableImage(5, 5);
                this.Stretch = Stretch.None;

                this.Brush = new ImageBrush();
                ReferenceColor = ((SolidColorBrush)ReferenceElement.GetType().GetProperty(ReferenceProperty).GetValue(ReferenceElement,null)).Color;
                ReferenceElement.GetType().GetProperty(ReferenceProperty).SetValue(ReferenceElement,this.Brush, null);
            }
            catch (Exception Ex)
            {
                throw new ArgumentException("Reference object's refrence property not supported.", Ex);
            }

            try
            {
                this.ReferenceImageSize = new Rect(0, 0,((double)ReferenceElement.GetType().GetProperty("ActualWidth").GetValue(ReferenceElement, null)), ((double)ReferenceElement.GetType().GetProperty("ActualHeight").GetValue(ReferenceElement, null)));
                //this.ReferenceImageSize.Height = ((double)ReferenceElement.GetType().GetProperty("ActualHeight").GetValue(ReferenceElement, null));
                //this.ReferenceImageSize.Width = ((double)ReferenceElement.GetType().GetProperty("ActualWidth").GetValue(ReferenceElement, null));
            }
            catch (Exception Ex)
            {
                throw new ArgumentException("Reference object has no Geometry!", Ex);
            }

            if (ImageIn != null)
                _ei = ImageIn;

            this.SampleReference = true;
            this.ReferenceElement = ReferenceElement;
            this.ImageIn = ImageIn;
            Sparkle();
        }

        //set the Timer.
        public DispatcherTimer Timer {get; set;}

        //This is the FrameworkElement the effect is applied to.
        public FrameworkElement ReferenceElement { get; set; }

        public EditableImage ImageIn
        {
            get { return _ei; }
            set { _ei = value; Sparkle(); }
        }

        public EditableImage ImageOut
        {
            get { return _ei; }
        }

        public BitmapImage ImageSource
        {
            get { return _bm; }
        }


        //ReferenceColor the color of the ReferenceElement.
        public Color ReferenceColor { get; set; }

        //Send the Geometry.Bounds in as size
        public Rect ReferenceImageSize { get; set; }

        //distance between Sparkles
        public bool SparkleDeltaBasedOnImageSize { get;  set; }
        
        //global pixel modifier, modifies luminance gausienblur.
        public int SparkleWeight { get; set; }

        private int[][] Sparklebuffer = new int[5][];
        //5x5 byte pixel array used to set a custom Sparkle patern, 
        //byte used as a weight to modify sample color.
        public int[][] SparkleBuffer { get { return Sparklebuffer; } set { Sparklebuffer = value; } }

        private byte[][] alphabuffer = new byte[5][];
        //5x5 byte pixel array used to set a custom Sparkle patern, 
        //byte used to modify alpha component of color.
        public byte[][] AlphaBuffer { get { return alphabuffer; } set { alphabuffer = value; } }

        //Set to tru to sample the reference object's color.  Otherwise sample the buffer.
        public bool SampleReference { get; set; }

        //Set to true if the filter is still rendering.
        public bool IsRendering { get; set; }

        public void StartDispatcher() { Timer.Start(); }
        public void StopDispatcher() { Timer.Stop(); }

        //Defaults to 20 frames per second.  100 milli seconds.
        public TimeSpan TimeIntrival { get; set; }

        public ImageBrush Brush { get; set; }

        //Fill mode.
        public Stretch Stretch { get; set; }

        public void Sparkle()
        {
            
            // Set timer for changing the first image
            if (this.Timer == null)
            {
                this.Timer = new DispatcherTimer();
                this.Timer.Interval = new TimeSpan(0, 0, 0, 0, 100);
            }
            if (this.TimeIntrival == null)
                this.TimeIntrival = Timer.Interval;


            if (SparkleWeight == 0)
                SparkleWeight = 10;

            if (Sparklebuffer[0] == null)
            {
                Sparklebuffer = new int[5][];
                Sparklebuffer[0] = new int[] { 25,  50,  85,  50,  25 };
                Sparklebuffer[1] = new int[] { 50,  85, 125,  85,  50 };
                Sparklebuffer[2] = new int[] { 85, 125, 150, 125,  85 };
                Sparklebuffer[3] = new int[] { 50,  85, 125,  85,  50 };
                Sparklebuffer[4] = new int[] { 25,  50,  85,  50,  25 };
            }

            if (alphabuffer[0] == null)
            {
                alphabuffer = new byte[5][];
                alphabuffer[0] = new byte[] {  20, 100, 130, 100,  20 };
                alphabuffer[1] = new byte[] { 100, 130, 200, 130, 100 };
                alphabuffer[2] = new byte[] { 130, 200, 250, 200, 130 };
                alphabuffer[3] = new byte[] { 100, 130, 200, 130, 100 };
                alphabuffer[4] = new byte[] {  20, 100, 130, 100,  20 };
            }

            Timer.Tick += new EventHandler(TimerTick);
        }


        /*
         * RGB to YUV LuminanceTransform
         */
        private static Color LuminanceTransform(Color SampleColor, int Weight, byte Alpha)
        {
            byte Y, U, V;

            Y = (byte)(((66 * SampleColor.R + 129 * SampleColor.G + 25 * SampleColor.B + 128) >> 8) + 16);
            U = (byte)(((-38 * SampleColor.R - 74 * SampleColor.G + 112 * SampleColor.B + 128) >> 8) + 128);
            V = (byte)(((112 * SampleColor.R - 94 * SampleColor.G - 18 * SampleColor.B + 128) >> 8) + 128);


            Y = (byte)Math.Min((Y+Weight), 255);

            int C = Y - 16;
            int D = U - 128;
            int E = V - 128;


            SampleColor.R = (byte)Math.Max(Math.Min(((298 * C + 409 * E + 128) >> 8), 255), 0);
            SampleColor.G = (byte)Math.Max(Math.Min(((298 * C - 100 * D - 208 * E + 128) >> 8), 255), 0);
            SampleColor.B = (byte)Math.Max(Math.Min(((298 * C + 516 * D + 128) >> 8), 255), 0);
            SampleColor.A = Alpha;

            return SampleColor;
        }

        internal void TimerTick(object sender, EventArgs e)
        {
            this.IsRendering = true;
            this.Timer.Stop();

            _bm = new BitmapImage();
            Random rand = new Random();

            int height = 128;
            int width = 128;

            //Re-use a single EditableImage
            if (_ei == null)
            {
                width = Math.Min(128,Convert.ToInt32(ReferenceImageSize.Width));
                height = Math.Min(128,Convert.ToInt32(ReferenceImageSize.Height));

                if (width == 128 || height == 128)
                    Stretch = Stretch.UniformToFill;

                _ei = new EditableImage(width, height);
                
                for (int idx = 0; idx < height; idx++)      // Height (y)
                {
                    for (int jdx = 0; jdx < width; jdx++)     // Width (x)
                    {
                        _ei.SetPixel(jdx, idx, ReferenceColor.R, ReferenceColor.G, ReferenceColor.B, ReferenceColor.A);
                    }
                }

                //Cache the origional image
                _eiCache = new EditableImage(_ei.Width,_ei.Height);
                _eiCache.SetPixels(_ei);
            }

            int density = (Convert.ToInt32(ReferenceImageSize.Width) + Convert.ToInt32(ReferenceImageSize.Height))/2;
            Color SampleColor;
            int sampleY;
            int sampleX;
            //Replace image buffer with cache.
            _ei.SetPixels(_eiCache);
            // Generate a random image that changes every tick
            for (int sp = 0; sp < density; sp++)      
            {

                sampleY = rand.Next(_ei.Height - 5); //Have to pad, 5 pixels on both sides.
                sampleX = rand.Next(_ei.Width - 5);
                
                if (SampleReference)
                    SampleColor = ReferenceColor;
                else
                    SampleColor = _ei.GetPixel(sampleY,sampleX);

                if (!ColorMap.ContainsKey(SampleColor))
                {
                    for (int y = 0; y < 5; y++)
                    {
                        for (int x = 0; x < 5; x++)
                        {
                            Color c = LuminanceTransform(SampleColor, Sparklebuffer[y][x], alphabuffer[y][x]);
                            _backBuffer.SetPixel(x, y, c);

                        }
                    }
                    ColorMap.Add(SampleColor, _backBuffer);
                }
                else
                {
                    _backBuffer = ColorMap[SampleColor];
                }
                
                for (int idx = sampleY, y1 = 0; idx < (_backBuffer.Height + sampleY); idx++, y1++)   
                {
                    for (int jdx = sampleX, x1 = 0; jdx < (_backBuffer.Width + sampleX); jdx++, x1++)
                    {
                        _ei.BlendAlphaPixel(jdx, idx, _backBuffer.GetPixel(y1, x1));
                    }
                }
            }

            // Get stream and set image source
            _bm.SetSource(_ei.GetStream);
            ((ImageBrush)this.Brush).Stretch = this.Stretch;
            ((ImageBrush)this.Brush).ImageSource = _bm;

            this.Timer.Start();
            this.IsRendering = false;
        }

    }
}

 That's it! 

Lessons Learned

 It is important to use caution when using Reflection's in C#.  Many errors can easily be made and security precautions must be taken to assure that malicious code can not inject method calls.  This is best accomplished by limiting the accessibility of the methods containing reflection code with internal, private, or protected access.

Points of Interest

   Silverlight does not allow sampling of rendered content.  Additionally all elements are re-blended when new content is added, this is avoided in this example using the Joe Stegman's EditableImage class.

External Links:

• Wikipedia - XML Schema
• Wikipedia - Document Type Definition
• Wikipedia - Vector Graphics
• Wikipedia - Vectorization (computer graphics)
• Wikipedia - Scalable Vector Graphics
• Celtic Knot Icons © Catherine Prickett

XAML Overlay Prototype Research

- Graphic Designer (2.38) - Developer (5) - Architect (2.86)

• XAML Overview
• WPF Namespace XAML Extensions
• XAML Namespace (x:) Language Features
• Markup Extensions and XAML
• How to: Define and Reference a Resource
• XAML Namespaces and Namespace Mapping
• x:Key
• x:Name
• x:Type
• Code-Behind and XAML
• Boxing, Unboxing and AutoBoxing
• Routed Events Overview
• WPF XAML Namescopes
• FrameworkElement
• FrameworkContentElement
• Windows Presentation Foundation Partial Trust Security
• XAML Syntax Terminology
• Getting Started with Windows Presentation Foundation
• Building a WPF Application (WPF)
• Dependency Properties Overview
• XAMLPad

Revision History:

• First Draft (Outline and Introduction)- 06/18/2009
• Second Draft (Actors and Architecture) - 06/19/2009
• Third Draft (Proto Type Construction) - 06/28/2009