WPF：Graphics图画--BrushesSamples画刷、OpacityMasking不透明蒙版

SystemBrushesAndColors

系统定义纯色画刷填充方框

// The window style (defined in Window1.xaml) is used to
// specify the height and width of each of the System.Windows.Shapes.Rectangles.
var t = new TextBlock {Text = "ActiveBorder"};
var r = new Rectangle
{
    Fill = SystemColors.ActiveBorderBrush
};
systemBrushesPanel.Children.Add(t);
systemBrushesPanel.Children.Add(r);

t = new TextBlock {Text = "ActiveCaption"};
r = new Rectangle {Fill = SystemColors.ActiveCaptionBrush};
systemBrushesPanel.Children.Add(t);
systemBrushesPanel.Children.Add(r);

系统线变画刷填充方框

Fill =
    new LinearGradientBrush(SystemColors.ControlDarkDarkColor,
        SystemColors.ControlLightLightColor, 45)

OpacityMasking不透明度蒙版

效果：使用不透明蒙版效果
关键词：OpacityMask

• GradientBrushExample

上3的不透明蒙版：

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

中3的不透明蒙版使用后露出下层方框的渐变紫色

<!--With the opacity mask:-->
    <Canvas Width="100" Height="30" HorizontalAlignment="Left" Margin="10" Grid.Column="2" Grid.Row="2">
      <Rectangle
        Width="100"
        Height="30"
        RadiusX="10"
        RadiusY="10">
        <Rectangle.Fill>
          <RadialGradientBrush>
            <RadialGradientBrush.GradientStops>
              <GradientStop Offset="0" Color="MediumBlue" />
              <GradientStop Offset="1" Color="BlueViolet" />
                </RadialGradientBrush.GradientStops>
              </RadialGradientBrush>
          </Rectangle.Fill>
        </Rectangle>
      
        <Rectangle
          Width="100"
          Height="30"
          RadiusX="10"
          RadiusY="10">
          <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="DarkGray" />
                <GradientStop Color="WhiteSmoke" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Fill>
          <Rectangle.OpacityMask>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
              <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.OpacityMask>
        </Rectangle>
          
      </Canvas>

• ImageBrush

上3画面是在Image上应用使用ImageBrush的不透明蒙版：

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

中3是在Image上使用 应用在Image区域的图块为ImageBrush参数的 不透明蒙版

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

下3位应用BrushImage的不透明蒙版在按钮上的效果

<Button.OpacityMask>
  <ImageBrush ImageSource="sampleImages/tornedges.png"/>
</Button.OpacityMask>

• DrawingBrushExample

上3 的DrawingBrush不透明蒙版：
ps:GeometryDrawing的Brush、Geometry方框的位置大小及Pen的大小值需留意。

<!-- 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="1,0.05 0.5,1" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Image.OpacityMask>
</Image>

同理中3、下3的蒙版使用一样，多了个Viewport及TileMode属性设置。

扩展：
UIElement.OpacityMask 属性：获取或设置不透明蒙板，作为应用于此元素已呈现内容的任何 Alpha 通道蒙板的 Brush 实现。这是一个依赖项属性。

1. 此属性仅使用提供的 Brush 的任意 Alpha 通道值。 Brush 呈现内容的其他通道（红色、绿色或蓝色）被忽略。
2. 最常见的用于此目的的 Brush 是 ImageBrush，它可用在各种照片蒙板技术中，如虚光照。 但可以使用任何已定义的 Brush（如 LinearGradientBrush）。