David

Basic staff listing page done in Silverlight and MVVM

I created a basic listing page for my job that dealt with listing our current faculty fellows and mentors where I work at. The process was not too bad. I could have done it using basic HTML5 and CSS, however, my passion is Silverlight, MVVM, and the .Net stack. Being able to use C# and XAML is a blessing. So, I went with this route.

For starters I created your typical Silverlight solution in Visual Studio. In my case, I did not include the ASP.Net web project. All I needed was the xap, in which I will just pop into a basic HTML page.

Next, I included the MVVM Light toolkit into my project. I ended using NuGet to include this into my project.

Once, I had everything installed. I then proceeded creating the Model of the items I needed. In this case I just needed a list of people. I created a class named Person.cs from there I shaped the model.

Once the Model of Person was completed. I then proceeded working on the ViewModel of the application. When you install MVVM Light toolkit and create a project based off it, it creates a simple project layout. You will see a folder named ViewModel and within it you will see two starter ViewModels (MainViewModel.cs and ViewModelLocator.cs)

The ViewModelLocator.cs is where all of your ViewModels are register for the MVVM Light toolkit framework. Once, they are registered this allows our Views to bind to our ViewModels using {Binding ViewModel} in the XAML of our Views. In this file you will see MainViewModel registered there.

As for our MainViewModel it truly is simple. All we really need are some list to distinguish between Faculty Fellows and Faculty Mentors. What I did was create three list of type Person (from our Person.cs class).

List<Person> People { get; set; } will contain everyone regardless of a fellow or mentor.

List<Person> Fellows { get; set; } will contain people who are fellow members.

List<Person> Mentors { get: set; } will contain people who are mentors.

These are declared as public properties within our MainViewModel. Next thing to do is to filter List<Person> People to either a Fellow or Mentor. This is done in the constructor of our class. But let me show you what the initialization of our People list looks like first.

I create People list through object initialization a feature in C#. Within this you will notice our shape of our Model. There are two key properties to notice in this model the IsFellow and IsMentor properties. Yes, there are other ways to filter, but this was quick and easy for me. Lets look at the MainViewModel now.

Within the MainViewModel after I initialized the People, Fellows, and Mentors list I then filter the People list into either the Fellows or Mentors list with a simple foreach call.

foreach (var _person in People)
{
                    if (_person.IsFellow == true)
                    {
                        Fellows.Add(_person);
                    }
                    if (_person.IsMentor == true)
                    {
                        Mentors.Add(_person);
                    }
}

After this is done we have everyone in their appropriate list. Now we need to design the UI of our app.

What I was looking for was something pretty simple to display the data. At the top of the Silverlight app I wanted a big splash image, along with it changing to a Faculty Fellow or Mentor whenever the user selected a particular list item. In the blue frame is the splash/fellow/mentor image, in the red frame are the fellows, and in the green frame are the mentors.

The blue frame is basically a image denoted as: <Image x:Name=”imgPerson” Stretch=”Fill” Source=”Photos/group.png” Width=”700”/>

The source of the image will be updated whenever a fellow or mentor are selected by the two list below.

The markup of the list are as of:

<ListBox x:Name=”lstFellows” Width=”335” Height=”465” Margin=”10,10,5,10” ItemTemplate=”{StaticResource dtPeople}” ItemsSource=”{Binding Fellows}” SelectionChanged=”lstFellows_SelectionChanged” BorderThickness=”0”/>

<ListBox x:Name=”lstMentors” Width=”335” Height=”465” Margin=”5,10,10,10” ItemTemplate=”{StaticResource dtPeople}” ItemsSource=”{Binding Mentors}” SelectionChanged=”lstMentors_SelectionChanged” BorderThickness=”0” MinWidth=”1”/>

What makes this works with binding to the MainViewModel is that each list’s ItemSource is bounded to the MainViewModels public list properties:

