Marketplace Extensions Vetting Process and Security Model

We get a lot of queries about the extension vetting process we have in Marketplace, as well as the security model for Azure DevOps extensions. Marketplace serves the extension ecosystem for Visual Studio Code, Visual Studio IDE and Azure DevOps; and we strive to make sure that the extensions available in the marketplace are of high quality and are secure. Here are some of the things we do in our pipeline to ensure safety:

  • We perform virus scan on both initial publish and subsequent update of an extension so that you aren’t getting malware from Marketplace. This also includes checking for npm and other dependent packages for known vulnerabilities like this.
  • We perform content scan on both initial publish and subsequent update of an extension so that you aren’t getting adult, offensive, CSAM (child sexual abuse material) and terrorist content from Marketplace.

Also, extensions can only operate within the scope and permissions it has been granted. For example: an extension which has only read permissions on work items cannot modify your features, bugs or any other type of work item. For Azure DevOps extensions, you can review the permissions that an extension requires in the Select Organization step as shown below,

extension permissions

For publishers:

  • Before a publisher can publicly list an Azure DevOps extension in Marketplace, we need to verify them. This requires that they send an email to us from their account and state their social presence (linkedin, twitter, github, organization etc.). This way we know them a little better and also get to understand that it is not a bot publishing an extension.

Apart from the above, we also rely on the community to bubble up quality extensions and report the ones that seem suspicious. We have Q&A and Ratings on each extension so that you can engage with an extension’s publisher(s) and have a meaningful dialogue. You can also use this Q&A capability to understand the software development life cycle practices the publisher follows, their test matrix and exit criteria. Do see what others are asking and if the publisher responds to them soon and in a meaningful way.

I also want to call out a few other important points,

  • There is no formal code review or evaluation process for extensions published to the Marketplace
  • Azure DevOps web extensions execute in the browser (iFrame) and can pull in scripts from other services (i.e. the extension is not limited to only the scripts it included within its package)
  • Azure DevOps web extensions run in isolation in the browser (a sandboxed iFrame) which prevents them from accessing Azure DevOps/TFS data or APIs they are not approved to access. You may have noticed that the admin is prompted to approve permissions when installing an extension that requires new permissions (e.g. “read only access to work items”). The extension is unable to do more than what it is authorized for at install time (and beyond what the current user of the extension is able to do). One way to protect yourself here is to carefully analyze the scopes being requested by the extension. If something doesn’t seem right, don’t install and contact vsmarketplace at microsoft dot com
  • There is no way for a web extension to install or run any code directly on the Azure DevOps or TFS servers. Build and Release tasks though, are a little different. These tasks get downloaded on the agent machine (which can be hosted or on-premise) and get executed. These tasks can download and invoke other code. To know more about the agent security model see this https://docs.microsoft.com/en-us/azure/devops/pipelines/agents/pools-queues?view=azure-devops#security
  • Extensions should continue working after the sprintly Azure DevOps deployments and TFS upgrade since we maintain backward compatibility for all APIs that an extension can call. Any data stored by the extension (in a service provided by Azure DevOps and TFS) is not touched during these deployments/upgraded.

If you still have concerns with security, we recommend you install the extension on an isolated organization first to rest your concerns. This can be an internal test organization. After you’re satisfied with your testing, you can proceed to install the extension on your production organization. If you see compatibility issues after an update of the extension, please reach out to the publisher and report the same.

Hope all this information was helpful. Please reach out to vsmarketplace at microsoft dot com in case you have any more questions!

If you see a suspicious extension on Marketplace, do report it to us at vsmarketplace at microsoft dot com. You can also use the ‘Report Abuse’ link on the extensions details page to email us.

 

 

 

 

 

 

 

Ciao.

Visual Studio 2015 and .NET 4.6 Released (and more!)

VS2015

Big release day today! Microsoft today announced the release of Visual Studio 2015, Visual Studio 2013 Update 5, TFS 2013 Update 5, .NET 4.6

