Aracılığıyla paylaş

Arka planları, ön planları ve ana hatları boyamak için fırçaları kullanma

XAML şekillerinin, metinlerinin ve denetimlerinin iç ve ana hatlarını boyamak için Brush nesnelerini kullanarak bunları uygulama kullanıcı arabiriminizde görünür hale getirin.

WinUI 3 Galeri uygulamasını açın ve RadialGradientBrush'ı çalışır durumda görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Fırçalara giriş

Uygulama tuvalinde görüntülenen bir Şekil, metin veya Denetim bölümlerini boyamak için, ŞekilDolgu özelliğini veya Arka Plan ve Ön Plan özelliklerini, Denetim'ü Fırça değerine ayarlayın.

Farklı fırça türleri şunlardır:

Düz renkli fırçalar

SolidColorBrush, bir alanı kırmızı veya mavi gibi tek bir renkile boyar. Bu en temel fırçadır. XAML'de, SolidColorBrush ve belirttiği rengi tanımlamanın üç yolu vardır: önceden tanımlanmış renk adları, onaltılık renk değerleri veya özellik öğesi söz dizimi.

Önceden tanımlanmış renk adları

Sarı veya Magentagibi önceden tanımlanmış bir renk adı kullanabilirsiniz. 256 kullanılabilir adlandırılmış renk vardır. XAML ayrıştırıcısı, renk adını doğru renk kanallarıyla Color yapısına dönüştürür. 256 adlandırılmış renk, Basamaklı Stil Sayfaları, Düzey 3 (CSS3) belirtiminden X11 renk adlarını temel alır, bu nedenle web geliştirme veya tasarım konusunda daha önce deneyiminiz varsa bu adlandırılmış renkler listesini zaten biliyor olabilirsiniz.

Aşağıda, Dikdörtgen Dolgu özelliğini Kırmızıönceden tanımlanmış renge ayarlayan bir örnek verilmiştir.

<Rectangle Width="100" Height="100" Fill="Red" />

Render edilmiş SolidColorBrush

SolidColorBrush bir Dikdörtgene uygulandı

XAML yerine kod kullanarak SolidColorBrush tanımlıyorsanız, adlandırılmış her renk Colors sınıfının statik özellik değeri olarak kullanılabilir. Örneğin, bir SolidColorBrush Color değerini "Orkide" adlı rengi temsil etmek üzere bildirmek için, Color değerini Colors.Orchidstatik değer olarak ayarlayın.

Onaltılık renk değerleri

SolidColorBrushiçin 8 bit alfa kanalıyla kesin 24 bit renk değerleri bildirmek için onaltılık biçim dizesi kullanabilirsiniz. 0 -F aralığındaki iki karakter her bileşen değerini tanımlar ve onaltılık dizenin bileşen değeri sırası şudur: alfa kanalı (opaklık), kırmızı kanal, yeşil kanal ve mavi kanal (ARGB). Örneğin, "#FFFF0000" onaltılık değeri tamamen opak kırmızı (alfa="FF", kırmızı="FF", yeşil="00"ve mavi="00") tanımlar.

Bu XAML örneği, bir RectangleFill özelliğini "#FFFF0000" onaltılık değerine ayarlar ve Colors.Red adlı rengin kullanılmasıyla aynı sonucu verir.

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

Özellik öğesi söz dizimi

SolidColorBrushtanımlamak için özellik öğesi sözdizimini kullanabilirsiniz. Bu söz dizimi önceki yöntemlerden daha ayrıntılıdır, ancak bir öğede Opaklıkgibi ek özellik değerleri belirtebilirsiniz. XAML söz dizimi, özellik öğesi söz dizimi de dahil olmak üzere, hakkında daha fazla bilgi için XAML'ye genel bakış ve XAML söz dizimi kılavuzunabakın.

Önceki örneklerde, oluşturulan fırça, UI tanımlarını en yaygın durumlar için basit tutmaya yardımcı olan kasıtlı bir XAML dili kısaltmasının parçası olarak örtük bir şekilde ve otomatik olarak oluşturulur. Sonraki örnek bir Rectangle oluşturur ve Rectangle.Fill özelliği için öğe değeri olarak SolidColorBrush açıkça oluşturur. Renk, SolidColorBrush için Mavi olarak ayarlanır ve Opaklık 0,5 olarak ayarlanır.

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

