Внешний отрисованный сегмент полилинии не отображается при применении TranslateTransform в UWP

Question

Я рисую форму полилинии, и точки можно рендерить за пределами окна в UWP. В этом случае я буду панорамировать полилинию, используя TranslateTransform для сегмента полилинии. При применении TranslateTransform сегмент перемещался, но за пределами отрисованной линии была обрезка. Я не могу перерисовывать ломаную линию каждый раз при перемещении мыши, так как у меня больше 15k очков. Поэтому я установил TranslateTransform при перемещении мыши.

Чтобы просто воспроизвести эту проблему, я создал образец, и когда вы нажимаете на сегмент Polyline, я установил TranslateTransform. Но внешняя отрисованная ломаная не отображается.

Мой код

<Grid x:Name="grid" PointerPressed="grid_PointerPressed" >
    <Polyline x:Name="polyline" StrokeThickness="10" Stroke="Red" Points="200,250 2500,250">
        <Polyline.RenderTransform>
            <TranslateTransform x:Name="transform"/>
        </Polyline.RenderTransform>
    </Polyline>
</Grid>

C#:

private void grid_PointerPressed (отправитель объекта, PointerRoutedEventArgs e ) {this.transform.X + = -50; }

Пример ссылки: ломаная линия

Пожалуйста, дайте мне знать, что я сделал не так. Как показать внешний рендеринг сегмента полилинии при панорамировании?

Спасибо,

Бхарати.

Answer 1

Альтернативное решение для go без Canvas : возьмите Path + PolyLineSegment вместо Polyline. Затем примените преобразование через Geometry.Transform.

 <Grid PointerPressed="Grid_PointerPressed" >
     <Path Stroke="Red" StrokeThickness="10">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Transform>
                    <TranslateTransform x:Name="transform"/>
                </PathGeometry.Transform>
                <PathFigure StartPoint="200,250">
                    <PolyLineSegment Points="2500,250"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>

Answer 2

Просто заверните полилинию в холст.

<Grid x:Name="grid" PointerPressed="grid_PointerPressed" >
    <Canvas>
        <Polyline x:Name="polyline" StrokeThickness="10" Stroke="Red" Points="200,250 2500,250">
            <Polyline.RenderTransform>
                <TranslateTransform x:Name="transform"/>
            </Polyline.RenderTransform>
       </Polyline>
    </Canvas>
</Grid>