Etkileşimli kullanıcı arabirimi oluşturma

Tamamlandı

Teknik logo.

Önceki derslerde, bir basit form kullanıcı arabirimi oluşturup kullanıcıdan bir ad girmesini ve bir düğmeye sahip bir selamlama görüntülemesini isteyebilirsiniz. Bu derste, en az üç karakter girilene kadar Gönder düğmesini devre dışı bırakarak veya gizleyerek formu daha kolay bir şekilde daha kolay hale getireceksiniz.

İlk olarak, MainPageLogic.UserName değer bağlama aracılığıyla ayarlandığında tam olarak inceleyelim.

1. bir kesme noktası yerleştirin

MainPageLogic. cs dosyasını açın ve özelliğini içeren satırı bulun UserName .

public string UserName { get; set; }

Giriş işaretini metnin içine taşıyarak set ve F9 tuşuna basarak ayarlayıcı üzerinde bir kesme noktası ayarlayın. Bunu, sağ tıklayıp set kesme noktası Ekle/kesme noktası Ekle' yi seçerek de yapabilirsiniz.

2. uygulamayı hata ayıklama modunda çalıştırın

Sonra, uygulamayı hata ayıklama modunda çalıştırın (F5 veya Hata Ayıkla/hata ayıklamayı Başlat). İçine bir şey yazın TextBox ve kesme noktasının isabet almadığına unutmayın. Sekme tuşuna basarsanız, giriş odağı sonraki denetime (bizim örneğimizde, düğme) taşınır. Üzerinde odağın kaybolması, TextBox bağlamayı güncelleştirir, bu nedenle kesme noktası isabet alır.

3. bağlamayı her tuş vuruşu üzerinde güncelleyen şekilde değiştirin

SHIFT + F5 tuşlarına basarak veya hata ayıklamayı/Stop hata ayıklamayı seçerek hata ayıklamayı durdurun.

Gönder düğmesinin etkin olduğu konusunda doğru geri bildirim sağlamak için, üzerinde odak kaybolana kadar bekleyemiyorum TextBox . Luckily, bağlamanın davranışını değiştirmek için bir yol vardır. UserNameText özelliği değiştiğinde, özelliği (bir bağlama hakkında konuşduğumuz kaynak) güncelleştirmeye zorlayabilirsiniz TwoWay . UpdateSourceTriggerVarsayılan olarak olarak ayarlanan bağlamanın öğesini değiştirmemiz gerekiyor LostFocus . UpdateSourceTrigger kaynağın güncelleştirilmesine neden olan bir kaynağı tanımlar.

MainPage. xaml açın ve bulun TextBox . Sonra, ekleyerek bağlamayı değiştirin UpdateSourceTrigger=PropertyChanged . Tüm TextBox etiket artık aşağıdaki gibi görünmelidir:

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

Şimdi uygulamada hata ayıklaması yaparsanız, kesme noktasının her tuş vuruşu ve metin değişikliğine isabet aldığından emin olabilirsiniz. Harika!

Selamlama 'yi göstermek için UI-UI bağlamasını kullandığımızda, her tuş vuruşu bağlamayı harekete geçirildiğinde bu olduğunu hatırlayabiliriz. Bu durumda, bağlama üzerinde tanımlanmıştır TextBlock ve bu nedenle kaynak, TextBox.Text her tuş vuruşu ile değişen özelliktir. UpdateSourceTrigger diğer yönde veri akışını etkiler: bağlama kaynağından, bağlamanın tanımlandığı denetime (bağlama hedefi).

5. özelliği ekleyin IsSubmitAllowed

Daha sonra, formun gönderilmesini izin verilip verilmeyeceğini gösteren bir Boole özelliği eklersiniz. MainPageLogic. cs dosyasını açın ve sınıfa yeni bir özellik ekleyin MainPageLogic .

public bool IsSubmitAllowed => UserName?.Trim().Length > 2;

Bu çok basit bir doğrulamadır: girilen metin, baştaki ve sondaki boşluk karakterlerinin kırpılmasından daha fazla karakter içeriyorsa, bunu Kullanıcı adı olarak kabul ediyoruz.

6. IsSubmitAllowed her değişiklikten sonra yeniden değerlendir UserName

UI çerçevesine, bu özelliği yeniden değerlendirme ve Kullanıcı arabiriminde yansıtmaları konusunda söylememiz gerekir. Bunu yapmanın en iyi yolu, RaisePropertyChanged özelliğinin ayarlayıcısından çağırmanız olur UserName . Ayarlayıcıya kod ekleyebilmek için tam bir özelliğe dönüştürülmesi gerekir. UserNameÖzelliğini aşağıdaki kodla değiştirin:

private string _userName;
public string UserName
{
    get { return _userName; }
    set
    {
        _userName = value;
        RaisePropertyChanged(nameof(IsSubmitAllowed));
    }
}

