locked
how to accomplish this? (geedsen) - 10/22/2007 1:31 AM PST RRS feed

  • Question

  • By: geedsen


    I am trying to get something working and I just cannot get it done. I will 
    try to explain it in a generic way, without trying to push it to certain 
    directions I have already tried.
    
    What I want is to have a rectangle. Inside the rectangle is an image.
    The image bounds can exceed the bounds of the rectangle. The part of the 
    image that is outside the rectangle should have a lower opacity than the part 
    inside the rectangle. And the opacity of the parts outside should be databind 
    to a slider.
    
    I managed to get part of this working, by inserting an image on the 
    artboard, placing a grid on top of the image and placing the same image in 
    the grid. And then
    setting the bounds of the image inside the grid such that it exactly 
    overlays the image that is underneath the grid. And then set clipping on on 
    the grid. I can now
    change the opacity of the image underneath the grid.
    
    But the problem is how to make the two images behave as one. How can I 
    accomplish that they always stay exactly on top of each other, when moving or 
    resizing. 
    
    I hope it's clear what I want to do.
    
    Thanks
    
      Ben
    
    Thursday, February 21, 2008 7:08 PM

Answers

  • Adrian Vinca [MSFT]


    Hi Ben,

    Indeed, in your case it may be tricky to try to align those 2 images because
    the Layout engine makes things more difficult to calculate. Here is another
    approach you could try (it uses your idea of overlapping 2 images, and
    clipping the top one, but uses a different clipping method - clipping path -
    which avoids having to deal with the layout's margins in order to keep them
    in sync):
    - have 2 images overlapped, the bottom one would be the transparent one
    - draw a rectangle - which represents the area you wish to cut
    - select the top image and the rectangle, and click on the main menu on
    Object->Path->Make Clipping Path
    - if you want to keep them in sync all you need to do is use the same
    values for the layout properties (e.g. Margin, Widht, Height, and so on),
    and for that you could use databinding.

    Here is an example which shows this:

    <Grid x:Name="LayoutRoot">
    <Image x:Name="Bottom" Margin="0,0,0,0" Source="MyImage.jpg"
    Stretch="Fill" Opacity="0.5"/>
    <Image x:Name="Top" Margin="0,0,0,0" Source="MyImage.jpg" Stretch="Fill"
    Clip="M124.5,64.5 L506.5,64.5 L506.5,339.5 L124.5,339.5 z"/>
    </Grid>

    Some other ideas you could try:
    - create your own Image control which has that behavior - the
    implementation could be quite tricky though
    - fake the opacity by displaying some rectangles on top of the image and
    adjust their opacity; this way you would have only one image but you don't
    really adjust the opacity of the image; for some applications it may be
    acceptable though.

    Hope this helps,
    - Adrian Vinca [MSFT]
    Content is provided "AS IS" with no warranties and confers no rights.
    Opinions are my own and do not represent those of my employer.

    "geedsen" <geedsen@discussions.microsoft.com> wrote in message
    news:7EC3A32D-9517-4DEE-BC97-84AF17801681@microsoft.com...
    >I am trying to get something working and I just cannot get it done. I will
    > try to explain it in a generic way, without trying to push it to certain
    > directions I have already tried.
    >
    > What I want is to have a rectangle. Inside the rectangle is an image.
    > The image bounds can exceed the bounds of the rectangle. The part of the
    > image that is outside the rectangle should have a lower opacity than the
    > part
    > inside the rectangle. And the opacity of the parts outside should be
    > databind
    > to a slider.
    >
    > I managed to get part of this working, by inserting an image on the
    > artboard, placing a grid on top of the image and placing the same image in
    > the grid. And then
    > setting the bounds of the image inside the grid such that it exactly
    > overlays the image that is underneath the grid. And then set clipping on
    > on
    > the grid. I can now
    > change the opacity of the image underneath the grid.
    >
    > But the problem is how to make the two images behave as one. How can I
    > accomplish that they always stay exactly on top of each other, when moving
    > or
    > resizing.
    >
    > I hope it's clear what I want to do.
    >
    > Thanks
    >
    > Ben
    >
    Friday, February 22, 2008 7:03 PM

All replies

  • Adrian Vinca [MSFT]


    Hi Ben,

    Indeed, in your case it may be tricky to try to align those 2 images because
    the Layout engine makes things more difficult to calculate. Here is another
    approach you could try (it uses your idea of overlapping 2 images, and
    clipping the top one, but uses a different clipping method - clipping path -
    which avoids having to deal with the layout's margins in order to keep them
    in sync):
    - have 2 images overlapped, the bottom one would be the transparent one
    - draw a rectangle - which represents the area you wish to cut
    - select the top image and the rectangle, and click on the main menu on
    Object->Path->Make Clipping Path
    - if you want to keep them in sync all you need to do is use the same
    values for the layout properties (e.g. Margin, Widht, Height, and so on),
    and for that you could use databinding.

    Here is an example which shows this:

    <Grid x:Name="LayoutRoot">
    <Image x:Name="Bottom" Margin="0,0,0,0" Source="MyImage.jpg"
    Stretch="Fill" Opacity="0.5"/>
    <Image x:Name="Top" Margin="0,0,0,0" Source="MyImage.jpg" Stretch="Fill"
    Clip="M124.5,64.5 L506.5,64.5 L506.5,339.5 L124.5,339.5 z"/>
    </Grid>

    Some other ideas you could try:
    - create your own Image control which has that behavior - the
    implementation could be quite tricky though
    - fake the opacity by displaying some rectangles on top of the image and
    adjust their opacity; this way you would have only one image but you don't
    really adjust the opacity of the image; for some applications it may be
    acceptable though.

    Hope this helps,
    - Adrian Vinca [MSFT]
    Content is provided "AS IS" with no warranties and confers no rights.
    Opinions are my own and do not represent those of my employer.

    "geedsen" <geedsen@discussions.microsoft.com> wrote in message
    news:7EC3A32D-9517-4DEE-BC97-84AF17801681@microsoft.com...
    >I am trying to get something working and I just cannot get it done. I will
    > try to explain it in a generic way, without trying to push it to certain
    > directions I have already tried.
    >
    > What I want is to have a rectangle. Inside the rectangle is an image.
    > The image bounds can exceed the bounds of the rectangle. The part of the
    > image that is outside the rectangle should have a lower opacity than the
    > part
    > inside the rectangle. And the opacity of the parts outside should be
    > databind
    > to a slider.
    >
    > I managed to get part of this working, by inserting an image on the
    > artboard, placing a grid on top of the image and placing the same image in
    > the grid. And then
    > setting the bounds of the image inside the grid such that it exactly
    > overlays the image that is underneath the grid. And then set clipping on
    > on
    > the grid. I can now
    > change the opacity of the image underneath the grid.
    >
    > But the problem is how to make the two images behave as one. How can I
    > accomplish that they always stay exactly on top of each other, when moving
    > or
    > resizing.
    >
    > I hope it's clear what I want to do.
    >
    > Thanks
    >
    > Ben
    >
    Friday, February 22, 2008 7:03 PM
  • geedsen


    Thanks Adrian,
    
    I'll try that idea.
    
    Ben
    
    
    "Adrian Vinca [MSFT]" wrote:
    
    > Hi Ben,
    > 
    > Indeed, in your case it may be tricky to try to align those 2 images because 
    > the Layout engine makes things more difficult to calculate. Here is another 
    ...................
    Friday, February 22, 2008 7:03 PM