public List<Person> Fellows { get; set; }
public List<Person> Mentors { get; set; }

How did we glue the View and the ViewModel together to make this happen? Well, in the XAML of our View we assigned its DataContext as shown:

The design view in Expression Blend looks like this.

Now we have to design the list box items of the list. They are bounded to the MainViewModel’s lists of Person, but we need to tell the View’s lists how to display that data. To do that you will need to right click the list then go to Edit Additional Templates->Edit Generated Items->Edit a Copy

Once we do that, we can then edit the ItemTemplate for the list. Modifications here will apply to all of its list items. You can apply this template to the lstMentors too. So, modify once and use it on any other list as you see fit.

Now that we are in the right place to modify the items of the list we then need to create text blocks and an image to show show our fellow or mentor and their associated data (name, college, department, etc..) As you see, above I have already created the basic structure for each list item. How do we now assign those text blocks and image to each list item? Well, you need to select the text block or image and assign its Text or Source property to the Person model’s respective property. For the txtName text block will assign its Text property to the Person’s Name property as follows:

You will perform this technique for each text block and its associated Person’s model property, even for the image’s Source property to the Person’s model Photo property (for these thumbnails we used Photo72x72 property of the Person model).

For the most part that is it. However one thing we need to do is to change the main splash image whenever a list item is selected (the blue frame). So, we look into the code behind to handle those selection change events of the lists. I will just show the code since this post is super long as is. Its not too complicated.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;

namespace ServiceLearningFacultyFellows
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            imgPerson.Source = new BitmapImage(new Uri(“Photos/group.png”, UriKind.Relative));
        }

        private void lstFellows_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            Person _person = lstFellows.SelectedItem as Person;
            if (_person != null)
            {
                imgPerson.Source = _person.Photo;
                #region IniBio
                txtBio.FontSize = 15.333;
                txtBio.Text = _person.Bio;
                #endregion
                #region IniBorder
                brdBio.Width = 420.00;
                Canvas.SetLeft(brdBio, 272);
                Canvas.SetTop(brdBio, 8);
                #endregion
                brdBio.Visibility = Visibility.Visible;
            }
                lstMentors.SelectedIndex = -1;
        }

        private void lstMentors_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            Person _person = lstMentors.SelectedItem as Person;
            if (_person != null)
            {
                imgPerson.Source = _person.Photo;
                #region IniBio
                if (string.Equals(_person.Name, “Dr. Katie Langford”))
                {
                    txtBio.FontSize = 13.133;
                }
                else
                {
                    txtBio.FontSize = 15.333;
                }
                txtBio.Text = _person.Bio;
                #endregion
                if (string.Equals(_person.Name, “Dr. Jacki Fitzpatrick”))
                {
                    #region IniBorder
                    brdBio.Width = 600.00;
                    Canvas.SetLeft(brdBio, 50);
                    Canvas.SetTop(brdBio, 67);
                    #endregion
                }
                else
                {
                    #region IniBorder
                    brdBio.Width = 420.00;
                    Canvas.SetLeft(brdBio, 272);
                    Canvas.SetTop(brdBio, 8);
                    #endregion
                }
                brdBio.Visibility = Visibility.Visible;
            }
            lstFellows.SelectedIndex = -1;
        }
    }
}

You will notice that I modify the background and text size when certain people are select in the list. This is because their bio’s are just to damn long. So, I had to adjust the text size in some cases. And for the shifting of the border (Black boarder that encapsulates the bio of each person) this was done because one faculty member did not have a photo available. So to fill the empty space of no photo I moved the border that held the bio to the center of the splash image.

And below is our final result. I know I might have missed parts in this post, but this was supposed to serve as a overview on how I did it. If you have questions please ask away. I can help you better understand what I did. I had to encapsulate the Silverlight control in an iframe for Tumblr. So, you will see part of it cut off to the right for the sake of fitting correctly in my theme’s content width. To see the app in all its glory click this link: