Archiwa tagu: XAML

MVVM Light i Windows 8 App

Aby rozpocząć swoją przygodę z pisaniem aplikacji na Windows Store i korzystanie z wzorca MVVM Light należy:

1. Ściągnąć „MVVM Light” poprzez NUGET PACKET MANAGER

2. Zamienić w pliku App.xaml xmlns:vm=”clr-namespace:[twój namespace].ViewModel” na xmlns:vm=”using:[twój namespace].ViewModel”

3. Zapoznać się z klasą ‚ViewModelLocator’ i jej nagłówkiem.

4. Dodać DataContext=”{Binding Source={StaticResource Locator}, Path=ViewModelName}” do widoku MainPage.xaml gdzie ViewModelName jest nazwą obiektu typu naszego ViewModel’u.

[code]//w klasie ViewModelLocator.cs
public MainViewModel ViewModelName
{
get
{
return ServiceLocator.Current.GetInstance<MainViewModel>();
}
}[/code]
5. Skompilować, dodać breakpointy w konstruktorach MainPage.cs i MainViewModel.cs. Upewnić się co do kolejności wykonywania i zapamiętać.

Po wykonaniu wszystkich powyższych kroków można zacząć tworzyć swoją ‚pierwszą’ aplikację w MVVM.

Wykorzystując MVVM’a dobrą praktyką jest nie tworzenie kodu w codebehind (np. MainPage.cs itd.). Przenosimy całą logikę do ViewModel.

Sam autor powiedział o tym coś w tym stylu: ‚Jeśli korzystasz z MVVM’a i programujesz w codebehind – to MVVM przyjdzie do Ciebie do domu i zabierze Ci rodzinę’ 🙂

Jest kilka zagadnień w korzystaniu MVVM które na początku sprawiają problemy. Np. eventy. W podejściu codehind to był dwuklik i już się miało właściwość np. w buttonie onclick i metodę obsługującą to zdarzenie w codebehind.

W MVVM korzystamy z właściwości buttona command, a w ViewModel ustawiamy co ma się dziać po wywołaniu zdarzenia.

W widoku:

[code]<Button x:Name=”btnTest” Content=”Sample” Command=”BtnTestCommand” />[/code]
W ViewModel:

[code]public RelayCommand BtnTestCommand { get; private set; }

public MainViewModel()
{
BtnTestCommand = new RelayCommand(() =>
{
//button został kliknięty, możesz tutaj coś zrobić
}, () =>
{
return true;
//możesz dać tutaj warunek, jeśli true to wykona się akcja, jeśli false nic się stanie
});
}[/code]
W ten sposób obsługujemy zdarzenia w podejściu MVVM.

Natomiast jak mamy ładować dane? Odpowiedź jest niezwykle prosta. Używamy do tego bindings (wiązań).

Poniżej prosty przykład.

W widoku:

[code]<TextBlock Text=”{Binding PierwszeWiazanie}” FontSize=”24″ />[/code]
W ViewModel:

[code]private string _PierwszeWiazanie;
public string PierwszeWiazanie
{
get
{
return _PierwszeWiazanie;
}
set
{
_PierwszeWiazanie = value;
RaisePropertyChanged(„PierwszeWiazanie”);
BtnTestCommand.RaiseCanExecuteChanged();//po ustawieniu set wywoła się zdarzenie BtnTestCommand
}
}[/code]
W ten sposób mamy rozwiązane 2 podstawowe zagadnienia. Zostało tylko wiązanie kolekcji 😉 ale to też nie jest nic trudnego. Przykład poniżej.

W widoku:
[code]
<ListBox x:Name=”listBoxEvent”
ItemsSource=”{Binding ListaObiektow}” SelectedItem=”{Binding SelectedItem, Mode=TwoWay}”>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text=”{Binding WlasciwoscObiektu}” />
</DataTemplate>
</ListBox.ItemTemplate>
<WinRtBehaviors:Interaction.Behaviors>
<Win8nl_Behavior:EventToCommandBehavior Command=”ItemSelectionChangedCommand” Event=”SelectionChanged”/>
</WinRtBehaviors:Interaction.Behaviors>
</ListBox>[/code]
W ViewModel:
[code]
ObservableCollection<Obiekt> _ListaObiektow;
public ObservableCollection<Obiekt> ListaObiektow { get { return this._dni; } }

public class Obiekt{
public string WlasciwoscObiektu {get;set;}
}[/code]
Oraz inicjalizacja kolekcji _ListaObiektow w konstruktorze. Jeśli chodzi o podstawy MVVM to wszystko 😉