Skip to content

Example CuiGrid of button

This sample code use CuiGridLayoutGroupComponent to show a grid of buttons

csharp
public const string UIScrollName = "gridlayout.cuigrid";

CuiElementContainer createScrollUI()
{
	CuiElementContainer elements = new CuiElementContainer();

	elements.Add(new CuiElement
	{
		Name = UIScrollName,
		Parent = "Overlay",
		DestroyUi = UIScrollName,
		Components = {
			new CuiRawImageComponent { 
				Sprite = "assets/content/effects/crossbreed/fx gradient skewed.png", 
				Color = "0.1 0.1 0.1 1.0", 
			},
			new CuiRectTransformComponent { 
				AnchorMin = "0.3 0.05", AnchorMax = "0.7 0.95",
				Pivot = "0.5 1", Rotation = 0,
			},
			new CuiGridLayoutGroupComponent {
				CellSize = "32 32",
				ChildAlignment = TextAnchor.UpperLeft,
				Constraint = GridLayoutGroup.Constraint.FixedColumnCount,
				ConstraintCount = 8,
				Padding = "12",
				Spacing = "5 5",
				StartAxis = GridLayoutGroup.Axis.Horizontal,
				StartCorner = GridLayoutGroup.Corner.UpperLeft,
			},
			new CuiContentSizeFitterComponent()
			{
				VerticalFit = ContentSizeFitter.FitMode.PreferredSize,
				HorizontalFit = ContentSizeFitter.FitMode.PreferredSize
			},
		}
	});

	for ( int i=0; i<32; i++) 
	{
		elements.Add(new CuiElement
		{
			Name = "TheButton_" + i,
			Parent = UIScrollName, //"Button_" + i,
			Components =
			{
				new CuiButtonComponent { 
					Color = "0.2 0.2 0.7 1.0",
					Command = "ui.testscrollui "+ (i+1), 
					Sprite = "assets/icons/blueprint.png",
					HighlightedColor = "0.2 0.7 0.3 0.3", 
					PressedColor = "0.1 0.9 0.1 0.8",
				},
			}
		});

		elements.Add(new CuiElement
		{
			Name = "ButtonText_" + i,
			Parent = "TheButton_" + i,
			Components =
			{
				new CuiTextComponent {
					Text = $"Button#{i+1}",
					Color = "0.95 0.95 0.95 1.0",
					FontSize = 10,
					Align = TextAnchor.MiddleCenter
				},
			}
		});
	}
	return elements;
}

Released under the MIT License.