Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

Advanced Graphics with .NET Compact Framework

Building managed applications for Windows Mobile devices that have a rich user interface is almost impossible if you restrict yourself to the primitive controls that ship with the .NET Compact Framework.  Luckily building your own custom controls isn't that difficult.  You typically have to override the painting of the control to render the content the way you want it.  Unfortunately if you want to do some more complex rendering you will still run into problems because the Graphics object that is exposed by the OnPaint event is a significantly reduced subset of the desktop Graphics object.  The main things it misses are the ability to transform (scale, rotate and translate) the graphics.

Lets take an example, say you have a method that draws a cross:

Private Sub DrawCross(ByVal g As Graphics, 
                               ByVal size As Integer)
    g.DrawLine(mForegroundPen, -size, -size, size, size)
    g.DrawLine(mForegroundPen, size, -size, -size, size)
End Sub

As you can see from this method it draws the cross based around the origin.  This is great but the likelihood of you wanting to draw a cross at the origin is virtually 0 since only a quarter of it would be visible.  There are a couple of options in terms of positioning the cross.  Firstly, you can modify the DrawCross method to accept a third parameter that identifies the centre of the cross:

Private Sub DrawCross(ByVal g As Graphics, _
                               ByVal centre As Point, _
                               ByVal size As Integer)
    g.DrawLine(mForegroundPen, centre.X - size, centre.Y - size, _
                                           
centre.X + size, centre.Y + size)
    g.DrawLine(mForegroundPen, centre.X + size, centre.Y - size, _
                                            centre.X - size, centre.Y + size)
End Sub

Now all of a sudden the method has become significantly less readable and you can imagine how it would get if the rendering was more complex than just a cross. The second way to do this, and my preference, is to translate the centre of the graphics canvas.  This way the DrawCross method doesn't change - it still things it's drawing at the origin - just the canvas that you are drawing on does.  A way to visualise this is to imagine a pen suspended in mid air ready to draw a cross on the canvas below it.  What we want to do is reposition the canvas underneath so that when the pen draws the cross, the cross is actually at the required position in the canvas.  When we are done, we have to remember to reset the canvas so that other drawing is done at the right place.  We can do this as follows:

Protected Overrides Sub OnPaint(ByVal pe As PaintEventArgs)
    MyBase.OnPaint(pe)

    Dim g As Graphics = pe.Graphics
   
g.Clear(Me.BackColor)
   
    g.TranslateTransform(Me.Width / 2, Me.Height / 2)
    DrawCross(g, 10)
    g.ResetTransform()
End Sub

As you can see it is clear from here what is going on - we are moving to the centre of the control, drawing the cross with size 10 and then resetting the canvas (just in case other methods are added).

Going back to the original discussion around the .NET Compact Framework you will notice that the TranslateTransform method doesn't exist on the Graphics object.  I'm guessing that part of the reason for this is the lack of support from the underlying rendering engine but here's quite a simple way to get around this issue (be warned though, calculations involved in doing these operations can quickly become CPU intensive which can make your application slow and consume battery power!).  You need to create a wrapper graphics class that is capable of doing the layout changes you want:

Public Class TranformGraphics
    Private mGraphics As Graphics
    Private mMatrix As TMatrix

    Public Sub New(ByVal g As Graphics)
        Me.mGraphics = g
    End Sub

    Public Sub DrawLine(ByVal pen As Pen, ByVal x1 As Integer, _
                                                        ByVal y1 As Integer, _
                                                        ByVal x2 As Integer, _
                                                        ByVal y2 As Integer) 
        Me.mGraphics.DrawLine(pen, ConvertedX(x1, y1), _
                                                ConvertedY(x1, y1), _
                                                ConvertedX(x2, y2), _
                                                ConvertedY(x2, y2))
    End Sub

    Private Function ConvertedX(ByVal x As Integer, _
                                           ByVal y As Integer) As Integer
        If Me.mMatrix Is Nothing Then Return x
        Return CInt(mMatrix.R1C1 * x + mMatrix.R1C2 * y + mMatrix.DX)
    End Function

    Private Function ConvertedY(ByVal x As Integer, _
                                           ByVal y As Integer) As Integer
        If Me.mMatrix Is Nothing Then Return y
        Return CInt(mMatrix.R2C1 * x + mMatrix.R2C2 * y + mMatrix.DY)
    End Function

    Public Sub ResetTransform()
        mMatrix = Nothing
    End Sub

    Public Sub TranslateTransform(ByVal dx As Single, ByVal dy As Single)
        Dim trans As New TMatrix(1, 0, 0, 1, dx, dy)
        If mMatrix Is Nothing Then
            mMatrix = trans
        Else
            mMatrix = mMatrix.Multiply(trans)
        End If
    End Sub
