Draw array on canvas WPF C# -

i have project i'm supposed make little game, can drag , drop small rectangles grid, , fill grid. have run problem. it's no problem making grid , define size in advance. need new grid in different size when current grid has been filled.

i remembered tetris game once made in java, grid created using 2d array, able resize depending on user input. lost project during reformat of hdd.

the problem don't know if it's possible "draw" array on canvas using wpf , c#, or if there easy way make grid sized according function make (the function not important, since define row , collumn size depending on score). have made grid usercontrol, , following must apply:

this grid cannot larger 300 x 300 ( might make larger ) means rows , collumns should scale accordingly (if it's possible).

when grid has been made, thought smaller rectangles need drag , drop grid, made of smaller arrays. when drop it, change value of grid "1" "2". when places in grid filled "2", new grid fill (this is, if it's possible make array)

i hope able me, since have no idea how this, , thing can find on internet how add drag , drop items.

forget java. it's old , clunky , useless. doesn't have properties. let alone databinding capabilities wpf provides, or awesome beauty linq.

this take on described:

<window x:class="miscsamples.squaresgamesample"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         title="forget java. it's crappy dinousaur." height="300" width="300">     <dockpanel>         <stackpanel dockpanel.dock="top" orientation="horizontal" margin="2">             <textblock text="rows:"/>             <slider maximum="100" minimum="10" value="{binding rows}" width="200"/>             <textblock text="columns:"/>             <slider maximum="100" minimum="10" value="{binding columns}" width="200"/>         </stackpanel>          <listbox margin="0,0,20,0" width="50" dockpanel.dock="left" itemssource="{binding numbers}">             <listbox.itemcontainerstyle>                 <style targettype="listboxitem">                     <eventsetter event="previewmouseleftbuttondown" handler="onitemmousedown"/>                 </style>             </listbox.itemcontainerstyle>         </listbox>          <itemscontrol itemssource="{binding squares}">             <itemscontrol.itemspanel>                 <itemspaneltemplate>                     <uniformgrid rows="{binding rows}" columns="{binding columns}"/>                 </itemspaneltemplate>             </itemscontrol.itemspanel>             <itemscontrol.itemtemplate>                 <datatemplate>                     <border borderbrush="darkgray" borderthickness="1"                             background="#05ffffff" allowdrop="true"                             drop="ondrop">                         <textblock verticalalignment="center"                                    horizontalalignment="center"                                    text="{binding value}"/>                     </border>                 </datatemplate>             </itemscontrol.itemtemplate>         </itemscontrol>     </dockpanel> </window> 

code behind:

 public partial class squaresgamesample : window     {         public squaresgamesample()         {             initializecomponent();             datacontext = new squaresgameviewmodel();         }          private void ondrop(object sender, drageventargs e)         {             var item = sender frameworkelement;             if (item == null)                 return;              var square = item.datacontext square;             if (square == null)                 return;              var number = (int)e.data.getdata(typeof (int));             square.value = number;         }          private void onitemmousedown(object sender, mouseeventargs e)         {             var item = sender listboxitem;             if (item == null)                 return;              dragdrop.dodragdrop(sender dependencyobject, item.datacontext, dragdropeffects.move);         }     } 

viewmodel:

 public class squaresgameviewmodel: propertychangedbase     {         private observablecollection<square> _squares;         public observablecollection<square> squares         {             { return _squares ?? (_squares = new observablecollection<square>()); }         }          private int _rows;         public int rows         {             { return _rows; }             set             {                 _rows = value;                 onpropertychanged("rows");                 createsquares();             }         }          private int _columns;         public int columns         {             { return _columns; }             set             {                 _columns = value;                 onpropertychanged("columns");                 createsquares();             }         }          public list<int> numbers { get; set; }          public squaresgameviewmodel()         {             _rows = 10;             _columns = 10;             numbers = enumerable.range(1, 20).tolist();             createsquares();         }          private void createsquares()         {             squares.clear();              enumerable.range(0, rows)                       .selectmany(x => enumerable.range(0, columns)                                                  .select(y => new square { row = x, column = y }))                       .tolist().foreach(squares.add);         }     } 

data item:

public class square: propertychangedbase {     public int row { get; set; }      public int column { get; set; }      private int _value;     public int value     {         { return _value; }         set         {             _value = value;             onpropertychanged("value");         }     } } 

propertychangedbase (mvvm helper class):

    public class propertychangedbase:inotifypropertychanged     {         public event propertychangedeventhandler propertychanged;          protected virtual void onpropertychanged(string propertyname)         {             application.current.dispatcher.begininvoke((action) (() =>                                                                      {                                                                          propertychangedeventhandler handler = propertychanged;                                                                          if (handler != null) handler(this, new propertychangedeventargs(propertyname));                                                                      }));         }     } 

result:

• click , drag numbers in left side , drop them on square. number placed inside square.
• move sliders around , notice how uniformgrid's rows , columns change. via databinding.
• there's no need create or manipulate ui elements in code. done via databinding.
• resolution independence. wpf provides. stretched containing window size.
• mvvm = "just simple, simple properties , inotifypropertychanged". that's how program in wpf. no need complex event "listeners" (whatever is) or crappy stuff that.
• just copy , paste code in file -> new -> wpf application , see results yourself.
• let me know if need further assistance.
• wpf rocks. else either not or sucks.