windows phone 7 - How to Reference the ViewModel in the View -

i attempting reference class in viewmodel within xaml of view, , getting error saying object reference not set instance of object. error occurs when attemping set viewmodel resource listbox. also, when attempting set itemssource property of listbox, error results stating the resource "effects" not resolved.

mainpage.xaml

<grid x:name="contentpanel" grid.row="1" margin="12,0,12,0">          <grid.resources>             //error occurs here!             <vm:effectitems x:key="effects"/>         </grid.resources>          //the itemssource property contains error         <listbox name="listboxeffects" selectionmode="single" itemssource="{staticresource effects}" selectionchanged="listbox_selectionchanged"                              toolkit:tilteffect.istiltenabled="true"                      scrollviewer.verticalscrollbarvisibility="disabled" scrollviewer.horizontalscrollbarvisibility="auto">             <listbox.itemspanel>                 <itemspaneltemplate>                     <toolkit:wrappanel orientation="horizontal" itemwidth="152" />                 </itemspaneltemplate>             </listbox.itemspanel>             <listbox.itemtemplate>                 <datatemplate>                     <stackpanel orientation="vertical" margin="14,0,0,10" >                         <image source="{binding thumbnail}" width="128" height="128" />                         <textblock text="{binding name}" fontsize="{staticresource phonefontsizenormal}" verticalalignment="center" horizontalalignment="center" />                     </stackpanel>                 </datatemplate>             </listbox.itemtemplate>         </listbox>     </grid> 

i have tried following setup results in same errors on same items

<listbox name="listboxeffects" selectionmode="single" itemssource="{staticresource effects}" selectionchanged="listbox_selectionchanged"                              toolkit:tilteffect.istiltenabled="true"                      scrollviewer.verticalscrollbarvisibility="disabled" scrollviewer.horizontalscrollbarvisibility="auto">             <listbox.resources>                 <vm:effectitems x:key="effects"/>             </listbox.resources>             <listbox.itemspanel>                 <itemspaneltemplate>                     <toolkit:wrappanel orientation="horizontal" itemwidth="152" />                 </itemspaneltemplate>             </listbox.itemspanel>             <listbox.itemtemplate>                 <datatemplate>                     <stackpanel orientation="vertical" margin="14,0,0,10" >                         <image source="{binding thumbnail}" width="128" height="128" />                         <textblock text="{binding name}" fontsize="{staticresource phonefontsizenormal}" verticalalignment="center" horizontalalignment="center" />                     </stackpanel>                 </datatemplate>             </listbox.itemtemplate>         </listbox> 

viewmodel class

public class effectitems : observablecollection<effectitem> {     public effectitems()     {         add(new effectitem(new blackwhiteeffect(), "data/icons/blackwhite.png"));         add(new effectitem(new sepiaeffect(), "data/icons/sepia.png"));         add(new effectitem(new tiltshifteffect { upperfalloff = 0.2f, lowerfalloff = 1.0f }, "data/icons/tiltshift.png"));         add(new effectitem(new polaroideffect { tinting = 0.8f }, "data/icons/polayellow.png", "pola"));     } } 

at top of page have xmlns:vm="clr-namespace:appname.viewmodels" contains no errors.

you can bind viewmodel view setting views datacontext. straight forward way set in constructor of code behind:

// constructor public mainpage() {     initializecomponent();      datacontext = new effectitems(); }  

then can set itemssource of list datacontext using default binding:

itemssource="{binding}"