Displaying items

Without worrying about storing or retrieving from the database, let's integrate the model classes we created a while ago.

MainPageViewModel.cs

public class MainPageViewModel : PropertyChangedBase
{
  private ObservableCollection<Item> items;

  public MainPageViewModel()
  {
      items = new ObservableCollection<Item>();
      LoadData();
  }

  public ObservableCollection<Item> Items
  {
    get { return items; }
    set
    {
        items = value;
        NotifyOfPropertyChange(() => Items);
    }
  }

  public void LoadData()
  {
    Items.Add(new Item(0, "almond butter"));
    Items.Add(new Item(0, "coconut flour"));
    Items.Add(new Item(0, "pistachios"));
  }     
}

You'll notice that we've renamed Name to ItemName; that's because if we want to display sample data in the designer, we'll end up conflicting with the one defined in ReflectionTypeNode. You'll want to update SampleData/MainViewModelSampleData.xaml accordingly.

MainPage.xaml

<phone:PhoneApplicationPage
    // ... all the normal stuff
    xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
    xmlns:vm ="clr-namespace:IsItWorthIt.ViewModels"
    d:DataContext="{d:DesignInstance Type=vm:MainPageViewModel, IsDesignTimeCreatable=True}"    
    cal:Bind.AtDesignTime="True">

<Grid Background="Transparent">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>

  <StackPanel Grid.Row="0" Margin="12,17,0,28">
    <TextBlock Text="IS IT WORTH IT?" 
    Style="{StaticResource PhoneTextNormalStyle}"/>
   <TextBlock Text="items" Margin="9,-7,0,0" 
    Style="{StaticResource PhoneTextTitle1Style}"/>
  </StackPanel>

  <Grid Grid.Row="1" Margin="12,0,12,0">

    <phone:LongListSelector x:Name="Items" 
        ItemsSource="{Binding Items}">

      <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
          <StackPanel Margin="0,0,0,17">
            <TextBlock x:Name="ItemName"
              Text="{Binding ItemName}" 
              TextWrapping="Wrap"/>
          </StackPanel>
        </DataTemplate>
      </phone:LongListSelector.ItemTemplate>

    </phone:LongListSelector>

  </Grid>

</Grid>
</phone:PhoneApplicationPage>

Note: by default, the framework will automatically bind a control based on its name. For example, our LongListSelector having x:Name="Items" means that it will automatically have its ItemsSource set to Items from our ViewModel. However, this doesn't work at design time, so I've left the explicit binding in.

The same is true of the TextBlock inside our DataTemplate. You don't have to explicitly bind it to ItemName if you're not worried about the design-time experience.

MainPage.xaml.cs

public partial class MainPage : PhoneApplicationPage
{
  public MainPage()
  {
    InitializeComponent();            
  }   
}

displaying-items

Interested in learning more about developing for Windows Phone 8? Enter your information to receive e-mail notifications on relevant articles.

Further Reading

comments powered by Disqus