resize

since 0.9.4

Description

This event is fired when alphaTab was resized and is about to rerender the music notation. Before the re-rendering on resize the settings will be updated in the related components. This means that any changes to the layout options or other display settings are considered. This allows to implement scenarios where maybe the scale or the layout mode dynamically changes along the resizing.

resizeJavaScript

alphaTab.resizejQuery

alphaTab.resizeHTML

Resize.net

resizeAndroid

Types

function(args)JavaScript

Action<ResizeEventArgs>.net

(args : ResizeEventArgs) -> UnitAndroid

Parameters

Parameters	Type	Summary
argsJavaScript	alphaTab.ResizeEventArgs	The information about the resize event.
args.net	AlphaTab.ResizeEventArgs	The information about the resize event.
argsresize	alphaTab.ResizeEventArgs	The information about the resize event.

ResizeEventArgs Properties

Parameters	Type	Summary
oldWidthJavaScript	int	The size before the resizing happened.
OldWidth.net	int	The size before the resizing happened.
oldWidthAndroid	int	The size before the resizing happened.
newWidthJavaScript	int	The size after the resize was complete.
NewWidth.net	int	The size after the resize was complete.
newWidthAndroid	int	The size after the resize was complete.
settingsJavaScript	AlphaTab.Settings	The settings currently used for rendering.
Settings.net	AlphaTab.Settings	The settings currently used for rendering.
settingsAndroid	alphaTab.Settings	The settings currently used for rendering.

Examples

JavaScript

const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));
api.resize.on((args) => {
    args.settings.scale = args.newWidth > 1300 
        ? 1.5 
        : (args.newWidth > 800) ? 1.3 : 1;
});

HTML

$('#alphaTab').on('alphaTab.resize', (e, args) => {
    args.settings.display.scale = args.newWidth > 1300 
        ? 1.5 
        : (args.newWidth > 800) ? 1.3 : 1;
});

jQuery

document.querySelector('#alphaTab').addEventListener('alphaTab.resize', function(e) {
    e.detail.settings.display.scale = e.detail.newWidth > 1300 
        ? 1.5 
        : (args.newWidth > 800) ? 1.3 : 1;
}, false);

C#

var api = new AlphaTabApi<MyControl>(...);
api.Resize.On(args => 
{
    args.Settings.Display.Scale = args.NewWidth > 1300 
        ? 1.5
        : (args.NewWidth > 800) ? 1.3 : 1;
});

Android

val api = AlphaTabApi<MyControl>(...)
api.resize.on { args ->
    args.settings.display.scale = args.newWidth > 1300 
        ? 1.5 
        : (args.newWidth > 800) ? 1.3 : 1;
});