Doğrusal gradyan fırçalar

LinearGradientBrush bir alanı çizgi boyunca tanımlanmış gradyanla boyar. Bu çizgi,gradyan ekseni olarak adlandırılır. Gradyanların renklerini ve gradyan eksenindeki konumlarını GradyanStop nesneleri kullanarak belirtirsiniz. Varsayılan olarak gradyan ekseni, fırçanın boyadığı alanın sol üst köşesinden sağ alt köşesine doğru çalışır ve çapraz gölgelendirmeyle sonuçlanır.

GradientStop gradyan fırçanın temel yapı taşıdır. Gradyan durağı, fırça boyanmakta olan alana uygulandığında, fırçanın Gradyan Ekseni boyunca Renk ve Uzaklıkta ne olduğunu belirtir.

Gradyan durağının Color özelliği gradyan durağının rengini belirtir. Önceden tanımlanmış bir renk adı kullanarak veya ARGB değerlerini onaltılık belirterek rengi ayarlayabilirsiniz.

Offset özelliği, bir GradientStop'nin, gradyan ekseni boyunca her GradientStop'nun konumunu belirtir. Uzaklık, 0 ile 1 arasında bir çift. 0 Offset, GradientStop’u gradyan ekseninin başlangıcına, yani StartPointyakınına yerleştirir. 1 Uzaklık, Gradyan Durağı öğesini Son Noktakonumuna yerleştirir. En azından, yararlı bir LinearGradientBrush iki tane GradientStop değerine sahip olmalıdır. Her bir GradientStop farklı bir Renk belirtmeli ve 0 ile 1 arasında farklı bir Uzaklık değerine sahip olmalıdır.

Bu örnek, dört renkle doğrusal bir gradyan oluşturur ve bunu bir Dikdörtgenboyamak için kullanır.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Gradyan durakları arasındaki her noktanın rengi, iki sınırlayıcı gradyan durağı tarafından belirtilen rengin bir bileşimi olarak doğrusal olarak ilişkilendirilmiş. Aşağıdaki görüntüde, önceki örnekteki gradyan durakları vurgulanır. Daireler gradyan duraklarının konumunu işaretler ve kesikli çizgi gradyan eksenini gösterir.

Diyagramın sol üst köşesinden başlayıp sağ alt köşesine doğru eğimli olarak ilerleyen Gradyan Durakları 1'den 4'e kadar gösterilmektedir.

İki sınırlayıcı gradyan durağı tarafından belirtilen renk birleşimi

StartPoint ve EndPoint özelliklerini (0,0) ve (1,1) başlangıç varsayılanlarından farklı değerler olacak şekilde ayarlayarak gradyan duraklarının konumlandırıldığı çizgiyi değiştirebilirsiniz. StartPoint ve EndPoint koordinat değerlerini değiştirerek yatay veya dikey gradyanlar oluşturabilir, gradyan yönünü tersine çevirebilir veya gradyan yayılmasını tam boyalı alana göre daha küçük bir aralığa uygulanacak şekilde daraltabilirsiniz. Gradyanı daraltmak için StartPoint ve/veya EndPoint değerlerini 0 ve 1 değerleri arasında olacak şekilde ayarlarsınız. Örneğin, fırçanın sol yarısında soluklaşmanın meydana geldiği ve sağ tarafının son GradyanStop renginize kadar düz olduğu yatay bir gradyan istiyorsanız, olan bir (0,0) ve olan bir (0.5,0) belirtirsiniz.

Radyal gradyan fırçalar

RadialGradientBrush, Center, RadiusXve RadiusY özellikleri tarafından tanımlanan bir elips içinde çizilir. Gradyan renkleri elipsin merkezinde başlar ve yarıçapta biter.

Radyal gradyan renkleri, Gradyanlar koleksiyon özelliğine eklenen renk duraklarıyla tanımlanır. Her gradyan durağı, gradyan boyunca bir renk ve bir uzaklık belirtir.

Gradyan kaynağı varsayılan olarak ortalar ve GradyanOrigin özelliği kullanılarak kaydırılabilir.

