Layout Transform changing layout of the controls

Question

I have a LayoutTransformControl in which I have a Grid which contains an image and a Canvas. At some point in the application, on button click I am adding some Thumb controls dynamically inside the Canvas to implement drag and drop. Problem is on click of the same button if I set the Angle for the LayoutTransformControl, I would assume it draws all the Thumb controls first and then flip the Layout control as I am creating my Canvas and Thumbs first, but it seems like it is updating the entire layout and the Thumb controls are moving somewhere beyond the Canvas. Is there a way to first render all my Thumbs first and then change the angle so it just rotates the entire control to that angle.

If the angle is 0 i.e. if I don't apply a transform the Thumb controls appears one below the other as below which is fine.

Here is my problem when I say angle is 270, the Thumb controls move away from 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);
                }
            }

Here is my 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

For canvas, child content is not visually clipped if larger than the panel and is not constrained by the bounds of the panel, so it will be such an effect. You set the height of canvas as 480 and width as 640, when you rotate the content of LayoutTransformControl 270 degrees, the height of LayoutTransformControl is still 480 and the width is 640, but the height of canvas becomes 640, the canvas is beyond the scope of LayoutTransformControl, so the thumbs displays like that.

You can set the height and width of canvas and your image both as 480, in that case, no matter how you rotate the canvas you rotate the canvas, it always in the scope of LayoutTransformControl. Then re-layout the two thumbs.

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

Or if you still want to keep the width of 640 and the height of 480, you can re-size the LayoutTransformControl after rotating it.

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