Skip to content

Latest commit

 

History

History
41 lines (32 loc) · 1.5 KB

README.md

File metadata and controls

41 lines (32 loc) · 1.5 KB
Raw

UIRenderExample

This is a small C# project demonstrating how one would parse and organize a GUI from an XML file. It is meant to be used together with the corresponding Gamasutra article (soon).

What it does

  • Parse an XML file
  • Create all UI Elements according to their definition
  • Organize all UI Elements in a visual tree
  • Display the UI

The following UI Elements are included:

  • Div / Stackpanel - for organizing your UI Elements horizontally or vertically
  • Button - with click events and effects
  • Label - for displaying text
  • Image - for displaying Images

Each Element is able to be styled to some basic extent (background color, border color, margins, alignments).

What it doesn't

Rendering is done via C# WPF... Cheating so to speak. But the rendering aspect is not the focus here and we only require basic capabilities like drawing boxes and text.

Example XML

The following example XML is included in the project and should give a rough overview of what is possible with this small project

<?xml version="1.0" encoding="UTF-8"?>
<body margin="20">
	<div style="orientation: horizontal;">
		<div style="orientation: vertical; background: #AA8888;">
			<label name="lbl_title" style="background: #FFFFFF; align: center;" margin="10">Test</label>
			<image margin="10">kermit.png</image>
		</div>
		<div style="orientation: vertical; border: #000000" margin="5">
			<button click="btn1_click">Test 1</button>
			<button click="btn2_click">Test 2</button>
		</div>
	</div>
</body>