Slice image wpf

Question

In WPF I have an Image, Is there a way to apply for example these coordinates (native to the image): 0,10 20,0 20,20 to selectively display only the triangle that is formed by those coordinates.

Based on H.B.'s good advice I can opacity mask but i cannot place the map properly, nor crop to fit the opacity mask. Example below was supposed to be over Illinois

 <Image Source="http://www.digital-topo-maps.com/county-map/united-states-map.gif" Stretch="None">
    <Image.Clip>
        <PathGeometry>
            <PathFigure StartPoint="444.806216983824,129.344961240310"  IsClosed="True" IsFilled="True">
                <LineSegment Point="445.976759660097,145.147286821705"/>
                <LineSegment Point="431.344976206682,170.313953488372"/>
                <LineSegment Point="447.732573674507,188.457364341085"/>
                <LineSegment Point="458.852729099102,213.038759689923"/>
                <LineSegment Point="469.387613185561,214.209302325581"/>
                <LineSegment Point="481.093039948293,191.383720930233"/>
                <LineSegment Point="479.337225933884,143.391472868217"/>
                <LineSegment Point="477.581411919474,132.271317829457"/>
                <LineSegment Point="444.806216983824,129.344961240310"/>
            </PathFigure>
        </PathGeometry>
    </Image.Clip>
</Image>

H.B. H.B. · Accepted Answer · 2011-07-24T20:47:23

You could create this triangle as the OpacityMask or Clip of your image.

e.g.

<Image.Clip>
    <PathGeometry>
        <PathFigure StartPoint="0,10">
            <LineSegment Point="20,0" />
            <LineSegment Point="20,20" />
        </PathFigure>
    </PathGeometry>
</Image.Clip>

<Image.OpacityMask>
    <VisualBrush Stretch="None" AlignmentX="Left" AlignmentY="Top">
        <VisualBrush.Visual>
            <Path Fill="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,10" IsClosed="True" IsFilled="True">
                            <LineSegment Point="20,0" />
                            <LineSegment Point="20,20" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </VisualBrush.Visual>
    </VisualBrush>
</Image.OpacityMask>

You could crop the Image space using the margin:

<Image.Margin>
    <Binding Path="Clip.Bounds" RelativeSource="{RelativeSource Self}">
        <Binding.Converter>
            <vc:BoundsToMarginConverter />
        </Binding.Converter>
    </Binding>
</Image.Margin>

The converter:

public class BoundsToMarginConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Rect input = (Rect)value;
        return new Thickness()
        {
            Left = -input.Left,
            Right = -input.Right,
            Top = -input.Top,
            Bottom = -input.Bottom,
        };
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

This is hardly a nice solution but it seems to work...

Slice image wpf

1 Answers