Etkileşimli kullanıcı arabirimi oluşturma
Önceki derslerde, kullanıcıdan bir ad girmesini isteyen ve bir düğmeyle selamlama görüntüleyen basit bir form kullanıcı arabirimi oluşturacaksınız. Bu derste, Gönder düğmesini en az üç karakter girilene kadar devre dışı bırakarak veya gizleyerek formu biraz daha kullanıcı dostu hale getireceksiniz.
İlk olarak, bağlama aracılığıyla değerin MainPageLogic.UserName tam olarak ne zaman ayarlandığını inceleyelim.
1. Kesme noktası yerleştirme
dosyasını açın MainPageLogic.cs ve özelliğini içeren UserName satırı bulun.
public string UserName { get; set; }
Şapka işaretini metnin içine taşıyıp F9 tuşuna basarak ayarlayıcıda set bir kesme noktası ayarlayın. Bu, sağ tıklayıp set Kesme Noktası / Kesme Noktası Ekle'yi seçerek de gerçekleştirilebilir.
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). öğesine TextBox bir şey yazın ve kesme noktasına isabet olmadığına dikkat edin. Sekme tuşuna basarsanız, giriş odağı bir sonraki denetime taşınır (bizim durumumuzda düğme). Odağın kaybolması bağlamayı TextBox güncelleştirir, bu nedenle kesme noktasına isabet edilir.
3. Bağlamayı, her tuş vuruşu üzerinde güncelleştirilmesi için değiştirin
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ği zaman hakkında doğru geri bildirim sağlamak için, üzerinde odak kaybedilene TextBoxkadar bekleyemeyiz. Neyse ki bağlamanın davranışını değiştirmenin bir yolu vardır. Metin özelliği her değiştiğinde UserName özelliği (bir bağlamadan söz TwoWay ettiğimiz gibi kaynaktır) güncelleştirmeye zorlayabilirsiniz. Varsayılan olarak olarak ayarlanan LostFocus bağlamanın değerini değiştirmemiz UpdateSourceTrigger gerekir. UpdateSourceTrigger kaynağın güncelleştirilmeye neden olan koşulları tanımlar.
MainPage.xaml dosyasını açın ve öğesini TextBoxbulun. Ardından, ekleyerek UpdateSourceTrigger=PropertyChangedbağlamayı değiştirin. Etiketin tamamı TextBox şu şekilde görünmelidir:
<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ının her tuş vuruşu ve metin değişikliğiyle isabet aldığını görebilirsiniz. Harika!
Karşılamayı görüntülemek için UI-UI bağlamasını kullandığımızda, her tuş vuruşunun bağlamayı tetiklediğini hatırlayabilirsiniz. Bu durumda bağlama üzerinde TextBlocktanımlanmıştır ve bu nedenle kaynak özelliğidir TextBox.Text ve her tuş vuruşuyla değişir. UpdateSourceTrigger veri akışını diğer yönde etkiler. Bağlama kaynağından bağlamanın tanımlandığı denetime (bağlama hedefi) akar.
5. Özelliği ekleme IsSubmitAllowed
Ardından, formu göndermeye izin verilip verilmeyeceğini belirten bir Boole özelliği eklersiniz. MainPageLogic.cs dosyasını açın ve sınıfına MainPageLogic yeni bir özellik ekleyin.
public bool IsSubmitAllowed => UserName?.Trim().Length > 2;
Bu çok basit bir doğrulamadır: Baştaki ve sondaki boşluk karakterleriyle kırpılmış olarak girilen metin ikiden fazla karakter içeriyorsa, bunu kullanıcı adı olarak kabul ederiz.
6. Her değişiklik sonrasında yeniden değerlendir IsSubmitAllowedUserName
Ui çerçevesine bu özelliği ne zaman yeniden değerlendirip kullanıcı arabirimine yansıtacağımızı söylememiz gerekir. Bu yeniden değerlendirmeyi tetiklemenin en iyi yolu, özelliğin ayarlayıcısını çağırmaktır RaisePropertyChangedUserName . Ayarlayıcıya kod ekleyebilmek için tam ö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));
}
}
Özelliğin koddan değiştirildiği UserName bir durum henüz olmadığından bu özellik için kullanmıyoruzINotifyPropertyChanged. Ancak, içinde metin her değiştiğinde TextBox, kullanıcı arabirimine özelliğin IsSubmitAllowed değişmiş olabileceğini ve yeniden değerlendirilmesi gerektiğini söylememiz gerekir.
7. Özelliği düğmenin IsEnabled özelliğine bağlayın IsSubmitAllowed
Artık kodla işiniz bitti. MainPage.xaml'e dönün ve Gönder düğmesini bulun. Düğmenin IsEnabled XAML'sinin şu şekilde görünmesi için özniteliğini ekleyin:
<Button Margin="10"
VerticalAlignment="Center"
Click="{x:Bind Logic.Submit}"
IsEnabled="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
8. Uygulamayı çalıştırma
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 etkinleştirilir.
Bu örnek bazı doğrulamalar gerçekleştirse de, UWP'nin daha sonraki bir modülde gösterilecek zengin bir doğrulama özellikleri kümesi vardır.
9. Gönder düğmesini gizleme
Siz veya tasarımcınız bir adım ileri gitmeye karar verebilir ve basılana kadar Gönder düğmesini gizleyebilirsiniz. Bu kolay bir değişikliktir, şimdi yapalım. Yalnızca XAML'yi düzenleyin ve olarak VisibilitydeğiştirinIsEnabled.
Ancak, birkaç karakter yazarsanız tüm kullanıcı arabiriminin atlandığını görürsünüz. Bunun nedeni çevrenin StackPanel yatay olarak ortalanmış ()HorizontalAlignment="Center" olması ve daraltıldığında Button genişliğinin StackPanel daha küçük olmasıdır. Bu sorunu çözmek için, 100 birim genişliğinde Borderbir içine şunun gibi yerleştirebilirsinizButton.
<Border Width="100">
<Button Margin="10"
VerticalAlignment="Center"
Click="{x:Bind Logic.Submit}"
Visibility="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
</Border>
Bununla, StackPanel içindeki Border yeniden göründüğünde Button genişliği değişmez.
Özet
Bu derste bağlamanın nasıl hata ayıklayabileceğinizi gördünüz. Bağlama seçeneği hakkında UpdateSourceTrigger bilgi edindiniz ve daha fazla veri bağlama örneği gördünüz. Ayrıca, veri bağlamayı düzgün kullanıyorsanız, kullanıcı arabiriminin görünümünün ve davranışının C# koduna dokunmadan nasıl değiştirilebileceğini gösteren bir örnek de gördünüz.
Sonraki derste, bir listede birden çok öğeyi görüntülemek için veri bağlamayı nasıl kullanabileceğinizi inceleyeceğiz.
Önceki derslerde, kullanıcıdan bir ad girmesini isteyen ve bir düğmeyle selamlama görüntüleyen basit bir form kullanıcı arabirimi oluşturdunuz. Bu derste, Gönder düğmesini en az üç karakter girilene kadar devre dışı bırakarak veya gizleyerek formu biraz daha kullanıcı dostu hale getireceksiniz.
İlk olarak, bağlama aracılığıyla değerin MainWindowDataContext.UserName tam olarak ne zaman ayarlandığını inceleyelim.
1. Kesme noktası yerleştirme
MainWindowDataContext.cs dosyasını açın ve özelliğini içeren UserName satırı bulun.
public string UserName { get; set; }
Şapka işaretini metnin içine taşıyıp F9 tuşuna basarak ayarlayıcıda set bir kesme noktası ayarlayın. Bu, sağ tıklayıp setKesme Noktası / Kesme Noktası Ekle'yi seçerek de gerçekleştirilebilir.
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). öğesine TextBox bir şey yazın ve kesme noktasının isabet almadığını fark edin. Sekme tuşuna basarsanız, giriş odağı bir sonraki denetime taşınır (bizim durumumuzda düğme). Odağın kaybolması bağlamayı TextBox güncelleştirir, bu nedenle kesme noktasına isabet edilir.
3. Bağlamayı, her tuş vuruşu üzerinde güncelleştirilmesi için değiştirin
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ği zaman hakkında doğru geri bildirim sağlamak için, üzerinde odak kaybedilene TextBoxkadar bekleyemeyiz. Neyse ki bağlamanın davranışını değiştirmenin bir yolu vardır. Metin özelliği her değiştiğinde UserName özelliği (bir bağlamadan söz TwoWay ettiğimiz gibi kaynaktır) güncelleştirmeye zorlayabilirsiniz. Varsayılan olarak olarak ayarlanan LostFocus bağlamanın değerini değiştirmemiz UpdateSourceTrigger gerekir. UpdateSourceTrigger kaynağın güncelleştirilmeye neden olan koşulları tanımlar.
öğesini açın MainWindow.xamlve öğesini TextBoxbulun. Ardından, ekleyerek UpdateSourceTrigger=PropertyChangedbağlamayı değiştirin. Etiketin tamamı TextBox şu şekilde görünmelidir:
<TextBox Name="tbName"
Margin="10"
Width="150"
VerticalAlignment="Center"
Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
Uygulamada şimdi hata ayıklarsanız, kesme noktasının her tuş vuruşu ve metin değişikliğiyle isabet aldığını görebilirsiniz. Harika!
Karşılamayı görüntülemek için UI-UI bağlamasını kullandığımızda, bağlamayı her tuş vuruşunun tetiklediğini hatırlayabilirsiniz. Bu durumda bağlama üzerinde TextBlocktanımlanmıştır ve bu nedenle kaynak özelliğidir TextBox.Text ve her tuş vuruşuyla değişir. UpdateSourceTrigger veri akışını diğer yönde etkiler. Bağlama kaynağından bağlamanın tanımlandığı denetime (bağlama hedefi) akar.
5. Özelliği ekleme IsSubmitAllowed
Ardından, formu göndermeye izin verilip verilmeyeceğini belirten bir Boole özelliği eklersiniz. öğesini açın MainWindowDataContext.cs ve sınıfına MainWindowDataContext yeni bir özellik ekleyin.
public bool IsSubmitAllowed => !string.IsNullOrWhiteSpace(UserName);
Bu özellik basit bir doğrulama yapıyor. Girilen metin null, boş veya yalnızca boşluk karakterleri değilse, bunu kullanıcı adı olarak kabul ederiz.
6. Her değişiklik sonrasında yeniden değerlendir IsSubmitAllowedUserName
Ui çerçevesine bu özelliğin ne zaman yeniden değerlendirilip kullanıcı arabirimine yansıtıldığında öneride bulunmalıyız. Bu yeniden değerlendirmeyi tetiklemenin en iyi yolu, özelliğin ayarlayıcısını çağırmaktır RaisePropertyChangedUserName . Ayarlayıcıya kod ekleyebilmek için tam ö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));
}
}
Özelliğin koddan değiştirildiği UserName bir durum olmadığından bu özellik için kullanmıyoruzINotifyPropertyChanged. Ancak, içinde metin her değiştiğinde TextBox, kullanıcı arabirimine özelliğin IsSubmitAllowed değişmiş olabileceğini ve yeniden değerlendirilmesi gerektiğini söylememiz gerekir.
7. Özelliği düğmenin IsEnabled özelliğine bağlayın IsSubmitAllowed
Artık kodla işiniz bitti. Geri dönün MainWindow.xaml ve Gönder düğmesini bulun. Düğmenin IsEnabled XAML'sinin şu şekilde görünmesi için ö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ırsanız Gönder düğmesinin varsayılan olarak devre dışı bırakıldığını görmeniz gerekir. Siz bir şey yazdığınızda etkinleştirilir.
Bu örnek bazı temel doğrulamalar gerçekleştirse de WPF, sonraki modülde gösterilecek zengin bir doğrulama özellikleri kümesine sahiptir.
Özet
Bu derste bağlamaların nasıl hata ayıklayabileceğinizi gördünüz. Bağlama seçeneği hakkında UpdateSourceTrigger bilgi edindiniz ve daha fazla veri bağlama örneği gördünüz. Ayrıca, veri bağlamayı düzgün bir şekilde kullanıyorsanız kullanıcı arabiriminin görünümünün ve davranışının C# koduna dokunmadan nasıl değiştirilebileceğini gösteren bir örnek de gördünüz.
Sonraki derste, bir listede birden çok öğeyi görüntülemek için veri bağlamayı nasıl kullanabileceğinizi inceleyeceğiz.