Peter Gerritsen's blog » Silverlight

Silverlight: Multiple animations on one property through Transforms

Peter Gerritsen — Thu, 03 Sep 2009 12:44:39 +0000

When you create two or more animations that work on the same property of an object, Silverlight will only use the last of the defined animations.

By using transforms you’re able to achieve the same effect anyway. For instance, I’ve got a rectangle that slides up and down by using an animation that works on the Canvas.Top property:

This will create an effect like this:

If I want to apply an animation that jiggles the rectangle back and forth over the X- and Y-axis, I can’t use the Canvas.Top property anymore. So instead, we’ll add a Transform to the object and animate the properties of the Transform:

The result of this will look like the following:

Bookmark to:

Silverlight: Multiple animations on one property through Transforms is a post from: Peter Gerritsen's blog

Creating a 3D tagcloud in Silverlight (part 2)

Peter Gerritsen — Thu, 19 Feb 2009 09:49:04 +0000

In part 1 I showed you how to create the basics for a 3D tagcloud in Silverlight. In this part I’ll show how to get the tags from your html for inserting it into a blog template, we’ll change the color of the tag based on the weight of the tag and let the hyperlink button actually function as a hyperlink (until now it does nothing when you click on it).

There are a few different ways you can pass or get information from the page the Silverlight control is hosted in:

Set the initParams parameter in the Silverlight object definition
Read the HtmlDocument in your Silverlight code
Use JavaScript to call methods in your Silverlight code

You can only use the first option if your hosting your Silverlight application on the same domain. When using the hosting service on silverlight.live.com, no interaction between your application and HTML page is allowed.

For the second option you can use the HtmlPage object in your code to traverse through the HTML DOM, basic methods such as GetElementById are available.

The last option is the one I’ll be using in this post. To accomplish this you need to follow a few steps:

Decorate your page class with a “ScriptableType” attribute
Decorate the method you want to call with the “ScriptableMember” attribute and make sure it’s public
Register your object in the HtmlPage
Give your Silverlight object definition an id, so you can easily reference it from your JavaScript

The reason I’m going with this technique is the flexibility it provides when you want to reuse the tagcloud in other applications. Every blog engine has a different way to generate the HTML for a tagcloud, my blog just shows a list of tags.

To change the color based on the weight and set the url of the HyperlinkNutton we need to make some changes to the Tag3D object I showed you in the last post:

public class Tag3D
{
public HyperlinkButton btnLink { get; set; }
private TextBlock textBlock { get; set; }
public Point3D centerPoint { get; set; }
private Color TagColor { get; set; }

public Tag3D(double x, double y, double z, string text, string url, Color tagColor, int weight)
{
centerPoint = new Point3D(x, y, z);
textBlock = new TextBlock();
textBlock.Text = string.Format("{0} ({1})", text, weight);
btnLink = new HyperlinkButton();
btnLink.Content = textBlock;
btnLink.NavigateUri = new Uri(url);
this.TagColor = tagColor;
}

public void Redraw(double xOffset, double yOffset)
{
double zFactor = ((centerPoint.Z + 300) / 450.0);
btnLink.FontSize = 30.0 * zFactor;
double alpha = zFactor * 255;
//Debug.WriteLine("Z: {0}; zFactor: {1}; alpha: {2}", centerPoint.Z, zFactor, alpha);
btnLink.Foreground = new SolidColorBrush(Color.FromArgb(Convert.ToByte(alpha), TagColor.R, TagColor.G, TagColor.B));

Canvas.SetLeft(btnLink, centerPoint.X + xOffset - (btnLink.ActualWidth / 2));
Canvas.SetTop(btnLink, -centerPoint.Y + yOffset - (btnLink.ActualHeight/ 2));
Canvas.SetZIndex(btnLink, Convert.ToInt32(centerPoint.Z));
}
}

In the constructor we now pass in the url and a Color to show when the tag is the most important (I chose to use a scale of 1 to 10, with 10 being the most important).
The url is simply assigned to the NavigateUrl property of the HyperlinkButton. The Color is used when setting the new Foreground Brush. I also made some modifications in the calculations of the font size and alpha of the Brush to make it look a bit more realistic.
To let the JavaScript in the page add the tags I’ve created a AddTag method and decorated it with the ScriptableMember attribute:

[ScriptableMember()]
public void AddTag(string tag, string url, int weight)
{
if (weight > 10)
weight = 10;

Color color = new Color();

color.R = Convert.ToByte(Math.Round(209.0 * ( weight / 10.0)));

color.G = Convert.ToByte(Math.Round(18.0 * (weight / 10.0)));

color.B = Convert.ToByte(Math.Round(65.0 * (weight / 10.0)));

tagBlocks.Add(new Tag3D(0.0, 0.0, 0.0, tag, url, color));
}

In this method we calculate the Color of the tag based on the weight. Then we add a new tag to the tagBlocks List.

After calling this method a couple of times we need to place the tags and display them. I’ve changed the FillTags method shown in the previous post and renamed it to ProcessTags to make the name a bit more meaningful:

