Home › Blogs › Paul's blog

Tesseract Translucency Test

Thu, 02/15/2007 - 22:02 — Paul

Moving on from the simple GUI example I used to demonstrate TIM, here is a screenshot (attached) of a slightly more complex GUI, showing some of todays enhancements in Tesseract, such as parent/child relationships between controls and translucency.

The large panel upon which the buttons is placed shows translucency well (its fill color is the default (translucent white)), as the blue color of the window can be seen through it, and the label in the top right is also visible. In the bottom right, 4 panels can be seen, with a button as the child of the innermost panel. The transparency is shown here too, with each successive panel showing less of the forms blue color as its own white fill mixes with the fill of the panel behind it.

The label in the top right ("Test Translucency") has its AutoSize property set to true and has grown beyond its initial size in order to accomadate the text, however there are still a few problems with this functionality (notice the bottom of the Y is cut off).

Below is the GUI.xml used to create this GUI (the C# code is unchanged from the TIM example):


<?xml version="1.0" encoding="utf-8"?>
<TIM xmlns:controls="Tesseract.Controls, Tesseract"
xmlns:shapes="Tesseract.Geometry.Shapes, Tesseract">

Tesseract Test Application
<Path><shapes:Rectangle W="300" H="300"/></Path>
<FillColor>255128192255</FillColor>

<controls:Label>Test Translucency
<Path><shapes:Rectangle X="170" Y="40" W="100" H="10"/></Path>
<AutoSize>true</AutoSize>
<FontSize>14</FontSize>
</controls:Label>

<controls:Panel>
<Path><shapes:Rectangle X="20" Y="20" W="200" H="200"/></Path>

<controls:Button>Btn 1
<MouseClicked>btn1Clicked</MouseClicked>
</controls:Button>

<controls:Button>Btn 2
<Path><shapes:Rectangle X="10" Y="45" W="150" H="50"/></Path>
<FontSize>18</FontSize>
<FontWeight>Bold</FontWeight>
<TextColor>255000000255</TextColor>
</controls:Button>
</controls:Panel>

<controls:Panel>
<Path><shapes:Rectangle X="150" Y="150" W="120" H="100"/></Path>

<controls:Panel>
<Path><shapes:Rectangle X="10" Y="10" W="100" H="80"/></Path>

<controls:Panel>
<Path><shapes:Rectangle X="10" Y="10" W="80" H="60"/></Path>

<controls:Panel>
<Path><shapes:Rectangle X="10" Y="10" W="60" H="40"/></Path>

<controls:Button>Test
<Path><shapes:Rectangle X="10" Y="10" W="40" H="20"/></Path>
</controls:Button>
</controls:Panel>
</controls:Panel>
</controls:Panel>
</controls:Panel>
</TIM>