MVVM #1 : Giriş

MVVM’den uzun zamandır bahsetmek istiyordum. Bugün MVVM’i şöyle bir inceleyeceğim.

Yeni
bir projeye başlamak biz yazılımcılar için oldukça heyecan vericidir.
UML’ler tasarlanır, kafada projenin konsepti oturur ve yazmaya büyük bir
şevkle başlarız. Ama maalesef bu projenin alacağı güncellemeleri
düşünmeden kodlamaya başlarız. Daha önceki tecrübelerimden yola çıkarak
şunu çok net söyleyebilirim ki bir projeyi güncellemek, geliştirmek veya
scale etmek bizler için gerçekten en zahmetli kısım, pazartesi sabahı
uyanmak kadar eziyetli. 🙂

MVVM NEDİR?
MVVM,
uygulama geliştirirken uygulamamızdaki modüller için iyi bir izolasyon
sağlamamıza yarayan bir geliştirme yaklaşımıdır. Web tarafındaki
MVC(Model-View-Controller) yaklaşımıyla bire bir aynı olmasa da, odak
noktası Silverlight ve WPF olan bir MVC diyebiliriz de…
NEDEN MVVM?
MVVM
deseni ile geliştirilen uygulamalarda parçalar birbiriyle olabildiğince
az ilişkilidir, bir modülde yapılan bir değişiklik diğerini minimum
seviyede etkiler. Bu izolasyona Separation of Concerns diyoruz.

MVVM
yaklaşımı ile
geliştirilen uygulamalarda tasarımcı tasarımını yapar, kodcu kodunu
yazar ve bu iki katmanda gerçekleşen ve gerçekleşecek olan değişiklikler
birbirinden mümkün
olan en az seviyede etkilenir. Yazının başında bahsettiğim projelerin
güncelleme ve ölçeklendirme zahmeti MVVM sayesinde kısmen ortadan
kalkıyor. Bu sebeple günümüzde MVVM yaklaşımı son derece önemli, ve
şahsi fikrim büyük çaplı projelerde bir should değil must.

Peki nedir bu Model, View ve ViewModel?

Model: Model, uygulamamızda kullanacağımız verilerdir. Verilerimiz için yazdığımız her sınıf birer model’dır.

View: View, uygulamanın arayüzüdür. Uygulamadaki her bir sayfa, her bir User Control birer View’dır.

View Model: Ve veri ile arayüzü bağlayan yapı View Model. ViewModel, View‘ın DataContext’idir.

View’ın
DataContext’i ViewModel’lar olduğundan MVVM’de herşey Binding üzerinden
yürüyor. Ayrıca View ile ViewModel arasındaki akışı sağlarken Command
ve Behavior yapılarından da faydalanıyoruz. Bu yapılar MVVM deseni ile
geliştirilen uygulamalar için olmazsa olmaz.

SONUÇ
MVVM’in kazanımlarını listeleyecek olursak;

  • Kolay ölçeklenebilen projeler
  • Tasarım ve kod tarafının birbirinden ayrılması
  • Daha düzenli ve daha okunabilir bir kod

Önümüzdeki günlerde Command ve
Behavior yapılarını ele alan bir yazı yazmayı düşünüyorum ve MVVM ile
geliştirilmiş bir örnek uygulama paylaşacağım.

Bu yazıda bir geliştirme yaklaşımı olan MVVM’i incelemeye çalıştım, faydalı olması dileğiyle.

Fazlasını Oku

Behavior’larla birlikte çalışan Trigger’lar ve trigger tipleri

Merhaba arkadaşlar,
Bu yazım Blend’deki triggerlar ile ilgili olacak. Önce türkçe karşılığı tetikleme olan Trigger’ların ne olduğunu belirteyim. Trigger’lar behaviorlar ile birlikte çalışır ve kullanım amacı behavior’u tetiklemektir.

Bir behavior’u tetiklemek için birden çok alternatifimiz var.

  • Bir butona basıldığında
  • Sayfadaki herhangi bir kontrolün herhangi bir property’si değiştiğinde 
  • Kod arkasındaki herhangi bir property’nin değeri değiştiğinde
  • Herhangi bir tuşa basıldığında
  • Belirli zaman aralıklarında bir behavior’u tetikleyebiliriz.

Yukarıdaki verdiklerim behavior’u tetiklemek için kullanabileceğiniz yöntemlerin çok ama çok küçük bir kısmı.

