locked
A lot of questions! RRS feed

  • Question

  • 1) Is it possible to layout clipping geometry in blend? I wrote the clip portion below in the xml editor, but I don't see any way to visually layout clipping geometry. And no, I don't want boolean subtract/union because I may want to change the clipping at runtime.

    <UserControl
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="RealClip.Page" Width="640" Height="480">
      <Canvas>
        <Rectangle x:Name="rectangle" Fill="Red" Width="130" Height="150" RadiusY="22" RadiusX="22">
          <Rectangle.Clip>
            <EllipseGeometry x:Name="ellipse" RadiusX="100" RadiusY="75" Center="100,75"/>
          </Rectangle.Clip>
        </Rectangle>
      </Canvas>
    </UserControl>

    2) How is it possible to storyboard animations for clipping geometry? For example, I might want to change the radius of the clipping ellipse above in a storyboard.

    3) Is it possible to transform clipping geometry? I tried to add "<EllipseGeometry.RenderTransform>" inside the ellipse geometry xaml and received a xaml parse error.

    4) It is possible to create a fill brush from a piece of vector geometry where that geometry is tile repeated inside of some other shape, and is it then possible to animate that fill vector geometry?

    5) Is it possible to repeat a clip geometry over another shape, such as to have an ellipse clip tile over a shape creating the appearance of a grid of holes?

    That's about it for now. Thanks for reading! :)

     

     

     

    Sunday, October 26, 2008 10:59 AM

Answers

  • Hi,

    1) You can use the direct selection tool (press A) to visually edit the clipping path for the shape.  However Blend often turns this into an attribute using the mini-geometry language rather than an element property e.g. :

               <Rectangle x:Name="rectangle" Fill="Red" Width="130" Height="150" RadiusY="22" RadiusX="22" Clip="M200,75 C200,116.42136 155.22847,150 100,150 C44.771526,150 61.25,114.92136 61.25,73.5 C61.25,32.078644 44.771526,0 100,0 C155.22847,0 200,33.578644 200,75 z">
                    <Rectangle.Clip>
                    </Rectangle.Clip>
                </Rectangle>

    You can create the clipping path in Blend by drawing another shape as the clipping path, selecting it and the shapre you want to clip and then selecting Object > Path > Make Clipping Path.

     2) Again using the direct selection tool when recording an animation will work here, and produce something like the following:

      <Storyboard x:Name="Storyboard1">
       <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point2)">
        <SplinePointKeyFrame KeyTime="00:00:00" Value="-10.2957509956806,69.9344744412636"/>
        <SplinePointKeyFrame KeyTime="00:00:01" Value="23.7042486667634,80.9344711303712"/>
       </PointAnimationUsingKeyFrames>
    ...

    3) This worked ok for me as shown below.  Are you using RTW?

    <Rectangle.Clip>
                        <EllipseGeometry x:Name="ellipse" RadiusX="100" RadiusY="75" Center="100,75">
                            <EllipseGeometry.Transform>
                                <RotateTransform Angle="45"/>
                            </EllipseGeometry.Transform>
                        </EllipseGeometry>
                    </Rectangle.Clip>

    4)  I think so, but I don't have the time to test at the moment.  Could you post the example you are trying?

    5) I think this could be done as defining the clip geometry as a resource or a style to reuse.

     

    Sunday, October 26, 2008 12:16 PM

All replies

  • Hi,

    1) You can use the direct selection tool (press A) to visually edit the clipping path for the shape.  However Blend often turns this into an attribute using the mini-geometry language rather than an element property e.g. :

               <Rectangle x:Name="rectangle" Fill="Red" Width="130" Height="150" RadiusY="22" RadiusX="22" Clip="M200,75 C200,116.42136 155.22847,150 100,150 C44.771526,150 61.25,114.92136 61.25,73.5 C61.25,32.078644 44.771526,0 100,0 C155.22847,0 200,33.578644 200,75 z">
                    <Rectangle.Clip>
                    </Rectangle.Clip>
                </Rectangle>

    You can create the clipping path in Blend by drawing another shape as the clipping path, selecting it and the shapre you want to clip and then selecting Object > Path > Make Clipping Path.

     2) Again using the direct selection tool when recording an animation will work here, and produce something like the following:

      <Storyboard x:Name="Storyboard1">
       <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point2)">
        <SplinePointKeyFrame KeyTime="00:00:00" Value="-10.2957509956806,69.9344744412636"/>
        <SplinePointKeyFrame KeyTime="00:00:01" Value="23.7042486667634,80.9344711303712"/>
       </PointAnimationUsingKeyFrames>
    ...

    3) This worked ok for me as shown below.  Are you using RTW?

    <Rectangle.Clip>
                        <EllipseGeometry x:Name="ellipse" RadiusX="100" RadiusY="75" Center="100,75">
                            <EllipseGeometry.Transform>
                                <RotateTransform Angle="45"/>
                            </EllipseGeometry.Transform>
                        </EllipseGeometry>
                    </Rectangle.Clip>

    4)  I think so, but I don't have the time to test at the moment.  Could you post the example you are trying?

    5) I think this could be done as defining the clip geometry as a resource or a style to reuse.

     

    Sunday, October 26, 2008 12:16 PM
  • 1) Yes, the blend UI does convert the clip into a clip attribute which is bad if I wanted an ellipse and the ability to animate the radius.

    2) Yes again, the clip is translated into anm attribute. Maybe a static resource would help?

    3) I was actually trying RenderTransform rather than Transform. What's the difference and why are they named differently if they are the same?

    4) I might want to compute a vector shape or animate a vector shape which is udated as the fill of another shape. Image:

    http://codebot.org/snapshots/2CA6BB7A99DD5993496511CC4B186C32.jpg

    I might, for example, want to animate the think cloud (which is a vector), or reverse it and have a cloud with interlocking rotating tiled rotating vector gears filling it.

    5) I'll have to try that.

    Thanks for your response!

    Sunday, October 26, 2008 12:38 PM
  • 1)  >> bad if I wanted an ellipse and the ability to animate the radius

    Possibly, though you can still edit it in Blend, or convert it back manually to the xaml you want...Wink

    2) >> Maybe a static resource would help

    Could be worth a try. 

    3) LayoutTransform is not supported in Silverlight yet, only Render Transform  The difference is that RenderTransform applies its transformations after the layout system has performed its measure/arrange pass.

    Dalay has a good blog on how to work around this is Silverlight here: http://blogs.msdn.com/delay/archive/2008/05/27/lying-to-the-layout-system-for-a-good-cause-bringing-layouttransform-to-silverlight-2.aspx

    4) I'll see what help I can put together for you but may be a couple of days before I get a chance to play

    5) Ok - let us know how you get onWink

     

    Sunday, October 26, 2008 2:44 PM
  •  Thanks again~

    Sunday, October 26, 2008 5:00 PM