INotifyPropertyChangedÖzelliğin koddan değiştiği bir durum olmadığı için bu özellik için kullanmadığımızda unutmayın UserName . Ancak, metin içindeki her değişiklik yaptığınızda TextBox , Kullanıcı arabirimine IsSubmitAllowed özelliğin değiştiğini ve yeniden değerlendirildiğini söylememiz gerekir.

7. IsSubmitAllowed özelliği düğmenin IsEnabled özelliğine bağlayın

Artık kod ile işiniz bitti. MainPage. xaml sayfasına dönün ve Gönder düğmesini bulun. IsEnabledDüğme xaml şimdi aşağıdaki gibi görünecek şekilde özniteliği ekleyin:

<Button Margin="10" 
        VerticalAlignment="Center" 
        Click="{x:Bind Logic.HandleSubmit}" 
        IsEnabled="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>

8. uygulamayı çalıştırın

Uygulamayı şimdi çalıştırırsanız, Gönder düğmesinin varsayılan olarak devre dışı bırakıldığını görmeniz gerekir. Birkaç boşluk yazarsanız devre dışı kalır ve yalnızca en az üç boşluk olmayan karakter girildiğinde etkin olur.

bu örnek bazı doğrulamalar gerçekleştirdiğinden Evrensel Windows Platformu (UWP), sonraki bir modülde gösterilecek zengin bir doğrulama özellikleri kümesine sahiptir.

Gönder düğmesi devre dışı olan uygulamanın ekran görüntüsü.

9. Gönder düğmesini gizleyin

Siz veya tasarımcı bir adım daha ilerlemenize karar verebilir, ancak basılana kadar Gönder düğmesini gizleyebiliriz. Bu, kolayca yapılacak bir değişiklik. XAML 'yi düzenlemeniz ve olarak değiştirmeniz yeterlidir IsEnabled Visibility .

Gönder düğmesi gizli olan uygulamanın ekran görüntüsü.

Ancak, birkaç karakter yazarsanız, tüm Kullanıcı arabiriminin atlamalarını görürsünüz. Bunun nedeni, çevresindeki StackPanel yatay ortalandır ( HorizontalAlignment="Center" ) ve daraltıldığında genişliğidir StackPanel Button . Bu sorunu gidermek için, Button bunu şöyle bir 100 birim genişliğinde yapmanız yeterlidir Border .

            <Border Width="100">
                <Button Margin="10" 
                        VerticalAlignment="Center" 
                        Click="{x:Bind Logic.HandleSubmit}" 
                        Visibility="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
            </Border>

Bununla birlikte, içinde öğesinin genişliği yeniden StackPanel Button Border görünürse değişmez.

Özet

Bu derste bağlamanın hata ayıklamasını gördünüz. Bağlama seçeneğini UpdateSourceTrigger öğrendiniz ve daha fazla veri bağlama örneği gördünüz. Ayrıca, veri bağlamayı düzgün kullanıyorsanız C# koduna dokunmadan kullanıcı arabiriminin görünüm ve davranışının nasıl değiştirildiğini de gördünüz.

Sonraki derste, bir listede birden çok öğe görüntülemek için veri bağlamayı nasıl kullanabileceğiniz incelenecektir.

Teknik logo.

Önceki derslerde basit bir form kullanıcı arabirimini kullanarak kullanıcıdan bir ad girmelerini ve bir düğmeyle karşılamalarını İsteyebilirsiniz. Bu derste, en az üç karakter girinceye kadar Gönder düğmesini devre dışı bırakarak veya gizleerek formu biraz daha kullanıcı dostu hale yapacaksınız.

İlk olarak, değerin bağlama aracılığıyla ne MainWindowDataContext.UserName zaman ayar yaptığını tam olarak incele bakalım.

1. Kesme noktası yeri

MainWindowDataContext.cs dosyasını açın ve özelliğini içeren satırı UserName bulun.

public string UserName { get; set; }

Metnin içinde yer alan yazıyı hareket ettirerek ve F9 tuşuna basarak set ayarıcıda bir kesme noktası ayarlayın. Bunu, seçeneğine sağ tıklar ve Kesme set Noktası / Kesme Noktası Ekle'yi seçerek de yapabiliriz.

2. Uygulamayı hata ayıklama modunda çalıştırma

Ardından, uygulamayı hata ayıklama modunda çalıştırın (F5 veya Hata Ayıklama / Hata Ayıklamayı Başlat). içinde bir şey TextBox yazın ve kesme noktası isabeti almayan bir not yazın. Sekme tuşuna basarsanız, giriş odağı bir sonraki denetime (bizim durumumuz için düğme) hareket eder. odağının TextBox kaybedil olması bağlamayı güncelleştirecek, dolayısıyla kesme noktası isabet alamayacak.

3. Bağlamayı, her tuş vuruşu üzerinde güncelleştirmeye göre değiştirme

Shift+F5 tuşlarına basarak veya Hata Ayıkla / Hata Ayıklamayı Durdur'u seçerek hata ayıklamayı durdurun.