Check out the blog posts below for more details on what’s new in the release.

The Visual Studio Bloghttp://blogs.msdn.com/b/visualstudio/archive/2015/07/20/visual-studio-2015-and-visual-studio-2013-update-5-released.aspx

Soma’s blog posthttp://blogs.msdn.com/b/somasegar/archive/2015/07/20/visual-studio-2015-and-net-4-6-available-for-download.aspx

ScottGu’s Bloghttp://weblogs.asp.net/scottgu/released-today-visual-studio-2015-asp-net-4-6-asp-net-5-ef-7-previews

.NET Blog – Announcing .NET 4.6http://blogs.msdn.com/b/dotnet/archive/2015/07/20/announcing-net-framework-4-6.aspx

Note that one big guy missing from the list is TFS 2015, it’s still in RC2 and will be RTM’ed very soon.

Take the tools out for a spin and if you have any feedbacks or suggestions send them across using Send-a-Smile, User Voice or the Visual Studio Connect Site

Using SonarQube IntelliJ plugin for Code Analysis

SonarQube provides a plugin for IntelliJ (and Eclipse as well) which is a great tool to perform dev-box code analysis before committing or checking-in your changes. It gives the developers a chance to check and make sure they aren’t introducing any new defects or technical debt in the code they have added or modified. Here’s how to set up the plugin and get going.

Install SonarQube IntelliJ Plugin

  • Launch IntelliJ and go to File -> Settings -> Plugins
  • Search for ‘sonarqube’ and install the plugin

clip_image001

Setting up SonarQube plugin

  • In IntelliJ go to File -> Settings -> Other Settings -> SonarQube
  • Add details about the sonar server here. The plugin will use this to download the quality profile/analyzers etc.
  • This plugin executes the analysis in preview mode where no data is pushed to the server.

image

Associate your IntelliJ project with Sonar project

  • Right click on the project in IntelliJ and select "Associate with SonarQube…"
  • Search for the sonar project and select it

image

Running the analysis

  • Make your code changes
  • Right click on the project and select Analyze -> Run Inspection by Name…

clip_image001[8]

  • In the search box type "Sonarqube" and select "SonarQube Issue" from the result list
  • In the "Inspection Scope" dialog, select Custom Scope and set its value to Changed Files. This will ensure that the analysis is run on the files modified by you.

clip_image002

clip_image003

  • The plugin will run the preview analysis and display the results in the inspection tab. The inspection shows issues in two files which were modified before the analysis.

clip_image004

Branch Policies in Visual Studio Online

Branch policies in VSO allow you to set certain rules against branches in your Visual Studio Online git repos. They are more or less like gated check-ins which TFS has had since forever. Visual Studio Online supports the below policies by default:

  • Changes must be submitted to a branch only via Pull Requests
  • A build must complete successfully before changes can be merged to the destination branch
  • Add certain reviewers if the pull request modifies files in certain paths in the repo

To know more details on the complete workflow involving pull requests on visual studio online, check this excellent post http://blogs.msdn.com/b/visualstudioalm/archive/2014/06/10/git-pull-request-visual-studio-online.aspx

Setting up branch policies

To setup branch policies login to your visual studio online account and navigate to the team project, which has the git repo you want to set the policy on. You will need to have administrator privileges on the team project to setup the policy. After you’ve navigated to your team project, click on the settings wheel icon on the top right corner, this will take you to the admin panel of your team project. Select the ‘version control’ tab, and on the left rail select the branch you want to set the policy on (master branch in my case), and click on ‘branch policies’ tab. Refer the figure below, the click points are highlighted in yellow.

image 
 

Under ‘Automatically build pull requests’, select both check boxes. You will need to provide a build definition here which VSO will queue every time a pull request is submitted or updated with a new commit. The second check box, ‘Block the merge’, is actually optional, if you want to allow the merge even on build break, you can uncheck this. Though I’m not sure why you’d want to do that.

