GraffitiSuite - UI Shouldn't Be Hard

Table of Contents

Images
About
See Also
Enumerations
Constants
Events
Methods
Properties
Examples
- Conditionally Applying a Dark/Light Image
Notes

Images #

About #

GraffitiCard is a mobile implementation of popular web components meant to convey information in an encapsulated form with a call-to-action button.

Features:

Optional Title, Image, Header, Subheader, Content, and Button areas
Dark Mode aware
Text is fully customizable
Auto-height support for variable content

Enumerations #

Name	Values
Alignments	Left
	Center
	Right

Constants #

Name	Type	Value

This class exposes no constants.

Events #

Name	Parameters	Return Type	Description
ButtonPressed	None	None	Raised when the user clicks the card’s button.
HeightChanged	None	None	Raised when the height of the card has changed. Only fires when the AutoHeight property is True.
TitleBackgroundPaint	g as Graphics	None	Overrides painting of title area background.
TitleTextPaint	g as graphics	Boolean	Raised when the title text is being drawn. Return True to override.

Methods #

Definition	Description
This class exposes no methods.

Properties #

Name	Type	Default Value	Description
AutoHeight	Boolean	True	When True the Card will resize vertically so that its content fills the entire area.
BackgroundColor	ColorGroup	Nil	Color applied to card background.
BorderColor	ColorGroup	Nil	Color applied to card border.
Button	String	“Button Text”	When length = 0, button will not be shown.
ButtonBold	Boolean	False	Font weight of button.
ButtonBorderRadius	Integer	8	Border radius of button object.
ButtonColor	ColorGroup	Nil	Color applied to button object’s background
ButtonFontFace	String	“System”	Font used for drawing button text.
ButtonFontSize	Integer	16	Font size applied to button text.
ButtonItalic	Boolean	False	If True button text will be italicized.
ButtonTextColor	ColorGroup	Nil	Color applied to button object’s text.
ButtonUnderline	Boolean	When True button text will be underlined.
Content	String	“Content”	Text to be displayed in the content area of the card.
ContentAlignment	Alignments	Alignments.Left	Drawing position of content.
ContentBold	Boolean	False	Font weight of content text.
ContentFontFace	String	“System”	Font face applied to content text.
ContentFontSize	Integer	0	Font size used for drawing content text.
ContentItalic	Boolean	False	When True content text will be italicized.
ContentTextColor	ColorGroup	Nil	Color applied to content text.
ContentUnderline	Boolean	False	If True, applies an underline to content text.
CornerRadius	Double	12	Determines the roundness of the cards’ corners.
Header	String	“Header Text”	Text to draw in the header position of the card.
HeaderBold	Boolean	False	Font weight of header.
HeaderFontFace	String	“System”	Font face of header.
HeaderFontSize	Integer	16	Font size of header.
HeaderItalic	Boolean	False	When True, makes header text italicized.
HeaderTextColor	ColorGroup	Nil	Color applied to header text.
HeaderUnderline	Boolean	False	Applies underline to header text.
Image	Picture	Nil	Image displayed below the title and above the header.
Subheader	String	“Subheader”	Text displayed below the header and above the content.
SubheaderBold	Boolean	False	Font weight of the subheader text.
SubheaderFontFace	String	“System”	Font face used for subheader text.
SubheaderFontSize	Integer	14	Font size used for subheader text.
SubheaderItalic	Boolean	False	When True, subheader text will be italicized.
SubheaderTextColor	ColorGroup	Nil	Color applied to subheader text.
SubheaderUnderline	Boolean	False	Applies underline to subheader text.
Title	String	“Untitled”	The title of the card. Appears above all other elements.
TitleBackgroundColor	ColorGroup	Nil	Background color of the titlebar.
TitleBold	Boolean	False	Font weight of title text.
TitleFontFace	String	“System”	Font face of title text.
TitleFontSize	Integer	20	Font size of title text.
TitleItalic	Boolean	False	Makes the title text italicized.
TitleTextColor	ColorGroup	Nil	Applies the specified color to the title text.
TitleUnderline	Boolean	Applies underline to title text.

Examples #

Conditionally Applying a Dark/Light Image #

Sub Open() Handles Open
  me.Image = demo_header_bg_light
 
  if GraffitiColors.SystemAware.IsDarkMode then
    me.Image = demo_header_bg_dark
  end if
 
End Sub

Notes #

This class currently has no notes.

GraffitiCard