I'm using a regular MultiView control for the menu of my app (primary Android). But I also want to have a kind of context menu that drops down when a user taps the menu button in the upper right corner. Examples:
Things I've tried without success:
Styling is nice, but not so important. Pretty sure there is a simple solution, but I could not get it done. I'm using Delphi 12.2, testing Android phones are Samsung with Android 13, 14.
// OnClick handler for the 3-dot button
// works, but moves all controls on my TTabControl to the left :-(
procedure TForm1.SpeedButton1Click(Sender: TObject);
begin
ListBoxMenu.Visible := not ListBoxMenu.Visible;
if ListBoxMenu.Visible then
begin
ListBoxMenu.ApplyStyleLookup;
ListBoxMenu.RealignContent;
end;
end;
// head of .fmx file
object Form1: TForm1
Left = 0
Top = 0
Caption = 'Form1'
ClientHeight = 480
ClientWidth = 640
FormFactor.Width = 320
FormFactor.Height = 480
FormFactor.Devices = [Desktop]
DesignerMasterStyle = 0
object ToolBar1: TToolBar
Size.Width = 640.000000000000000000
Size.Height = 46.000000000000000000
Size.PlatformDefault = False
TabOrder = 0
object SpeedButton1: TSpeedButton
Align = Right
Margins.Right = 5.000000000000000000
Position.X = 589.000000000000000000
Size.Width = 46.000000000000000000
Size.Height = 46.000000000000000000
Size.PlatformDefault = False
StyleLookup = 'detailstoolbutton'
Text = 'SpeedButton1'
OnClick = SpeedButton1Click
end
end
object ListboxMenu: TListBox
Align = Right // also tried None
Margins.Right = 30.000000000000000000
Position.X = 528.000000000000000000
Position.Y = 49.000000000000000000
Size.Width = 107.000000000000000000
Size.Height = 144.000000000000000000
Size.PlatformDefault = False
TabOrder = 1
Visible = False
DisableFocusEffect = True
DefaultItemStyles.ItemStyle = ''
DefaultItemStyles.GroupHeaderStyle = ''
DefaultItemStyles.GroupFooterStyle = ''
Viewport.Width = 103.000000000000000000
Viewport.Height = 140.000000000000000000
object ListBoxItem1: TListBoxItem
TabOrder = 0
Text = 'MenuItem 0'
OnClick = ListBoxItem1Click
end
object ListBoxItem2: TListBoxItem
Position.Y = 19.000000000000000000
TabOrder = 1
Text = 'MenuItem 1'
end
object ListBoxItem3: TListBoxItem
Position.Y = 38.000000000000000000
TabOrder = 2
Text = 'MenuItem 2'
end
end
object TabControl1: TTabControl
Align = Client // also tried Contents
Size.Width = 640.000000000000000000
Size.Height = 434.000000000000000000
Size.PlatformDefault = False
TabIndex = 1
TabOrder = 4
TabPosition = PlatformDefault
Sizes = (
640s
408s
640s
408s)
object TabItem1: TTabItem
CustomIcon = <
item
end>
TextSettings.Trimming = None
IsSelected = False
Size.Width = 69.000000000000000000
Size.Height = 26.000000000000000000
Size.PlatformDefault = False
StyleLookup = ''
TabOrder = 0
Text = 'TabItem1'
ExplicitSize.cx = 86.000000000000000000
ExplicitSize.cy = 30.000000000000000000
end
[EDIT 0]: Added not-working code [Edit 1]: Clarification of tested values of the Align property
So I finally got it working on Android and Win64. Here are my changes taken from SiverWarrior and Dave.
Align:=TLayoutAlign.Client
Align:=TLayoutAlign.None
BringToFront
on the control, not in the Object InspectorGlobalUseSkia:=True
The last tweaks have been to use Skia, otherwise the tab's slants are drawn over the menu. Also I had to choose "BringToFront" on the TListBox on the form. It did not work at structure view of the object inspector as the "BringToFront" menu option of the context menu is disabled there. Thank you!