The next section, ‘Code review requirements’, allows you to control how changes can be submitted to master branch. The first check box, ‘Require code reviews using pull request’, ensures that any changes to master happen only via pull requests and no one is able to push their changes directly to master. ‘Allow users to approve their own changes’, allows to you add yourself as one of the reviewers and approve the changes, which is nuts really :-)

The last option, ‘Add a new path’, enables you to add reviewers optionally depending on the files involved in the commits. For scenarios where you really want Dave C to look at the changes if anyone modifies files under \kernel\base. It has support for wild chars as well.

After the policies are set, when someone tries to push their changes directly to master, they see this:

image

image

So what you need to do now, is move your changes to a feature branch, push that branch to server and create a pull request to merge the changes to master. This workflow is explained in the link shared above.

Now let’s say, the feature branch was pushed and a pull request was created, but the change list has a silly syntax error. You will see the branch policies show up in the right rail and a build will be queued for verification.

image

image

Since the pull request had a syntax error, the build will fail and attempting to merge the changes to master will be blocked.

image

image

The next step is to fix the build failure, add a commit to the pull request and make sure you have at least one approval from reviewers. As soon as you push your local branch to server, a new build will be queued automatically and the status updated.

image

To enhance this even further, you can improve your build definition by, let’s say, adding a unit test build step and a code analysis build step, to ensure that all unit tests pass, before the pull request can be accepted and merged into master.

Creating a simple java web app using IntelliJ IDEA and setting up remote debugging

I had to get this setup up and running at work, thought it’ll be a good idea to jot it down here. The first step is to install IntelliJ IDE from here. I installed the ultimate edition which has a free 30-day trial, but the steps below should work well with the free community edition as well (looks like this does not work on community edition). We’ll be hosting the app on Tomcat server (running on a remote machine) so go ahead and install it from here. I installed version 8 using the windows service installer. And of course, since you’re developing a java app make sure you have the jdk installed.

Launch IDEA and create a new project, we’ll call it SimpleJavaWebApp. Select Java Enterprise and Web Application. Make sure the project SDK is set correctly and application server is set to the version of Tomcat you installed.

image

Let’s add a Java servlet to the project. Right click on the src folder in project explorer and select New –> Servlet, give the servlet a name and add it to the project.

image

Open MyServlet.java and copy paste the below code in the doGet() function,

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");

        try (PrintWriter writer = response.getWriter()) {

            writer.println("<!DOCTYPE html><html>");
            writer.println("<head>");
            writer.println("<meta charset=\"UTF-8\" />");
            writer.println("<title>MyServlet.java:doGet(): Servlet code!</title>");
            writer.println("</head>");
            writer.println("<body>");

            writer.println("<h1>This is a simple java servlet.</h1>");

            writer.println("</body>");
            writer.println("</html>");
        }
    }
}

If you are seeing an error which says “java: try with resources is not supported in –source 1.6”, go to project properties by right clicking on the project and selecting Open Module Settings, select Project on the left rail and change the Project Language Level to 8.

Let’s modify index.jsp to put an entry point to our servlet,

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1>Simple Java Web App Demo</h1>
    <p>To invoke the java servlet click <a href="MyServlet">here</a></p>
  </body>
</html>

Modify web.xml file and put the below servlet configuration in it, the url pattern is case sensitive so make sure it matches your servlet name exactly,

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1">

  <servlet>
    <servlet-name>MyServlet</servlet-name>
    <servlet-class>MyServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>MyServlet</servlet-name>
    <url-pattern>/MyServlet</url-pattern>
  </servlet-mapping>

</web-app>

Go to Build –> Rebuild Project, and make sure the project is building fine. Let’s now package our application in WAR format (Web application ARchive) and deploy it on a machine running Tomcat.

