Önceki

Sonraki

Veri bağlama ile veri aktarma

Tamamlandı

Bu derste, uygulamanın durumuna göre kullanıcı arabirimi parçalarını göstererek ve gizleyerek veri girişi için veri bağlamayı nasıl kullanabileceğinizi keşfedeceğiz. Ayrıca tüm INotifyPropertyChanged deseni de öğreneceksiniz.

Şimdi mevcut tanıtımımızı şöyle görünen kolay bir karşılamayla genişletelim.

Gönder düğmesini seçtiğinizde, uygulama en üstte basit bir karşılama görüntüler.

1. Çözümü açın

Visual Studio'yu son derste oluşturduğunuz projeyle birlikte açmadıysanız şimdi açın.

2. Veri girişi kullanıcı arabirimini oluşturma

Veri girişi kullanıcı arabirimi basittir: ekranın ortasındaki tek bir yatay düzende yalnızca TextBlockTextBoxbir , ve Buttonbir . Denetimleri yatay olarak yerleştirmenin en basit yolu, bunun gibi bir StackPanelkullanmaktır.

<StackPanel HorizontalAlignment="Center" 
            VerticalAlignment="Center" 
            Orientation="Horizontal">
    <TextBlock Margin="10" 
               VerticalAlignment="Center" 
               Text="Enter your name: "/>
    <TextBox Name="tbUserName" 
             Margin="10" 
             Width="150" 
             VerticalAlignment="Center"/>
    <Button Margin="10" 
            VerticalAlignment="Center" >Submit</Button>
</StackPanel>

Yukarıdaki kodu kopyalayın ve MainPage.xaml etiketinin içine Grid , saatin TextBlockaltına yapıştırın.

3. UserName özelliğini uygulama ve bağlama

