Silverlight Grid in Matrix Disguise

The Grid container is sometimes compared to the HTML Table; but  I’d rather consider the Grid as a matrix and with this in mind, I decided to add some matrix magic to it. You can check out the demo by clicking on the image. The action starts, once you move over the “?“.

 

 

My initial plan was to create dynamic squares in each grid cell by moving along the edges of the grid until I would reach the center. The movement’s direction is clockwise and each directional movement is as follows:

RIGHT: Move through columns until you have reached the right edge; increment columns, row=top-edge

DOWN: Move through rows until you have reached the bottom edge; increment rows, column=right-edge

LEFT: Move through columns until you have reached the left edge; decrement columns; row=bottom-edge

UP: Move through rows until you have reached the top edge; decrement rows; column = right-edge

 

So basically without any optimiziations and no recursion, this is a pretty straightforward algorithm. There are 4 for-loops that race through the matrix in 4 different directions. The boundaries narrow once a round has been completed. But no wonder,  when I ran the application, the operation was too fast to actually see anything else than a solid color grid. So as to delay the event, I had to add some kind of timer to delay the event. For the UI thread I figured out I needed to use the Dispatcher class and DispatcherTimer to fire the dynamic creation/placement of the rectangles. This is the timer definition:

DispatcherTimer timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0, 0, 0, 0, 1);

timer.Tick += new EventHandler(timer_Tick);
timer.Start();

 

Since the timer is processed at a specified interval of time, the actual flow of the app had to change too. Therefore I based each movement and iteration on a conditional statement, which the timer’s event handler (timer_Tick) would evaluate.

 

Once the timer started working, I modified the code to add a reverse the movement from the center to the edges and vice-versa. This made my app run as long as the browser window is open. In case of any form of web-dizzyness, I also included a stylized toggle button to stop/start the action! The little controller button is inspired by a sample rotating button I had seen in the “Adding a Rotating Button to the Swivel Behavior Demo” article by John Papa.

 

When all inward/outward movements seemed to cooperate, it was time to add a stylish touch to the dynamic squares. With a modern fashion sense of less is more, the squares only have rounded corners and are assigned random colors. You can pick random colors with the following method that I used (random is an instance of the Random class):

private Color pickRandomColor(){

byte redChannel = Byte.Parse(random.Next(256).ToString());
byte greenChannel = Byte.Parse(random.Next(256).ToString());
byte blueChannel = Byte.Parse(random.Next(256).ToString());
byte transparent = Byte.Parse(“255″);
Color randomColor = Color.FromArgb(transparent,redChannel,greenChannel,blueChannel);
return randomColor;
}

 

For the reverse and forward movement I didn’t recreate the squares; they just get a new random color. That’s why the movements also seem to speed up after the first round. Each rectangle has a unique name, based on the grid cell they are placed at, which makes it very easy to locate each square when needed. Another fine detail to mention is probably the HandVetica font, I used in each TextBlock.

 

The final addition to the app was to flip squares randomly based on a second timer; which starts when all squares have been created. The flip action uses a Storyboard and adds a PlaneProjection to the selected square. It flips the square 180 degrees on its RotationYProperty and back, so that each square is neatly back at its original place when the animation is completed.  The  “PlaneProjection and Perspective 3D” article on SwitchOnTheCode was very helpful when I lost perspective trying to rotate/reverse/flip the squares!

 

So after all, what’s the functionality of  a Jungle of Squares, you might ask? Well;  what is the Matrix – any way?

I had my daily dose of brainy exercise and a few extra colors to light up my day. Hope you have a colorful time with the demo too!

 

• Share this:
• Digg