Kısaca bahsettikten sonra trigger tiplerine bakalım;

  • EventTrigger: Bir kontrolün herhangi bir olayında(Click, TextChanged, LostFocus, Loaded…) bir behavior’u tetiklemek için kullandığımız trigger çeşididir.
  • PropertyChangedTrigger: Sayfamızdaki kontrollerden veya sayfamızın DataContext’indeki propertylerden herhangi birinin değeri değiştiğinde kullandığımız trigger.
  • DataTrigger: Sayfamızdaki kontrollerden veya sayfamızın DataContext’indeki propertylerden herhangi birinin değeri değiştiğinde belirli şartlarda behavior’u tetikler fakat PropertyChangedTrigger’dan çok farklıdır. PropertyChangedTrigger’da değişme olduğunda kayıtsız şartsız behavior tetiklenir. Fakat DataTrigger’da şu property şu değere gelince tetikle gibi bir şart koyabilirim.
  • DataSourceChangedTrigger: Sayfanın DataContext’i değiştiğinde behavior’u tetiklemek için kullanılır.
  • TimerTrigger: Belirli bir zaman periyodunda behavior’u tetiklemek için kullandığımız trigger. 10 saniyede bir gibi.
  • KeyTrigger: Herhangi bir tuşa basıldında behavior’u tetikler.
  • StoryBoardCompletedTrigger: Bir storyboard tamamlandığında behavior tetiklenir.

Sayfaya herhangi bir kontrol sürükleyin, bu kontrole bir behavior sürükleyin ve properties penceresinden hangi triggerın propertyleri neler incelemenizi tavsiye ederim.

Yukarıda yaptığım bir örneği görüyorsunuz. Kod arkasında degisken adında bir bool property var. Bir timer aracılığıyla 2 saniyede bir bu değişkenin değerini değiştiriyorum. Değişken her true olduğunda Behavior Tetiklendi yazısı görünür oluyor. Her false oluşunda görünmez yapmak için de tabii ki bir diğer behavior kullandım. Kullandığım behavior ChangePropertyAction idi, TextBlock’un Visibility’sine odaklı bir behaviordu, bunu tetiklemek için de DataTrigger kullandım. DataTrigger ise arka kısımdaki degisken adlı booleana odaklı idi.

MainPage.xaml:

	<Grid x:Name="LayoutRoot" Background="White">
<TextBlock HorizontalAlignment="Left" Text="Property: " Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="149" FontSize="15"/>
<TextBlock HorizontalAlignment="Left" Margin="96,10,0,0" TextWrapping="Wrap" Text="{Binding degisken}" VerticalAlignment="Top" Height="22" Width="171" FontSize="15"/>
<TextBlock HorizontalAlignment="Left" Margin="10,55,0,0" TextWrapping="Wrap" Text="Behavior Tetiklendi" VerticalAlignment="Top" FontSize="20" Width="328" Foreground="#FFC34444" Visibility="Collapsed">
<i:Interaction.Triggers>
<ei:DataTrigger Value="True" Binding="{Binding degisken}">
<ei:ChangePropertyAction PropertyName="Visibility">
<ei:ChangePropertyAction.Value>
<Visibility>Visible</Visibility>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</ei:DataTrigger>

<ei:DataTrigger Value="False" Binding="{Binding degisken}">
<ei:ChangePropertyAction PropertyName="Visibility">
<ei:ChangePropertyAction.Value>
<Visibility>Collapsed</Visibility>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</ei:DataTrigger>
</i:Interaction.Triggers>
</TextBlock>
</Grid>

MainPage.xaml.cs

	public partial class MainPage : UserControl, INotifyPropertyChanged
{
public static bool degisken { get; set; }
DispatcherTimer timerDegistir;

public MainPage()
{
this.DataContext = this;
timerDegistir = new DispatcherTimer();
timerDegistir.Interval = new TimeSpan(0,0,2);
timerDegistir.Tick += callback;
InitializeComponent();
timerDegistir.Start();
}

private void callback(object sender, EventArgs e)
{
if (degisken)
{
degisken = false;
FirePropertyChanged("degisken");
}
else
{
degisken = true;
FirePropertyChanged("degisken");
}
}

public event PropertyChangedEventHandler PropertyChanged;

private void FirePropertyChanged(string pname)
{
PropertyChanged(this, new PropertyChangedEventArgs(pname));
}
}

Blend’deki behavior ve trigger’larla harika işler çıkarabilirsiniz. Naçizane tavsiyem inceleyip kurcalamanızdır.
Görüşmek üzere.

Fazlasını Oku