NoesisGUI

First steps with NoesisGUI

github Tutorial Data

If you are reading this you are probably getting the first contact with this brief tutorial where you will quickly learn how to visualize .xaml files. Having learned that we will create a very simple user interface.

The first step is launching XamlPlayer, whose executable is located inside the /Bin folder of the SDK.

FirstStepsTutorialImg1.jpg

To visualize a XAML file just simply drag and drop it to the window. We have included several samples inside the Data folder of the SDK. For example, if you open drag the file Tux.xaml and drop it to the XamlPlayer window you should get the following:

FirstStepsTutorialImg2.jpg

It is recommended that you test all of the provided samples to get an overview of the different features offered by noesisGUI.

Next step is creating our first user interface. NoesisGUI interfaces are written in XAML, a declarative markup language. For example:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Button Content="Click Me!" Width="120" Height="40"/>
</Grid>

TIP

You don't need to reopen the player each time you make changes to your file. Simply hit F5 and the content will reload.

FirstStepsTutorialImg3.jpg

By default all content visualized by XamlPlayer uses the NoesisStyle theme. This default theme can be changed by using a resource dictionary. More examples of themes can be found inside the Data/Themes folder within the SDK.

 <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
     <Grid.Resources>
         <ResourceDictionary Source="Themes/SimpleStyle.xaml"/>
     </Grid.Resources>
     <Button Content="Click Me!" Width="120" Height="40"/>
 </Grid>

Apart from xaml resources you can use fonts to change the aspect of texts. Several sample fonts are included inside the the Samples/Fonts folder. Changing the font of any element is very easy. For example, let's change the font of the above button:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Button Content="Click Me!" Width="120" Height="40" FontFamily="Fonts/#Let Me Ride"/>
</Grid>
FirstStepsTutorialImg4.jpg

And that is all for the first tutorial. Please continue reading the rest of tutorials to learn more things about noesisGUI.

© 2017 Noesis Technologies