Right click on the project and select Open Module Settings, click on Artifacts on the left rail and select + to add a new artifact type. Click on Web Application : Archive and select the project name.

image

Now when you build the project you will find file SimpleJavaWebApp_war.war generated under \SimpleJavaWebApp\out\artifacts\SimpleJavaWebApp_war folder.

Let’s deploy our app now, go to the machine where you installed Tomcat (it could be the same machine too), and under the Tomcat installation directory, copy the above WAR file under the webapps folder. For me the path is “C:\Program Files (x86)\Apache Software Foundation\Tomcat 8.0\webapps”. To make sure your app is working as expected, navigate to http://localhost:8080/SimpleJavaWebApp_war/ and check if the web page loads up correctly.

image

So the bulk of the work is done. We’ve created a simple Java web app, added a java servlet to it, deployed the application on Tomcat and made sure that the servlet code is invoked correctly. We’ll now look at how to remotely debug this app. This is useful is cases where you have the application running on a server, and your code and source enlistment are on a different machine.

To get remote debugging working, we need to instruct Tomcat to start the JVM in a “debug” mode and then attach to the JVM from IDEA.

Open Tomcat server properties, go to the Java tab and add the below entry under Java Options (make sure you add this in a new line),

-agentlib:jdwp=transport=dt_socket,address=1043,server=y,suspend=n

image

Restart the server and check if you can access SimpleJavaWebApp from a remote machine. I setup the server and deployed the war file on a different machine and navigated to below URL to check,

image

We now need to create a debug configuration in IDEA to connect to this machine. Go to Run –> Edit Configurations… Click on the + icon and add Tomat Server –> Remote configuration. Make sure you specify the host IP address correctly. You can also modify the ‘Open Browser’ option so that the java app launches when you start debugging.

image

Switch to ‘Startup/Connection’ tab and set the TCP port to the one you used while setting up Tomcat, 1043 in this case,

image

Save the debug configuration and set a breakpoint in the doGet() function in MyServlet.java file. Now start debugging. You should see the web browser launch and when you click on the link to invoke the servlet, your breakpoint should be hit.

image

In case you see an error in IDEA which says ‘unable to connect : connection refused’, you might need a firewall exception for incoming connections on port 1043 (and 8080 too). So go to Windows Firewall settings and create an inbound rule on TCP port 1043 to allow incoming connections, and that should fix the problem.

Hey ma look what I got, gingerbread on my HD2!

Yep, that video above shows my HTC HD2 running Android Gingerbread (v2.3.4)! I came back home, and not having much to do thought I’ll give android another try. Sometime back I had tried running android from SD card but it didn’t work, later I found out that it was because of an older radio version on my device, so I had to update the radio version to fix it but it all looked like too much trouble and I put the HD2 back in its box. This was 6 months ago.

Today I thought I should take it for another spin. But this time we go all in, erase Windows Mobile 6 and flash the ROM with all the android goodness! It is pretty simple really, all you need is some patience to read all those articles on XDA a little carefully :)

The basic steps I followed are,

  • Check your radio version and update to 2.08.50 (if you’re running an older version)
  • Install MAGLDR 1.13 on your phone
  • Install Clockwork Mod on your device
  • Select an android ROM of your choice and flash. I chose the stock android gingerbread ROM version 2.3.4.

Here are the posts on XDA I referred to androidify my hd2,

http://forum.xda-developers.com/showthread.php?t=893948 (read this fully first, very important!)

http://forum.xda-developers.com/showthread.php?t=1044830

http://forum.xda-developers.com/showthread.php?t=609477

http://forum.xda-developers.com/showthread.php?t=905060 (this is the android rom I installed)

http://forum.xda-developers.com/showpost.php?p=10206031&postcount=2 (faq)

http://forum.xda-developers.com/showthread.php?t=929324 (a list of all the rom’s you can choose from)

To all the guys at XDA, thanks for all the posts and how-to’s for noobs. You rock!

Windows Phone Mango 7.1 SDK Beta 2

The developer tools for Windows Phone Mango were updated to Beta 2 a few days ago. You can find the bits here,

Web Installer – http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=26648

ISO file – http://go.microsoft.com/fwlink/?LinkID=220415

You can read this WindowsPhoneGeek article on installation instructions.

On June 29th, Microsoft also released Mango for developers,

http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/06/29/developers-get-goody-basket-full-of-mangos.aspx

I am still waiting for my invite. Looks like they are sending out invites starting from the list of supported countries, which unfortunately, India is not a part of. I’ll write when I get the invite and let you know how the installation goes on my HD7.

Windows Phone Mango Developer Tools

The consumer side of Windows Phone Mango was unveiled yesterday by Microsoft. It brings in some great new features like multitasking, IE9, fast application switching, maps, web marketplace etc to name a few. I was also impressed with enhancements to bing like local scout, bing vision and bing voice. With the NoDo update fiasco now behind us, I think the expectations are set just right for the ‘mango’ update which will be coming this fall ;) One thing that annoys me is the feature-market fragmentation that’s happening with Windows Phone. What’s the deal with making some features available only to a few markets! Just look at the way zune services and their features are split region-wise. It’s horrible and needs fixing.

Nothing was mentioned about Microsoft’s ad framework, PubCenter, and its expansion plans. It’s been close to 8 months since windows phone came out and PubCenter has expanded its market by zero, zilch, nada! There were talks a while back that it will be made available in europe, I don’t know how that’s working out. Hey you, make it global already! And show us some pay-per-impression love.

Tools

You can download the Windows Phone Developer Tools 7.1 Beta from here, (web installer) http://www.microsoft.com/downloads/en/details.aspx?FamilyID=77586864-ab15-40e1-bc38-713a95a56a05&displaylang=en

And if you don’t believe in web installers, here’s the link for downloading the ISO file, http://download.microsoft.com/download/0/0/D/00D22BA8-E716-4272-93D8-C4D98F0567AE/WPDT_v2_Beta_en1.iso

Aaron Stebner’s post contains some more links and other useful information, do take a look, http://blogs.msdn.com/b/astebner/archive/2011/05/24/10168008.aspx

And remember to install Visual Studio 2010 SP1 first.

You have a good day while I watch the ISO getting sucked from the interwebs at mind-numbing speeds.  /s

Until next time…

Windows Mobile 6.x Application Submissions to Stop on July 15, 2011

Got a mail today from the Windows Phone Marketplace team that application submission to Windows Mobile 6.x marketplace will be stopped effective July 15, 2011. Existing apps will stay on the marketplace, users (whatever remains) will be able to download your apps and more importantly developer payouts will continue to happen as usual.

Here is the complete text of the mail,

——————–

May 16, 2011
Dear Windows Marketplace for Mobile Developer,

We are excited about the momentum we have with Windows Phone. Since we launched Windows Phone last fall, technical reviews have been very positive and, most importantly, customer satisfaction has been extremely high. Moreover, our Windows Phone Marketplace continues to grow at a fast pace. It now features more than 15,000 apps and games and there are over 40,000 registered developers.

At MIX we announced that in May we will release the beta version of the Windows Phone Developer Tools for the next version of Windows Phone, code-named “Mango,” which we are still on track to do. The Mango release will be made available to users later this year, and it represents the next step in our continued focus on advancing the Windows Phone platform and expanding the opportunity for developers.

