Charles University in Prague Faculty of Mathematics and Physics BACHELOR THESIS Vítězslav Imrýšek WPF Style GUI Library for MonoGame Framework Department of Distributed and Dependable Systems Bachelor thesis supervisor: Mgr. Pavel Ježek, Ph.D. Study program: Computer Science Specialization: General Computer Science Prague 2015 Special thanks to Mgr. Pavel Ježek Ph.D. for supervising this thesis, and most of all for his patience and all his invaluable advices. I declare that I carried out this bachelor thesis independently, and only with the cited sources, literature and other professional sources. I understand that my work relates to the rights and obligations under the Act No. 121/2000 Coll., the Copyright Act, as amended, in particular the fact that the Charles University in Prague has the right to conclude a license agreement on the use of this work as a school work pursuant to Section 60 paragraph 1 of the Copyright Act. In Prague, date 3.12.2015 signature Název práce: MonoGame knihovna pro tvorbu GUI ve stylu WPF Autor: Vítězslav Imrýšek Katedra / Ústav: Katedra distribuovaných a spolehlivých systémů Vedoucí bakalářské práce: Mgr. Pavel Ježek, Ph.D., Katedra distribuovaných a spolehlivých systémů Abstrakt: MonoGame je populární multi-platformní open-source framework používaný pro vývoj her a dalších grafických aplikací. Nicméně tento framework samotný neposkytuje žádnou implicitní podporu pro vytváření uživatelských prostředí. A zatímco existuje řada knihoven třetích stran, které se tuto podporu snaží poskytnout, žádná z nich nemá za svůj cíl implementaci nějakého existujícího a hojně využívaného frameworku pro tvorbu uživatelských rozhraní. Tato práce se zaměřuje na tento nedostatek a poskytuje reimplementaci Windows Presentation Foundation (WPF) frameworku ve formě knihovny pro MonoGame. V rámci této práci jsme vybrali vhodnou podmnožinu vlastností, které budou implementovány a rovněž jsme vyřešili i řadu technických problémů, jako jakým způsobem renderovat naše geometrická primitiva, či jak implementovat podporu pro neobdélníkové ořezávání. V průběhu této práce byl kladen velký důraz na co nejpřesnější dodržování existujícího WPF API a jeho chování. Klíčová slova: MonoGame, WPF, Knihovna pro tvorbu uživatelských rozhraní Title: WPF Style GUI Library for MonoGame Framework Author: Vítězslav Imrýšek Department: Department of Distributed and Dependable Systems Supervisor of the bachelor thesis: Mgr. Pavel Ježek, Ph.D., Department of Distributed and Dependable Systems Abstract: MonoGame is a popular cross-platform open-source framework used for developing games and other graphical applications. However, this framework has no out-of-box support for user interface creation. And while there exist many third party UI libraries, none of them has the goal of implementing some existing, widely used user interface framework. For this thesis, we decided to target this shortcoming and reimplement the Windows Presentation Foundation framework, in form of a library, to MonoGame. As part of this work, we chosen a viable feature subset that is going to be implemented and solved many technical issues. Issues like how to render our graphical primitives or how to implement a non- rectangular clipping. The emphasis of the thesis was to follow the well-known WPF API and its behavior during the implementation process as closely as possible. Keywords: MonoGame, WPF, Library for creation of user interfaces Contents Graphical User Interface...................................................................... 4 GUIs in games ..................................................................................... 6 The API choice .................................................................................... 7 Windows Forms ............................................................................ 7 Windows Presentation Foundation ............................................... 8 Conclusion .................................................................................... 9 Thesis goals ......................................................................................... 9 Appearance and logic code ................................................................ 11 Controls ............................................................................................. 12 Input ................................................................................................... 13 Layout ................................................................................................ 14 UIElement ................................................................................... 14 FrameworkElement ..................................................................... 15 Containers ................................................................................... 16 Dependency properties ...................................................................... 17 Dependency objects .................................................................... 18 Data Binding ...................................................................................... 19 Graphics ............................................................................................. 20 2D geometrical shapes ................................................................ 20 3D geometrical shapes ................................................................ 22 Visual .......................................................................................... 22 Clipping ...................................................................................... 23 Text ............................................................................................. 24 Animations .................................................................................. 24 Custom controls ................................................................................. 24 UIElement and FrameworkElement model ................................ 24 User Control model ..................................................................... 25 Control model ............................................................................. 25 Existing projects ................................................................................ 27 Feature set .......................................................................................... 28 XAML markup code ................................................................... 29 Stock controls ............................................................................. 29 Stock controls customization ...................................................... 29 Custom controls .......................................................................... 30 Shapes and brushes ..................................................................... 31 Clipping ...................................................................................... 31 Data Bindings ............................................................................. 32 Handling user input ..................................................................... 32 Technical issues ................................................................................. 33 Drawing user interface ...................................................................... 33 Drawing geometrical shapes ....................................................... 33 Rendering the fill of graphical shapes ........................................ 34 Rendering the stroke of graphical shapes ................................... 39 Vertex buffer ............................................................................... 41 Text rendering ............................................................................. 41 Clipping ...................................................................................... 42 Optimizing the rendering ............................................................ 44 Processing user input ......................................................................... 45 Handling input ............................................................................ 45 Hit Testing .................................................................................. 46 Partial XAML markup support .......................................................... 47 Structure of the library....................................................................... 49 Overview of the rendering system ..................................................... 49 Class PresentationManager ......................................................... 52 Class Window ............................................................................. 53 Class Visual ................................................................................ 53 Class RenderDataDrawingContext ............................................. 54 Class RenderObject..................................................................... 55 Class RenderObjectLine ............................................................. 56 Class RenderObjectEllipse ......................................................... 57 Class RenderObjectRectangle..................................................... 58 Class RenderObjectRoundedRectangle ...................................... 59 Class RenderObjectText ........................................................... 59 Class Geometry ......................................................................... 60 Class RenderContext................................................................. 60 Class Brush ..............................................................................