Line doesn't rotate on UWP

Question

I'm currently migrating a project from Windows Phone 8.1 to UWP, and I'm having problems with a XAML line that doesn't rotate when renderTransform compositeTransform rotation in code, but happens in if change is made in XAML. In Windows Phone 8.1 it worked without any problem.

Here's XAML part:

<Maps:MapControl
    <Line x:Name="mapLineMilestoneHelper" 
        Stroke="Black" StrokeThickness="2" Opacity="1.0"  StrokeDashArray="2,2" 
        RenderTransformOrigin="0.5, 0.5"
        X1="0" Y1="-1000" X2="0" Y2="1000" Visibility="Collapsed">                       
        <Line.RenderTransform>
           <CompositeTransform x:Name="lineMilestoneHelperAzimuth" Rotation="90.0"/>
           <!--<RotateTransform x:Name="lineMilestoneHelperAzimuth" 
               CenterX="0.5" CenterY="0.5" Angle="0"/>-->
        </Line.RenderTransform>
    </Line>
</Maps:MapControl

This line is drawn inside a Map Control. And then changed in code (but veen I change Rotation value to 0 it doesn't rotate.

Here's the C# code that should rotate the XAML line above:

lineMilestoneHelperAzimuth.Rotation = azimuth;

As you have seen, I've tried with RotateTransform also, but it didn't work.

Any idea why it happens?

Thank you

Emond · Answer 1 · 2018-03-15T18:00:42.027

According to https://learn.microsoft.com/en-us/windows/uwp/maps-and-location/display-poi#add-a-line you can add lines to a map from code. I assume that this is because that way you can specify the locations of the elements by their location on the map (perhaps in geo coordinates) so they move with the map when panning and zooming the map.

Another approach, if you are looking for an overlay kind of setup (like a Heads Up Display): nest the map in a Grid and put the line as a sibling to the map in the grid:

I made a minimal working example. Notice the changed line coordinates and setting Visibility to Visible instead of Collapsed to bring the line into view and make it visible. I also used a hard-coded brush and line thickness.

<Page xmlns:my="using:Windows.UI.Xaml.Controls.Maps"
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <my:MapControl/>
        <Line x:Name="mapLineMilestoneHelper"
              Stroke="Aqua"
              StrokeThickness="5"
              Opacity="1.0"
              StrokeDashArray="2,2"
              RenderTransformOrigin="0.5, 0.5"
              X1="0"
              Y1="0"
              X2="700"
              Y2="500"
              Visibility="Visible">
            <Line.RenderTransform>
                <CompositeTransform x:Name="lineMilestoneHelperAzimuth"
                                    Rotation="90.0" />
                <!--<RotateTransform x:Name="lineMilestoneHelperAzimuth" CenterX="0.5" CenterY="0.5" Angle="0" />-->
            </Line.RenderTransform>
        </Line>
        <Button Content="Button"
                HorizontalAlignment="Left"
                Margin="64,80,0,0"
                VerticalAlignment="Top"
                Click="Button_Click" />
    </Grid>
</Page>

And in code-behind:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        lineMilestoneHelperAzimuth.Rotation = 45;
    }
}

Thanks, I should have used hard coded XAML values for thickness and so on, but still the line doesn't rotate even the rotate value is changed and the code is executed (I have tested it and seen it on debug). Ok. I have done another test putting your line outside the Map Control instead of in it, and it works. Any idea why? — Imanol Zubiaurre, Mar 15 '18 at 17:38
Try doing the same, but putting the line control **inside** the map control. I think that will show the result. Thanks for your help. And I have to add new details to the main question. — Imanol Zubiaurre, Mar 15 '18 at 18:30
@ImanolZubiaurre - as I mentioned in my answer you cannot simply add a a line control inside of the MapControl. Look at the documentation in the link I added to my answer. — Emond, Mar 15 '18 at 18:38
I looked in the documentation, but it is related to Polyline control and not to normal lines. I have done other tests and if I change rotation in XAML it does rotate. — Imanol Zubiaurre, Mar 15 '18 at 20:54
Sorry, I cannot address "other tests" when I can't see them. I looks as if this question is lacking information. — Emond, Mar 16 '18 at 04:39
Thanks anyway @ErnodeWeerd. I have been doing other tests to get more information or to know when is not working exactly... Sorry I can't express more accurate what I want to explain. I have to figure another solution. — Imanol Zubiaurre, Mar 16 '18 at 08:00

score 0 · Answer 2 · answered Mar 16 '18 at 23:42

0

If you want to draw a line on the map in geographic coordinates that moves with the map, it's recommended to use a MapPolyine rather than XAML https://learn.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.Maps.MapPolyline

It will perform better and stick to the map beter (XAML tends to drift relative to the map).

answered Mar 16 '18 at 23:42

Duncan Lawler

1,772
8
13

But, if I understand correctly the behavior of MapPolyline is more related to a line that is anchored to two or more coordinates. If I want to rotate a MapPolyline I should have to change one of the anchors calculating everytime where is the new geoposition for each azimuth angle. And for the simple line control, on of the edges is anchored to a geoposition and rotates around. I know that drifts a little bit, but I don't know, it doesn't bother me a lot. Thanks anyway! – Imanol Zubiaurre Mar 17 '18 at 08:20
Not sure I follow your scenario here. If you need the line to rotate as the map rotates, then MapPolyline does everything for you. If you want the polyline to rotate independently of the map (and thus change orientation relative to the map), then a XAML line might be better as it's only pinned to the map at a single point. – Duncan Lawler Mar 19 '18 at 15:33
I haven't talked about rotating the map. This is another story, and yet it should affect the line of the example, but is not the case, because I'm trying to understand WHY doesn't rotate the line with the code above when it worked in WIndows Phone 8.1 project. – Imanol Zubiaurre Mar 19 '18 at 22:11

Line doesn't rotate on UWP

2 Answers2