Aracılığıyla paylaş

Opaklık Maskelerine Genel Bakış

  • Makale

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 OpacityMaskVisualö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.

Ön koş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.

Dekont

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.

Object with a LinearGradientBrush opacity mask
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 .

    An object with an LinearGradientBrush opacity mask
    LinearGradientBrush Opaklık Maskeleme Örneği

  • ImageBrush: 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 .

    Object that has an ImageBrush opacity mask
    LinearGradientBrush opaklık maskeleme örneği

  • DrawingBrush: Ş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 .

    Object with a DrawingBrush opacity mask
    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:

#aarrggbb

Ö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.

An object with an ImageBrush opacity mask
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.

An object with a DrawingBrush opacity mask
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.