Rectangle on Image.OpacityMask in Silverlight

Question

I want add Rectangle for Image.OpacityMask in WinPhone.

It is very easy on WPF:

<Image 
      Grid.Row="4" Grid.Column="5"
      Height="150"
      Width="200"
      Source="sampleImages/Waterlilies.jpg">
  <Image.OpacityMask>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
      </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Image.OpacityMask>
</Image>

But on WinPhone we can't use DrawingBrush.

How to add Rectangle on OpasityMask for Image on WinPhone?

Answer 1

It seem there that you are just trying to just clip the image so you could just use the Clip property which you can set to a geometry.
If you are in fact trying to achieve something more complex, than what you could do is use a WriteableBitmap to render the Geometry into a Bitmap and use the writeable bitmap in the OpacityMask. The following attached property can help you achieve that:

public class MyAttached
{

    public static readonly DependencyProperty GeometryOpacityMaskProperty =
        DependencyProperty.RegisterAttached("GeometryOpacityMask", typeof(Path), typeof(MyAttached), new PropertyMetadata(default(Path), GeometryOpacityMaskChanged));

    private static void GeometryOpacityMaskChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        FrameworkElement uiElement = d as FrameworkElement;

        Path path = e.NewValue as Path;
        if (path != null && uiElement != null)
        {
            WriteableBitmap writeableBitmap = new WriteableBitmap((int)uiElement.Width, (int)uiElement.Height);
            writeableBitmap.Render(path, new CompositeTransform());
            writeableBitmap.Invalidate();

            ImageBrush imageBrush=new ImageBrush();
            imageBrush.ImageSource = writeableBitmap;
            uiElement.OpacityMask = imageBrush;
        }
    }

    public static void SetGeometryOpacityMask(UIElement element, Path value)
    {
        element.SetValue(GeometryOpacityMaskProperty, value);
    }

    public static Path GetGeometryOpacityMask(UIElement element)
    {
        return (Path)element.GetValue(GeometryOpacityMaskProperty);
    }
}

That you can use like this:

<Image 

  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
        Stretch="UniformToFill"
        >
        <phoneApp1:MyAttached.GeometryOpacityMask>
            <Path>
                <Path.Data>
                    <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
                </Path.Data>
            </Path>
        </phoneApp1:MyAttached.GeometryOpacityMask>
    </Image>

Answer 2

Use Image.Clip for cut of part Image.

Clip Ellipse:

<Image Name="Img" Source="/UntitledImage.jpg">
  <Image.Clip>
    <EllipseGeometry Center="115,115" RadiusX="50" RadiusY="50"></EllipseGeometry>
  </Image.Clip>
</Image>

Clip Rectangle:

<Image Name="oldImg" Source="/UntitledImage.jpg">
  <Image.Clip>
    <RectangleGeometry Rect="115,115,50,50"></RectangleGeometry>
  </Image.Clip>
</Image>