Question

我正在使用Silverlight应用程序，我的问题是这样的：我有一个WrapPanel 在WrapPanel内我添加了许多图像。然后，我也旋转这些图像 90度或-90度。

因此，如果我的图像尺寸为200 x 250，当我旋转它时，它会超出WrapPanel 50像素。有没有办法将此图像剪辑到WrapPanel的实际边界？

Answer 1

听起来像是在使用RenderTransform来旋转图像。问题是在分配了图像的大小和位置后应用了变换，因此旋转的图像会在其原始矩形之外进行浮动。

一种解决方案是使用LayoutTransfomer来实现该转换。这将导致WrapPanel重新流动元素，甚至将图像移动到下一行。以下是使用矩形的示例： -

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

我添加了代码隐藏： -

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

我的TestData项源是一个仲裁List<T>，只是包含一些项目，列表中的内容并不重要。

将ScrollViewer用作动态剪辑区域

请注意，将{WrapPanel'放置在ScrollViewer中可以自然地将其内容剪切为anywar。

也许你真的想要剪辑WrapPanel并且你不想要任何滚动。显然，您可以应用RectangleGeometry其Clip属性，但您必须确保剪辑矩形始终与WrapPanel的实际大小相匹配。您可以通过监视其SizeChanged事件并使用一些代码来实现。

另一种方法是将其放在ScrollViewer中，然后禁用两个滚动条。

Answer 2

只需添加上面的AnthonyWJones答案，这是完全正确的，您需要在布局期间旋转而不是渲染。 Silverlight面板不会剪切其内容，为了执行剪切，您必须手动将其Clip属性设置为所需的几何体。

以下博客文章提供了附加行为，该行为将自动剪辑面板的边界：

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

您只需按如下方式设置属性：

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

Silverlight CliptoBound属性问题

2 个答案: