了解 OpacityMask 的有效区域答案

【问题标题】：Understanding the effective area of an OpacityMask了解 OpacityMask 的有效区域
【发布时间】：2018-01-30 09:34:08
【问题描述】：

我正在使用 WPF opacitymask 来“剪切”动画区域的形状。我注意到默认情况下， opacitymask 仅适用于面板的内容，而不是整个面板。

将背景设置为透明是一种可行的解决方案，因为（显然它会强制拉伸 opacitymask。但是感觉像是一种解决方法，所以我很好奇是否有一种“有意”的方法可以使 opacitymask 拉伸到整个网格。

示例代码和结果见下：

<Window x:Class="Sandbox.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="400" Width="800">
<Window.Resources>
    <ImageBrush x:Key="SomeAlphaMaskBrush" ImageSource="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Dog_silhouette.svg/1034px-Dog_silhouette.svg.png"></ImageBrush>
</Window.Resources>
<Grid Name="Container">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid Name="Container01" OpacityMask="{StaticResource SomeAlphaMaskBrush}" Background="Transparent">
        <!-- Container01 has a transparent background and it makes the OpacityMask stretch to the entire Container01 -->
        <Rectangle Margin="70" Fill="Black"/>
    </Grid>
    <Grid Grid.Column="1" Name="Container02" OpacityMask="{StaticResource SomeAlphaMaskBrush}">
        <!-- Container02 has no background, the opacitymask is applied only to its content -->
        <Rectangle Margin="70" Fill="Black"/>
    </Grid>
</Grid>

Resulting output here:

【问题讨论】：

标签： c# wpf xaml opacitymask

【解决方案1】：

您可以使用ViewportUnits="Absolute" 和VisualBrush 属性来设置所需的OpacityMask 矩形：

<ImageBrush x:Key="SomeAlphaMaskBrush" ViewportUnits="Absolute" Viewport="0 0 20 20" ImageSource="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Dog_silhouette.svg/1034px-Dog_silhouette.svg.png"/>

【讨论】：