Silverlight Game Development: (1) picture Layout

I recently switched from WPF to SL, so I made some demos. Now, I am using this game development tutorial to share with you the charm of Silverlight.

Let's just talk about it ~.

(1) Use blend to quickly create a continuous view icon Layout

1> open blend3, click Create Project, select Silverlight application, and name the project llkdemo ,:

2> by default, the width and height of the created page are 640,480. We insert a grid with 12 rows and 13 columns, each of which is 40*40. (PS.: I'm sure someone asked why it's not a 13*13 grid. I suggest you calculate and check whether all the icons can be completely deleted. O (worker _ worker) O ~). :

3> Use Cs or expression design to design five different icons named icon1, icon2 ......, add to project. (I will do it myself. If it doesn't suit your taste, please forgive me .)

4> dynamically insert an image to the specified row and column in the newly inserted grid. The Code is as follows:

Code  private Image NewPng(int col, int row, string path)        {            Image img = new Image();            img.Stretch = Stretch.Fill;            img.Source = new BitmapImage(new Uri(path, UriKind.Relative));              img.SetValue(Grid.ColumnProperty, col);            img.SetValue(Grid.RowProperty, row);            img.Name = (new Point(col, row)).ToString(); //            img.Tag = path;            return img;        }

5> initialize the map. The Code is as follows:

Code  private PointCollection _map = new PointCollection();        private int _colCount = 13;        private int _rowCount = 12;        private void InitMap()        {            _map.Clear();            for (int col = 0; col < _colCount; col++)            {                for (int row = 0; row < _rowCount; row++)                {                    _map.Add(new Point(col, row));                }            }        }

6> randomly retrieve a pair of coordinates from the map and insert the randomly obtained image to the grid column. The Code is as follows:

Code  private void InitAllPng()        {            InitMap();            _grid.Children.Clear();            Random randPng = new Random();            Random randPoint = new Random();            Point point = new Point(-1, -1);            string path = "";            int count = _map.Count;            int index = -1;            for (int i = 0; i < count / 2; i++)            {                path = "icon" + (randPng.Next(1, 5)).ToString() + ".png";                index = randPoint.Next(_map.Count);                point = _map[index];                _map.RemoveAt(index);                _grid.Children.Add(NewPng((int)point.X, (int)point.Y, path));                index = randPoint.Next(_map.Count);                point = _map[index];                _map.RemoveAt(index);                _grid.Children.Add(NewPng((int)point.X, (int)point.Y, path));            }            if (count % 2 != 0)            {                point = _map[0];                _map.RemoveAt(0);                _grid.Children.Add(NewPng((int)point.X, (int)point.Y, path));            }        }        private Image NewPng(int col, int row, string path)        {            Image img = new Image();            img.Stretch = Stretch.Fill;            img.Source = new BitmapImage(new Uri(path, UriKind.Relative));              img.SetValue(Grid.ColumnProperty, col);            img.SetValue(Grid.RowProperty, row);            img.Name = (new Point(col, row)).ToString(); //            img.Tag = path;            return img;        }

(Note: each time the coordinates are obtained from the map and inserted into the image, the coordinates are deleted from the map)

7> Initialize all icons in the mainpage structure. The Code is as follows:

Codepublic mainpage () {// initializecomponent (); initallpng ();}

8> after you press F5, the effect is as follows:

OK. We have produced the connected map in this section. Next I will introduce you to the Connected View algorithm.