Click here to Skip to main content
15,885,216 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
Hi. I need to do next:
I have a grid with image, and a user-control, that is on grid.
HTML
<Grid>
	<Grid.Background>
		<ImageBrush ImageSource="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" Stretch="UniformToFill"></ImageBrush>
	</Grid.Background>
	<my:control x:Name="control1" Margin="55,58,123,-97"></control>
</Grid>

The problem is next: how i can get part of grid's background, that is under control1?
Posted
Comments
Mario Vernari 22-Nov-14 10:52am    
Could you explain better what's your goal?
Arlert 22-Nov-14 13:22pm    
From this image: http://imgur.com/XPD5nvJ
the image with duft punk is on grid's background. the red square is my control. i need to get this part of grid's image, that is covered by red (crop is not suitable)

1 solution

Here is how I made.
If you run the app, try resizing the window so that the clipped area will change accordingly to the rectangle's margin.
The right-side image should be always the same as the reddish covered area on the left.

XML
<Window x:Class="WpfApplication5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication5"
        Title="MainWindow" Height="400" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        
        <Grid x:Name="grid1">
            <Image
                Source="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" 
                Stretch="UniformToFill" 
                x:Name="image1"
                />
            
            <Rectangle 
                x:Name="control1" 
                Margin="50,10,100,80" 
                Fill="Red"
                Opacity="0.33"
                >
            </Rectangle>
        </Grid>

        <Rectangle 
            Width="{Binding Path=ActualWidth, ElementName=control1}" 
            Height="{Binding Path=ActualHeight, ElementName=control1}" 
            Grid.Column="1"
            >
            <Rectangle.Fill>
                <VisualBrush
                    Visual="{Binding ElementName=image1}"
                    ViewboxUnits="RelativeToBoundingBox"
                    >
                    <VisualBrush.Viewbox>
                        <MultiBinding>
                            <MultiBinding.Converter>
                                <local:MyConv />
                            </MultiBinding.Converter>
                            <Binding Path="ActualWidth" ElementName="grid1" />
                            <Binding Path="ActualHeight" ElementName="grid1" />
                            <Binding Path="Margin" ElementName="control1" />
                        </MultiBinding>
                    </VisualBrush.Viewbox>
                </VisualBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Window>


You need also a converter:

C#
public class MyConv : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var gw = (double)values[0];
        var gh = (double)values[1];
        var th = (Thickness)values[2];

        var clip = new Rect(
            th.Left / gw,
            th.Top / gh,
            (gw - th.Right - th.Left) / gw,
            (gh - th.Bottom - th.Top) / gh
            );

        return clip;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Hope it helps.
Mario
 
Share this answer
 
v2
Comments
Arlert 23-Nov-14 13:54pm    
nice, just replace in converter to
var clip = new Rect(
th.Left / gw,
th.Top / gh,
Math.Abs(gw - th.Right - th.Left) / gw,
Math.Abs(gh - th.Bottom - th.Top) / gh
);
Mario Vernari 23-Nov-14 22:28pm    
Sure, you're right!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900