Define Font from Javascript

General
4

You can use resources to make the font selectable from JavaScript.

<App>
	<Font File="../../Assets/fonts/Roboto-Bold.ttf" ux:Key="Bold"/>
	<Font File="../../Assets/fonts/Roboto-Regular.ttf" ux:Key="Regular"/>
	<Font File="../../Assets/fonts/Roboto-Italic.ttf" ux:Key="Italic"/>
	
	<JavaScript>
		exports.items = [
			{ font: "Bold" },
			{ font: "Regular" },
			{ font: "Italic" },
		]
	</JavaScript>
	<StackPanel>
		<Each Items="{items}">
			<Text Value="Sample Text" Font="{DataToResource font}"/>
		</Each>
	</StackPanel>
</App>

Note the use of ux:Key on the Font. This registers the font as a resource. These can then be used as <Text Font="{Resource Bold}"/>. {DataToResource font} takes the name of the resource from the font variable. For example, if font = Bold then {DataToResource font} is equivalent to {Resource Bold}.

1 Like