Şimdi dikkatimizi koda çevirelim. MainPage.xaml.cs dosyasını açın (arkasındaki koda geçmek için F7 tuşuna ve XAML'ye geri dönmek için Shift+F7 tuşlarına basabilirsiniz). adlı UserNamebasit bir özellik oluşturun.

public string UserName { get; set; }

MainPage.xaml'e geri dönüp bu yeni oluşturulan özellik ile denetim arasında veri bağlaması TextBox oluşturabiliriz. özniteliğini TextBoxText ekleyerek denetimi değiştirin, örneğin:

<TextBox Name="tbUserName" 
         Margin="10" 
         Width="150" 
         VerticalAlignment="Center" 
         Text="{x:Bind UserName, Mode=TwoWay}"/>

Dekont

ve denetimlerini TextBlockTextBox burada karıştırmamaya dikkat edin. XAML'de çok benzer görünürler, ancak öğesini yerine 'nin metin özelliğine TextBlockTextBoxbağlarsanız UserName uygulama çalışmaz.

Yukarıdaki kodla, kodun özelliği ile UserName özelliği TextBox arasında Text iki yönlü bir bağlama oluşturduk. Başka bir deyişle, kullanıcı her metin girdiğinde (ve odağı öğesinin dışına taşırsa TextBox) UserName koddaki özelliği değişir. Ayrıca, TextBox'nin metni uygulamanın başlangıcında veya parametresiyle "UserName"olayı tetiklediğimizde UserName özelliğinde NotifyPropertyChanged depolanan değere propertyName ayarlanır. (Bu derste bunu yapmayacağız.)

4. Gönder düğmesinin tıklama işleyicisini oluşturma

Ardından, tasarım yüzeyinde Gönder düğmesine çift tıklayın. Bu, kodda otomatik olarak bir Button_Click olay oluşturur ve açar. Button_Click özellikle iyi bir ad değildir, bu nedenle yöntemin adını daha açıklayıcı OnSubmitClickedbir olarak değiştirin. Yazmayı bitirdiğinizde, çizginin yanındaki ampule OnSubmitClicked tıklayın. Menüden 'Button_Clicked' öğesini 'OnSubmitClicked' olarak yeniden adlandır'ı seçin. XAML'ye geri döndüğünüzde düğmenin XAML'sinin şu şekilde göründüğünü denetleyin.

<Button Margin="10" 
        VerticalAlignment="Center" 
        Click="OnSubmitClicked">Submit</Button>

Arkasındaki koda geri döndüğünüzde düğmeye basıldığında basit bir iletişim kutusu görüntüleyelim. OnSubmitClicked yöntemine aşağıdaki kodu ekleyin:

var dlg = new Windows.UI.Popups.MessageDialog($"Hello {UserName}!");
_ = dlg.ShowAsync();

Söz dizimini $"Hello {Username}" bilmiyorsanız, veya String.Format("Hello {0}!", UserName)ile eşdeğerdir"Hello " + UserName + "!". Bu daha kısa ve okunabilir özellik, dize ilişkilendirme olarak adlandırılır ve C# 6'da kullanıma sunulmuştur.

_ bir atma değişkenidir. Yönteminin dönüş değerinin ShowAsync kullanılmadığını belirtmek için kullanılır. ShowAsync yöntemi, gelecekte tamamlanacak bir görevin yer tutucusu olan bir nesnesi döndürürTask. Bizim örneğimizde, dönüş değerini atabilmemiz için görevin tamamlanmasını beklememiz gerekmez.

5. Uygulamayı çalıştırma

Şimdiye kadar ne yaptığımıza bakalım! F5 veya Ctrl+F5 tuşlarına basarak uygulamayı çalıştırın. Adınızı girin, Gönder düğmesini seçin ve bir iletişim kutusu sizi karşılamalıdır.

6. Özelliğini uygulama IsNameNeeded

İletişim kutusunu kapatırsanız, kullanıcı arabiriminin ad girişi bölümünün görüntülendiğini görmeye devam edebilirsiniz. İstediğimiz bu değil. Formu başarıyla doldurulduktan sonra gizlememiz gerekir. Şimdi bunu veri bağlamayı kullanarak sonraki adım olarak gerçekleştirelim.

MainPage.xaml.cs dosyasını açın ve kullanıcının adını girmenin hala gerekli olup olmadığını belirtmek için bir özellik oluşturun. Sınıfına aşağıdaki kodu MainPage ekleyin:

private bool _isNameNeeded = true;

public bool IsNameNeeded
{
    get { return _isNameNeeded; }
    set
    {
        if (value != _isNameNeeded)
        {
            _isNameNeeded = value;
            PropertyChanged?.Invoke(
                this, new PropertyChangedEventArgs(nameof(IsNameNeeded)));
        }
    }
}

Bu, biz ayarlayıcıya gelene kadar bir yedekleme alanı ve varsayılan değeri olan oldukça standart bir Boole özelliğidir true. Özellik ayarlayıcısı önce yeni değerin eski değerle aynı olup olmadığını doğrular. Eğer doğruysa, hiçbir şey yapmanıza gerek yok. Hiçbir şey değişmediyse, düzeni yeniden hesaplama ve denetimleri yeniden işlemeye yönelik uzun bir işlemeye geçmek istemezsiniz. Ancak, özelliğin değeri değiştiyse, olayı kullanarak kullanıcı arabirimine PropertyChanged bunu söylemeniz gerekir.

Yukarıdaki kodda, INotifyPropertyChanged arabiriminin standart desenini görebilirsiniz:

• Değerin değişip değişmediğini doğrulayın.
• Varsa, yeni değeri ayarlayın.
• Kullanıcı arabirimini bilgilendirin.

Kullanıcı arabirimine bildirimde bulunduktan sonra (bağlama modunun veya TwoWayolarak ayarlandığı OneWay varsayılarak), özelliğin alıcısını çağırır, yeni değeri alır ve kullanıcı arabirimini buna göre değiştirir.

7. Gönder düğmesi seçildikten sonra formu gizle

Bizim örneğimizde, ad girişi formunun yalnızca Gönder düğmesi seçilene kadar görünür olmasını istiyoruz. Ardından, selamlama iletisinin gösterildiği aynı anda kaybolması gerekir. Bu kodu en başa ekleyerek yöntemini değiştirelim OnSubmitClicked :

if (string.IsNullOrEmpty(UserName))
{
    return;
}

IsNameNeeded = false;

İlk olarak, burada boş bir kullanıcı adı kabul etmediğimiz için hızlı bir denetim gerçekleştirilir. Bir ad girildikten sonra olarak IsNameNeeded ayarlanır falseve uygulama ileti iletişim kutusunu görüntülemeye devam eder. değerinin IsNameNeeded ayarlanması olayı tetikler NotifyPropertyChanged ve kullanıcı arabirimine bildirir.

Artık kullanıcı arabirimini gizleme koduyla işimiz bitti. XAML'ye geri dönelim!

XAML tarafında , TextBoxve Button ne zaman IsNameNeeded false değerini gizlememiz TextBlockgerekir. Ya da kapsayıcısı olan StackPanelöğesini bir adımda gizleyebiliriz. özniteliğini VisibilityStackPanelaşağıdaki gibi ekleyin:

Visibility="{x:Bind IsNameNeeded, Mode=OneWay}"

Uygulamayı çalıştırın, içine TextBoxadınızı girin ve Gönder düğmesini seçtiğinizde giriş formunun gerçekten kaybolduğunu doğrulayın.

8. Karşılamayı görüntülemek için UI'dan UI'ye bağlamayı kullanın

öğesini daha kalıcı bir ekranla değiştirelim MessageDialog : sol üst köşedeki a TextBlock . XAML'deki ana Grid denetime yeni TextBlock bir ekleme.

<TextBlock Text="{x:Bind sys:String.Format('Hello {0}!',  tbUserName.Text), Mode=OneWay}" 
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Margin="10"/>

Burada bir sürü yeni şey oluyor. Özniteliğin bağlamasını Text dağıtalım!

üzerindeki özelliğinin TextTextBlockdeğerini değerlendirmek için sistem, biçim dizesiyle "Hello {0}"yerleşik String.Format yöntemini çağırır. Biçimlendirilecek nesne olacaktır tbUserName.Text (başka bir deyişle, Text denetimdeki tbUserName özellik). Bağlama modu olarak OneWaytanımlanır, yani TextBlock 'nin Text özelliğinden TextBoxveri alır.

Hem veri bağlamasının kaynağı hem de hedefi kullanıcı arabiriminde olduğundan bu, UI'den UI'ye bağlama olarak adlandırılır. Bunu uygulamada görmek için ad alanını sys (yöntemini içeren System.Format ) tanımlamanız gerekir. XAML'de kök Page etiketine aşağıdaki satırı ekleyin:

xmlns:sys="using:System"

Şimdi uygulamayı çalıştırırsanız, karşılamanın her tuş basıldığında güncelleştirildiğini görürsünüz. Odağı gönder düğmesinden TextBox kaldırmanız veya seçmeniz bile gerekmez!

Gerçek bir dünyada kullanıcı adının görüntülenmesi ui-ui bağlaması aracılığıyla gerçekleşmez. Büyük olasılıkla bir sınıfın DisplayName veya benzer bir User şeyin özelliğine bağlanırsınız.

9. Gönder seçilene kadar karşılamayı gizle

Yazarken selamlama güncelleştirmesine sahip olmak ne kadar güzel görünse de, "Merhaba!" başlangıçtaki metin profesyonelce görünmeyebilir. Gönder düğmesi seçilene kadar selamlamanın TextBlockgörünmez kalması tercih edilir.

Selamlamanın görünür olup olmadığını hesaplamak için adlı GetGreetingVisibilitybir yöntem kullanın ve sınıfına MainPage ekleyin.

public Visibility GetGreetingVisibility()
{
    return IsNameNeeded ? Visibility.Collapsed : Visibility.Visible;
}

gizlerken özelliğine StackPanelVisibility (türüne UIElement.Visibilitysahip) bir bool değer bağladığımız fark edebilirsiniz. Visibility değerini bir bool değere bağlamak o kadar yaygındır ki Microsoft ikisi arasında varsayılan bir dönüştürme oluşturmuştur ve bu nedenle daha önce herhangi bir tür dönüştürme hatası almadık. Ancak, bu otomatik dönüştürme yalnızca özellikler için çalıştığından yöntemin GetGreetingVisibility() Boole değeri yerine döndürmesi UIElement.Visibility gerekir.

Özelliklerde olduğu gibi, yöntemi yeniden değerlendirmesini PropertyChanged istediğimizde kullanıcı arabirimini bilgilendirmek için olayını kullanmamız gerekir. Şimdi bu satırı yönteminin OnSubmitClicked sonuna ekleyelim.

PropertyChanged?.Invoke(this, 
    new PropertyChangedEventArgs(nameof(GetGreetingVisibility)));

Son adım olarak, özniteliğini selamlama TextBlocköğesine ekleyerek Visibility bağlamayı gerçekleştirin. MainPage.xaml dosyasında öğesini şu şekilde görünecek şekilde düzenleyin TextBlock :

<TextBlock Text="{x:Bind sys:String.Format('Hello {0}!',  tbUserName.Text), Mode=OneWay}" 
           Visibility="{x:Bind GetGreetingVisibility(), Mode=OneWay}"
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Margin="10"/>

Sınıfın bir üyesi MainPage olduğundan çağrıya GetGreetingVisibility() ad alanı başvuruları eklememiz gerekmedi.

Son olarak, görüntülemeyi MessageDialogdurdurmak için yönteminden aşağıdaki satırları açıklama satırı yapın OnSubmitClicked .

// var dlg = new Windows.UI.Popups.MessageDialog($"Hello {UserName}!");
// dlg.ShowAsync();

Artık uygulamayı çalıştırmaya ve selamlama iletilerinizin keyfini çıkarmaya hazırsınız.

Özet

Bu derste, veri bağlamanın kullanıcı arabirimi ile kodunuz arasında veya iki kullanıcı arabirimi öğesi arasında veri aktarımını nasıl daha kolay hale getirdiğini gördünüz. Ancak, özellikle özellik ayarlayıcılarında olayı çağırırken PropertyChanged yazılması gereken çok fazla kod vardı. Sonraki derste, desen kullanımını INotifyPropertyChanged basitleştirmek için bir yardımcı sınıf oluşturacaksınız.

Bu derste, uygulamanın durumuna göre kullanıcı arabirimi bölümlerini göstererek ve gizleyerek veri girişi için veri bağlamayı nasıl kullanabileceğinizi keşfedeceğiz. Ayrıca tam INotifyPropertyChanged desen hakkında bilgi edinip hakkında DataContextdaha fazla bilgi edineceksiniz.

Şimdi mevcut tanıtımımızı şöyle görünen kolay bir karşılamayla genişletelim.

Gönder düğmesini seçtiğinizde, uygulama en üstte basit bir karşılama görüntüler.

1. Pencere genelinde DataContext oluşturma

Visual Studio'yu son derste oluşturduğunuz projeyle birlikte açmadıysanız şimdi açın.

Önceki derste, saati görüntüleyen içinde TextBlock örneği oluşturulan ayrılmış Clock bir sınıf oluşturduk. Bu Clock sınıf, saatin kendisi için iş mantığını içeriyordu. Ancak, genellikle bir ekran için çok daha fazla işleve sahip olmanız gerekir ve kullanıcı arabirimindeki her denetim için öğesini ayarlamak DataContext yorucu olabilir.

Neyse ki, DataContext XAML ağacının tamamına veya yalnızca bir parçasına uygulayabilmeniz için tasarlanmıştır. temel özniteliği DataContext , XAML ağacı boyunca devralınmış olmasıdır, ancak belirli bir alt ağaç için herhangi bir noktada üzerine yazılabilir.

Bunu pratikte görelim. adlı MainWindowDataContextyeni bir sınıf oluşturun ve sınıfın ve oluşturucusunun genel olduğundan emin olun:

namespace DatabindingSampleWPF
{
    public class MainWindowDataContext
    {
        public MainWindowDataContext()
        {
        }
    }
}

Şimdi, bu sınıfın bir örneğini tüm Windowiçin olarak DataContext ayarlayın. MainWindow.xaml dosyasında bunu açma Window etiketinden hemen sonra ekleyin:

<Window.DataContext>
    <local:MainWindowDataContext />
</Window.DataContext>

Bu noktada, Visual Studio sınıfın DatabindingSampleWPF.MainWindowDataContext mevcut olmadığını gösterebilir. Bunun nedeni, bu sınıfı eklediğinizden beri projenin derlenmemiş olmasıdır. Projenizi derleyerek bu hatayı düzeltebilirsiniz.

Şu ana kadarki bilgileri gözden geçirelim. DataContext(kök) düzeyinde ayarlanır Window . Bu nesne örneği DataContext içindeki her denetim için olacaktır Window. Tek özel durum, zaten kendi DataContext kümesi olan saatin görüntülenmesi ve dolayısıyla devralınan genel DataContextöğesinin üzerine yazılmasıdırTextBlock. Bunun TextBlock hiyerarşisinde daha fazla denetimi varsa, bunlar üzerinde DataContextTextBlockayarlanan nesneyi de devralırClock.

2. Veri girişi kullanıcı arabirimini oluşturma

Veri girişi kullanıcı arabirimi basittir: ekranın ortasındaki tek bir yatay düzende yalnızca TextBlockTextBoxbir , Button ve bir. Denetimleri yatay olarak yerleştirmenin en basit yolu, bunun gibi bir StackPanelkullanmaktır.

<StackPanel HorizontalAlignment="Center" 
            VerticalAlignment="Center" 
            Orientation="Horizontal">
    <TextBlock Margin="10" 
               VerticalAlignment="Center" 
               Text="Enter your name:"/>
    <TextBox Name="tbName" 
             Margin="10" 
             Width="150" 
             VerticalAlignment="Center"/>
    <Button Margin="10" 
            VerticalAlignment="Center">Submit</Button>
</StackPanel>

Yukarıdaki kodu kopyalayın ve MainPage.xaml etiketinin içine Grid , saatin TextBlockaltına yapıştırın.

3. UserName özelliğini uygulama ve bağlama

Şimdi dikkatimizi koda çevirelim. öğesini açın MainWindowDataContext.csve adlı UserNameyeni bir özellik oluşturun.

public string? UserName { get; set; }

öğesine MainWindow.xamlgeri döndüğünüzde, özelliğiyle denetimi arasında UserName veri bağlaması TextBox oluşturabiliriz. özniteliğini TextBoxText ekleyerek denetimi değiştirin, örneğin:

<TextBox Name="tbUserName" 
         Margin="10" 
         Width="150" 
         VerticalAlignment="Center" 
         Text="{Binding UserName, Mode=TwoWay}"/>

Dekont

ve denetimlerini TextBlockTextBox burada karıştırmamaya dikkat edin. XAML'de çok benzer görünürler, ancak öğesini yerine 'nin metin özelliğine TextBlockTextBoxbağlarsanız UserName uygulama çalışmaz.

Yukarıdaki kodla, kodun Text özelliği ile UserName özelliği TextBox arasında iki yönlü bir bağlama oluşturduk. Başka bir deyişle, kullanıcı her metin girdiğinde (ve odağı öğesinin dışına taşırsa TextBox) UserName koddaki özelliği değişir. Ayrıca, TextBox'nin metni uygulamanın başlangıcında veya parametresiyle "UserName"olayı tetiklediğimizde UserName özelliğinde NotifyPropertyChanged depolanan değere propertyName ayarlanır. (Bu derste bunu yapmayacağız.)

Dekont

WPF'de bağlama modu en yaygın durumlar için otomatik olarak belirlenir. Örneğin, özelliğini TextBoxbağlarsanız Text WPF bağlama modunu TwoWay varsayılan olarak olarak ayarlar. Bu, burada bağlama modunu belirtmeyi atlamış olabileceğimiz ve yeni yazmış Text={Binding UserName}olabileceğimiz anlamına gelir. Bağlama modları hakkında daha fazla bilgiyi burada bulabilirsiniz.

4. Gönder düğmesinin tıklama işleyicisini oluşturma

Ardından, tasarım yüzeyinde Gönder düğmesine çift tıklayın. Bu otomatik olarak ve içinde bir Button_Click olay MainWindow.xaml.cs oluşturur ve dosyayı açar. Button_Click çok açıklayıcı bir ad olmadığından yönteminin adını olarak OnSubmitClickeddeğiştirin. Yazmayı bitirdiğinizde, satırın yanındaki tornavida ipucuna OnSubmitClicked tıklayın ve menüden 'Button_Clicked' öğesini 'OnSubmitClicked' olarak yeniden adlandır'ı seçin. XAML'ye dönün ve düğmenin XAML'sinin şu şekilde göründüğünü denetleyin:

<Button Margin="10" 
        VerticalAlignment="Center" 
        Click="OnSubmitClicked">Submit</Button>

Arkasındaki koda geri döndüğünüzde düğmeye basıldığında basit bir iletişim kutusu görüntüleyelim. sınıfının en üstüneMainWindow, tüm MainWindowolarak ayarlanan DataContext nesneye kolayca erişmemizi MainWindowDataContext sağlayan bir convenience özelliği ekleyin.

private MainWindowDataContext DC => (MainWindowDataContext)DataContext;

Ardından yöntemine OnSubmitClicked aşağıdaki kodu ekleyin:

MessageBox.Show($"Hello {DC.UserName}!");

içine girilen TextBox metnin değeri özelliğinde MainWindowDataContext.UserName depolanır. İlk satır, nesneye bir başvuruyu MainWindowDataContext geçici bir değişkende depolar. İkinci satırda selamlama içeren bir ileti kutusu görüntülenir.

Söz dizimini $"Hello {Username}" bilmiyorsanız, veya String.Format("Hello {0}!", UserName)ile eşdeğerdir"Hello " + UserName + "!". Bu daha kısa ve okunabilir söz dizimi, dize ilişkilendirme olarak adlandırılır ve C# 6'da kullanıma sunulmuştur.

5. Uygulamayı çalıştırma

Şimdiye kadar yaptıklarımızı test edelim! F5 veya Ctrl+F5 tuşlarına basarak uygulamayı çalıştırın. Adınızı girin, Gönder düğmesini seçin ve bir iletişim kutusu sizi karşılamalıdır.

6. Özelliğini uygulama IsNameNeeded

Gönder düğmesine basıldıktan sonra kullanıcı arabiriminin ad girişi bölümünün hala görüntülendiğine dikkat edin. Formu başarıyla doldurulduktan sonra gizlememiz gerekir. Şimdi bunu veri bağlamayı kullanarak sonraki adım olarak gerçekleştirelim.

İlk olarak MainWindowDataContext.cs dosyasını açın ve MainWindowDataContext sınıfında yaptığımız gibi öğesinden INotifyPropertyChangeddevralın Clock .

using System.ComponentModel;

public class MainWindowDataContext : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

Ardından, kullanıcının adını girmenin hala gerekli olup olmadığını belirtmek için bir özellik oluşturun. Sınıfına aşağıdaki kodu MainWindowDataContext ekleyin:

private bool _isNameNeeded = true;

public bool IsNameNeeded
{
    get { return _isNameNeeded; }
    set
    {
        if (value != _isNameNeeded)
        {
            _isNameNeeded = value;
            PropertyChanged?.Invoke(
                this, new PropertyChangedEventArgs(nameof(IsNameNeeded)));
        }
    }
}

Bu, biz ayarlayıcıya gelene kadar bir yedekleme alanı ve varsayılan değeri olan oldukça standart bir Boole özelliğidir true. Özellik ayarlayıcısı önce yeni değerin eski değerle aynı olup olmadığını doğrular. Eğer doğruysa, hiçbir şey yapmanıza gerek yok. Hiçbir şey değişmediyse, düzeni yeniden hesaplama ve denetimleri yeniden işlemeye yönelik uzun bir işlemeye geçmek istemezsiniz. Ancak, özelliğin değeri değiştiyse, olayı kullanarak kullanıcı arabirimine PropertyChanged bunu söylemeniz gerekir.

Yukarıdaki kodda, INotifyPropertyChanged arabiriminin standart desenini görebilirsiniz:

• Değerin değişip değişmediğini doğrulayın.
• Varsa, yeni değeri ayarlayın.
• Kullanıcı arabirimini bilgilendirin.

Kullanıcı arabirimine bildirimde bulunduktan sonra (bağlama modunun veya TwoWayolarak ayarlandığı OneWay varsayılarak), özelliğin alıcısını çağırır, yeni değeri alır ve kullanıcı arabirimini buna göre değiştirir.

7. Gönder düğmesi seçildikten sonra formu gizle

Bizim örneğimizde, ad girişi formunun yalnızca Gönder düğmesi seçilene kadar görünür olmasını istiyoruz. Ardından, selamlama iletisinin gösterildiği aynı anda kaybolması gerekir. Bu kodu en başa ekleyerek yöntemini değiştirelim OnSubmitClicked :

if (string.IsNullOrWhiteSpace(DC.UserName))
{
    return;
}

DC.IsNameNeeded = false;

İlk olarak, burada boş bir kullanıcı adı kabul etmediğimiz için hızlı bir denetim gerçekleştirilir. Bir ad girildikten sonra olarak IsNameNeeded ayarlanır falseve uygulama ileti iletişim kutusunu görüntülemeye devam eder. değerinin IsNameNeeded ayarlanması olayı tetikler NotifyPropertyChanged ve kullanıcı arabirimine bildirir.

Artık kullanıcı arabirimini gizleme koduyla işimiz bitti. XAML'ye geri dönelim!

XAML tarafında , TextBoxve Button ne zaman IsNameNeeded false değerini gizlememiz TextBlockgerekir. Ya da kapsayıcısı olan StackPanelöğesini bir adımda gizleyebiliriz. özniteliğini VisibilityStackPanelaşağıdaki gibi ekleyin:

Visibility="{Binding IsNameNeeded, Converter={StaticResource BooleanToVisibilityConverter}}"

Bu bağlama iki bölümden oluşur. İlk bölüm bağlama yolunu belirtir. Bu yol, öğesinin MainWindowDataContext tamamı Windowolarak ayarlanan nesnenin özelliğine DataContext işaret IsNameNeeded eder.

IsNameNeeded Ancak özelliği bir Boole değeriyken Visibility System.Windows.Visibility türündedirenum. İkisi arasında bir dönüşüm yapmamız gerekiyor. Bu dönüştürme çok yaygındır, WPF'nin adlı BooleanToVisibilityConverteryerleşik bir yardımcı sınıfı vardır. Bu sınıfın bir örneğini oluşturmamız ve bağlama bildiriminden buna başvurmamız gerekir.

Bu sınıfın örneğini nesnesinin kaynağı olarak XAML'de oluştururuz Window . Her FrameworkElement öğesinin kendi kaynak koleksiyonu olabilir ve koleksiyondaki her kaynağı tanımlayan bir anahtar bulunur. BooleanToVisibilityConverter Yukarıdaki bağlamada, kaynak koleksiyonunun içindeki bir BooleanToVisibilityConverter nesneye işaret eden bu anahtar yer alır. Kaynak koleksiyonunu, açılış etiketinden hemen sonra öğesine Windowaşağıdaki kodu ekleyerek tanımlayabilirsiniz:

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>

Uygulamayı çalıştırın, içine TextBoxadınızı girin ve Gönder düğmesini seçtiğinizde giriş formunun gerçekten kaybolduğunu doğrulayın.

8. Karşılamayı görüntülemek için UI'dan UI'ye bağlamayı kullanın

öğesini daha kalıcı bir ekranla değiştirelim MessageDialog : sol üst köşedeki a TextBlock . XAML'deki ana Grid denetime yeni TextBlock bir ekleme.

<TextBlock Text="{Binding Text, ElementName=tbName, StringFormat='Hello {0}!'}"
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Margin="10"/>

Bu yeni sürümünde sunulan birkaç yeni TextBlockşey vardır. Özniteliğin bağlamasını Text dağıtalım!

üzerindeki özelliğinin TextTextBlockdeğerini değerlendirmek için sistem, biçim dizesiyle "Hello {0}"yerleşik String.Format yöntemini çağırır. Biçimlendirilecek nesne olacaktır tbName.Text (başka bir deyişle, Text denetimdeki tbName özellik). Bağlama modu otomatik olarak olarak OneWaytanımlanır, yani TextBlock 'nin Text özelliğinden TextBoxveri alır.

Hem veri bağlamasının kaynağı hem de hedefi kullanıcı arabiriminde olduğundan bu, UI'den UI'ye bağlama olarak adlandırılır. Uygulamayı çalışır durumda görmek için uygulamayı çalıştırmanız gerekir. Selamlamanın her tuş basısıyla nasıl güncelleştirildiğinden dikkat edin. Odağı gönder düğmesinden TextBox kaldırmanız veya seçmeniz bile gerekmez!

Gerçek bir dünyada kullanıcı adının görüntülenmesi ui-ui bağlaması aracılığıyla gerçekleşmez. Büyük olasılıkla bir User sınıfın DisplayName özelliğine veya benzer bir yaklaşıma bağlanırsınız.

9. Gönder seçilene kadar karşılamayı gizle

Yazarken selamlama güncelleştirmesine sahip olmak ne kadar güzel görünse de, "Merhaba!" başlangıçtaki metin profesyonelce görünmeyebilir. Gönder düğmesi seçilene kadar selamlamanın TextBlockgörünmez kalması tercih edilir.

Selamlamanın görünür olup olmadığını hesaplamak için adlı GreetingVisibilitybir özellik kullanın ve sınıfına MainWindowDataContext ekleyin.

public Visibility GreetingVisibility => IsNameNeeded ? Visibility.Collapsed : Visibility.Visible;

'de de ad alanını usingeklemeniz MainWindowDataContext gerekirSystem.Windows.

Daha önce öğesini gizlediğimizde StackPanelözelliğine Visibility bir bool değer bağladığımızdan (türüne System.Windows.Visibilitysahip) hatırlayabilirsiniz. Ancak bağlama kaynağı zaten doğru veri türündeyse atlayabiliriz BooleanToVisibilityConverter .

Daha önce olduğu gibi, kullanıcı arabirimini PropertyChanged yeniden değerlendirmesini GreetingVisibilityistediğimizde bunu bildirmek için olayını kullanmamız gerekir. Şimdi bu satırı ayarlayıcıdaki IsNameNeeded bloğun if sonuna ekleyelim.

PropertyChanged?.Invoke(
    this, new PropertyChangedEventArgs(nameof(GreetingVisibility)));

Bu, her IsNameNeeded değiştirildiğinde iki PropertyChanged olay tetiklendiğinden emin olur: biri özelliğin IsNameNeeded kendisi için, biri de hesaplanan özelliği GreetingVisibilityiçin , buna bağlıdır IsNameNeeded.

Son adım olarak, özniteliğini selamlama TextBlocköğesine Visibility ekleyerek bağlamayı gerçekleştirin. içinde MainWindow.xamlöğesini şu şekilde görünecek şekilde düzenleyin TextBlock :

<TextBlock Text="{Binding Text, ElementName=tbName, StringFormat='Hello {0}!'}"
           Visibility="{Binding GreetingVisibility}"
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Margin="10"/>

Son olarak, görüntülemeyi MessageBoxdurdurmak için içindeki yönteminden OnSubmitClickedMainWindow.xaml.csaşağıdaki satırı açıklama satırı yapın.

// MessageBox.Show($"Hello {DC.UserName}!");

Artık uygulamayı çalıştırmaya ve selamlama iletilerinizin keyfini çıkarmaya hazırsınız.

Özet

Bu derste, veri bağlamanın kullanıcı arabirimi ile kodunuz arasında veya iki kullanıcı arabirimi öğesi arasında veri aktarımını nasıl daha kolay hale getirdiğini gördünüz. Ancak, özellikle özellik ayarlayıcılarında olayı çağırırken PropertyChanged yazılması gereken çok fazla kod vardı. Sonraki derste, desen kullanımını INotifyPropertyChanged basitleştirmek için bir yardımcı sınıf oluşturacaksınız.

Devam et