While we are (all) waiting for Silverlight for Windows Mobile, the graphics CF developer's best friend is managed GDI+, and fellow MVP Alex Feinman reminded me with his recent article Using GDI+ on Windows Mobile. Surprisingly, these excellent namespaces (System.Drawing.*) are not widely used in business applications (I know, game developers are a completely different story), although they can often drastically enhance the UX (If you haven't already, I recommend a browse through the Vista UX Guide). To get all you enterprise developers (and others) started, I want to put your attention to an article of mine, Serial Communication with the .NET Compact Framework (where you find all the code mentioned in this blog post). Even if the main focus of the article was serial communications programming, it also included some reusable managed GDI+ code.
The first is a log chart that can be used to display running values. In the article it's used to show the depth (see screenshot on the right), speed, and temperature. To use it, the following code can be used...
// Create chart (width, height, yMin, yMax, yStep, xMax, xStep)
depthChart = new LogChart(pictureBox.Width, pictureBox.Height, -200, 0, 50, 180, 60);
// Add value (for reading)
depthChart.AddValue(-(int)depthFeet);
// Draw chart
pictureBox.Image = depthChart.Paint();
...with the result for Smartphone on the right. As shown in the article, this chart has many purposes, and there are quite a few business uses too. How about live data on inventory, stocks, profit, revenue, customer satisfaction, and other time critical KPIs?
The second is also a chart that may not have as many uses (but it's cooler
), and this chart is used to show direction. In the article it's used to show wind direction/speed (see screenshot on the left) and heading. The following code is an example of how to use it...
// Create chart (width, height)
windChart = new CompassChart(pictureBox.Width, pictureBox.Height)
// Draw chart (angle, topLabel, bottomLabel)
pictureBox.Image = windChart.Paint(windAngle, windSpeed, "True");
...and it couldn't be much simpler! Note that the chart has options to be shown without the boat outline and with 0-360 degrees.
A nice thing for a Windows Mobile developer about using vector graphics like this is that it adapts very well to all the different screen orientations and resolutions. As you can see in the article, the almost identical code looks very good on both Pocket PC and Smartphone.