I've created an App I call eTabber and it show guitar tabs in Android, iOS en UWP. I currently working on the iOS version and it seems to scale totally different from the Android version. That is not what I expected at all. Here are two samples. It is a complex application using a ChordPro parser that parses a text file containing ChordPro text. It then passes control to a TabContainer class that evaluates the ChordPro tree and creates a Xamarin.Forms control with content coming from code. The Andoid version has a bit too much spacing but further look allright. The iOS version doesn't look good at all.
To make a bit more clear what is what. The colored images show a ColumnLayout (which is one of my own layout classes) in Green and a FlexLayout in Yellow. The ColumnLayout is working fine b.t.w.
Here's the Android layout:
![]()
![]()
and here's the iOS layout:
![]()
![]()
Here's the code for the word with or without a Chord (the black background blocks).
private void HandleBlocks(ILine line, Layout<View> layout, IEnumerable<Block> blocks, bool inline = false)
{
if (!blocks.Any())
{
var label = CreateLabel(line, string.Empty, UseColor);
layout.Children.Add(label);
}
else
{
foreach (var block in blocks)
{
switch (block.GetType().Name)
{
case nameof(Chord):
HandleChord(line, layout, (Chord)block);
break;
case nameof(Word):
HandleWord(line, layout, (Word)block, inline);
break;
default:
break;
}
}
}
}
private void AddSpace(ILine line, Layout<View> layout)
{
Label label = CreateLabel(line, string.Empty, UseColor);
label.Padding = new Thickness(0, 0, 2, 0);
layout.Children.Add(label);
}
private void HandleWord(ILine line, Layout<View> layout, Word word, bool inline)
{
foreach (var syllabe in word.Syllables)
{
var chordLayout = new StackLayout
{
Orientation = StackOrientation.Vertical,
Spacing = 0,
StyleClass = new List<string> { "WordContainer" }
};
if (syllabe.Chord != null)
{
HandleChord(line, chordLayout, syllabe.Chord);
}
else
{
if (!inline)
{
var emptyLabel = CreateLabel(line, string.Empty, UseColor);
chordLayout.Children.Add(emptyLabel);
}
}
var label = CreateLabel(line, syllabe.Text ?? string.Empty, UseColor);
chordLayout.Children.Add(label);
layout.Children.Add(chordLayout);
}
AddSpace(line, layout);
}
private void HandleChord(ILine line, Layout<View> layout, Chord chord)
{
var text = chord.Text == null ? string.Empty : $" {chord.Text}";
var label = CreateLabel(line, text, bold: true, textColor: ChordColor);
layout.Children.Add(label);
}
