不透明遮罩概觀

發行項
08/21/2008

更新：2007 年 11 月

不透明遮罩可以讓您將部分項目變成透明或部分透明的視覺物件。若要建立不透明遮罩，請將 Brush 套用至項目或 Visual 的 OpacityMask 屬性。筆刷會對應至項目或視覺物件，而每個筆刷像素的不透明值會決定項目或視覺物件的每個對應像素的不透明結果。

本主題包含下列章節。

必要條件
使用不透明遮罩建立視覺效果
建立不透明遮罩
使用漸層做為不透明遮罩
指定不透明遮罩的漸層停駐點
使用影像做為不透明遮罩
從繪圖建立不透明遮罩
相關主題

必要條件

本概觀假設您已熟悉 Brush 物件。如需使用筆刷的簡介，請參閱使用純色和漸層繪製的概觀。如需 ImageBrush 和 DrawingBrush 的詳細資訊，請參閱使用影像、繪圖和視覺效果繪製。

使用不透明遮罩建立視覺效果

不透明遮罩的原理是將其內容對應至項目或視覺物件，然後使用筆刷中每個像素的 Alpha 色頻決定項目或視覺物件中對應像素的不透明結果，筆刷的實際色彩則會被忽略。如果筆刷的某個部分是透明的，項目或視覺物件中的對應部分會變成透明。如果筆刷的某個部分是不透明的，項目或視覺物件中的對應部分維持不變。不透明遮罩指定的不透明會與項目或視覺物件中存在的不透明設定結合。例如，如果項目是 25 % 不透明，而不透明遮罩套用從完全不透明到完全透明的轉換，則項目的結果會從 25 % 不透明轉換成完全透明。

注意事項：
雖然本概觀中的範例會示範在影像項目上使用不透明遮罩的情形，但是不透明遮罩可以套用至任何項目或 Visual，包括面板和控制項。

不透明遮罩可以建立有趣的視覺效果，例如建立從檢視中淡出的影像或按鈕、加入紋理至項目，或是合併漸層以產生類似玻璃的表面。下圖示範使用不透明遮罩的情形。棋盤式背景會用來顯示遮罩的透明部分。

不透明遮罩範例

具有 LinearGradientBrush 不透明遮罩的物件

建立不透明遮罩

若要建立不透明遮罩，請建立 Brush 並套用至項目或視覺物件的 OpacityMask 屬性。您可以使用任何型別的 Brush 做為不透明遮罩的情形。

LinearGradientBrush, RadialGradientBrush：用以製作從檢視淡出的項目或視覺物件。

下圖顯示使用 LinearGradientBrush 做為不透明遮罩的情形。

LinearGradientBrush 不透明遮罩範例
ImageBrush：用以建立紋理和柔邊或撕裂邊的效果。

下圖顯示使用 ImageBrush 做為不透明遮罩的情形。

LinearGradientBrush 不透明遮罩範例
DrawingBrush：用以根據圖案、影像和漸層模式建立複雜的不透明遮罩。

下圖顯示使用 DrawingBrush 做為不透明遮罩的情形。

DrawingBrush 不透明遮罩範例

漸層筆刷 (LinearGradientBrush 和 RadialGradientBrush) 特別適合做為不透明遮罩。SolidColorBrush 會以統一的色彩填滿區域，所以不適合做為不透明遮罩。使用 SolidColorBrush 相當於設定項目或視覺物件的 OpacityMask 屬性。

使用漸層做為不透明遮罩

若要建立漸層填滿，請指定兩個以上的漸層停駐點。每個漸層停駐點都包含色彩和位置的描述 (如需建立和使用漸層的詳細資訊，請參閱使用純色和漸層繪製的概觀)。使用漸層做為不透明遮罩的程序相同，除了不透明遮罩漸層混合的不是色彩，而是 Alpha 色頻值。所以漸層內容的實際色彩就無關緊要，重要的是每個色彩的 Alpha 色頻或不透明度。下列為範例。

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

指定不透明遮罩的漸層停駐點

在上一個範例中，系統定義的色彩 Black 會做為漸層的開始色彩。因為 Colors 類別中的所有色彩 (Transparent 除外) 是完全不透明的，所以可以直接用於定義漸層不透明遮罩的開始色彩。

如需在定義不透明遮罩時對 Alpha 值進行其他控制，您可以在標記中使用 ARGB 十六進位標記法或者使用 Color.FromScRgb 方法，指定色彩的 Alpha 色頻。

在 XAML 中指定色彩不透明度

在可延伸標記語言 (XAML) 中，請使用 ARGB 十六進位標記法指定個別色彩的不透明度。ARGB 十六進位標記法使用下列語法：

#aarrggbb

上一行中的 aa 代表兩個位數的十六進位值，用來指定色彩的不透明度。rr、gg 和 bb 分別代表兩個位數的十六進位值，用來指定紅色、綠色及藍色的數量。每個十六進位位數的值可以是 0-9 或 A-F。0 是最小的值，F 是最大的值。Alpha 值 00 指定色彩為完全透明，而 FF Alpha 值則會建立完全不透明的色彩。下列範例中，十六進位 ARGB 標記法會用於指定兩個色彩。第一個色彩完全不透明，第二個色彩則是完全透明。

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

使用影像做為不透明遮罩

影像也可以做為不透明遮罩。下圖顯示範例。棋盤式背景會用來顯示遮罩的透明部分。

不透明遮罩範例

具有 ImageBrush 不透明遮罩的物件

若要使用影像做為不透明遮罩，請使用 ImageBrush 來包含影像。建立影像做為不透明遮罩時，請以支援多個透明層級的格式儲存影像，例如 Portable Network Graphics (PNG)。下列範例顯示用以建立上方插圖的程式碼。

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

使用並排影像做為不透明遮罩

在下列範例中，會對相同的影像使用另一個 ImageBrush，但是會使用筆刷的並排功能產生 50x50 個像素的影像的並排。

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

從繪圖建立不透明遮罩

繪圖可以做為不透明遮罩。繪圖中包含的圖案本身可以用漸層、純色、影像或其他繪圖填滿。下圖顯示使用繪圖做為不透明遮罩的範例。棋盤式背景會用來顯示遮罩的透明部分。

DrawingBrush 不透明遮罩範例

具有 DrawingBrush 不透明遮罩的物件

若要使用繪圖做為不透明遮罩，請使用 DrawingBrush 來包含繪圖。下列範例顯示用以建立上方插圖的程式碼：

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

使用並排繪圖做為不透明遮罩

如同 ImageBrush，DrawingBrush 也可以並排其繪圖。在下列範例中，會使用繪圖筆刷建立並排的不透明遮罩。

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

請參閱

概念

使用影像、繪圖和視覺效果繪製

使用純色和漸層繪製的概觀

共用方式為