Change LongListSelector data with MVVM, windows phone 8.0

See more:

C#

XAML

MVVM

Windows-Phone-8

Hi. I started to develop an app for windows phone 8. And my app is like this:
It has a search page, a textbox at te top. and a longlistselector. when a user enter some text and clicks the app bar button (search button),
i'll pass that input to te webservice, and retrieve some data, after that i'll list them in the longlistselector. whenever user write another text and press search button, the list items should change to new ones.

I've read about MVVM, and observable collections and INotifyPropertyChanged interface, but couldn't join them properly. I can't display the daha from webservice in my longlistselector.
Can i do that with MVVM, or what should i use for this?

Here is my search page:

<phone:PhoneApplicationPage
    x:Class="AhmetK_Canli.StokArama"
    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 SampleData/StokAraSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" removed="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="Ürün Kodunu Yaz / Barkod Okut" Style="{StaticResource PhoneTextSubtleStyle}"/>
            <TextBox x:Name="txtUniqueKod" IsReadOnly="False" Margin="0,0,20,0" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                        <phone:LongListSelector Name="stokLongListSelector" Margin="0,0,12,0"  ItemsSource="{Binding Stoklar}">
                            <phone:LongListSelector.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Margin="0,0,0,17">
                                        <TextBlock Text="{Binding StokKodu}" TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle2Style}"/>
                                        <TextBlock Text="{Binding UreticiKodu}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextTitle3Style}"/>
                                        <TextBlock Text="{Binding StokAdi}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                        <TextBlock Text="{Binding RafKoduveAdet}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                        <TextBlock Text="{Binding DepoKoduveAdet}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                    </StackPanel>
                                </DataTemplate>
                            </phone:LongListSelector.ItemTemplate>
                        </phone:LongListSelector>
                </Grid>
    </Grid>

</phone:PhoneApplicationPage>

and code behind of search page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using AhmetK_Canli.Resources;
using AhmetK_Canli.ViewModels;
using ZXing.Mobile;
using Windows.System;
using System.Collections.ObjectModel;


namespace AhmetK_Canli
{
    public partial class StokArama : PhoneApplicationPage
    {
        MobileBarcodeScanner scanner;
        public ObservableCollection<StokAraItemModel> Stoklar { get; set; }
        StokAraViewModel savm = new StokAraViewModel();
        public StokArama()
        {
            Stoklar = new ObservableCollection<StokAraItemModel>();
            DataContext = App._StokAraViewModel;
            InitializeComponent();
            BuildLocalizedApplicationBar();
            scanner = new MobileBarcodeScanner(this.Dispatcher);
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (!App._StokAraViewModel.IsDataLoaded)
            {
                App._StokAraViewModel.LoadData("");
            }
        }
        private void BuildLocalizedApplicationBar()
        {
            ApplicationBar = new ApplicationBar();
            ApplicationBarIconButton btnBarkodOkut = new ApplicationBarIconButton(new Uri("/Assets/AppBar/feature.search.png", UriKind.Relative));
            btnBarkodOkut.Text = "Barkod Okut";
            btnBarkodOkut.Click += btnBarkodOkut_Click;
            ApplicationBar.Buttons.Add(btnBarkodOkut);

            ApplicationBarIconButton btnAra = new ApplicationBarIconButton(new Uri("/Assets/AppBar/refresh.png", UriKind.Relative));
            btnAra.Text = "Ürün Ara";
            btnAra.Click += btnAra_Click;
            ApplicationBar.Buttons.Add(btnAra);
        }

        private void btnAra_Click(object sender, EventArgs e)
        {
            savm.LoadData(txtUniqueKod.Text);
        }
        private void btnBarkodOkut_Click(object sender, EventArgs e)
        {
            scanner.UseCustomOverlay = false;
            scanner.TopText = "Ahmet KOCADOGAN";
            scanner.BottomText = "Barkod otomatik olarak tanınacak\r\n\r\nEkrana kendin dokunursan zoom yapma şansın var.";
            scanner.Scan().ContinueWith(t =>
            {
                //if (t.Result != null)
                HandleScanResult(t.Result);
            });
        }
        void HandleScanResult(ZXing.Result result)
        {
            this.Dispatcher.BeginInvoke(() =>
            {
                txtUniqueKod.Text = result.Text;                
                //NavigationService.Navigate(new Uri("/StokArama.xaml?okunanBarkod="+result.Text, UriKind.Relative));
            });
        }
    }
}

Here is my ViewModel i think:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using AhmetK_Canli;
using System.Data;
using System.ComponentModel;

namespace AhmetK_Canli.ViewModels
{
    public class StokAraViewModel :INotifyPropertyChanged
    {
        public ObservableCollection<StokAraItemModel> Stoklar { get; private set; }
        //servis.Service1SoapClient cervis = new servis.Service1SoapClient();
        public StokAraViewModel()
        {
            this.Stoklar = new ObservableCollection<StokAraItemModel>();
            
            //cervis.HelloWorldCompleted += cervis_HelloWorldCompleted;
        }
        ObservableCollection<servis.StokAraItemModel> asdf = new ObservableCollection<servis.StokAraItemModel>();
        void cervis_HelloWorldCompleted(object sender, servis.HelloWorldCompletedEventArgs e)
        {
            asdf = e.Result;
            foreach (var item in asdf)
            {
                this.Stoklar.Add(new StokAraItemModel() {StokKodu=item.StokKodu,UreticiKodu=item.UreticiKodu,StokAdi=item.StokAdi,RafKoduveAdet=item.RafKoduveAdet,DepoKoduveAdet=item.DepoKoduveAdet });
            }
        }

        public bool IsDataLoaded { get; set; }
        public void LoadData(string _data)
        {
            //cervis.HelloWorldAsync();
            if (_data=="1")
            {
                //this.Stoklar.Clear();
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "CNL810151", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "CNL810151", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "CNL810151", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "CNL810151", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "CNL810151", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "CNL810151", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "CNL810151", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
            }
            else
            {
                //this.Stoklar.Clear();
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "123123", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "CNL123123810151", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "234234", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "CNL323423810151", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "234234", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "234234", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
                this.Stoklar.Add(new StokAraItemModel() { StokKodu = "234234", UreticiKodu = "810151", StokAdi = "ROTILLI KOL DKS R9 R12", RafKoduveAdet = "RK:104-A04 - 5 AD", DepoKoduveAdet = "DK:875-C05 - 500 AD" });
            }
            // Sample data; replace with real data
            


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

and here is the itemmodel

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace AhmetK_Canli.ViewModels
{
    public class StokAraItemModel :INotifyPropertyChanged
    {
        private string _stokKodu;
        private string _ureticiKodu;
        private string _stokAdi;
        private string _rafKoduveAdet;
        private string _depoKoduveAdet;
        public string StokKodu { get { return _stokKodu; } set { if (value != _stokKodu) _stokKodu = value; NotifyPropertyChanged("StokKodu"); } }
        public string UreticiKodu { get { return _ureticiKodu; } set { if (value != _ureticiKodu) _ureticiKodu = value; NotifyPropertyChanged("UreticiKodu"); } }
        public string StokAdi { get { return _stokAdi; } set { if (value != _stokAdi) _stokAdi = value; NotifyPropertyChanged("StokAdi"); } }
        public string RafKoduveAdet { get { return _rafKoduveAdet; } set { if (value != _rafKoduveAdet) _rafKoduveAdet = value; NotifyPropertyChanged("RafKoduveAdet"); } }
        public string DepoKoduveAdet { get { return _depoKoduveAdet; } set { if (value != _depoKoduveAdet) _depoKoduveAdet = value; NotifyPropertyChanged("DepoKoduveAdet"); } }
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (null != handler)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}