Outside rendered polyline segment not disply when apply TranslateTransform in UWP

Question

I am drawing a polyline shape and the points can be render outside the window in UWP. In that case, i will pan the polyline using TranslateTransform for polylinesegment. When applying TranslateTransform, segment moved, but outside rendered line was cutoff. I can't redraw polyline every time on mouse move as i have more than 15k points. So i set TranslateTransform on mouse move.

To simply reproduce this issue, I have created sample and when you click on the Polyline segment, i have set TranslateTransform. But, outside rendered polyline not display.

My code

<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(object sender, PointerRoutedEventArgs e) { this.transform.X += -50; }

Sample link: polyline

Please let me know what i did wrong. How to show the outside rendered polyline segment when panning?

Thanks,

Bharathi.

ardget ardget · Accepted Answer · 2020-02-28T07:29:47

The alternative solution to go w/o Canvas: Take Path + PolyLineSegment instead of Polyline. Then apply transform via 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>

Outside rendered polyline segment not disply when apply TranslateTransform in UWP

2 Answers