MappingMode, Center, RadiusX, RadiusYve GradientOrigin göreli veya mutlak koordinatları temsil edip etmediğini tanımlar.

MappingMode olarak ayarlandığında, üç özelliğin X ve Y değerleri öğe sınırlarına göre olarak değerlendirilir, burada sol üst ve Center, RadiusXiçin öğe sınırlarının sağ alt kısmını ve RadiusY özelliklerini ve GradientOrigin özelliğinin merkezini temsil eder.

MappingModeAbsoluteolarak ayarlandığında, üç özelliğin X ve Y değerleri öğe sınırları içinde mutlak koordinatlar olarak değerlendirilir.

Bu örnek, dört renkle doğrusal bir gradyan oluşturur ve bunu bir Dikdörtgenboyamak için kullanır.

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

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

Radyal gradyanın ekran görüntüsü.

gradyan durakları

Görüntü fırçaları

ImageBrush bir alanı resimle boyar ve resim dosya kaynağından gelen resmi boyar. yüklenecek görüntünün yolu ile ImageSource özelliğini ayarlarsınız. Görüntü kaynağı genellikle uygulamanızın kaynaklarının bir parçası olan İçerik öğesinden gelir.

Varsayılan olarak, bir ImageBrush resmini boyanmış alanı tamamen dolduracak şekilde genişletir ve boyanmış alanın görüntüden farklı bir en boy oranı varsa görüntüyü bozabilir. Stretch özelliğini varsayılan Fill değerinden değiştirip None, Uniformveya UniformToFillolarak ayarlayarak bu davranışı değiştirebilirsiniz.

Sonraki örnek bir ImageBrush oluşturur ve ImageSource'ni uygulamaya kaynak olarak eklemeniz gereken licorice.jpgadlı bir görüntüye ayarlar. ImageBrush ardından Elips şekli tarafından tanımlanan alanı boyar.

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

ImageBrush resminin oluşturulmuş hali. .

İşlenmiş bir ImageBrush

ImageBrush ve Image her ikisi de bir görüntü kaynak dosyasına Tekdüzen Kaynak Tanımlayıcısı (URI) ile başvurur ve bu dosyada çeşitli olası görüntü biçimleri kullanılır. Bu görüntü kaynak dosyaları URI'ler olarak belirtilir. Görüntü kaynaklarını, kullanılabilir görüntü biçimlerini belirtme ve bunları uygulamada paketleme hakkında daha fazla bilgi için bkz. Image ve ImageBrush.

Fırçalar ve metin

Metin öğelerine işleme özellikleri uygulamak için fırçaları da kullanabilirsiniz. Örneğin, TextBlockForeground özelliği bir Brushalır. Burada açıklanan fırçalardan herhangi birini metne uygulayabilirsiniz. Ancak, arka planda taşan fırçalar kullanıyorsanız herhangi bir arka plan metnin okunamaz olmasına neden olabileceğinden, metne uygulanan fırçalara dikkat edin. Metin öğesinin çoğunlukla dekoratif olmasını istemiyorsanız, çoğu durumda metin öğelerinin okunabilirliği için SolidColorBrush kullanın.

Düz renk kullandığınızda bile, seçtiğiniz metin renginin metnin düzen kapsayıcısının arka plan rengine karşı yeterli karşıtlık olduğundan emin olun. Metin ön planı ile metin kapsayıcısı arka planı arasındaki karşıtlık düzeyi erişilebilirlik açısından önemlidir.

XamlCompositionBrushBase

XamlCompositionBrushBase, XAML kullanıcı arabirimi öğelerini boyamak için CompositionBrush kullanan özel fırçalar oluşturmak için kullanılan bir temel sınıftır.

Bu, Windows.UI.Xaml ve Windows.UI.Composition katmanları arasında "drop down" birlikte çalışabilirliği, Görsel Katmanına genel bakış'de açıklandığı gibi etkinleştirir.

Özel fırça oluşturmak için XamlCompositionBrushBase'den devralan ve gerekli yöntemleri uygulayan yeni bir sınıf oluşturun.

