Question

I have a World ( a PictureBox and a Bitmap with is size ( rows * columns ) and create Graphics from Bitmap in Windows Forms ) the following is the code,

    bmp = new Bitmap(columns*32, rows*32);
    graphics = Graphics.FromImage(bmp);
    pictureBox1.Size = new Size(columns * 32, rows * 32);
    pictureBox1.Image = bmp;

this i use to populate the Graphics in Windows form,

    private void drawImageInBox(Image src, int boxX, int boxY, int Offset = 0)
    {
        graphics.DrawImage(src, new Point((boxY * 32) + Offset, (boxX * 32) + Offset));
    }

and when all operations are done i just refresh the PictureBox,

    pictureBox1.Refresh();

how do i achieve this in Silverlight xaml?

Answer 1

You’ll want something like this:

In your XAML:

<Grid x:Name="world_grid" Width="100" Height="100">
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />   <!--Repeat this for however many rows you need -->
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" /> <!--Same here, for columns-->
  </Grid.ColumnDefinitions>
</Grid>

In your codebehind:

for each image you need to add:
  Image img = new Image();
  img.Source = new Uri("some/dir/img.png"); // coding in-place, can't remember syntax
  world_grid.Children.Add(img);
  Grid.SetRow(img, 0); // places this image in row 0
  Grid.SetColumn(img, 5); // places this image in column 5

A very important note: every time you “refresh” your “world”, make sure you remove the appropriate images before re-adding them! Better yet, you can just keep track of these images in some array, and change their rows/columns. And if you need to, you can set the visibility on images to hidden/collapsed.