Search code examples
silverlightimagepositioning

Take object "out of the document flow" in Silverlight, with the same effect as CSS Absolute Positioning?

When using Silverlight 4, is it possible to set an Image to an absolute position, and bring it out of the document flow, allowing it to be positioned freely of any grids etc?

With CSS you can set an element to use absolute positioning, and then it will be positioned absolute, based on the first relative parent above it.

I want to be able to place an Image, anywhere on the screen, above anything else on the page, but in Silverlight.

I tried absolute positioning (In the code behind) and it doesn't seem to be positioned correctly, it looks as though it defaults to both Horizontal Alignment and Vertical alignment as "Centre"

CustomIcon.Source = new BitmapImage(new Uri("http://media.trueachievements.com/imagestore/0000149800/149834.jpg", UriKind.Absolute));
        CustomIcon.SetValue(Canvas.LeftProperty, Pt.X);
        CustomIcon.SetValue(Canvas.TopProperty, Pt.Y);
        CustomIcon.Visibility = System.Windows.Visibility.Visible;

Pt is set correctly elsewhere (Checked this when Debugging).

The image is in the Xaml with the x:Name attribute set, and is set to Collapsed visibility by default.

Any ideas if it's possible to get the same effect I described (CSS) but using Silverlight 4?

Solution

  • The canvas Left and Top attached properties only have an effect if you actually add the control to an Canvas element.

    Just add a Canvas element to your xaml as the last element in the "LayoutRoot" grid. You do not need to set its width or height nor should you set it Grid.Row or Column.

    Now when you add items to this canvas they can be positioned anywhere.