Improve the universal windows phone performance?

Question

I have 10 rectangles inside the canvas, in the ManipulationDelta event, I have to change the height and width. It is working properly in the windows desktop but it takes some time in universal Windows device(phone) when manipulating the rectangle.How to smoothly manipulating the UI element in the windows device. Please suggest me, is any other way to solve this problem?

Here is my code:

<Canvas Name="LayoutRoot"  Width="300" Height="500">
    <Rectangle Fill="Red" Height="100" Width="100"/>
    <Rectangle Fill="Red" Height="100" Width="100"/>
    <Rectangle Fill="Red" Height="100" Width="100"/>
    <Rectangle Fill="Red" Height="100" Width="100"/>
    <Rectangle Fill="Red" Height="100" Width="100"/>
    <Rectangle Fill="Red" Height="100" Width="100"/>
    <Rectangle Fill="Red" Height="100" Width="100"/>
    <Rectangle Fill="Red" Height="100" Width="100"/>
    <Rectangle Fill="Red" Height="100" Width="100"/>
    <Rectangle Fill="Green" Height="100" Width="100"/>
</Canvas>


private void MainPage_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{      
    foreach (Rectangle rectAngle in LayoutRoot.Children)
    {
        rectAngle.Width += e.Cumulative.Scale;
        rectAngle.Height += e.Cumulative.Scale;
        Canvas.SetLeft(rectAngle, LayoutRoot.Width / 2 - rectAngle.ActualWidth / 2);
        Canvas.SetTop(rectAngle, LayoutRoot.Height / 2 - rectAngle.ActualHeight / 2);
     }
}

Answer 1

You have to use RenderTransform like a TranslateTransform to move your elements, because they are not dependant properties and are performance oriented. So instead using the Canvas Top and Left properties set RenderTransformOrigin and a TranslateTransform.

You will notice a really increased performance.

 private void MainPage_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        foreach (Rectangle child in LayoutRoot.Children)
        {
            child.Width += e.Cumulative.Scale;
            child.Height += e.Cumulative.Scale;

            //This is C#7 in case C#6 adapt
            if(child.RenderTransform is TranslateTransform tf)
            {
                tf.X = LayoutRoot.Width / 2 - child.ActualWidth / 2;
                tf.Y = LayoutRoot.Height / 2 - child.ActualHeight / 2;
            }
        }

    }

    private void Initialize()
    {
        var redbrush = new SolidColorBrush(Colors.Red);

        foreach (Rectangle child in LayoutRoot.Children)
        {
            child.Fill = redbrush;
            child.Height = 100;
            child.Width = 100;
            child.RenderTransformOrigin = new Point(0.5, 0.5);
            child.RenderTransform = new TranslateTransform();
        }
    }