WPF在用户控制下获取图像 [英] WPF get image under user control

问题描述

您好。我需要做下一步：

我有一个带图像的网格和一个用户控件，它在网格上。

Hi. I need to do next:
I have a grid with image, and a user-control, that is on grid.

<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>

接下来的问题是：我如何获得网格背景的一部分，即 control1 ？

推荐答案

这是我的制作方式。

如果您运行应用程序，请尝试调整窗口大小，以便裁剪区域相应地更改为矩形保证金。

右侧图像应始终与左侧带红色的区域相同。

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.

<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:

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();
    }
}

希望它有所帮助。

Mario

Hope it helps.
Mario

这篇关于WPF在用户控制下获取图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！