End Class

I've left the implementation of TMatrix to your imagination but the important method that you need to get right is the matrix multiplication:

Public Function Multiply(ByVal M1 As TMatrix) As TMatrix
    Dim M2 As TMatrix = Me

    Return New TMatrix(M2.R1C1 * M1.R1C1 + M2.R1C2 * M1.R2C1, _
                        M2.R1C1 * M1.R1C2 + M2.R1C2 * M1.R2C2, _
                        M2.R2C1 * M1.R1C1 + M2.R2C2 * M1.R2C1, _
                        M2.R2C1 * M1.R1C2 + M2.R2C2 * M1.R2C2, _
                        M2.R1C1 * M1.DX + M2.R1C2 * M1.DY + M2.DX, _
                        M2.R2C1 * M1.DX + M2.R2C2 * M1.DY + M2.DY)
End Function

There might be an easier way to do this with existing classes, so if you come across something please let me know.  Now back to our code - instead of using the Graphics.TranslateTransform (which doesn't exist for the .NET CF), we can now use our newly created TransformGraphics.TranslateTransform:

Protected Overrides Sub OnPaint(ByVal pe As PaintEventArgs)
    MyBase.OnPaint(pe)

    Dim g As new TransformGraphics(pe.Graphics)
   
g.Clear(Me.BackColor)
   
    g.TranslateTransform(Me.Width / 2, Me.Height / 2)
    DrawCross(g, 10)
    g.ResetTransform()
End Sub

Private Sub DrawCross(ByVal g As TransformGraphics, 
                               ByVal size As Integer)
    g.DrawLine(mForegroundPen, -size, -size, size, size)
    g.DrawLine(mForegroundPen, size, -size, -size, size)
End Sub

Note we have still had to modify the DrawCross method so that it accepts a TransformGraphics but overall we haven't really affected the readability of the code.  Please feel free to comment on how you get around the challenges of complex rendering using the .NET Compact Framework!

Comments (5) -

  • art courses

    27/07/2010 7:10:30 AM |

      You need to create a wrapper graphics class that is capable of doing the layout changes you want.

  • courses gold coast

    2/08/2010 12:56:38 AM |

    This is great but the likelihood of you wanting to draw a cross at the origin is virtually 0 since only a quarter of it would be visible.

  • auto glass repairs canoga park

    4/08/2010 10:28:58 PM |

    I havent any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us.

  • Yachtcharter Griechenland

    8/11/2010 9:44:20 PM |

    I really thankful to you for this great read!! You did a very great job, keep it up.

  • pak web hosting

    20/12/2010 3:48:04 AM |

    We are also very happy to now offer web hosting services, regardless of whether or not you want us to build you a website;
    There’s no need to go scouring the net for a great web hosting service to compliment your new site…
    GFsoul does web hosting and takes care of all the important details like domain name registration.
    Our design and hosting services perfectly compliment each other; we are offering customers true “one-stop shopping” experience, and at extremely affordable prices. You won’t find customized web design and hosting at these amazingly low prices anywhere buy here.
    Our web hosting services features all of the same appointments that other (better known) web hosting services can offer you, but with lots of great tech support, customization and a lower overall cost.

  • move4less

    4/02/2011 1:39:56 AM |

    This is a really good read for me, Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informative article.

  • cheap flyer printing

    14/02/2011 12:25:15 AM |

    Are  you conveying that this coding will enhance the graphics of computer memory.Is it?

  • pacquiao vs mosley live stream

    14/04/2011 3:00:28 AM |

    This blog is really Cool! You can visit my site for the upcoming fight of Pacquiao vs Mosley.  

    http://i2articledirectory.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity
    http://articoolz.com/2011/04/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.articledirectory.net.au/2011/04/12/pacquiao-mosley-fight-fight-challenge-humanity/
    http://www.newsreelnetwork.com/2011/04/12/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://articledirectory365.com/sports/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity-161116/
    http://www.articlebuster.com/2011/04/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://articlecity.in/sports/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://generatearticlelinks.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://monsterarticles.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.allexpertarticles.com/internet-business/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/140453
    http://www.popularticles.com/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://kloog.net/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity
    http://articleleader.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://articlicious.com/267757/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.articlefield.com/270312/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://businessnewsarticles.org/business-ethics-training/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://maxiarti.com/227579/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.hidenseek.me/2011/04/12/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.ideamarketers.com/?articleid=2169952&CFID=25774517&CFTOKEN=87484481
    http://articles.usewho.com/?articleid=176015
    http://www.articleblast.com/Arts_and_Entertainment/Entertainment/Pacquiao_vs_Mosley_fight_is_the_fight_that_will_challenge_the_humanity/
    http://www.pubarticles.com/article-pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity-1302631733.html
    http://www.articlecounty.com/index.php?page=article&article_id=1000001
    http://goarticles.com/article/Pacquiao-vs-Mosley-fight-is-the-fight-that-will-challenge-the-humanity/4482396/
    http://articlepaycheck.com/sports-and-recreation/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://www.qwesz.com/sports-and-fitness/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://www.pacificarticles.com/articles/43419/1/Pacquiao-vs-Mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://myarticlesworld.com/Art/77128/52/Pacquiao-vs-Mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://www.internetroutine.biz/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://newtownpublishing.net/internet/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.shinearticles.com/sport-recreation/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://articlemarketingonline.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://shared4all.org/recreation-and-sports/pacquiao-mosley-fight-fight-challenge/


  • pacquiao vs mosley live stream

    14/04/2011 10:25:03 PM |

    This blog is really Cool! You can visit my site for the upcoming fight of Pacquiao vs Mosley.  

    http://i2articledirectory.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity
    http://articoolz.com/2011/04/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.articledirectory.net.au/2011/04/12/pacquiao-mosley-fight-fight-challenge-humanity/
    http://www.newsreelnetwork.com/2011/04/12/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://articledirectory365.com/sports/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity-161116/
    http://www.articlebuster.com/2011/04/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://articlecity.in/sports/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://generatearticlelinks.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://monsterarticles.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.allexpertarticles.com/internet-business/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/140453
    http://www.popularticles.com/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://kloog.net/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity
    http://articleleader.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://articlicious.com/267757/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.articlefield.com/270312/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://businessnewsarticles.org/business-ethics-training/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://maxiarti.com/227579/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.hidenseek.me/2011/04/12/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.ideamarketers.com/?articleid=2169952&CFID=25774517&CFTOKEN=87484481
    http://articles.usewho.com/?articleid=176015
    http://www.articleblast.com/Arts_and_Entertainment/Entertainment/Pacquiao_vs_Mosley_fight_is_the_fight_that_will_challenge_the_humanity/
    http://www.pubarticles.com/article-pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity-1302631733.html
    http://www.articlecounty.com/index.php?page=article&article_id=1000001
    http://goarticles.com/article/Pacquiao-vs-Mosley-fight-is-the-fight-that-will-challenge-the-humanity/4482396/
    http://articlepaycheck.com/sports-and-recreation/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://www.qwesz.com/sports-and-fitness/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://www.pacificarticles.com/articles/43419/1/Pacquiao-vs-Mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://myarticlesworld.com/Art/77128/52/Pacquiao-vs-Mosley-fight-is-the-fight-that-will-challenge-the-humanity.html
    http://www.internetroutine.biz/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://newtownpublishing.net/internet/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://www.shinearticles.com/sport-recreation/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://articlemarketingonline.info/pacquiao-vs-mosley-fight-is-the-fight-that-will-challenge-the-humanity/
    http://shared4all.org/recreation-and-sports/pacquiao-mosley-fight-fight-challenge/


  • Flyer printing

    25/04/2011 3:30:23 AM |

    Many thanks for the marvelous blog posting! I found your post very interesting, I believe you are a excellent writer. I added your blog to my bookmarks and will return in the future to your blog. Keep up that exciting job, have a great daytime!

  • Sky Blue Credit

    21/05/2011 10:35:06 PM |

    It's good to find a writer that understands their niche so thoroughly.  I will be sure to check in again to find out about what is new.

Comments are closed