Accessing the canvas in a Silverlight 1.1 User Control

Posted on January 30, 2008
Filed Under 1.1 Alpha, Application, Components, User Interface, XAML | Leave a Comment

When you create a Silverlight User Control from a piece of XAML, you expect to be able to modify the Canvas using the a standard property. After all, the control’s XAML is a Canvas.

Foo.xaml
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="100"
Height="100"
Background="CornflowerBlue"
>
</Canvas>

However, the Control interface doesn’t have an accessor for the Canvas. Looking at the control in the debugger, you find that the Canvas is buried down deep in the control in a non-public area.

Control Canvs

So, how do you access the Canvas?
Well, there’s a simple 3-step process.


public class Foo : Control
{
// STEP1: Save the canvas locally
private Canvas _TheCanvas;


// STEP2: Add a public property so that clients can access
// the canvas easily.
//
// Control.Canvas
public Canvas Canvas
{
get { return _TheCanvas; }
}

    public Foo()
{
// STEP3: Save the canvas as the control is being created.
System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("UserControls.Foo.xaml");
_TheCanvas = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd()) as Canvas;
}
}

That’s it. Now you can access the canvas of your control at any time.

Silverlight Viewports

Posted on November 14, 2007
Filed Under 1.1 Alpha, Components, Games, User Interface | Leave a Comment

One thing you usually recognize about web-based games is that they generally have a fixed view. With a fixed view, your game world matches the web control 1:1. What if you want the game to take place in a larger space, like an entire world, or a galaxy. In the game world, you’d create a viewport or a camera that only displays a portion of the world. Unfortunately, Silverlight doesn’t have native support for viewports into a larger space. We decided to make it.

CanvasViewport Class Diagram 

Source: CanvasViewport C# class 

The CanvasViewport is a simple plugin class that can be used to create a viewport on any Canvas (it doesn’t have to be the main page). It works by manipulating the Canvas’ RenderTransform in response to programmed parameters.

Usage:
// Create a viewport on this canvas.
CanvasViewport _Viewport = new CanvasViewport(this);

// Create a viewport that is 320x240 in logical (original canvas) units
_Viewport.Size = new Size(320, 240);

// Set the center of this viewport to 500, 800 on the canvas
_Viewport.Center = new Point(500, 800);

// In a game, you can have the viewport track a player like this:
void Update()
{
  _Player.Update();
  _Viewport.Center = _Player.Position;
}
An added advantage to using viewports in XAML is that since XAML graphics are all vector based, zooming in and out dosen’t have all of the pixelation problems that working with raster graphics has. Here’s the orignal game without the viewport.
 Shooter without viewport 

Here’s the game with a smaller viewport into the original world. (Notice that the UI and the Reticle doesn’t change size).
Zoomed in view of the shooter

Have fun with your viewports.

Combo Box Component

Posted on October 19, 2007
Filed Under 1.0 Javascript, Components | 2 Comments


Here is a basic Combo Box component that is easy to implement and customize. It supports automatic scrolling when the number of items exceed the specified height and is fed by an array.

Example, Source

Silverlight scrollbar component: Updated for easy implementation

Posted on October 2, 2007
Filed Under 1.0 Javascript, Components | Leave a Comment


Another update to the scrollbar component. Just made some tweaks to make it easier to implement/instantiate. It’s getting closer to more of an OOP style but it’s not all the way there yet. Now all you have to do is call/instantiate the scroller like this:

myScrollPanel=new createScrollablePanel(”sp1″, 10, 10, 100, 160, “V”, the_text, “#FFF”, 9, null, “#0000FF”)

with the following parameters…

unique name, xpos, ypos, width, height, direction, text, [text_color, text_size, text_font, bg_color]

bracketed items are optional, I haven’t converted the horizontal portion yet so only “V” (vertical) is available ;-)

This makes it way easier when you have multiple scrollers on the page. The mouse wheel support also got carried over and works when the mouse is over the particular textfield you want to wheel thru. There are now properties in the constructor to control other options like color, spacing, etc.

Example, Source.

Silverlight scrollbar component: Updated with MouseWheel Support

Posted on September 26, 2007
Filed Under 1.0 Javascript, Components | Leave a Comment


Here is an updated version of the scrollbar component I released earlier but this new version has Mouse Wheel Support:

Example, Source.

Thanks to Adomas Paltanavičius for the Javascript that handles the Mouse Wheel events!

Recently


Categories


Archives