How to load and bind Image in MVVM (1)

In last post, I briefly described how to load image in run time and bind it to the ViewMode, now I will explain in detail how to do it.

1. Create a Silverlight Application name it "ImageLoadDemo", see the screen shot:
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
2. Create two folders in ImageLoadDemo project, naming them View and ViewModel

1. In View folder, add a user control named ImageLoad.xaml
2. inViewModel folder, add a class called ImageLoadViewModel.cs, see the screen shot:
   
   
   
   
   
   
   
   
   
   
   
3. Open the ImageLoad.xaml user control in Visual Studio 2010 and add 3 Rows and 3 Columns to the Grid "LayoutRoot", and put a button in the middle cell, setting its width and length to be full, code like this:
   
   

      1:  <UserControl x:Class="ImageLoadDemo.View.ImageLoad"

      2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      4:      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      5:      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      6:      mc:Ignorable="d"

      7:      d:DesignHeight="300" d:DesignWidth="400">

      8:      

      9:      <Grid x:Name="LayoutRoot" Background="White">

     10:          <Grid.ColumnDefinitions>

     11:              <ColumnDefinition Width="90*" />

     12:              <ColumnDefinition Width="230*" />

     13:              <ColumnDefinition Width="80*" />

     14:          </Grid.ColumnDefinitions>

     15:          <Grid.RowDefinitions>

     16:              <RowDefinition Height="79*" />

     17:              <RowDefinition Height="146*" />

     18:              <RowDefinition Height="75*" />

     19:          </Grid.RowDefinitions>

     20:          <Button Content="Button" Grid.Column="1" Grid.Row="1" Name="button1" />

     21:      </Grid>

     22:  </UserControl>