Converting Silverlight to MVVM, a couple of issues

Question

I have a Silverlight project I'm converting to MVVM. It's my first time using the pattern and I'm struggling with something.

So basically I had this in the XAML code behind page:

 OpenFileDialog ofd = new OpenFileDialog();
            if ((bool)ofd.ShowDialog())
            {
                _fileName = ofd.File.Name;
                FileStream fs = ofd.File.OpenRead();
                fileSize = (double)fs.Length;
                txtFileName.Text = fileName;
                index = 0;
                sendData = 0;

                byte[] file = new byte[fs.Length];
                fs.Read(file, 0, file.Length);
                //convertToChunks(file);

                prgUpload.Maximum = fileChunks.Count;
                prgUpload.Value = 0;
                //uploadChunks(index);
            }

And I cannot figure out how to wire it up to be able to use that in the model? I assume the viewmodel comes into play, but nothing is working.

Any thoughts?

Here is the work in progress XAML:

<Grid x:Name="LayoutRoot" Width="475" Height="340">
    <Canvas Margin="8,8,0,0" Background="White" Height="320" VerticalAlignment="Top" HorizontalAlignment="Left" Width="475">
        <Button Width="75" Canvas.Left="380" Canvas.Top="43" Content="Browse" x:Name="btnBrowse" />
        <TextBox Canvas.Left="25" IsReadOnly="True"  Canvas.Top="43" TextWrapping="Wrap" Width="350" Text="{Binding Path=FileUploadName}" x:Name="txtFileName" />
        <ProgressBar Height="10" Width="350" Canvas.Left="25" Canvas.Top="99" x:Name="prgUpload" />

        <my:Label Content="Please select a file to upload"  Name="lblError" Canvas.Left="25" Canvas.Top="23" RenderTransformOrigin="0.133,-0.063" Width="220"/>
        <my:Label x:Name="lblProgress" Canvas.Left="25" Canvas.Top="78" RenderTransformOrigin="0.133,-0.063" Width="220"/>
    </Canvas>
</Grid>

Basically I want it to fire after the user selects a file to upload.

Answer 1

If you want to fire a command this would do the work for you

<Button Width="75" Canvas.Left="380" Canvas.Top="43" Content="Browse" x:Name="btnBrowse" 
  Command={Binding OpenFileCommand} />

in your code behind Constructor for example

partial class MainWindow
{
   public MainWindow()
   {
     InitializeComponent();
     this.DataContext=new MainViewModel();
   }
}

and in your ViewModel

   public ICommand OpenFileCommand { get; set; }

   public MainViewModel()
   {
       OpenFileCommand = new RelayCommand(OpenDialog) { IsEnabled = true };

   }

   private void OpenDialog()
   {
       OpenFileDialog ofd = new OpenFileDialog();
       if ((bool)ofd.ShowDialog())
       {
           _fileName = ofd.File.Name;
           FileStream fs = ofd.File.OpenRead();
           fileSize = (double)fs.Length;
           //txtFileName.Text = fileName;// Apply Binding 
           index = 0;
           sendData = 0;

           byte[] file = new byte[fs.Length];
           fs.Read(file, 0, file.Length);
           //convertToChunks(file);

           prgUpload.Maximum = fileChunks.Count;
           prgUpload.Value = 0;
           //uploadChunks(index);
       }
   }

And the RelayCommand

public class RelayCommand:ICommand
{
   private bool _isEnabled;
   public bool IsEnabled
   {
       get { return _isEnabled; }
       set
       {
           if (value != _isEnabled)
           {
               _isEnabled = value;
               if (CanExecuteChanged != null)
               {
                   CanExecuteChanged(this, EventArgs.Empty);
               }
           }
       }
   }
   private Action _handler;
   public RelayCommand(Action handler)
   {
       _handler = handler;
   }


   public bool CanExecute(object parameter)
   {
       return IsEnabled;
   }

   public event EventHandler CanExecuteChanged;

   public void Execute(object parameter)
   {
       _handler();
   }
}

in order to get the filename in your textbox you have to bind the textbox to to the view model. so that it will appear on the UI and also implement INotifyPropertyChanged. Also Look at this it would be helpful Silverlight MVVM