[ScriptableMember()]
public void ProcessTags()
{

double radius = RootCanvas.Width / 3;

int max = tagBlocks.Count;

double phi = 0;

double theta = 0;

for (int i = 1; i < max + 1; i++)

{

phi = Math.Acos(-1.0 + (2.0 * i – 1.0) / max);

theta = Math.Sqrt(max * Math.PI) * phi;

double x = radius * Math.Cos(theta) * Math.Sin(phi);

double y = radius * Math.Sin(theta) * Math.Sin(phi);

double z = radius * Math.Cos(phi);
Tag3D tag = tagBlocks[i -1];

tag.centerPoint = new Point3D(x, y, z);

tag.Redraw(RootCanvas.Width / 2, RootCanvas.Height / 2);

RootCanvas.Children.Add(tag.btnLink);
}
}

We need one more thing to make the methods callable from JavaScript. Register the
object with the HtmlPage in the constructor:

HtmlPage.RegisterScriptableObject("TagCloud", this);

No you can call the methods from JavaScript:

function addTags() {
var control = document.getElementById("Xaml1");
control.content.TagCloud.AddTag("Silverlight", "http://silverlight.net", 5);
control.content.TagCloud.AddTag("Tagcloud", "http://blogs.tamtam.nl", 2);
control.content.TagCloud.AddTag("Tam Tam", "http://www.tamtam.nl", 10);
control.content.TagCloud.AddTag("Axelerate3D", "http://www.codeplex.com", 8);
control.content.TagCloud.AddTag("WPF", "http://www.microsoft.com", 1);
control.content.TagCloud.AddTag("SharePoint", "http://www.microsoft.com", 4);
control.content.TagCloud.ProcessTags(); }

I’m just attaching some code to the onclick of a button and hard-coding the tags. Normally you would handle the onload of the document (or better yet the $(document).ready in jQuery) and get your tags from the Html to pass them to the Silverlight object.

And that wraps it up for this tutorial.

Bookmark to:

Creating a 3D tagcloud in Silverlight (part 2) is a post from: Peter Gerritsen's blog

Creating a 3D tagcloud in Silverlight (part 1)

Peter Gerritsen — Fri, 13 Feb 2009 23:02:38 +0000

When I saw the wp-cumulus plugin by Roy Tanck, I thought it would be a great idea to implement the same sort of functionality in Silverlight. It’s hardly original but allows me to learn some parts of the Silverlight framework.

The components behind it are quite simple:

Get (or send) the tags from your HTML page to the Silverlight usercontrol
Render the tags so it looks 3D
Create a method to rotate the tags based on the position of your mouse

Choosing a 3D library

The current version of Silverlight doesn’t include 3D functionality like WPF does through the Media3D namespace. Fortunately some developers implemented the same functionality in libraries for Silverlight. The main options I found were Kit3D and Axelerate3D. I decided to use the last one because that one mimics the RotateTransform3D class in WPF 3D the best (it contains a TryTransform method).

Rendering the tags

I decided to tackle the second item first, because if I wasn’t able to manage this, the other items wouldn’t be very useful.

To create a tag in 3D you need some basic functionality:

A way to store it’s x, y and z coordinates
A hyperlinkbutton to redirect to a page that shows all the items with that tag
A textblock to display the tag

public class Tag3D
{
public Tag3D(double x, double y, double z, string text)
{
centerPoint = new Point3D(x, y, z);
textBlock = new TextBlock();
textBlock.Text = text;
btnLink = new HyperlinkButton();
btnLink.Content = textBlock;
}

public HyperlinkButton btnLink { get; set; }

public TextBlock textBlock { get; set; }

public Point3D centerPoint { get; set; }

}

Then we need a way to make it look like it’s rendered in 3D. We do that by changing the fontsize and the opacity of the text. For that I created a method Redraw:

public void Redraw(double xOffset, double yOffset)
{
double posZ = centerPoint.Z + 200;
btnLink.FontSize = 10 * (posZ / 100);
double alpha = centerPoint.Z + 200;
if (alpha > 255)
alpha = 255;

if (alpha < 0)
alpha = 0;

btnLink.Foreground = new SolidColorBrush(Color.FromArgb(Convert.ToByte(alpha), 0, 0, ));
Canvas.SetLeft(btnLink, centerPoint.X + xOffset – (btnLink.ActualWidth / 2));
Canvas.SetTop(btnLink, -centerPoint.Y + yOffset – (btnLink.ActualHeight/ 2));
Canvas.SetZIndex(btnLink, Convert.ToInt32(centerPoint.Z));
}

Placing the tags

To distribute the tags evenly over the sphere, we need some math. Luckily someone was way ahead of me and posted a useful blogentry on this subject (this technique is also used in the wp-cumulus plugin).

The following method creates and places the tags in the canvas:

private void FillTags()
{
tagBlocks = new List();

string[] tags = new string[] { “Silverlight”,
“WPF”,
“3D”,
“Rotation”,
“SharePoint”,
“.Net”,
“C#”,
“Transform”,
“Blog”,
“TagCloud”,
“Tam Tam”,
“Axelerate3D”,
“MOSS”,
“Math”};

double radius = RootCanvas.Width / 3;
int max = tags.Length;
double phi = 0;
double theta = 0;

for (int i = 1; i < max + 1; i++)
{
phi = Math.Acos(-1.0 + (2.0 * i – 1.0) / max);
theta = Math.Sqrt(max * Math.PI) * phi;
double x = radius * Math.Cos(theta) * Math.Sin(phi);
double y = radius * Math.Sin(theta) * Math.Sin(phi);
double z = radius * Math.Cos(phi);

Tag3D tag = new Tag3D(x, y, z, tags[i -1]);
tag.Redraw(RootCanvas.Width / 2, RootCanvas.Height / 2);
RootCanvas.Children.Add(tag.btnLink);
tagBlocks.Add(tag);
}
}

At the moment the tags to render are hard-coded but we’ll sort that out in part 2.

Rotating the tags

To rotate the tags we will use the position of the mouse as a starting point. When the mousepointer is in the center the tagcloud will remain in the current position. Once the mouse is further away from the centerpoint we’ll increase the rotationspeed. The location of the mousepointer compared to the centerpoint will set the angle of the rotation.

First we will set the rotation when the tagcloud loads:

void TagCloud_Loaded(object sender, RoutedEventArgs e)
{
FillTags();
rotateTransform = new RotateTransform3D();
rotateTransform.Rotation = new AxisAngleRotation3D(new Vector3D(1.0, 0.0, 0.0), 0);
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
LayoutRoot.MouseEnter += new MouseEventHandler(LayoutRoot_MouseEnter);
LayoutRoot.MouseLeave += new MouseEventHandler(LayoutRoot_MouseLeave);
}

Here we set the rotation angle to 0 and the rotationaxis to the x-axis. When the mouse moves, we’ll change those parameters, so the rotation will have an effect:

void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
Point mouseLocation = e.GetPosition(RootCanvas);
double relativeX = mouseLocation.X – (RootCanvas.ActualWidth / 2);
double relativeY = mouseLocation.Y – (RootCanvas.ActualHeight / 2);
MouseX.Text = relativeX.ToString();
MouseY.Text = relativeY.ToString();
double speed = Math.Sqrt(Math.Pow(relativeX, 2) + Math.Pow(relativeY, 2)) / 170;
RotationSpeed.Text = speed.ToString();
rotateTransform.Rotation = new AxisAngleRotation3D(new Vector3D(relativeY, relativeX, 0), speed);
}

To trigger the movement, we have to capture the MouseEnter and MouseLeave events:

void LayoutRoot_MouseLeave(object sender, MouseEventArgs e)
{
     LayoutRoot.MouseMove -= LayoutRoot_MouseMove;
     runRotation = false;
}

void LayoutRoot_MouseEnter(object sender, MouseEventArgs e)
{
     LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove);
     runRotation = true;
}

Now that the rotationparameters are set we need to rotate the tags, or more precisely the centerpoint of the tag. To accomplish this we’ll make use of the Rendering event of the CompositionTarget object. This is called everytime the Silverlight plugin wants to render a new frame.

void CompositionTarget_Rendering(object sender, EventArgs e)
{
    if (runRotation)
    {
        if (((AxisAngleRotation3D)rotateTransform.Rotation).Angle > 0.05)
        RotateBlocks();
    }
}

private void RotateBlocks()
{
foreach (Tag3D textBlock in tagBlocks)
{
Point3D newPoint;
if (rotateTransform.TryTransform(textBlock.centerPoint, out newPoint))
{
textBlock.centerPoint = newPoint;
textBlock.Redraw(RootCanvas.ActualWidth / 2, RootCanvas.ActualHeight / 2);
}
}
}

To relieve the CPU a bit, we’ll only rotate the tags if the rotation angle is higher than a threshold value. The actual transformation is accomplished by invoking the TryTransform method and passing it the current centerpoint of each tag.

At the moment the Silverlight control looks like this:

In the next part I’ll show you a way to dynamically set the tags, base their fontsize on the actual weight of the tag and actually use the hyperlink button.

Bookmark to:

Creating a 3D tagcloud in Silverlight (part 1) is a post from: Peter Gerritsen's blog

Hosting your Silverlight application and media in the cloud

Peter Gerritsen — Fri, 13 Feb 2009 22:34:01 +0000

Update: The Silverlight Streaming beta has ended. If you want to host your Silverlight apps on Microsoft’s infrastructure and video’s check out Windows Azure

Microsoft now offers a service called Silverlight Streaming for hosting your Silverlight content in the cloud. At the moment the service is in beta and you get a whopping 10 GB of storagespace and 5 TB of bandwith per user account per month.

Embedding your application in a page can be done by inserting an iframe:

[Removed because of ended beta]

Bookmark to:

Hosting your Silverlight application and media in the cloud is a post from: Peter Gerritsen's blog