Xamarin.Forms Fırçalar: Doğrusal gradyanlar

LinearGradientBrush sınıfı sınıfından GradientBrush türetilir ve bir alanı doğrusal gradyanla boyar ve gradyan ekseni olarak bilinen bir çizgi boyunca iki veya daha fazla rengi karıştırır. GradientStop nesneleri, gradyandaki renkleri ve konumlarını belirtmek için kullanılır. Nesneler hakkında GradientStop daha fazla bilgi için bkz Xamarin.Forms . Fırçalar: Gradyanlar.

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

• StartPoint, türündeki Pointdoğrusal gradyanın başlangıç iki boyutlu koordinatlarını temsil eder. Bu özelliğin varsayılan değeri (0,0).
• EndPoint, türündedir Pointve doğrusal gradyanın son iki boyutlu koordinatlarını temsil eder. Bu özelliğin varsayılan değeri (1,1).

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

sınıfıLinearGradientBrush, fırçaya herhangi GradientStop bir IsEmpty nesne atanıp atanmadığını gösteren bir bool döndüren bir yöntem olarak da kullanılır.

Not

Doğrusal gradyanlar CSS işleviyle linear-gradient() de oluşturulabilir.

LinearGradientBrush oluşturma

Doğrusal gradyan fırçanın gradyan durakları gradyan ekseni boyunca konumlandırılır. Gradyan ekseninin yönü ve boyutu fırçanın StartPoint ve EndPoint özellikleri kullanılarak değiştirilebilir. Bu özellikleri değiştirerek yatay, dikey ve çapraz gradyanlar oluşturabilir, gradyan yönünü tersine çevirebilir, gradyan yayılımı daraltabilir ve daha fazlasını yapabilirsiniz.

StartPoint ve EndPoint özellikleri boyanmakta olan alana göredir. (0,0), boyanmakta olan alanın sol üst köşesini ve (1,1) boyanmakta olan alanın sağ alt köşesini temsil eder. Aşağıdaki diyagramda çapraz doğrusal gradyan fırçasının gradyan ekseni gösterilmektedir:

Bu diyagramda kesikli çizgi, gradyanın başlangıç noktasından bitiş noktasına kadar olan ilişkilendirme yolunu vurgulayan gradyan eksenini gösterir.

Yatay doğrusal gradyan oluşturma

Yatay doğrusal gradyan oluşturmak için bir LinearGradientBrush nesne oluşturun ve nesnesini (0,0) ve EndPoint (1,0) olarak ayarlayınStartPoint. Ardından, gradyandaki renkleri ve konumlarını belirten iki veya daha fazla GradientStop nesneyi LinearGradientBrush.GradientStops koleksiyona ekleyin.

Aşağıdaki XAML örneği, olarak ayarlanmış Background bir Frameyatay LinearGradientBrush gösterir:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->
        <LinearGradientBrush EndPoint="1,0">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>  

Bu örnekte, öğesinin Frame arka planı, yatay olarak sarıdan yeşile ilişkilendirilmiş bir LinearGradientBrush ile boyanmış:

Dikey doğrusal gradyan oluşturma

Dikey doğrusal gradyan oluşturmak için bir LinearGradientBrush nesne oluşturun ve nesnesini (0,0) ve EndPoint (0,1) olarak ayarlayınStartPoint. Ardından, gradyandaki renkleri ve konumlarını belirten iki veya daha fazla GradientStop nesneyi LinearGradientBrush.GradientStops koleksiyona ekleyin.

Aşağıdaki XAML örneği, olarak ayarlanmış Background bir Framedikey LinearGradientBrush gösterir:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->    
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

Bu örnekte, öğesinin Frame arka planı, dikey olarak sarıdan yeşile ilişkilendirilmiş bir LinearGradientBrush ile boyanmış:

Çapraz doğrusal gradyan oluşturma

Çapraz doğrusal gradyan oluşturmak için bir LinearGradientBrush nesne oluşturun ve nesnesini (0,0) ve EndPoint (1,1) olarak ayarlayınStartPoint. Ardından, gradyandaki renkleri ve konumlarını belirten iki veya daha fazla GradientStop nesneyi LinearGradientBrush.GradientStops koleksiyona ekleyin.

Aşağıdaki XAML örneği, olarak ayarlanmış BackgroundFramebir köşegeni LinearGradientBrush gösterir:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0)      
             Endpoint defaults to (1,1) -->
        <LinearGradientBrush>
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

Bu örnekte, öğesinin Frame arka planı sarıdan yeşile çapraz olarak ilişkilendirilmiş bir LinearGradientBrush ile boyanmış:

İlgili bağlantılar

• Xamarin.Forms Fırçalar: Gradyanlar