Opaklık Maskelerine Genel Bakış

Opaklık maskeleri, bir öğenin veya görselin bölümlerini saydam veya kısmen saydam hale getirebilirsiniz. Opaklık maskesi oluşturmak için veya öğesinin BrushOpacityMask özelliğine bir Visual uygulayabilirsiniz. Fırça öğe veya görselle eşlenmiş ve her fırça pikselinin opaklık değeri, öğenin veya görselin karşılık gelen her pikselinin elde edilen opaklığını belirlemek için kullanılır.

Önkoşullar

Bu genel bakış, nesneler hakkında bilgi sahibi olduğunu Brush varsayıyor. Fırça kullanmaya giriş için bkz. Düz Renkler ve Gradyanlar ile Boyamaya Genel Bakış. ve hakkında bilgi ImageBrush için DrawingBrushImageBrush

Opaklık Maskeleriyle Görsel Etkiler Oluşturma

Opaklık maskesi, içeriğini öğeye veya görsele eşler. Ardından fırça piksellerinin her bir alfa kanalı, öğenin veya görselin ilgili piksellerinin sonuçta elde edilen opaklığını belirlemek için kullanılır; fırçanın gerçek rengi yoksayılır. Fırçanın verilen bir kısmı saydamsa, öğenin veya görselin karşılık gelen kısmı saydam hale gelir. Fırçanın verilen bir kısmı opaksa, öğenin veya görselin karşılık gelen kısmının opaklığı değişmez. Opaklık maskesi tarafından belirtilen opaklık, öğede veya görselde mevcut olan opaklık ayarlarıyla birleştirilmiştir. Örneğin, bir öğe yüzde 25 opak ise ve tamamen opaktan tamamen saydama geçişler için bir opaklık maskesi uygulanırsa, sonuç yüzde 25 opaklıktan tamamen saydama geçişen 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 öğesine Visual opaklık maskesi uygulanabilir.

Opaklık maskeleri, görünümden soluk gelen görüntüler veya düğmeler oluşturmak, öğelere doku eklemek veya cam gibi yüzeyler oluşturmak için gradyanları birleştirmek gibi ilgi çekici görsel etkiler oluşturmak için kullanılır. Aşağıdaki çizimde opaklık maskesinin kullanımı gösterilmiştir. Maskenin saydam bölümlerini göstermek için denetleyici 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şturun Brush ve bunu bir öğenin veya OpacityMask görselin özelliğine uygulayabilirsiniz. Herhangi bir türünü Brush opaklık maskesi olarak kullanabilirsiniz.

  • LinearGradientBrush, RadialGradientBrush : Bir öğeyi veya görseli görünümden soldurma yapmak için kullanılır.

    Aşağıdaki görüntüde LinearGradientBrush opaklık maskesi olarak kullanılan bir görüntü yer alenidir.

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

  • ImageBrush: Doku ve yumuşak veya kopmuş kenar etkileri oluşturmak için kullanılır.

    Aşağıdaki görüntüde ImageBrush opaklık maskesi olarak kullanılan bir görüntü yer alenidir.

    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 DrawingBrush opaklık maskesi olarak kullanılan bir görüntü yer alenidir.

    Object with a DrawingBrush opacity mask
    DrawingBrush opaklık maskeleme örneği

Gradyan fırçalar ( LinearGradientBrush ve RadialGradientBrush ) opaklık maskesi olarak kullanmak için özellikle çok uygun. bir alanı tekdüz renkle doldurarak zayıf opaklık maskeleri sağlar; kullanma, öğenin veya görselin özelliğini SolidColorBrushSolidColorBrush ayarlamaya Opacity eşdeğerdir.

Gradyan'ı Opaklık Maskesi Olarak Kullanma

Gradyan dolgusu oluşturmak için iki veya daha fazla gradyan durak belirtirsiniz. Her gradyan durdurma bir renk ve konum içerir (gradyan oluşturma ve kullanma hakkında daha fazla bilgi için bkz. Düz Renkler ve Gradyanlar ile Boyamaya Genel Bakış). Bir gradyan opaklık maskesi olarak kullanılırken işlem aynıdır, ancak renkleri karıştırmak yerine opaklık maskesi gradyan alfa kanal değerlerini karıştırtır. Bu nedenle gradyan içeriğinin gerçek rengi önemli değildir; her rengin yalnızca alfa kanalı veya opaklığı önemlidir. 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 başlangıç rengi Black olarak sistem tanımlı renk kullanılmıştır. dışında sınıfındaki tüm renkler tamamen opak olduğundan, yalnızca gradyan opaklık maskesi için bir başlangıç rengi ColorsTransparent tanımlamak için kullanılabilirler.

Opaklık maskesi tanımlarken alfa değerleri üzerinde ek denetim için, işaretlemede ARGB onaltılık notasyonu kullanarak veya yöntemini kullanarak renklerin alfa kanalını Color.FromScRgb belirtebilirsiniz.

"XAML" içinde Renk Opaklığı Belirtme

Tek Extensible Application Markup Language (XAML) tek renklerin opaklığını belirtmek için ARGB onaltılık bir nota kullanırsiniz. ARGB onaltılık biçimi aşağıdaki sözdizimini kullanır:

##rrggbb

Önceki satırda aa, rengin opaklığını belirtmek için kullanılan iki basamaklı onaltılık değeri temsil eder. rr, ggve bb her biri, renk olarak kırmızı, yeşil ve mavi miktarını belirtmek için kullanılan iki basamaklı onaltılık değeri temsil ediyor. Her onaltılık basamak 0-9 veya A-F arasında 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 belirteci kullanılmıştır. Birincisi tamamen opak, ikincisi ise tamamen saydamdır.

<Canvas.OpacityMask>
  <RadialGradientBrush>
    <RadialGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="#FF000000"/>
      <GradientStop Offset="1" Color="#00000000"/>
  </RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Canvas.OpacityMask>

Görüntüyü Opaklık Maskesi Olarak Kullanma

Görüntüler opaklık maskesi olarak da kullanılabilir. Aşağıdaki resimde bir örnek gösterilir. Maskenin saydam bölümlerini göstermek için denetleyici arka plan kullanılır.

An object with an ImageBrush opacity mask
Opaklık maskeleme örneği

Görüntüyü opaklık maskesi olarak kullanmak için, görüntüyü içeren ImageBrush bir kullanın. 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üzeylerini destekleyen bir biçimde kaydedin. Aşağıdaki örnekte, önceki çizimi oluşturmak için kullanılan kod gösterilmiştir.

<!-- 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>

Kutucuklı Görüntüyü Opaklık Maskesi Olarak Kullanma

Aşağıdaki örnekte, aynı görüntü başka bir ile kullanılır, ancak fırça kutucuk özellikleri görüntünün 50 piksel kare kutucuklarını ImageBrush ü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 bir opaklık maskesi kullanılabilir. Çizimde yer alan şekiller gradyanlarla, düz renklerle, görüntülerle, hatta diğer çizimlerle doldurulmalıdır. Aşağıdaki görüntüde, opaklık maskesi olarak kullanılan bir çizim örneği gösterir. Maskenin saydam bölümlerini göstermek için denetleyici 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çeren DrawingBrush bir kullanın. Aşağıdaki örnekte, önceki çizimi oluşturmak için kullanılan kod gösterilmiştir:

<!-- 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>

Kutucuklı Çizimi Opaklık Maskesi Olarak Kullanma

gibi ImageBrush , DrawingBrush çizimini kutucuk yapmak için de olabilir. Aşağıdaki örnekte, kutucuklanmış bir opaklık maskesi oluşturmak için çizim fırçası kullanılı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.