### Style a Control

To style a Control, set the Style property.
More information also under Category CSS.
It is recommended to change a style using the CSSUtils library.
Example Label
Private Label1 As Label
'Using CSSUtils
'Set the font of a Label to 100px Tahoma Bold
CSSUtils.SetStyleProperty(Label1, "-fx-font","100px Tahoma")
CSSUtils.SetStyleProperty(Label1, "-fx-font-weight", "bold")
'Using Style Property
Label1.Style = "-fx-Font: 100px Tahoma; -fx-font-weight: bold;"
Example Adding Label
' Add a new label to the form
`Sub addLabel
Dim labelInfo As Label
labelInfo.Initialize("labelInfo")
labelInfo.Text = "Label Information"
labelInfo.Style = "-fx-font-size: 2.0em; -fx-Font-family: 'Segoe UI Semibold'; -fx-text-fill: Black; -fx-opacity: 1;"
' Add the new label to the main achorpane
anchorpaneMain.addNode(labelInfo, 350, 400, -1, -1)
Log("New Label added")
End Sub`
Button
buttonAbout.Style = "-fx-background-image: url('formtitle.png'); -fx-background-size: 18 18; -fx-background-repeat: no-repeat; -fx-background-position:left;"
buttonOK.Style = "-fx-background-image: url('" & "http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png" & "'); -fx-background-size: 40 40; -fx-background-repeat: no-repeat; -fx-background-position:left;"
buttonHelp.Style = "-fx-font: 40 arial; -fx-base: #b6e7c9; -fx-border-radius: 5; -fx-padding: 3 6 6 6;"
' Set buttonstyle
' Parameter Background color (in Hex format, like #FFFFFF or direct as color name, like blue)
' Parameter Font color (in Hex format, like #FFFFFF or direct as color name, like blue)
' Parameter Font size as string, like 2.0em
' Example: button.Style = setButtonStyle("#FFFFFF", "Blue", "2.0em")
`Sub setButtonStyle(bgcolor As String, fontcolor As String, fontsize As String) As String
Return "-fx-background-color: " & bgcolor & "; -fx-text-fill: " & fontcolor & "; -fx-font-size: " & fontsize & ";"
End Sub`
' Add a new button with event
`Sub addButton
Dim buttonNew As Button
' Add a new label to the form
buttonNew.Initialize("BN")
buttonNew.Text = "Button New"
buttonNew.Style = "-fx-font-size: 2.0em; -fx-Font-family: 'Segoe UI Semibold'; -fx-text-fill: Black; -fx-opacity: 1;"
' Add the new label to the main achorpane
anchorpaneMain.addNode(buttonNew, 350, 400, -1, -1)
Log("New Button added")
End Sub`
`Sub BN_Action
Log("Button new clicked...")
End Sub`
ComboxBox
' Set font for a ComboBox
Private comboboxTest As ComboBox
comboboxTest.Style = "-fx-font-size: 0.8em; -fx-Font-family: 'Segoe UI Semibold'; -fx-text-fill: blue; -fx-opacity: 0.6; "
comboboxTest.Style = "-fx-font-family:sans-serif; -fx-font-size:1.4em; -fx-font-weight:bold; -fx-text-fill:red; -fx-background-color: #D7E4F2;"
TabPane
' Set the background image of a TabPane
' Tabpane declared as Private tabMedia As TabPage
tabMedia.Content.Style="-fx-background-image: url('" & File.GetUri(File.DirApp, "background.png") & "');"
tabMedia.Content.Style=tabMedia.Content.Style&"-fx-background-repeat: stretch;"
'
' Remove the image from the tabpane
tabMedia.Content.Style="-fx-background-image:none"
ProgressBar
' Set progressbar style
Dim C As String
C = "-fx-box-border: black; -fx-accent: red; -fx-background-color: -fx-box-border, linear-gradient(To bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));"
setProgressBarStyle(progressbarMain, C)
' Set the style of a progressbar
' Parameter ProgressBar as node
' Parameter Style CSS
' Example: setProgressBarStyle(progressbarMain, "-fx-box-border: black; -fx-accent: red;")
`Sub setProgressBarStyle(pb As Node, s As String)
Dim P As JavaObject = pb
P.RunMethod("setStyle",Array As Object(s))
End Sub`
Form
' Allows flexible form design
MainForm.SetFormStyle("DECORATED")
Add Stylesheet
MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "startstopbutton.css"))
/**
• ToggleButton Stylesheet
**/
.StartStopButton {
-fx-color: Green;
}
.StartStopButton:selected:focused {
-fx-background-color: red;
}
HTML File
`Sub createHTMLFile
Dim htmlfile As String = "test.html"
Dim tw As TextWriter
Dim CSSStyle As String = "body { line-height:1.4em; Font-size: 1.0em; Font-family:Helvetica,Arial,sans-serif; }h1 { color:red; Font-size:1.6em; Font-family:Helvetica,Arial,sans-serif;} p { color:darkslategray; Font-size:0.9em; Font-family:Helvetica,Arial,sans-serif; }"
DateTime.DateFormat = "dd.MM.YYY"
tw.Initialize(File.OpenOutput(File.DirApp, htmlfile, False))
tw.WriteLine("" & CRLF & "
")
tw.WriteLine("" & CRLF & CSSStyle & CRLF & "" & CRLF)
tw.WriteLine("
" & CRLF)
tw.WriteLine("

# " & "TITLE" & "

" & CRLF)
tw.WriteLine("

" & "Content" & "

" & CRLF)
tw.WriteLine("

Created " & DateTime.Date(DateTime.Now) & CRLF)
tw.WriteLine("

")
tw.Flush
tw.Close
fx.ShowExternalDocument(File.GetUri(File.DirApp, htmlfile))
End Sub`
Checkbox
' New checkbox
Dim cb As CheckBox
' Init with eventname - this is used to action checkbox event accroding to the checkbox property
cb.Initialize("listviewcb")
cb.Tag = i
cb.Text = "CheckBox " & i
cb.Style = "-fx-text-fill: Blue; -fx-font-size: 1.1em; "
' Add the checkbox to the listview
listviewCheckBoxes.Items.Add(cb)

Changed: , Category: Styles, File: T6C257M1866.htm, ID: 1866