Layouts can be used to position elements. Layouts can contain other layouts. They can be columns or rows.
Any widget can have a layout, and they can define margins and spacing.
" )] internal static Widget LayoutGallery() { var view = new Widget( null ); view.SetSizeMode( SizeMode.CanGrow, SizeMode.CanGrow ); view.Layout = Layout.Column(); view.Layout.Spacing = 2; view.Layout.Add( new ColouredLabel( Theme.Green, "stretch 1" ), 1 ); { var row = view.Layout.AddRow( 1 ); row.Spacing = 2; row.Add( new ColouredLabel( Theme.Blue, "stretch 1" ), 1 ); row.Add( new ColouredLabel( Theme.Green, "no stretch" ) ); row.Add( new ColouredLabel( Theme.Blue, "no stretch" ) ); } { var row = view.Layout.AddRow( 1 ); row.Spacing = 2; row.Add( new ColouredLabel( Theme.Green, "stretch 1" ), 1 ); row.Add( new ColouredLabel( Theme.Blue, "stretch 2" ), 2 ); row.Add( new ColouredLabel( Theme.Green, "stretch 5" ), 5 ); } { var row = view.Layout.AddRow( 1 ); row.Spacing = 2; row.Add( new ColouredLabel( Theme.Blue, "empty stretch cell ->" ) ); row.AddStretchCell(); row.Add( new ColouredLabel( Theme.Green, "<- empty stretch cell" ) ); } { var row = view.Layout.AddRow( 1 ); row.Spacing = 2; row.AddStretchCell(); row.Add( new ColouredLabel( Theme.Green, "<- empty stretch cell ->" ) ); row.AddStretchCell(); row.Add( new ColouredLabel( Theme.Blue, "<- empty stretch cell ->" ) ); row.AddStretchCell(); } { var row = view.Layout.AddRow( 1 ); row.Spacing = 2; row.AddStretchCell(); row.Add( new ColouredLabel( Theme.Blue, "<- empty stretch cell" ) ); row.Add( new ColouredLabel( Theme.Green, "empty stretch cell ->" ) ); row.AddStretchCell(); } return view; } /* [WidgetGallery] [Title( "___Flow Layout" )] [Icon( "grid_4x4" )] [Description( @"Layouts can be used to position elements. Layouts can contain other layouts. They can be columns or rows.
Any widget can have a layout, and they can define margins and spacing.
" )] internal static Widget FlowLayout() { var view = new Widget( null ); view.SetSizeMode( SizeMode.CanGrow, SizeMode.CanGrow ); view.Layout = Layout.Flow(); view.Layout.Spacing = 2; for (int i=0; i<30; i++ ) { var height = System.Random.Shared.Float( 20, 100 ); view.Layout.Add( new ColouredLabel( Theme.Green, $"stretch {height:n0}px" ) { MinimumSize = height } ); var row = view.Layout.AddRow(); for ( int x = 0; x < 10; x++ ) { var width = System.Random.Shared.Float( 20, 50 ); height = System.Random.Shared.Float( 20, 100 ); row.Add( new ColouredLabel( Theme.Blue, $"stretch {height:n0}px" ) { MinimumSize = height, FixedWidth = width } ); } } return view; } */ [WidgetGallery] [Category( "Segmented Control" )] [Title( "Segmented Control" )] [Icon( "splitscreen" )] internal static Widget SegmentedControl() { var wrapper = new Widget( null ); wrapper.Layout = Layout.Column(); var sc = wrapper.Layout.Add( new SegmentedControl() ); sc.AddOption( "One" ); sc.AddOption( "Two" ); sc.AddOption( "Three" ); sc.AddOption( "Four" ); sc.AddOption( "Five" ); var lbl = wrapper.Layout.Add( new Label() ); lbl.Bind( "Text" ).ReadOnly().From( () => $"Selected: {sc.Selected}", _ => { } ); return wrapper; } [WidgetGallery] [Category( "Segmented Control" )] [Title( "Segmented Control With Icons" )] [Icon( "splitscreen" )] internal static Widget SegmentedControlWithIcons() { var wrapper = new Widget( null ); wrapper.Layout = Layout.Column(); var sc = wrapper.Layout.Add( new SegmentedControl() ); sc.AddOption( "One", "search" ); sc.AddOption( "Two", "home" ); sc.AddOption( "Three", "menu" ); sc.AddOption( "Four", "close" ); sc.AddOption( "Five", "settings" ); var lbl = wrapper.Layout.Add( new Label() ); lbl.Bind( "Text" ).ReadOnly().From( () => $"Selected: {sc.Selected}", _ => { } ); return wrapper; } public class ColouredLabel : Widget { Color color; string label; public ColouredLabel( Color color, string label ) : base( null ) { this.color = color; this.label = label; MinimumSize = 100; } protected override void OnPaint() { Paint.ClearPen(); Paint.SetBrush( color.Darken( 0.4f ) ); Paint.DrawRect( LocalRect ); Paint.SetPen( color ); Paint.DrawText( LocalRect, label, TextFlag.Center | TextFlag.WordWrap ); } } }