Aracılığıyla paylaş


Sayı kutusu

Sayıları görüntülemek ve düzenlemek için kullanılabilecek bir denetimi temsil eder. Bu, doğrulama, adım adım artırma ve çarpma, bölme, toplama ve çıkarma gibi temel denklemlerin satır içi hesaplamalarını destekler.

12 sayısını gösteren odak içi giriş alanı.

Doğru kontrol bu mu?

Matematik girişini yakalamak ve görüntülemek için NumberBox denetimi kullanabilirsiniz. Sayılardan fazlasını kabul eden düzenlenebilir bir metin kutusuna ihtiyacınız varsa TextBox denetimini kullanın. Parolaları veya diğer hassas girişleri kabul eden düzenlenebilir bir metin kutusuna ihtiyacınız varsa bkz. PasswordBox. Arama terimlerini girmek için bir metin kutusuna ihtiyacınız varsa bkz. AutoSuggestBox. Biçimlendirilmiş metin girmeniz veya düzenlemeniz gerekiyorsa bkz. RichEditBox.

Recommendations

  • Text ve Value, NumberBox'un değerini türler arasında dönüştürmeye gerek kalmadan String veya Double olarak yakalamayı kolaylaştırır. NumberBox değerini program aracılığıyla değiştirirken, bunu Value özelliği aracılığıyla yapmanız önerilir. Value, başlangıç kurulumu sırasında Text üzerine yazar. İlk kurulumdan sonra, birinde yapılan değişiklikler diğerine yayılır, ancak sürekli olarak Value üzerinden programatik değişiklikler yapmak, NumberBox'ın Text aracılığıyla sayısal olmayan karakterleri kabul edeceğiyle ilgili kavramsal yanlış anlamaların önlenmesine yardımcı olur.
  • Header veya PlaceholderText kullanarak kullanıcıları, NumberBox'ın giriş olarak yalnızca sayısal karakterleri kabul ettiğini bildirin. Sayıların "bir" gibi yazılı gösterimi kabul edilen bir değere çözümlenmez.

NumberBox oluşturma

WinUI 3 Galeri simgesi WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Varsayılan görünümü gösteren temel bir NumberBox için XAML aşağıdadır. Kullanıcıya görüntülenen verilerin uygulamanızda depolanan verilerle eşitlenmiş durumda kaldığından emin olmak için x:Bind kullanın.

<NumberBox Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}" />

12 sayısını gösteren odak içi giriş alanı.

NumberBox Etiketleme

NumberBox'ın amacı açık değilse Header veya PlaceholderText kullanın. Header, NumberBox'un değerinin olup olmamasına bakılmaksızın görünür.

<NumberBox Header="Enter a number:"
    Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}" />

NumberBox'ın üzerinde

PlaceholderText sadece Value 'NaN olarak ayarlandığında veya giriş kullanıcı tarafından temizlendiğinde NumberBox içinde görüntülenir.

<NumberBox PlaceholderText="1+2^2"
    Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}" />

Hesaplama desteğini etkinleştirme

özelliğinin AcceptsExpression true olarak ayarlanması NumberBox'ın standart işlem sırasını kullanarak çarpma, bölme, toplama ve çıkarma gibi temel satır içi ifadeleri değerlendirmesine olanak tanır. Değerlendirme, odak kaybı veya kullanıcı "Enter" tuşuna bastığında tetiklenir. bir ifade değerlendirildikten sonra, ifadenin özgün biçimi korunmaz.

<NumberBox Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}"
    AcceptsExpression="True" />

Artırma ve azaltma adımı

NumberBox odaktayken ve kullanıcıda NumberBox içindeki değerin ne kadar değiştirildiğini yapılandırmak için SmallChange özelliğini kullanın:

  • Parşömenler
  • yukarı ok tuşuna basar
  • aşağı ok tuşuna basar

LargeChange NumberBox odaktayken ve kullanıcı PageUp veya PageDown tuşuna bastığında NumberBox içindeki değerin ne kadar değiştirildiğini yapılandırmak için özelliğini kullanın.

SpinButtonPlacementMode özelliğini kullanarak, NumberBox'taki değeri SmallChange özelliğiyle belirlenen miktarda artırmak veya azaltmak için tıklanabilir düğmeleri etkinleştirin. Bir Maksimum veya Minimum değeri başka bir adımla aşılırsa bu düğmeler devre dışı bırakılır.