To innovate faster on the Windows Phone Marketplace, we are scaling back our investments in the Windows Marketplace for Mobile service. We are sharing this plan with you, in advance, so that you can make thoughtful plans and preparations.

  • App Submission and Management. On July 15, 2011, we will no longer be accepting new Windows Mobile 6.x applications or application updates. In addition, it will no longer be possible to modify prices, metadata, or other information. However, you will still be able to remove your apps by contacting support.
  • App Distribution. Even though app submission will stop on July 15, users will still be able to purchase and download your Windows Mobile 6.x applications through the Windows Marketplace for Mobile.
  • App Reporting. Sales and download reports will continue to be available for your Windows Mobile 6.x applications through the App Hub after July 15.
  • Developer Payouts. Developer payouts will continue to be processed in accordance with the provisions of the Windows Phone Marketplace Application Provider Agreement.

Additional information regarding the scaling back of our investment in the Windows Marketplace for Mobile will be shared over the coming months as plans become finalized.

We would like to thank you for being part of our Windows Marketplace for Mobile developer community, and we look forward to helping you build more Windows Phone applications.

For more information, please visit the App Hub Forum. For further assistance, please contact support directly.

Thank you for your support,

The Windows Phone Marketplace Team

——————–

Rest in peace, windows mobile.

Windows Phone 7: Translation, rotation, scaling and the effect of ‘BitmapCache’ on performance

One thing that was pending on my “todo” list from a long time was implementing the ‘Game Of Life’ on Windows Phone 7. I got the basic version running in a couple of hours and I’ve been thinking about improving it since and adding new features to it. Maybe I’ll submit it to the marketplace someday, who knows. I have also been reading about gestures, multi-touch, pinch-to-zoom and related topics and most importantly trying to understand the math behind each of those gestures, and the math is so elegant that it fascinates me!

Game Of Life
Game Of Life is a simple cellular automaton in which you create a pattern in a world made of rectangular grids, start the evolution process and then watch the pattern change as the world evolves. The world is made up of dead cells initially, you create a pattern by selecting a few cells and giving them “life”. The world then evolves according to a set of rules (source: Wikipedia):

  1. Any live cell with fewer than two live neighbours dies, as if caused by under-population.
  2. Any live cell with two or three live neighbours lives on to the next generation.
  3. Any live cell with more than three live neighbours dies, as if by overcrowding.
  4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

It’s a fascinating concept and some very interesting patterns emerge out of it, read more about Game Of Life on Wikipedia here.

Gestures
Gestures like translation, scaling and rotation seemed complex to me at first, but they’re pretty simple once you understand the math that makes the magic happen. I came across two great articles that really dig deep into these concepts. Both articles use the Silverlight Toolkit for Windows Phone 7 and the gesture support that it provides. I was a little surprised to know that the silverlight toolkit actually uses XNA’s touch api’s to detect gestures. These are the articles that you must read:

MSDN Magazine : Touch Gestures on Windows Phone by Charles Petzold. This is the implementation I chose to use in my app Game Of Life. The code is available for download in the article.

Windows Phone 7: Correct pinch zoom in silverlight by Francesco De Vittori. I was using this before I stumbled on Charles’ article :) Also, Charles’ implementation seemed more intuitive to me.

Charles Petzolds’ implementation makes use of Matrix transforms. It took me some time to understand matrix transforms and realize their importance in 2D/3D graphics. The only time I used matrix multiplication was to solve silly linear equations in college. You’ll find many a articles on the internet about matrix transforms but the best resource I found again comes from Charles Petzold. Chapter 22 – From Gestures to Transforms in his free book Programming Windows Phone 7. Download it now if you haven’t already, it’s a great resource.

The two paths had to meet. Using gestures in Game Of Life was the best way to learn them.

In my first implementation of Game Of Life, I used the Manipulation Delta events to support pinch-to-zoom. In this I used the DeltaManipulation.Scale.X and DeltaManipulation.Scale.Y values in the ManipulationDeltaEventArgs class (passed to the ManipulationDelta event handler) to modify the ScaleX and ScaleY values of a Scale transform on the object to be scaled. If that sentence didn’t make sense, don’t worry, this is the easiest and the worst implementation of pinch-to-zoom. The scaling was not smooth or accurate. To understand what a perfect pinch-to-zoom should be read this – Pinch Zooming using XNA on WP7: Getting it right. The article explains this with reference to XNA but the concept remains the same everywhere.