Gönder düğmesinin etkinleştirildiğinde doğru geri bildirim sağlamak için odağın üzerinde kaybedilinceye kadar bekleyelememiz TextBox gerekir. Neyse ki bağlamanın davranışını değiştirmenin bir yolu vardır. Metin özelliği her değişirken özelliği (bağlamadan söz etmekle birlikte UserName TwoWay kaynak) güncelleştirmeyi zorabilirsiniz. Bağlamanın varsayılan UpdateSourceTrigger olarak olarak ayarlanmış olan 'sini LostFocus değiştirmemiz gerekir. UpdateSourceTrigger kaynağın güncelleştirilmiş olmasına neden olan durum tanımlar.

MainWindow.xaml'i açın ve TextBox bulun. Ardından ekleyerek bağlamayı UpdateSourceTrigger=PropertyChanged değiştirebilirsiniz. Etiketin TextBox tamamı şimdi aşağıdaki gibi görünüyor:

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

Uygulamada şimdi hata ayıklarsanız, kesme noktası her tuş vuruşu ve metin değişikliğiyle isabet alır. Harika!

Karşılamayı görüntülemek için kullanıcı arabirimi bağlaması kullandığımız zaman, her tuş vuruşu bağlamadan çıktı. Bu durumda, bağlama üzerinde tanımlanmıştır ve bu nedenle her tuş vuruşu ile değişikliken TextBlock TextBox.Text kaynak özelliğidir. UpdateSourceTrigger diğer yönde veri akışını etkiler: bağlama kaynağından bağlamanın tanımlandığı denetime (bağlama hedefi).

5. özelliğini IsSubmitAllowed ekleme

Ardından, formu göndermeye izin verili olup olmadığını belirten bir Boole özelliği eklersiniz. MainWindowDataContext.cs'yi açın ve sınıfına yeni bir özellik MainWindowDataContext ekleyin.

public bool IsSubmitAllowed => !string.IsNullOrEmpty(UserName);

Bu çok basit bir doğrulamadır: girilen metin null veya boş değilse kullanıcı adı olarak kabul edilir.

6. için yapılan her IsSubmitAllowed değişiklik sonrasında yeniden değerlendirme UserName

Kullanıcı arabirimi çerçevesine bu özelliği ne zaman yeniden değerlendirip kullanıcı arabirimine yansıtacaklarını söylememiz gerekir. Bunu yapmak için en iyi yol, RaisePropertyChanged özelliğinin ayarıcısını UserName aramaktır. Ayarıcıya kod ekley etmek için tam özeliklere dönüştürülmesi gerekir. özelliğini UserName aşağıdakiyle değiştirin:

private string _userName;
public string UserName
{
    get { return _userName; }
    set
    {
        _userName = value;
        RaisePropertyChanged(nameof(IsSubmitAllowed));
    }
}

Özelliğin koddan değiştirildi olduğu bir durumla karşı karşılanamay olduğundan, bu INotifyPropertyChanged UserName özellik için kullanmamamız gerekir. Ancak, içinde metin her değiştirisinde kullanıcı arabirimine özelliğin değişmiş olabileceğini ve yeniden değerlendirilmesi TextBox IsSubmitAllowed gerektiğini söylememiz gerekir.

7. IsSubmitAllowed Özelliği düğmenin özelliğine IsEnabled bağlama

Artık kodu tamamlayabilirsiniz. MainPage.xaml'e geri dönüp Gönder düğmesini bulun. Düğmenin IsEnabled XAML'leri şimdi aşağıdaki gibi olacak şekilde özniteliğini ekleyin:

<Button Margin="10" 
        VerticalAlignment="Center" 
        Click="OnSubmitClicked"
        IsEnabled="{Binding IsSubmitAllowed}">Submit</Button>

8. Uygulamayı çalıştırma

Uygulamayı şimdi çalıştırıyorsanız Gönder düğmesinin varsayılan olarak devre dışı bırakılmıştır. Siz bir şey yazacak olur yazmaz etkinleştirilir.

Bu örnek bazı doğrulamalar gerçekleştirse Windows Presentation Foundation (WPF) daha sonraki bir modülde gösterilecek zengin bir doğrulama özellikleri kümesine sahiptir.

Gönder düğmesinin devre dışı olduğu uygulamanın ekran görüntüsü.

Özet

Bu derste bağlamanın hata ayıklamasını gördünüz. Bağlama seçeneğini UpdateSourceTrigger öğrendiniz ve daha fazla veri bağlama örneği gördünüz. Ayrıca, veri bağlamayı düzgün kullanıyorsanız C# koduna dokunmadan kullanıcı arabiriminin görünüm ve davranışının nasıl değiştirildiğini de gördünüz.

Sonraki derste, bir listede birden çok öğe görüntülemek için veri bağlamayı nasıl kullanabileceğiniz incelenecektir.