Unable to bind ViewModel to View

Question

I want to Display a list of pictures in a LongListSelector on Windows Phone 8.

That´s my Model:

public class LocationMediaModel : INotifyPropertyChanged
{
    private string _id;
    public string ID
    {
        get
        {
            return _id;
        }
        set
        {
            if (value != _id)
            {
                _id = value;
                NotifyPropertyChanged("ID");
            }
        }
    }

    private string _mediatype;
    public string MediaType
    {
        get
        {
            return _mediatype;
        }
        set
        {
            if (value != _mediatype)
            {
                _mediatype = value;
                NotifyPropertyChanged("MediaType");
            }
        }
    }

    private string _url;
    public string URL
    {
        get
        {
            return _url;
        }
        set
        {
            if (value != _url)
            {
                _url = value;
                NotifyPropertyChanged("URL");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Here´s my ViewModel:

public class LocationMediaViewModel : INotifyPropertyChanged
{
    public LocationMediaViewModel()
    {
        this.MediaItems = new ObservableCollection<LocationMediaModel>();
    }

    public ObservableCollection<LocationMediaModel> MediaItems { get; private set; }

    public event PropertyChangedEventHandler PropertyChanged;

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

    // Properties vom Model <-> ViewModel:
    private string _id;
    public string ID
    {
        get
        {
            return _id;
        }
        set
        {
            if (value != _id)
            {
                _id = value;
                NotifyPropertyChanged("ID");
            }
        }
    }

    private string _mediatype;
    public string MediaType
    {
        get
        {
            return _mediatype;
        }
        set
        {
            if (value != _mediatype)
            {
                _mediatype = value;
                NotifyPropertyChanged("MediaType");
            }
        }
    }

    private string _url;
    public string URL
    {
        get
        {
            return _url;
        }
        set
        {
            if (value != _url)
            {
                _url = value;
                NotifyPropertyChanged("URL");
            }
        }
    }

    public bool IsDataLoaded
    {
        get;
        private set;
    }

    public void LoadData()
    {
        // Sample data; replace with real data

        this.MediaItems.Add(new LocationMediaModel() { ID = "3e3b1e48-8463-424b-8256-15c569358dfb", MediaType = "jpg", URL = "http://media.contoso.com/thumbs/f3be161f-cffc-485e-8f1d-52cfcebc1c79.jpg" });
        this.MediaItems.Add(new LocationMediaModel() { ID = "e5e7cb87-04bb-498a-ab57-83bd5c3425c4", MediaType = "jpg", URL = "http://media.contoso.com/thumbs/99FBBBB0-9C16-4E0A-B6E7-A1A709638D06.jpg" });
        this.MediaItems.Add(new LocationMediaModel() { ID = "b45931bf-0778-45cc-9efa-fc1aa397ccd9", MediaType = "jpg", URL = "http://media.contoso.com/thumbs/dff96a4f-f22f-4c6d-af24-504a1c80b7c4.jpg" });
        this.MediaItems.Add(new LocationMediaModel() { ID = "a23e31b1-9232-086c23fe2279ab1bb22dd0", MediaType = "jpg", URL = "http://media.contoso.com/thumbs/1d1315c7-3292-4e67-8189-5db5393ec801.jpg" });
        this.MediaItems.Add(new LocationMediaModel() { ID = "22991670-32b2-45f6-be69-3892b9587865", MediaType = "jpg", URL = "http://media.contoso.com/thumbs/433EA3D7-B9BF-4F3E-96C8-EEC1B9B04896.jpg" });

        this.IsDataLoaded = true;
    }
}

And finaly my XAML view:

 <phone:PhoneApplicationPage
x:Class="WhaGoO.LocationPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DataContext="{d:DesignData DesignData/LocationDetailsSampleData.xaml}"
mc:Ignorable="d"

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<Grid x:Name="LayoutRoot" Background="Transparent">
    <phone:Pivot x:Name="pvtMainPivot" SelectionChanged="evt_PivotControl_SelectionChanged">
        <!-- ++++++++++++++++++ Header -->
        <phone:Pivot.Title>
            <StackPanel HorizontalAlignment="Center">
                <Image Stretch="None" HorizontalAlignment="Left" Margin="-5,0,0,0" MinWidth="50" MaxHeight="50" Source="/mAppData/logo.png"/>
            </StackPanel>
        </phone:Pivot.Title>

        <!-- ++++++++++++++++++ EREIGNISSE -->
        <phone:PivotItem x:Name="pivotitemFavoriten" Header="Ereignisse">
            <StackPanel Margin="0,0,0,15" >
                <Grid VerticalAlignment="Top" Margin="0,0,5,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="120" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="LocationName" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
                    <Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
                    <TextBlock Grid.Column="1" Text="distance" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,40" VerticalAlignment="Bottom"/>
                    <TextBlock Grid.Column="1" Text="lastupload" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
                    <TextBlock Grid.Column="1" Text="ratingscnt" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Bottom"/>
                </Grid>

                <TextBlock Grid.Column="1" Text="Marlene-Dietrich-Platz 1" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Bottom"/>

                <TextBlock Grid.Column="1" Text="Berlin" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Bottom"/>

                <phone:LongListSelector Name="lls_PhotoHub" Margin="0" IsGroupingEnabled="False" LayoutMode="Grid" DataContext="LocationMediaViewModel" ItemsSource="{Binding MediaItems}" GridCellSize="108,108" >
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <Image Width="100" Height="100" Source="{Binding URL}" />
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>

            </StackPanel>
        </phone:PivotItem>

        <!-- ++++++++++++++++++ 2.PivotItem-->
        <phone:PivotItem x:Name="pivotitemUmgebung" Header="Karte">
        </phone:PivotItem>

    </phone:Pivot>
</Grid>

 </phone:PhoneApplicationPage>

But the binding seems not working -> no Images are displayed.

Can anyone help?

Answer 1

As Florent Gz pointed out, I don't see any DataContext initialization either.

In your PhoneApplicationPage code behind, in the constructor, add this:

this.DataContext = new LocationMediaViewModel();