How to use the ExpanderView control?

How to use the ExpanderView control?

ExpanderView – another great control from Silverlight for Windows Phone toolkit. Why do I think it’s great? Because it allows a systematic way of holding data, like in a ListBox, but at the same time gives you access to more details only a tap away. And it does it nicely, just like the email application, which keeps the user experience on the device unified. In this post, I will describe a simple application that uses ExpanderView, called a NoteKeeper. I am targeting Windows Phone Mango.

In case you didn’t ready my blog post about using a HubTile control, go and check it out because it describes the first steps of creating a Windows Phone project and how to add the Silverlight for Windows Phone toolkit to the project. After you have created the project and added the toolkit, add a Note.cs class to the project. Basically, a note will consist of a Title, Date of last editing (date of creation) and the Content. Title will be a string, Date will be a DateTime object, and Content will be a string. Implement the INotifyPropertyChanged interface, to make the binding possible and changes visible immediately. The code for the Note.cs is:

public class Note : INotifyPropertyChanged  
  {
      private string title;
      private DateTime date;
      private string content;
      private string author;

      public string Title
      {
          get { return title; }
          set
          {
              if (title != value)
              {
                  title = value;
                  NotifyPropertyChanged("Title");
              }
          }
      }

      public DateTime Date
      {
          get { return date; }
          set
          {
              if (date != value)
              {
                  date = value;
                  NotifyPropertyChanged("Date");
              }
          }
      }

      public Note(string _title, DateTime _date, string _content)
      {
          Title = _title;
          Date = _date;
          Content = _content;
      }

      public string Content
      {
          get { return content; }
          set
          {
              if (content != value)
              {
                  content = value;
                  NotifyPropertyChanged("Content");
              }
          }
      }

      public event PropertyChangedEventHandler PropertyChanged;

      private void NotifyPropertyChanged(String info)
      {
          if (PropertyChanged != null)
          {
              PropertyChanged(this, new PropertyChangedEventArgs(info));
          }
      }
  }

Now, create a NoteCollection.cs class, to hold all our notes. In the constructor, add a few dummy notes.

public class NoteCollection : ObservableCollection<Note>  
  {
      public NoteCollection():base()
      {
              Add(new Note("I like to move it", DateTime.Now,
                  "This is my first note. I like creating notes, it always makes me happy." +
                  "Sometimes, I even like to change my notes, but that's out of the scope now."));
              Add(new Note("My second note", DateTime.Now.AddDays(-1), "This is my second note." +
                  " If I was a bird, I could fly. And if I was a dog, I could bark like one." +
                  "But I'm just a happy human. :) "));
              Add(new Note("Third note, KISS", DateTime.Now.AddDays(-5), "This is a third note." +
                  "I created only three to keep it simple. But three notes prove the concept" +
                  " behind the ExpanderView control. Keep reading my blog."));
      }
  }

I had to split the lines to make it clearer for you to read.

OK, now that we have the notes, we have to create the XAML code for MainPage.xaml.

First of all, add the collection of notes (NoteCollection) to your page resources:

<phone:PhoneApplicationPage.Resources>  
      <css:NoteCollection x:Key="Notes" />
</phone:PhoneApplicationPage.Resources>  

css is the NoteKeeper namespace. In case you haven’t added it at the beginning of the page, make sure you do

<phone:PhoneApplicationPage  
  ...
  xmlns:css="clr-namespace:NoteKeeper"
  ...
 >

Now, basically all you need to create a ListBox with ItemsSource connected to NoteCollection, and modify the DataTemplate of the ListBox.

<ListBox Name="ExpViewList" Margin="8,0" ItemsSource="{StaticResource Notes}">  
  <ListBox.ItemContainerStyle>
      <Style TargetType="ListBoxItem">
          <Setter Property="HorizontalContentAlignment"                                   Value="Stretch"/>
      </Style>
  </ListBox.ItemContainerStyle>
  <ListBox.ItemTemplate>
      <DataTemplate>

In the DataTemplate, you create an ExpanderView for every item of the ListBox. Bind Header, Expander and ItemsSource to the ItemsSource of the ListBox:

<StackPanel>  
  <toolkit:ExpanderView Margin="0,0,0,8"
                     Header="{Binding }"
                     Expander="{Binding }"
                     ItemsSource="{Binding}">

After that, define the DataTemplate of the Header and Expander. In the Header part, you’ll have only the Title of the note:

<toolkit:ExpanderView.HeaderTemplate>  
      <DataTemplate>
                   <TextBlock Text="{Binding Title}"
                              FontSize="{StaticResource PhoneFontSizeLarge}"
                              Foreground="{StaticResource PhoneAccentBrush}" />
       </DataTemplate>
   </toolkit:ExpanderView.HeaderTemplate>

Below that, you can keep the edit Date:

<toolkit:ExpanderView.ExpanderTemplate>  
       <DataTemplate>
                 <TextBlock Text="{Binding Date}"
                                    Margin="8"
                                    FontSize="{StaticResource PhoneFontSizeSmall}"
                                    TextWrapping="Wrap"
                                     LineStackingStrategy="BlockLineHeight">
                   </TextBlock>
          </DataTemplate>
  </toolkit:ExpanderView.ExpanderTemplate>

And in the end, make sure that the item is the Content of your Note:

<ListBoxItem>  
      <TextBlock Text="{Binding Path=Content}"
                 TextWrapping="Wrap"
                 Margin="0,0,0,-2"
                 Foreground="{StaticResource PhoneAccentBrush}"
                 FontSize="{StaticResource PhoneFontSizeNormal}"
                 FontFamily="{StaticResource PhoneFontFamilyNormal}">
            </TextBlock>
         </ListBoxItem>

        </toolkit:ExpanderView>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>  

When you run the project, you get a list of your notes. Only Title and Date are shown. When you tap on one of the items, it expands and shows you the note Content:

expanderview
There is a more complex example in the Silverlight for Windows Phone toolkit samples, but I find it rather complicated for grasping the basics, because it uses separated Data, so it takes a while to go between the folders and files to understand what’s happening. Take a look at it if you want to find more complicated use of ExpanderView, but you should understand the basics after reading this post carefully.

I am also preparing my next Windows Phone application – meCro TV which is currently in beta, and I am looking for people willing to test it – but they need to be from Croatia and have the Mango update, because it targets Mango version. I’ll write about it more after it gets published.

Igor Ralic

igor ralic

View Comments
Microsoft Certified Solutions Developer: Windows Store Apps in C#