Monday, June 2, 2008

More on Panels

I was playing around and made a few more panels. Lets start with a random panel. This panel builds on what we learned about the animating panel base and allows us to layout everything out randomly on screen. This is especially interesting for doing graphics randomly placed around the UI and is more for effect then what you would use in a real business application. A logical use for this might be a portfolio or other like function or just for fun. If we start with the Animating Wrap Panel we need to redo the arrange method starting with replacing the variables at the top with the following:

double Width = 0;
double Height = 0;
Random ThisNum = new Random();

Like the Wrap Panel we still need to run through all the panel children. Our loop should have its internal code replaced with the following:

Width = element.DesiredSize.Width;
Height = element.DesiredSize.Height;

double NewX = double.Parse(ThisNum.Next(
int.Parse(this.Width.ToString())).ToString());
double NewY = double.Parse(ThisNum.Next(
int.Parse(this.Height.ToString())).ToString());

if (MyFirstTime)
{
SetElementLocation(element, new
Rect(NewX, 1500, Width, Height), false);
}
else
{
SetElementLocation(element, new Rect(NewX, NewY, Width, Height));
}

In this case we see that we are creating new Random X,Y values so that our layout is unique every single time. We then like the other panels call the SetElementLocation in like manner. Other wise this panel is much the same as the others.

This panel allows us more interesting possibilities now we will address one more common panel that you might want to use and animate

Animating Radial Panel

So starting with the radial panel we need to do a little more math then the others. Building this panel we add 3 variables to the class itself like this listing:
protected void GetListOfPoints(int pointCount, double Width)
{
double x = Width / 2;

Radius = x;

double y = 0;

double theta = (2 * Math.PI) / pointCount;

for (int i = 0; i < pointCount; i++)
{
if (i > 0)
{
x = (Radius * (Math.Cos((i) * theta)));
y = (Radius * (Math.Sin((i) * theta)));
}

XList.Add(x + Radius);
YList.Add(y + Radius);
}
}

With out getting into great detail this method basically gives the points we need to layout our children on. Now we can alter the arrange override and we are good. In the arrange we start with variables like this:

double Width = 0;
double Height = 0;

GetListOfPoints(this.Children.Count, this.Width );
int Count = 0;

Width = element.DesiredSize.Width;
Height = element.DesiredSize.Height;

if (MyFirstTime)
{
SetElementLocation(element, new
Rect(XList[Count], 1500, Width, Height), false);
}
else
{
SetElementLocation(element, new
Rect(XList[Count], YList[Count], Width, Height));
}

Count++;The rest of the method is the same once we drop out of the loop like the wrap panel. In this case the biggest difference in the loop is having to track our position so we can get the right X/Y values for the layout.

By default like the other panels we did using the animating panel base we start be animating the children from off the screen below. All of these panels are included in the panel factory download off of HackingSilverlight.net. With that you can do all the hot panels you like.

http://www.hackingsilverlight.net/samples/PanelFactory.zip