Following on from the previous post I wanted to add some simple buttons so that when a user is looking at a list of sessions they can quickly click and select that they want to download all the available PowerPoints or all the available hi-def videos or whatever it might be.

Part 5 – Adding Quick Select Buttons

I revisited my SessionsView and added a StackPanel into the main Grid for that view and threw 3 buttons onto it making sure that the grid row that they were in was set to automatically size itself;

I can revisit those and style them up in a moment. First though I added commands to the underlying SessionsViewModel in order to do the work and data on the underlying SessionViewModel to actually store the user’s preferences.

I did that first and added 3 new properties to my SessionViewModel to reflect what it is the user wants to download;

  public class SessionViewModel : PropertyChangedNotification
  {
    public bool UserWantsPowerPoint
    {
      get
      {
        return (_UserWantsPowerPoint);
      }
      set
      {
        _UserWantsPowerPoint = value;
        RaisePropertyChanged("UserWantsPowerPoint");
      }
    }
    bool _UserWantsPowerPoint;


    public bool UserWantsHiDef
    {
      get
      {
        return (_UserWantsHiDef);
      }
      set
      {
        _UserWantsHiDef = value;
        RaisePropertyChanged("UserWantsHiDef");
      }
    }
    bool _UserWantsHiDef;


    public bool UserWantsLoDef
    {
      get
      {
        return (_UserWantsLoDef);
      }
      set
      {
        _UserWantsLoDef = value;
        RaisePropertyChanged("UserWantsLoDef");
      }
    }
    bool _UserWantsLoDef;

    // snip...

at this point I need to make sure that my SessionView actually binds the 3 checkboxes that it displays to those properties so I did that back in Blend and I noticed that Blend seemed to update the view of my sample data to include these 3 new properties which is pretty smart;

and so I bound those up to the 3 CheckBox instances and their IsChecked properties which is easy enough to do if things are named nicely.

I also decided to replace the icons I was using while I was there as I’d gone off the folders and wanted icons that looked more like PowerPoint and Video files so I did that too.

and then I added 3 simple commands to the SessionsViewModel which can flip these bits on the underlying sessions;

 public SessionsViewModel()
    {
      this.Sessions = new ObservableCollection<SessionViewModel>();

      this.ToggleAllPowerPointsCommand = new ActionCommand(() =>
        {
          ApplyToSessions(vm => vm.UserWantsPowerPoint = !vm.UserWantsPowerPoint);
        });

      this.ToggleAllHiDefCommand = new ActionCommand(() =>
        {
          ApplyToSessions(vm => vm.UserWantsHiDef = !vm.UserWantsHiDef);
        });

      this.ToggleAllLoDefCommand = new ActionCommand(() =>
        {
          ApplyToSessions(vm => vm.UserWantsLoDef = !vm.UserWantsLoDef);
        });
    }

    public ICommand ToggleAllPowerPointsCommand
    {
      get;
      private set;
    }
    public ICommand ToggleAllHiDefCommand
    {
      get;
      private set;
    }
    public ICommand ToggleAllLoDefCommand
    {
      get;
      private set;
    }

and they all call a common routine;

    void ApplyToSessions(Action<SessionViewModel> action)
    {
      foreach (SessionViewModel item in this.Sessions)
      {
        action(item);
      }
    }

and so with that in place I should be able to finish up my 3 big buttons by firstly changing their content to include images;

I also wanted to lose the chrome on these buttons and so I set their templates to {x:Null} and I wanted to bind them up to the right commands. The easiest way I could find of doing that was to create new sample data for my SessionsViewModel as I’d done previously for my SessionViewModel;

and then just drag the new commands across to the buttons. An “interesting” side effect of creating this sample data was that my view suddenly went Busy in the designer;

and this was because the sample data just happened to set the IsBusy sample value to true so I edited the data to set it to false to make it easier to work with.

With that done, my buttons are up and working;

although it did occur to me immediately that this isn’t the most usable UI as it simply does a logical inversion on the existing value whereas you might actually want a CheckBox rather than a button that toggles. Maybe I’ll fix that in the next post.

What’s Still Missing?

1. Build some kind of downloading component.
2. Build the download view.
3. Capture the user’s selections for download and feed them through to the download component – at the moment, those CheckBoxes don’t store their data and will lose the data as you go from track to track.

Where’s the Source?

Here’s the source for download.

What’s Next?

Building a set of sessions to download and downloading them…