WPF Opacity Mask at fixed location - wpf

Question

I need to get rid of a part of a component ( make it totally transparent ) , a small bar at the bottom of it actually.
It's a fixed size something like 25-30px but the problem is this component will be resized a lot so i can't just put an image as opacity mask. ( which will look bad at different sizes )
Even if the component is 300x300 or 1000x200 , i need to get bottom 25px disappear somehow.
I searched about opacity mask&drawing brush but no luck , can't find a way to dock it at the bottom of component.
By the way , not sure if it matters but the component I'm talking about is WPFChromium browser control.
Is there a way to achieve this by opacity mask or something like viewbox etc?
Thanks in advance!

Answer 1

You could use a LinearGradientBrush as OpacityMask for the Control and Bind the Offset to the ActualHeight of the Control and then subtract 25 from the value and divide it by the ActualHeight in order to get the value in %. This should give you a transparent part of 25px at the Bottom
<WebBrowser Name="webBrowser">
<WebBrowser.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFF0000"
Offset="{Binding ElementName=webBrowser,
Path=ActualHeight,
Converter={StaticResource OffsetConverter},
ConverterParameter=25}"/>
<GradientStop Color="#00000000"
Offset="{Binding ElementName=webBrowser,
Path=ActualHeight,
Converter={StaticResource OffsetConverter},
ConverterParameter=25}"/>
</LinearGradientBrush>
</WebBrowser.OpacityMask>
</WebBrowser>
The OffsetConverter
public class OffsetConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
double height = (double)value;
double subract = System.Convert.ToDouble(parameter.ToString());
double opacityMaskHeight = height - subract;
return opacityMaskHeight / height;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}