Aracılığıyla paylaş

Xamarin.Forms Fırçalar: Gradyanlar

GradientBrush sınıfı sınıfından Brush türetilir ve gradyan duraklarından oluşan gradyanı tanımlayan soyut bir sınıftır. Gradyan fırça, bir eksen boyunca birbirine karışan birden çok rengi olan bir alanı boyar. 'den GradientBrush türetilen sınıflar gradyan duraklarını yorumlamanın farklı yollarını açıklar ve Xamarin.Forms aşağıdaki gradyan fırçaları sağlar:

sınıfı GradientBrush , fırçanın GradientStops gradyan duraklarını temsil eden türündeki GradientStopsCollectionözelliğini tanımlar ve bunların her biri fırçanın gradyan ekseni boyunca bir renk ve uzaklık belirtir. AGradientStopsCollection, nesnelerden oluşan GradientStop bir ObservableCollection öğedir. GradientStops özelliği bir BindableProperty nesne tarafından desteklenir, bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

Not

GradientStops özelliği sınıfının özelliğidir ContentProperty GradientBrush ve bu nedenle açıkça XAML'den ayarlanması gerekmez.

Gradyan durakları

Gradyan durakları gradyan fırçasının yapı taşlarıdır ve gradyandaki renkleri ve gradyan ekseni boyunca konumlarını belirtir. Gradyan durakları nesneler kullanılarak GradientStop belirtilir.

GradientStop sınıfı aşağıdaki özellikleri tanımlar:

  • Color, türündedir Colorve gradyan durağının rengini temsil eder. Bu özelliğin varsayılan değeridir Color.Default.
  • Offset, türündedir floatve gradyan vektörünün içindeki gradyan durağının konumunu temsil eder. Bu özelliğin varsayılan değeri 0'dır ve geçerli değerler 0.0-1.0 aralığındadır. Bu değer 0'a ne kadar yakınsa, renk gradyanın başlangıcına o kadar yakındır. Benzer şekilde, bu değer 1'e ne kadar yakınsa, renk gradyanın sonuna o kadar yakın olur.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Önemli

Gradyanlar tarafından kullanılan koordinat sistemi, çıkış alanının sınırlayıcı kutusuna göre değişir. 0 sınırlayıcı kutunun yüzde 0'ını, 1 ise sınırlayıcı kutunun yüzde 100'unu gösterir. Bu nedenle (0,5,0,5), sınırlayıcı kutunun ortasındaki bir noktayı tanımlar ve (1,1) sınırlayıcı kutunun sağ alt kısmındaki bir noktayı açıklar.

Aşağıdaki XAML örneği dört renkle bir çapraz LinearGradientBrush oluşturur:

<LinearGradientBrush StartPoint="0,0"
                     EndPoint="1,1">
    <GradientStop Color="Yellow"
                  Offset="0.0" />
    <GradientStop Color="Red"
                  Offset="0.25" />
    <GradientStop Color="Blue"
                  Offset="0.75" />             
    <GradientStop Color="LimeGreen"
                  Offset="1.0" />
</LinearGradientBrush>

Gradyan durakları arasındaki her noktanın rengi, iki sınırlayıcı gradyan durağı tarafından belirtilen rengin bir bileşimi olarak ilişkilendirilmiş. Aşağıdaki diyagramda önceki örnekteki gradyan durakları gösterilmektedir:

Çapraz LinearGradientBrush ile boyanmış çerçeve

Bu diyagramda, daireler gradyan duraklarının konumunu işaretler ve kesikli çizgi gradyan eksenini gösterir. İlk gradyan durağı 0,0 uzaklığında sarı rengi belirtir. İkinci gradyan durağı 0,25 uzaklığında kırmızı rengi belirtir. Gradyan ekseni boyunca soldan sağa doğru ilerlerken bu iki gradyan durağı arasındaki noktalar kademeli olarak sarıdan kırmızıya dönüşür. Üçüncü gradyan durağı 0,75 uzaklığında mavi rengi belirtir. İkinci ve üçüncü gradyan durakları arasındaki noktalar yavaş yavaş kırmızıdan maviye dönüşür. Dördüncü gradyan durağı, 1,0 uzaklığında kireç yeşili rengini belirtir. Üçüncü ve dördüncü gradyan durakları arasındaki noktalar yavaş yavaş maviden kireç yeşiline dönüşür.

  • Last updated on