Windows Phone 7: Making ListBox items change dynamically
- by Chad La Guardia
I am working on creating a Windows Phone app that will play a series of sound clips selected from a list. I am using the MVVM (Model View View-Model) Design pattern and have designed a model for my data, along with a view model for my page. Here is what the XAML for the ListBox looks like:
<ListBox x:Name="MediaListBox" Margin="0,0,-12,0" ItemsSource="{Binding Media}" SelectionChanged="MediaListBox_SelectionChanged" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<ListBox.ItemTemplate >
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Orientation="Horizontal">
<Image Source="../Media/Images/play.png" />
<StackPanel >
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding ShortDescription}" TextWrapping="Wrap" Margin="12,-6,12,0" Visibility="{Binding ShortDescriptionVisibility}" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding LongDescription}" TextWrapping="Wrap" Visibility="{Binding LongDescriptionVisibility}" />
<StackPanel>
<Slider HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Visibility="{Binding LongDescriptionVisibility}" ValueChanged="Slider_ValueChanged" LargeChange="0.25" SmallChange="0.05" />
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My question is this: I want to be able to expand and collapse part of the items in the ListBox. As you can see, I have a binding for the visibility. That binding is coming from the MediaModel. However, when I change this property in the ObservableCollection, the page is not updated to reflect this.
The ViewModel for this page looks like this:
public class ListenPageViewModel : INotifyPropertyChanged
{
public ListenPageViewModel()
{
this.Media = new ObservableCollection<MediaModel>;
}
/// <summary>
/// A collection for MediaModel objects.
/// </summary>
public ObservableCollection<MediaModel> Media { get; private set; }
public bool IsDataLoaded { get; private set; }
/// <summary>
/// Creates and adds the media to their respective collections.
/// </summary>
public void LoadData()
{
this.Media.Clear();
this.Media.Add(new MediaModel()
{
Title = "Media 1",
ShortDescription = "Short here.",
LongDescription = "Long here.",
MediaSource = "/Media/test.mp3",
LongDescriptionVisibility = Visibility.Collapsed,
ShortDescriptionVisibility = Visibility.Visible
});
this.Media.Add(new MediaModel()
{
Title = "Media 2",
ShortDescription = "Short here.",
LongDescription = "Long here.",
MediaSource = "/Media/test2.mp3",
LongDescriptionVisibility = Visibility.Collapsed,
ShortDescriptionVisibility = Visibility.Visible
});
this.IsDataLoaded = true;
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
The bindings work correctly and I am seeing the data displayed; however, when I change the properties, the list does not update. I believe that this may be because when I change things inside the observable collection, the property changed event is not firing.
What can I do to remedy this? I have poked around for some info on this, but many of the tutorials don't cover this kind of behavior. Any help would be greatly appreciated!
Thanks
Edit: As requested, I have added the MediaModel code:
public class MediaModel : INotifyPropertyChanged
{
public string Title { get; set; }
public string ShortDescription { get; set; }
public string LongDescription { get; set; }
public string MediaSource { get; set; }
public Visibility LongDescriptionVisibility { get; set; }
public Visibility ShortDescriptionVisibility { get; set; }
public MediaModel()
{
}
public MediaModel(string Title, string ShortDescription, string LongDescription, string MediaSource, Visibility LongDescriptionVisibility, Visibility ShortDescriptionVisibility)
{
this.Title = Title;
this.ShortDescription = ShortDescription;
this.LongDescription = LongDescription;
this.MediaSource = MediaSource;
this.LongDescriptionVisibility = LongDescriptionVisibility;
this.ShortDescriptionVisibility = ShortDescriptionVisibility;
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Originally, I did not have this class implement the INotifyPropertyChanged. I did this to see if it would solve the problem. I was hoping this could just be a data object.
