ComputedLayout.cs 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. using NStack;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Reflection;
  6. using System.Text;
  7. using Terminal.Gui;
  8. namespace UICatalog.Scenarios {
  9. /// <summary>
  10. /// This Scenario demonstrates how to use Termina.gui's Dim and Pos Layout System.
  11. /// [x] - Using Dim.Fill to fill a window
  12. /// [x] - Using Dim.Fill and Dim.Pos to automatically align controls based on an initial control
  13. /// [ ] - ...
  14. /// </summary>
  15. [ScenarioMetadata (Name: "Computed Layout", Description: "Demonstrates the Computed (Dim and Pos) Layout System.")]
  16. [ScenarioCategory ("Layout")]
  17. public class ComputedLayout : Scenario {
  18. public override void Setup ()
  19. {
  20. // Demonstrate using Dim to create a horizontal ruler that always measures the parent window's width
  21. const string rule = "|123456789";
  22. var horizontalRuler = new Label (rule, false) {
  23. AutoSize = false,
  24. X = 0,
  25. Y = 0,
  26. Width = Dim.Fill (),
  27. Height = 1,
  28. ColorScheme = Colors.Error
  29. };
  30. Win.Add (horizontalRuler);
  31. // Demonstrate using Dim to create a vertical ruler that always measures the parent window's height
  32. const string vrule = "|\n1\n2\n3\n4\n5\n6\n7\n8\n9\n";
  33. var verticalRuler = new Label (vrule, false) {
  34. AutoSize = false,
  35. X = 0,
  36. Y = 0,
  37. Width = 1,
  38. Height = Dim.Fill (),
  39. ColorScheme = Colors.Error
  40. };
  41. Win.LayoutComplete += (a) => {
  42. horizontalRuler.Text = rule.Repeat ((int)Math.Ceiling ((double)(horizontalRuler.Bounds.Width) / (double)rule.Length)) [0..(horizontalRuler.Bounds.Width)];
  43. verticalRuler.Text = vrule.Repeat ((int)Math.Ceiling ((double)(verticalRuler.Bounds.Height * 2) / (double)rule.Length)) [0..(verticalRuler.Bounds.Height * 2)];
  44. };
  45. Win.Add (verticalRuler);
  46. // Demonstrate At - Absolute Layout using Pos
  47. var absoluteButton = new Button ("Absolute At(2,1)") {
  48. X = Pos.At (2),
  49. Y = Pos.At (1)
  50. };
  51. Win.Add (absoluteButton);
  52. // Demonstrate using Dim to create a window that fills the parent with a margin
  53. int margin = 10;
  54. var subWin = new Window ($"Centered Sub Window with {margin} character margin") {
  55. X = Pos.Center (),
  56. Y = 2,
  57. Width = Dim.Fill (margin),
  58. Height = 7
  59. };
  60. Win.Add (subWin);
  61. int i = 1;
  62. string txt = "Resize the terminal to see computed layout in action.";
  63. var labelList = new List<Label> ();
  64. labelList.Add (new Label ($"The lines below show different TextAlignments"));
  65. labelList.Add (new Label ($"{i++}-{txt}") { TextAlignment = Terminal.Gui.TextAlignment.Left, Width = Dim.Fill (), X = 0, Y = Pos.Bottom (labelList.LastOrDefault ()), ColorScheme = Colors.Dialog });
  66. labelList.Add (new Label ($"{i++}-{txt}") { TextAlignment = Terminal.Gui.TextAlignment.Right, Width = Dim.Fill (), X = 0, Y = Pos.Bottom (labelList.LastOrDefault ()), ColorScheme = Colors.Dialog });
  67. labelList.Add (new Label ($"{i++}-{txt}") { TextAlignment = Terminal.Gui.TextAlignment.Centered, Width = Dim.Fill (), X = 0, Y = Pos.Bottom (labelList.LastOrDefault ()), ColorScheme = Colors.Dialog });
  68. labelList.Add (new Label ($"{i++}-{txt}") { TextAlignment = Terminal.Gui.TextAlignment.Justified, Width = Dim.Fill (), X = 0, Y = Pos.Bottom (labelList.LastOrDefault ()), ColorScheme = Colors.Dialog });
  69. subWin.Add (labelList.ToArray ());
  70. // #522 repro?
  71. var frameView = new FrameView ($"Centered FrameView with {margin} character margin") {
  72. X = Pos.Center (),
  73. Y = Pos.Bottom (subWin),
  74. Width = Dim.Fill (margin),
  75. Height = 7
  76. };
  77. Win.Add (frameView);
  78. i = 1;
  79. labelList = new List<Label> ();
  80. labelList.Add (new Label ($"The lines below show different TextAlignments"));
  81. labelList.Add (new Label ($"{i++}-{txt}") { TextAlignment = Terminal.Gui.TextAlignment.Left, Width = Dim.Fill (), X = 0, Y = Pos.Bottom (labelList.LastOrDefault ()), ColorScheme = Colors.Dialog });
  82. labelList.Add (new Label ($"{i++}-{txt}") { TextAlignment = Terminal.Gui.TextAlignment.Right, Width = Dim.Fill (), X = 0, Y = Pos.Bottom (labelList.LastOrDefault ()), ColorScheme = Colors.Dialog });
  83. labelList.Add (new Label ($"{i++}-{txt}") { TextAlignment = Terminal.Gui.TextAlignment.Centered, Width = Dim.Fill (), X = 0, Y = Pos.Bottom (labelList.LastOrDefault ()), ColorScheme = Colors.Dialog });
  84. labelList.Add (new Label ($"{i++}-{txt}") { TextAlignment = Terminal.Gui.TextAlignment.Justified, Width = Dim.Fill (), X = 0, Y = Pos.Bottom (labelList.LastOrDefault ()), ColorScheme = Colors.Dialog });
  85. frameView.Add (labelList.ToArray ());
  86. // Demonstrate Dim & Pos using percentages - a TextField that is 30% height and 80% wide
  87. var textView = new TextView () {
  88. X = Pos.Center (),
  89. Y = Pos.Percent (50),
  90. Width = Dim.Percent (80),
  91. Height = Dim.Percent (30),
  92. ColorScheme = Colors.TopLevel,
  93. };
  94. textView.Text = "This text view should be half-way down the terminal,\n20% of its height, and 80% of its width.";
  95. Win.Add (textView);
  96. // Demonstrate AnchorEnd - Button is anchored to bottom/right
  97. var anchorButton = new Button ("Anchor End") {
  98. Y = Pos.AnchorEnd (1),
  99. };
  100. // TODO: Use Pos.Width instead of (Right-Left) when implemented (#502)
  101. anchorButton.X = Pos.AnchorEnd () - (Pos.Right (anchorButton) - Pos.Left (anchorButton));
  102. anchorButton.Clicked += () => {
  103. // Ths demonstrates how to have a dynamically sized button
  104. // Each time the button is clicked the button's text gets longer
  105. // The call to Win.LayoutSubviews causes the Computed layout to
  106. // get updated.
  107. anchorButton.Text += "!";
  108. Win.LayoutSubviews ();
  109. };
  110. Win.Add (anchorButton);
  111. // Centering multiple controls horizontally.
  112. // This is intentionally convoluted to illustrate potential bugs.
  113. var bottomLabel = new Label ("This should be the 2nd to last line (Bug #xxx).") {
  114. TextAlignment = Terminal.Gui.TextAlignment.Centered,
  115. ColorScheme = Colors.Menu,
  116. Width = Dim.Fill (),
  117. X = Pos.Center (),
  118. Y = Pos.AnchorEnd (2)
  119. };
  120. Win.Add (bottomLabel);
  121. // Show positioning vertically using Pos.Bottom
  122. var leftButton = new Button ("Left") {
  123. Y = Pos.AnchorEnd () - 1
  124. };
  125. leftButton.Clicked += () => {
  126. // Ths demonstrates how to have a dynamically sized button
  127. // Each time the button is clicked the button's text gets longer
  128. // The call to Win.LayoutSubviews causes the Computed layout to
  129. // get updated.
  130. leftButton.Text += "!";
  131. Win.LayoutSubviews ();
  132. };
  133. // show positioning vertically using Pos.AnchorEnd
  134. var centerButton = new Button ("Center") {
  135. X = Pos.Center (),
  136. Y = Pos.AnchorEnd () - 1
  137. };
  138. centerButton.Clicked += () => {
  139. // Ths demonstrates how to have a dynamically sized button
  140. // Each time the button is clicked the button's text gets longer
  141. // The call to Win.LayoutSubviews causes the Computed layout to
  142. // get updated.
  143. centerButton.Text += "!";
  144. Win.LayoutSubviews ();
  145. };
  146. // show positioning vertically using another window and Pos.Bottom
  147. var rightButton = new Button ("Right") {
  148. Y = Pos.Y (centerButton)
  149. };
  150. rightButton.Clicked += () => {
  151. // Ths demonstrates how to have a dynamically sized button
  152. // Each time the button is clicked the button's text gets longer
  153. // The call to Win.LayoutSubviews causes the Computed layout to
  154. // get updated.
  155. rightButton.Text += "!";
  156. Win.LayoutSubviews ();
  157. };
  158. // Center three buttons with 5 spaces between them - shows PosCombine
  159. // TODO: Use Pos.Width instead of (Right-Left) when implemented (#502)
  160. leftButton.X = Pos.Left (centerButton) - (Pos.Right (leftButton) - Pos.Left (leftButton)) - 5;
  161. rightButton.X = Pos.Right (centerButton) + 5;
  162. Win.Add (leftButton);
  163. Win.Add (centerButton);
  164. Win.Add (rightButton);
  165. centerButton = new Button ("25% + 25%") {
  166. X = Pos.Percent (25) + Pos.Percent (25),
  167. Y = Pos.AnchorEnd (2)
  168. };
  169. Win.Add (centerButton);
  170. }
  171. public override void Run ()
  172. {
  173. base.Run ();
  174. }
  175. private void Quit ()
  176. {
  177. Application.RequestStop ();
  178. }
  179. }
  180. internal static class StringExtensions {
  181. public static string Repeat (this string instr, int n)
  182. {
  183. if (n <= 0) {
  184. return null;
  185. }
  186. if (string.IsNullOrEmpty (instr) || n == 1) {
  187. return instr;
  188. }
  189. return new StringBuilder (instr.Length * n)
  190. .Insert (0, instr, n)
  191. .ToString ();
  192. }
  193. }
  194. }