Opaklık Maskelerine Genel Bakış
Opaklık maskeleri bir öğenin veya görselin bölümlerini saydam veya kısmen saydam hale getirmenizi sağlar. Opaklık maskesi oluşturmak için veya öğesinin OpacityMask Visualözelliğine bir uygularsınızBrush. Fırça öğeye veya görsele eşlenir ve her fırça pikselinin opaklık değeri, öğe veya görselin ilgili her pikselinin sonuç opaklığını belirlemek için kullanılır.
Önkoşullar
Bu genel bakış, nesneleri bildiğinizi Brush varsayar. Fırçaları kullanmaya giriş için bkz . Düz Renkler ve Gradyanlarla Boyamaya Genel Bakış. ve DrawingBrushhakkında ImageBrush bilgi için bkz. Resimler, Çizimler ve Görsellerle Boyama.
Opaklık Maskeleri ile Görsel Efektler Oluşturma
Opaklık maskesi, içeriğini öğeye veya görsele eşleyerek çalışır. Fırçanın piksellerinin her birinin alfa kanalı, öğenin veya görselin ilgili piksellerinin ortaya çıkan opaklığını belirlemek için kullanılır; fırçanın gerçek rengi yoksayılır. Fırçanın belirli bir kısmı saydamsa, öğenin veya görselin ilgili kısmı saydam olur. Fırçanın belirli bir kısmı opaksa, öğenin veya görselin ilgili kısmının opaklığı değişmez. Opaklık maskesi tarafından belirtilen opaklık, öğede veya görselde bulunan opaklık ayarlarıyla birleştirilir. Örneğin, bir öğe yüzde 25 opak ise ve tam opaktan tamamen saydamlığa geçiş eden bir opaklık maskesi uygulanırsa, sonuç yüzde 25 opaklıktan tamamen saydamlığa geçiş gösteren bir öğedir.
Not
Bu genel bakıştaki örnekler görüntü öğelerinde opaklık maskelerinin kullanımını gösterse de, paneller ve denetimler de dahil olmak üzere herhangi bir öğeye veya Visualöğesine opaklık maskesi uygulanabilir.
Opaklık maskeleri, görünümden solan görüntüler veya düğmeler oluşturmak, öğelere doku eklemek veya gradyanları birleştirerek cam benzeri yüzeyler oluşturmak üzere ilginç görsel efektler oluşturmak için kullanılır. Aşağıdaki çizimde opaklık maskesi kullanımı gösterilmektedir. Maskenin saydam kısımlarını göstermek için damalanmış arka plan kullanılır.
Opaklık maskeleme örneği
Opaklık Maskesi Oluşturma
Opaklık maskesi oluşturmak için bir oluşturur Brush ve bunu bir öğenin veya görselin OpacityMask özelliğine uygularsınız. Herhangi bir türünü Brush opaklık maskesi olarak kullanabilirsiniz.
LinearGradientBrush, RadialGradientBrush: Öğe veya görselin görünümden kaybolmasını sağlamak için kullanılır.
Aşağıdaki görüntüde opaklık maskesi olarak kullanılan bir gösterilmektedir LinearGradientBrush .
LinearGradientBrush Opaklık Maskeleme ÖrneğiImageBrush: Doku ve yumuşak veya yırtılmış kenar efektleri oluşturmak için kullanılır.
Aşağıdaki görüntüde, opaklık maskesi olarak kullanılan bir gösterilir ImageBrush .
LinearGradientBrush opaklık maskeleme örneğiDrawingBrush: Şekil, görüntü ve gradyan desenlerinden karmaşık opaklık maskeleri oluşturmak için kullanılır.
Aşağıdaki görüntüde opaklık maskesi olarak kullanılan bir gösterilmektedir DrawingBrush .
DrawingBrush opaklık maskeleme örneği
Gradyan fırçalar (LinearGradientBrush ve RadialGradientBrush) özellikle opaklık maskesi olarak kullanmak için uygundur. Bir SolidColorBrush alan tekdüzen bir renkle doldurulduğundan, zayıf opaklık maskeleri oluşturur; öğesinin SolidColorBrush veya görselin Opacity özelliğini ayarlamakla eşdeğerdir.
Opaklık Maskesi Olarak Gradyan Kullanma
Gradyan dolgu oluşturmak için iki veya daha fazla gradyan durağı belirtirsiniz. Her gradyan durağı bir renk ve bir konum içerir (gradyan oluşturma ve kullanma hakkında daha fazla bilgi için bkz . Düz Renkler ve Gradyanlarla Boyamaya Genel Bakış ). Renk karıştırmak yerine opaklık maskesi gradyanının alfa kanal değerlerini karıştırması dışında, gradyan opaklık maskesi opaklık maskesi olarak kullanıldığında işlem aynıdır. Bu nedenle gradyan içeriğinin gerçek rengi önemli değildir; her rengin yalnızca alfa kanalı veya opaklığı önemlidir. Aşağıda bir örnek verilmiştir.
<!--With the opacity mask:-->
<Image
Width="200" Height="150"
Source="sampleImages\Waterlilies.jpg"
Margin="10"
HorizontalAlignment="Left"
Grid.Column="2" Grid.Row="3">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
Opaklık Maskesi için Gradyan Durakları Belirtme
Önceki örnekte, gradyanın başlangıç rengi Black olarak sistem tanımlı renk kullanılmıştır. sınıfındaki Colors tüm renkler dışında Transparenttamamen opak olduğundan, gradyan opaklık maskesi için başlangıç rengi tanımlamak için kullanılabilir.
Opaklık maskesi tanımlarken alfa değerleri üzerinde ek denetim için, işaretlemede ARGB onaltılık gösterimini veya yöntemini kullanarak renklerin alfa kanalını Color.FromScRgb belirtebilirsiniz.
"XAML" içinde Renk Opaklığı Belirtme
Genişletilebilir Uygulama İşaretleme Dili'nde (XAML), tek tek renklerin opaklığını belirtmek için ARGB onaltılık gösterimini kullanırsınız. ARGB onaltılık gösterimi aşağıdaki söz dizimini kullanır:
#
Acar rrggbb
Önceki satırdaki aa, rengin opaklığını belirtmek için kullanılan iki basamaklı onaltılık değeri temsil eder. rr, gg ve bb değerlerinin her biri kırmızı, yeşil ve mavi renk miktarını belirtmek için kullanılan iki basamaklı onaltılık değeri gösterir. Her onaltılık basamak 0-9 veya A-F arası bir değere sahip olabilir. 0 en küçük değer, F ise en büyük değerdir. 00 alfa değeri tamamen saydam bir renk belirtirken, FF'nin alfa değeri tamamen opak bir renk oluşturur. Aşağıdaki örnekte, iki renk belirtmek için onaltılık ARGB gösterimi kullanılmıştır. Birincisi tamamen opakken, ikincisi tamamen saydamdır.
<Canvas.OpacityMask>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0" Color="#FF000000"/>
<GradientStop Offset="1" Color="#00000000"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Canvas.OpacityMask>
Opaklık Maskesi Olarak Görüntü Kullanma
Görüntüler opaklık maskesi olarak da kullanılabilir. Aşağıdaki görüntüde bir örnek gösterilmektedir. Maskenin saydam kısımlarını göstermek için damalanmış arka plan kullanılır.
Opaklık maskeleme örneği
Bir görüntüyü opaklık maskesi olarak kullanmak için, görüntüyü içerecek şekilde kullanın ImageBrush . Opaklık maskesi olarak kullanılacak bir görüntü oluştururken, görüntüyü Taşınabilir Ağ Grafikleri (PNG) gibi birden çok saydamlık düzeyini destekleyen bir biçimde kaydedin. Aşağıdaki örnekte, önceki çizimi oluşturmak için kullanılan kod gösterilmektedir.
<!-- With the Opacity Mask-->
<Image
Height="150"
Width="200"
Source="sampleImages/Waterlilies.jpg"
HorizontalAlignment="Left"
Margin="10"
Grid.Column="2" Grid.Row="1">
<Image.OpacityMask>
<ImageBrush ImageSource="sampleImages/tornedges.png"/>
</Image.OpacityMask>
</Image>
Opaklık Maskesi Olarak Kutucuklu Görüntü Kullanma
Aşağıdaki örnekte, aynı görüntü başka bir ImageBrushile birlikte kullanılır, ancak fırçanın döşeme özellikleri, görüntünün 50 piksel karelik kutucuklarını üretmek için kullanılır.
<!-- With the Opacity Mask -->
<Image
Height="150"
Width="200"
Source="sampleImages/Waterlilies.jpg"
HorizontalAlignment="Left"
Margin="10"
Grid.Column="2" Grid.Row="2">
<Image.OpacityMask>
<ImageBrush
Viewport="0,0,50,50"
ViewportUnits="Absolute"
TileMode="Tile"
ImageSource="sampleImages/tornedges.png"/>
</Image.OpacityMask>
</Image>
Çizimden Opaklık Maskesi Oluşturma
Çizimler opaklık maskesi olarak kullanılabilir. Çizimin içinde yer alan şekiller gradyanlarla, düz renklerle, resimlerle ve hatta diğer çizimlerle doldurulabilir. Aşağıdaki görüntüde, opaklık maskesi olarak kullanılan bir çizim örneği gösterilmektedir. Maskenin saydam kısımlarını göstermek için damalanmış arka plan kullanılır.
DrawingBrush opaklık maskeleme örneği
Çizimi opaklık maskesi olarak kullanmak için, çizimi içerecek şekilde kullanın DrawingBrush . Aşağıdaki örnekte, önceki çizimi oluşturmak için kullanılan kod gösterilmektedir:
<!-- With the Opacity Mask-->
<Image
Grid.Row="4" Grid.Column="5"
Height="150"
Width="200"
Source="sampleImages/Waterlilies.jpg">
<Image.OpacityMask>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Brush>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="Transparent" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="0.1" Brush="Black" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Image.OpacityMask>
</Image>
Opaklık Maskesi Olarak Kutucuklu Çizim Kullanma
ImageBrushgibi, DrawingBrush çizimini döşemek için yapılabilir. Aşağıdaki örnekte, kutucuklu opaklık maskesi oluşturmak için çizim fırçası kullanılmıştır.
<!-- With the Opacity Mask-->
<Button
Grid.Row="8" Grid.Column="5"
Height="100"
Width="200"
FontFamily="MS Gothic"
FontSize="16">
A Button
<Button.OpacityMask>
<DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Brush>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="Transparent" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="0.1" Brush="Black" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Button.OpacityMask>
</Button>
Ayrıca bkz.
.NET Desktop feedback