Örneğin bu, GaussianBlurEffect veya XamlLighttarafından aydınlatılırken XAML UIElement'in yansıtıcı özelliklerini denetleyen bir SceneLightingEffect gibi CompositionEffectBrushkullanarak XAML UIElement'lere efektleri uygulamak için kullanılabilir.

Kod örnekleri için bkz. XamlCompositionBrushBase.

XAML kaynakları olarak fırçalar

Herhangi bir fırçayı bir XAML kaynak sözlüğünde anahtarlı bir XAML kaynağı olarak bildirebilirsiniz. Bu, kullanıcı arabirimindeki birden çok öğeye uygulanan fırça değerlerini çoğaltmayı kolaylaştırır. Fırça değerleri, daha sonra paylaşılır ve XAML dosyanızda {StaticResource} şeklinde fırça kaynağına başvuruda bulunduğunuz her durumda uygulanır. Bu, paylaşılan fırçaya başvuran bir XAML denetim şablonunuz olduğu ve denetim şablonunun anahtarlı bir XAML kaynağı olduğu durumları içerir.

Koddaki fırçalar

Fırçaları XAML kullanarak belirtmek, fırçaları tanımlamak için kod kullanmaktan çok daha tipiktir. Bunun nedeni fırçaların genellikle XAML kaynakları olarak tanımlanması ve fırça değerlerinin genellikle tasarım araçlarının çıkışı olması veya başka bir şekilde XAML ui tanımının bir parçası olmasıdır. Belirli durumlarda, kod aracılığıyla bir fırça tanımlamak isteyebilirsiniz; bu durumda tüm Brush türleri kodla kullanılabilir.

Kodda SolidColorBrush oluşturmak için Color parametresini alan oluşturucuyu kullanın. Colors sınıfının statik özelliği olan bir değeri geçirin:

SolidColorBrush blueBrush = new SolidColorBrush(Colors.Blue);

Microsoft::UI::Xaml::Media::SolidColorBrush blueBrush{ Microsoft::UI::Colors::Blue() };

ImageBrush için, kullanıcı arabirimi özelliği için bu fırçayı kullanmayı denemeden önce varsayılan oluşturucuyu kullanın ve ardından diğer API'leri çağırın.

ImageSource, kod kullanarak ImageBrush tanımlarken BitmapImage (URI değil) gerektirir. Kaynağınız bir akışsa, değeri başlatmak için SetSourceAsync yöntemini kullanın. Kaynağınız, uygulamanızda ms-appx veya ms-resource düzenlerini içerik içeren bir URI ise, URI alan BitmapImage oluşturucuyu kullanın. Görüntü kaynağını alma veya kodunu çözme ile ilgili zamanlama sorunları varsa görüntü kaynağı kullanılabilir duruma gelene kadar görüntülenmesi için alternatif içerik gerekebileceği ImageOpened olayını işlemeyi de düşünebilirsiniz.

Kod örnekleri için bkz. ImageBrush ve XamlCompositionBrushBase.

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

Fırça API'leri Windows.UI.Xaml.Controls ve Windows.UI.Xaml.Controls ad alanında bulunur.

Tüm denetimler için en güncel stilleri, şablonları ve özellikleri almak için en son WinUI 2'yi kullanmanızı öneririz.

WebViewBrush (yalnızca UWP)

WebViewBrush, WebView denetiminde normal olarak görüntülenen içeriğe erişebilen özel bir fırça türüdür. WebView denetim alanındaki dikdörtgen içeriği işlemek yerine, WebViewBrush bu içeriği işleme yüzeyi için Brush-type özelliğine sahip başka bir öğeye boyar. WebViewBrush her fırça senaryosu için uygun değildir, ancak WebViewgeçişleri için kullanışlıdır. Daha fazla bilgi için bkz. WebViewBrush.

Kodda bir WebViewBrush oluşturursanız, kullanıcı arabirimi özelliği için bu fırçayı kullanmayı denemeden önce varsayılan oluşturucuyu kullanın ve ardından diğer API'leri çağırın. SourceName özelliğini yakın zamanda sıfırladıysanız veya WebView içeriği de kodla değiştiriliyorsa Redraw çağrısı yapmanız gerekebilir.

Kod örnekleri için bkz. WebViewBrush.

  • Last updated on