25 Ağustos 2023 Cuma

C#'ta Veri Bağlamak Zor (mu?)

 Selam, bu yazı kısa olacak. Hep kafama takılan bir soru, veri bağlama bu kadar uğraşma gerektirmeden Visual Studio kabiliyetlerini kullanarak yapılamaz mı? Mevcut iki kontrolün özelliklerini birbirine karşılıklı bağlayabiliyoruz. Ama "bir değişken olsun , ben de bu değişkene kontrolü bağlarsam onun özelliğini değiştirsin, arkaplan kodundan da değere müdahale edebileyim", deyince bir sürü iş çıkıyor başımıza. Yazılımcının iyisi tembel olanıdır deyip , bu işe kolay bir çözüm aradım ve aşağıda yazdıklarım çıktı ortaya. Hadi bakalım,

Öncelikle Visual Studio IDE ile yeni bir WPF uygulama projesi başlatıyoruz.

Uygulama şablonu olarak WPF .NET uygulamasını seçiyoruz.

Projemize bir isim verelim ve Oluştur butonunu tıklayalım.

Küçük bir pencere denemeler yapmak için yeterli, bu yüzden pencere boyutlarını XAML kodunda değiştirelim, bir de default Grid yerleşimi yerine StackPanel yerleşimi yapalım kolay olsun. Derdimiz görüntüsü değil işlevi ne de olsa.

MainWindow.xaml

<Window x:Class="BindingDnm.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BindingDnm"
        mc:Ignorable="d"
        Title="MainWindow" Height="150" Width="200">
    <StackPanel>
       
    </StackPanel>
</Window>


WPF XAML Kodunda İki Elemanın Özelliklerini Birbirine Bağlamak

Öncelikle görselimize 2 tane TextBox kontrolü koyalım. Bunların içeriklerini birbirlerine bağlayacağız.

    <StackPanel>
        <TextBox Name="TB1"/>
        <TextBox Name="TB2"/>
    </StackPanel>

Çalıştırırsak iki TextBox içeriğini istediğimiz gibi değiştirebildiğimizi göreceğiz.

Amacımız birinde yazdığımızın diğerine yansıması. Bunun için Data Binding yani Veri Bağlama yapısını kullanacağız. İlk TextBox'ı seçelim (Name="TB1" olanı). Visual Studio Özellikler penceresinde kontrolün Text özelliğini bulalım ve özellik değeri yanındaki küçük CheckBox'ı tıklayalım.

Açılan seçeneklerden Veri Bağlama Oluştur.. seçeneğini seçelim.

Açılan popup pencerede Bağlama Türü olarak ElementName - Element Adı olarak TB2 - Yol olarak Text seçimlerini yapıp Tamam butonuna tıklayalım.

Tam karşılığı işlemi de TB2 adını verdiğimiz TextBox için yapalım.

Şimdi programı çalıştırırsak her iki TextBox kontrolünden hangisinde yazılanı değiştirirsek diğerinin de otomatik olarak aynı yazıları gösterdiğini test edebiliriz.



Bir Değişken Üzerinden Veri Bağlaması Yapmak

Veri bağlaması genelde yukarıdaki gibi basit işler için gerekmiyor. Bir değişken değerine bağlama yapmak gerekiyor çoğunlukla. Örneğin bir değere bağlı olarak sayfada animasyon yapmak için ya tek tek kod yazacaksınız ya veri bağlama yapacaksınız ama o da kod yazmaktan geçiyor. Hele bir de çiftyönlü bağlama yapmaya kalkarsanız işler iyice karışıyor. Şimdi bunu nasıl Visual Studio özelliklerini kullanarak basitçe yapabiliriz bakalım. 

Öncelikle kod yazmadan veri bağlamak için bağlanan verinin de bir kontrolün özelliği olması işimizi çok kolaylaştırdığı için değişkenimizi de bir kontrol olarak tanımlarsak işimiz çok kolay olacak. Öncelikle XAML kodumuzda sayfa kaynağına bir değişken olarak bir Label nesnesi tanımlıyoruz.

....
    <Window.Resources>
        <Label Content="dnm" x:Key="zeus"/>
    </Window.Resources>
    <StackPanel>
....

Şimdi TB1 TextBox'ın Text özelliğini bu zeus isimli Label nesnesinin Content özelliğine çift yönlü bağlamak için, öncelikle Özellikler penceresinde Text özelliği yanındaki küçük CheckBox'ı tıklayıp Veri Bağlama Oluştur.. seçelim. 

Bağlama Türü: StaticResource - Kaynak: zeus - Yol: Content seçelim, daha bitmedi

Popup'ta en aşağıda resimde gösterdiğim Daha fazla ayarlar bölümünü açalım.

Bağlama yönü: TwoWay - UpdateSourceTrigger: PropertyCahanged seçiyoruz ve Tamam butonuna tıklıyoruz.

TB2 isimli TextBox için de aynı bağlamayı yaparsak artık TextBox kontrollerimiz birbirine değil ama aynı değişkene bağlanmış olurlar. Bağlamayı çift yönlü (TwoWay) olarak yaptığımız için de TextBox içeriğini kullanıcı değiştirince zeus isimli Label'in Content değeri de değişir. Bu sayede diğer TextBox da otomatik olarak değer değiştirecektir. 

Peki bu değişken olarak kullandığımız Label'ın Content değerini arkaplan kodundan değiştirsek nasıl olur?. Onu test etmek için de görsele bir tane B1 isimli Button ekleyelim.

....
    <StackPanel>
        <TextBox Name="TB1" Text="{Binding ...
        <TextBox Name="TB2" Text="{Binding ...
        <Button Content="Beni Tıkla" Name="B1"/>
    </StackPanel>
....

Şimdi Özellikler penceresinde B1 özelliklerinde olaylar sekmesinde Click olayını bulalım ve değerine çift tıklayarak butonun tıklama olayı kodunun Visual Studio tarafından otomatik oluşturulmasını sağlayalım.

Kod sayfası otomatik açılacaktır

        private void B1_Click(object sender, RoutedEventArgs e)
        {

        }

Bloğun içine aşağıdaki kodu yazarak butona tıklandığında zeus Label'ının Content özelliğini değiştirebiliriz.

        private void B1_Click(object sender, RoutedEventArgs e)
        {
            Label l = (Label)this.Resources["zeus"];
            l.Content = "Arkaplan kodundan değiştirildi";
        }

Çalıştırırsak ve butona tıklarsak TextBox'ların ikisinin de içeriğinin otomatik değiştiğini göreceğiz.

Gördüğümüz üzere kendimizi üzmeden bir değişkene veri bağlaması yaptık ve arkaplan kodundan da bu değişkene kolayca eriştik. Bir sürü kod yazmadan böyle bir yöntem de kullanılabilir, her seferinde StackOverflow bırkalamaya gerek yok.

Umarım size de faydası olur. Sonraki yazılarda görüşmek dileğiyle kalın sağlıcakla..






Hiç yorum yok:

Yorum Gönder