Layout Transform изменяя расположение элементов управления

У меня есть LayoutTransformControl, в котором есть сетка, содержащая изображение и холст. В какой-то момент в приложении при нажатии кнопки я динамически добавляю некоторые элементы управления Thumb внутри холста для реализации перетаскивания. Проблема заключается в нажатии той же кнопки, если я установил угол для LayoutTransformControl, я бы предположил, что он сначала рисует все элементы управления Thumb, а затем переворачивает элемент управления Layout, когда я сначала создаю свой Canvas и Thumbs, но похоже, что он обновляется весь макет и элементы управления Thumb перемещаются куда-то за пределы холста. Есть ли способ сначала отрендерить все мои пальцы, а затем изменить угол, чтобы он просто повернул весь элемент управления на этот угол.

Если угол равен 0, т.е. если я не применяю преобразование, элементы управления Thumb отображаются один под другим, как показано ниже, и это нормально. введите описание изображения здесь

Вот моя проблема, когда я говорю, что угол 270, элементы управления Thumb отодвигаются от холста.

введите описание изображения здесь

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>

wpf uwp rotatetransform
person nikhil    schedule 06.12.2019    source источник
comment
Вы имеете в виду, что когда вы запускаете событие BtnCapture_Click, вы добавляете элементы управления для большого пальца и вращаете, элементы управления для большого пальца отображаются за пределами холста? Но я не могу воспроизвести эту проблему путем тестирования кода, он хорошо отображается. Правильно ли установлено положение большого пальца? А можете ли вы предоставить простой образец, который можно воспроизвести для нас?   -  person Faywang - MSFT    schedule 09.12.2019
comment
Конечно, позвольте мне опубликовать код. Я думал об этом.   -  person nikhil    schedule 09.12.2019
comment
Привет, @Faywang, я обновил свой пост. Так что я считаю, что теперь проблема может быть воспроизведена.   -  person nikhil    schedule 09.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Для холста дочерний контент не обрезается визуально, если он больше, чем панель, и не ограничивается границами панели, поэтому это будет такой эффект. Вы устанавливаете высоту холста как 480 и ширину как 640, когда вы поворачиваете содержимое LayoutTransformControl на 270 градусов, высота LayoutTransformControl по-прежнему равна 480, а ширина равна 640, но высота холста становится 640, холст выходит за рамки LayoutTransformControl, поэтому большие пальцы отображаются таким образом.

Вы можете установить высоту и ширину холста и вашего изображения как 480, в этом случае, независимо от того, как вы поворачиваете холст, вы поворачиваете холст, он всегда находится в области 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;
}
person Faywang - MSFT    schedule 10.12.2019