Modding:GUIs: Difference between revisions
From Vintage Story Wiki
| Line 40: | Line 40: | ||
<syntaxhighlight lang="c#"> | <syntaxhighlight lang="c#"> | ||
// Auto-sized dialog at the center of the screen | private void SetupDialog() | ||
ElementBounds dialogBounds = ElementStdBounds.AutosizedMainDialog.WithAlignment(EnumDialogArea.CenterMiddle); | { | ||
// Auto-sized dialog at the center of the screen | |||
ElementBounds dialogBounds = ElementStdBounds.AutosizedMainDialog.WithAlignment(EnumDialogArea.CenterMiddle); | |||
// Just a simple 300x300 pixel box | // Just a simple 300x300 pixel box | ||
ElementBounds textBounds = ElementBounds.Fixed(0,0,300,300) | ElementBounds textBounds = ElementBounds.Fixed(0, 0, 300, 300); | ||
SingleComposer = capi.Gui.CreateCompo("myAwesomeDialog", dialogBounds) | SingleComposer = capi.Gui.CreateCompo("myAwesomeDialog", dialogBounds) | ||
.AddStaticText("This is a piece of text at the center of your screen - Enjoy!", CairoFont.WhiteDetailText(), textBounds) | |||
.Compose() | |||
; | ; | ||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 57: | Line 60: | ||
* <code>CairoFont.WhiteDetailText()</code>: Create a new font configuration based on a often used size and color, in this case white with font size 14 | * <code>CairoFont.WhiteDetailText()</code>: Create a new font configuration based on a often used size and color, in this case white with font size 14 | ||
* <code>SingleComposer</code>: This property is defined in the <code>GuiDialog</code> class. Its a getter/setter to the <code>Composers</code> dictionary. It contains all the "windows" of this dialog which are then rendered / handled by this GuiDialog instance | * <code>SingleComposer</code>: This property is defined in the <code>GuiDialog</code> class. Its a getter/setter to the <code>Composers</code> dictionary. It contains all the "windows" of this dialog which are then rendered / handled by this GuiDialog instance | ||
===Fancying it up=== | |||
This is of course the absolute minimum example that will only show some text. Let's add a title bar and a dialog background: | |||
<syntaxhighlight lang="c#"> | |||
private void SetupDialog() | |||
{ | |||
// Auto-sized dialog at the center of the screen | |||
ElementBounds dialogBounds = ElementStdBounds.AutosizedMainDialog.WithAlignment(EnumDialogArea.CenterMiddle); | |||
// Just a simple 300x100 pixel box with 40 pixels top spacing for the title bar | |||
ElementBounds textBounds = ElementBounds.Fixed(0, 40, 300, 100); | |||
// Background boundaries. Again, just make it fit it's child elements, then add the text as a child element | |||
ElementBounds bgBounds = ElementBounds.Fill.WithFixedPadding(GuiStyle.ElementToDialogPadding); | |||
bgBounds.BothSizing = ElementSizing.FitToChildren; | |||
bgBounds.WithChildren(textBounds); | |||
SingleComposer = capi.Gui.CreateCompo("myAwesomeDialog", dialogBounds) | |||
.AddShadedDialogBG(bgBounds) | |||
.AddDialogTitleBar("Heck yeah!", OnTitleBarCloseClicked) | |||
.AddStaticText("This is a piece of text at the center of your screen - Enjoy!", CairoFont.WhiteDetailText(), textBounds) | |||
.Compose() | |||
; | |||
} | |||
private void OnTitleBarCloseClicked() | |||
{ | |||
TryClose(); | |||
} | |||
</syntaxhighlight> | |||
== Examples == | == Examples == | ||
