Problem with Silverlight CliptoBound

Question

I am working on a Silverlight application and my problem is this: I have a WrapPanel and inside the WrapPanel I am adding a few images. Then I rotate these images either 90 degrees or -90 degrees.

So, if the size of my image is 200 by 250, when I rotate it, it will exit the WrapPanel by 50 pixels. Is there a way to copy this image into the actual borders of the WrapPanel?

Answer 1

It sounds like you are using RenderTransform to rotate the image. The problem is that the transformation is applied after the size and position of the image has been selected, and then the rotated image is discarded outside its original rectangle.

One solution is to use a LayoutTransfomer to convert this transformation. This will cause the WrapPanel to re-move elements, even moving the image to the next line. Here is an example of using rectangles for simplicity: -

  <ScrollViewer HorizontalScrollBarVisibility="Disabled"> <ItemsControl ItemsSource="{StaticResource TestData}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <toolkit:WrapPanel /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <toolkit:LayoutTransformer RenderTransformOrigin="0.5, 0.5" Margin="5"> <toolkit:LayoutTransformer.LayoutTransform > <RotateTransform Angle="0" /> </toolkit:LayoutTransformer.LayoutTransform> <Rectangle Width="100" Height="150" Fill="Blue" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" /> </toolkit:LayoutTransformer> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ScrollViewer> 

I added the code: -

  private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { LayoutTransformer lt = ((FrameworkElement)sender).Parent as LayoutTransformer; RotateTransform rt = (RotateTransform)lt.LayoutTransform; rt.Angle += 90; lt.ApplyLayoutTransform(); } 

My source for TestData is an arbitary List<T> , it doesn't really matter what is in the list, it just contains a few items.

Using ScrollViewer as a Dynamic Clipping Area

Note that its normal to host a WrapPanel in a ScrollViewer , which naturally pinned its contents to anywar.

Perhaps you really want to crop the WrapPanel and you don't need to scroll. Obviously, you can apply the RectangleGeometry property to your Clip property, but you will need to make sure the rectangle of the clip always matches the actual size of the WrapPanel . You can do this by checking out its SizeChanged event and using a bit of code.

Another approach is to put it in a ScrollViewer , then disable both scrollbars.

Answer 2

To add the answer above to AnthonyWJones, which is absolutely correct, you need to rotate during the build, not the render. Silverlight panels do not crop their contents. To clip, you must manually set the Clip property to the desired geometry.

The following blog post contains attached behavior that automatically trims the panel borders:

http://www.scottlogic.co.uk/blog/colin/2009/05/silverlight-cliptobounds-can-i-clip-it-yes-you-can/

You simply set the property as follows:

  <Canvas util:Clip.ToBounds="true" Grid.Column="1" Background="Aqua" Margin="20" > <Ellipse Fill="Red" Canvas.Top="-10" Canvas.Left="-10" Width="130" Height="130"/> </Canvas>