SpinButtonPlacementMode düğmelerin kontrolün yanında görünmesini sağlamak için Inline olarak ayarlayın.

<NumberBox Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}"
    SmallChange="10"
    LargeChange="100"
    SpinButtonPlacementMode="Inline" />

Yanında aşağı ok ve yukarı ok düğmesi bulunan bir NumberBox.

SpinButtonPlacementMode değerini Compact, düğmelerin yalnızca NumberBox odaktayken Açılır Pencere olarak görünmesini sağlamak için ayarlayın.

<NumberBox Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}"
    SmallChange="10"
    LargeChange="100"
    SpinButtonPlacementMode="Compact" />

İçinde küçük bir simge bulunan ve yukarıyı gösteren bir ok ve aşağıyı gösteren bir ok içeren NumberBox.

Yükseltilmiş bir katmanda yan tarafa kayan aşağı ok ve yukarı ok düğmelerine sahip bir NumberBox.

Giriş doğrulamayı etkinleştirme

ValidationMode InvalidInputOverwritten olarak ayarlandığında NumberBox, odak kaybı veya "Enter" tuşuna basıldığında değerlendirme tetiklendiğinde son geçerli değerle sayısal veya yasal olarak formülsel olmayan geçersiz girişin üzerine yazılmasını sağlar.

<NumberBox Header="Quantity"
    Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}"
    ValidationMode="InvalidInputOverwritten" />

ayarı ValidationModeDisabled , özel giriş doğrulamasının yapılandırılmasına izin verir.

Ondalık noktalar ve virgüllerle ilgili olarak, bir kullanıcı tarafından kullanılan biçimlendirme, NumberBox için yapılandırılan biçimlendirmeyle değiştirilir. Giriş doğrulama hatası tetiklenmez.

Girişi biçimlendirme

Sayı biçimlendirmesi , bir biçimlendirme sınıfının örneğini yapılandırıp NumberBox değerini biçimlendirmek için NumberFormatter özelliğine atanabilir. Ondalık, para birimi, yüzde ve önemli rakamlar, kullanılabilir sayı biçimlendirme sınıflarından birkaçıdır. Yuvarlamanın sayı biçimlendirme özellikleriyle de tanımlandığını unutmayın.

Bir NumberBox değerini bir tamsayı basamağı, iki kesir basamağı olacak şekilde biçimlendirmek ve en yakın 0,25'e yuvarlama yapmak için DecimalFormatter kullanma örneği aşağıda verilmiştir:

<NumberBox  x:Name="FormattedNumberBox"
    Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}" />
private void SetNumberBoxNumberFormatter()
{
    IncrementNumberRounder rounder = new IncrementNumberRounder();
    rounder.Increment = 0.25;
    rounder.RoundingAlgorithm = RoundingAlgorithm.RoundUp;

    DecimalFormatter formatter = new DecimalFormatter();
    formatter.IntegerDigits = 1;
    formatter.FractionDigits = 2;
    formatter.NumberRounder = rounder;
    FormattedNumberBox.NumberFormatter = formatter;
}

0,00 değerini gösteren NumberBox.

Ondalık noktalar ve virgüllerle ilgili olarak, bir kullanıcı tarafından kullanılan biçimlendirme, NumberBox için yapılandırılan biçimlendirmeyle değiştirilir. Giriş doğrulama hatası tetiklenmez.

Açıklamalar

Giriş Kapsamı

giriş kapsamı için kullanılır. Bu giriş kapsamı 0-9 arası basamaklarla çalışmaya yöneliktir. Bunun üzerine yazılabilir, ancak alternatif InputScope türlerine açıkça destek verilmeyecektir.

Sayı Değil

NumberBox girdiden temizlendiğinde, Value hiçbir sayısal değerin mevcut olmadığını gösterecek şekilde NaN ayarlanır.

İfade değerlendirmesi

NumberBox, ifadeleri değerlendirmek için infix biçimini kullanır. Öncelik sırasına göre, izin verilen işleçler şunlardır:

  • ^
  • */
  • +-

Öncelik kurallarını geçersiz kılmak için parantezlerin kullanılabileceğini unutmayın.