Layout Transform 改变控件的布局

Question

我有一个 LayoutTransformControl，其中有一个包含图像和 Canvas 的网格。在应用程序的某个时刻，单击按钮时，我在 Canvas 中动态添加了一些 Thumb 控件以实现拖放。如果我为 LayoutTransformControl 设置 Angle，则单击同一个按钮会出现问题，我会假设它首先绘制所有 Thumb 控件，然后在我首先创建 Canvas 和 Thumbs 时翻转 Layout 控件，但它似乎就像它正在更新整个布局并且 Thumb 控件正在移动到 Canvas 之外的某个地方。有没有办法先渲染我所有的 Thumbs，然后改变角度，这样它就可以将整个控件旋转到那个角度。

如果角度为 0，即如果我不应用变换，则 Thumb 控件会一个一个地出现在另一个下方，如下所示，这很好。

这是我的问题，当我说角度是 270 时，Thumb 控件从 canvas 移开。

xaml.cs

     private void BtnCapture_Click(object sender, RoutedEventArgs e)
    {
    BarCodeImage.Height = cnvBarCodeImage.Height = MainLayoutControl.Height=480;
    BarCodeImage.Width = cnvBarCodeImage.Width = MainLayoutControl.Width;

//This code will create the canvas.
                    for (int i = 0; i < 2; i++)
                    {
                        var item = Selected.WindowLocations[i];

                        var dimensionsItem = new Dimensions();

                        dimensions.Add(new Dimensions()
                        {
                            Height = 262,
                            Width = 142,
                            Left = 395,
                            Top = 44,
                            Text = string.Empty,
                        });

                        dimensions.Add(new Dimensions()
                        {
                            Height = 106,
                            Width = 147,
                            Left = 395,
                            Top = 342,
                            Text = string.Empty,
                    }
    CreateThumbs(2, dimensions); //This will create the Thumbs and add to the Canvas
     RotateImage(270);
    }

      private void RotateImage(int Angle)
            {
                MainLayoutControl.Transform = new RotateTransform()
                {
                    Angle = Angle
                };
            }

    private void CreateThumbs(int numberOfWindows, List<Dimensions> dimensions)
            {
                ClearOrRemoveAllChildren();
                Thumb th = null;
                for (int i = 0; i < numberOfWindows; i++)
                {
                    th = new Thumb();
                    th.Name = i.ToString();
                    var item = dimensions[i];
                    th.Width = item.Width;
                    th.Height = item.Height;
                    th.Foreground = new SolidColorBrush(Windows.UI.Colors.Transparent);
                    th.BorderBrush = item.BorderColor;
                    th.BorderThickness = new Thickness(3);
                    th.Template = GetThumbTemplate(item.Text);
                    th.DragDelta += (sender, e) => Th_DragDelta(sender, e, dimensions);
                    th.DragCompleted += (sender, e) => Th_DragCompleted(sender, e, item.IsImageRotated);
                    Canvas.SetLeft(th, item.Left);
                    Canvas.SetTop(th, item.Top);
                    cnvBarCodeImage.Children.Add(th);
                }
            }

这是我的 xaml

<uwpControls:LayoutTransformControl x:Name="MainLayoutControl" Grid.Row="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="640">

                    <Grid x:Name="gridBarImagePanel">
                        <Image x:Name="BarCodeImage" 
                               RenderTransformOrigin="0.5,0.5"></Image>

                        <Canvas x:Name="cnvBarCodeImage" AllowDrop="True">

                        </Canvas>
                    </Grid>
                </uwpControls:LayoutTransformControl>

Answer 1

对于canvas，如果子内容大于面板并且不受面板边界的约束，则子内容在视觉上不会被裁剪，所以会是这样的效果。你设置canvas的高度为480，宽度为640，当你将LayoutTransformControl的内容旋转270度时，LayoutTransformControl的高度还是480，宽度还是640，但是canvas的高度就变成了640，canvas超出了LayoutTransformControl的范围，所以拇指就这样显示了。

你可以把canvas和你的图片的高和宽都设置成480，这样的话，不管你怎么旋转canvas你旋转canvas，它始终在 LayoutTransformControl 的范围内。然后重新布局两个拇指。

BarCodeImage.Height = cnvBarCodeImage.Height = MainLayoutControl.Height = 480;
BarCodeImage.Width = cnvBarCodeImage.Width = MainLayoutControl.Width = 480;

或者如果你仍然想保持640的宽度和480的高度，你可以在旋转后重新调整LayoutTransformControl的大小。

private void RotateImage(int Angle)
{
    MainLayoutControl.Transform = new RotateTransform()
    {
        Angle = Angle
    };
    MainLayoutControl.Height = 640;
    MainLayoutControl.Width = 480;
}

Layout Transform 改变控件的布局

Layout Transform changing layout of the controls

wpf

rotatetransform

uwp