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">
<Grid x:Name="LayoutRoot" removed="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<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>
<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 =>
{
HandleScanResult(t.Result);
});
}
void HandleScanResult(ZXing.Result result)
{
this.Dispatcher.BeginInvoke(() =>
{
txtUniqueKod.Text = result.Text;
});
}
}
}
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; }
public StokAraViewModel()
{
this.Stoklar = new ObservableCollection<StokAraItemModel>();
}
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)
{
if (_data=="1")
{
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.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" });
}
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));
}
}
}
}