In my second attempt I used the Silverlight Toolkit for Windows Phone and Francesco’s implementation of pinch-to-zoom. It was working pretty nicely with a few quirks here and there. Though the implementation is easy to understand, I felt there were too many variables used for storing state information and the code looked a bit messy, but it worked.

It is while tuning this implementation that the MSDN Magazine article was published. Charles Petzold’s implementation felt intuitive and was much cleaner. The only part I had to figure out was the matrix transforms he used. And that I’ll explain a bit here.

This is what the app looks like,

game-of-life

The rectangular grids are added programmatically to a canvas. Here is the XAML for the canvas,



    
        
            

            
                
                
                
            

        
    


So during the Drag Delta and Pinch Delta events the transforms under currentTransform are manipulated to achieve the desired effect and once the drag or pinch gestures are completed a function, TransferTransforms(), is called:

void TransferTransforms()
{
    previousTransform.Matrix = Multiply(previousTransform.Matrix, currentTransform.Value);

    //Set current transforms to default values
    scaleTransform.ScaleX = scaleTransform.ScaleY = 1;
    scaleTransform.CenterX = scaleTransform.CenterY = 0;

    rotateTransform.Angle = 0;
    rotateTransform.CenterX = rotateTransform.CenterY = 0;

    translateTransform.X = translateTransform.Y = 0;
}

Matrix Multiply(Matrix A, Matrix B)
{
    return new Matrix(A.M11 * B.M11 + A.M12 * B.M21,
            A.M11 * B.M12 + A.M12 * B.M22,
            A.M21 * B.M11 + A.M22 * B.M21,
            A.M21 * B.M12 + A.M22 * B.M22,
            A.OffsetX * B.M11 + A.OffsetY * B.M21 + B.OffsetX,
            A.OffsetX * B.M12 + A.OffsetY * B.M22 + B.OffsetY);
}

To understand what is happening here we need to look at the XAML first. The RenderTransform on the MainCanvas is a double-barrelled (term used by Charles in his article) transform. Basically, a transform group within a transform group. So the effective transform on MainCanvas is equal to the effect of previousTransform plus the effect of currentTransform. Well, it’s not exactly “plus”. First, previousTransform is applied on MainCanvas to change its state, and then currentTransform is applied on that state to change it further. If you download and look into Charles’ code, you’ll see that during drag delta and pinch delta events, only currentTransform values are modified. Once the drag or pinch gesture is complete, TransferTransform() is called to “transfer” the values of currentTransform to previousTransform. And this transfer happens by the way of matrix multiplication, which is what the function Mulitply() does. It’s not over yet. After the multiplication the values of currentTransform (i.e scaleTransform, rotateTransform and translateTransform) are reset. This is important because, as we discussed before, the effective transform on MainCanvas is effect of previousTransform “plus” the effect of currentTransform. Transferring the values of currentTransform to previousTransform and then resetting currentTransform keeps the effect same.

CacheMode and BitmapCache
Now I got the translation, scaling and rotation to work correctly, but the performance was not very great. There was a huge lag in pinching and dragging, and this is where BitmapCache comes in. Every UIElement has a property called CacheMode, which can be set to BitmapCache.

In XAML, CacheMode=”BitmapCache”

In code, uiElem.CacheMode = new BitmapCache();

When the CacheMode of a UIElement is set to BitmapCache, a snapshot of the UIElement is taken and is stored in the video memory. So the element is not redrawn every time, instead all the operations are performed on the cached bitmap. This is super fast and is particularly useful when working with transforms on controls. Change the MainCanvas element in the XAML to include CacheMode,

 

and this will have a dramatic effect on the performance as you will see in the video below.

Please leave a comment if you have anything else to add.

Until next time..