Skip to content

Example ScrollView

csharp
public const string UIScrollName = "UI.Scrolltest";
CuiElementContainer createScrollUI()
{
	int buttonSpacing = 24;
	int buttonSize = 20;
	int numberOfButton = 32;
	int panelSize = -buttonSpacing * numberOfButton;

	CuiElementContainer elements = new CuiElementContainer();

	string mainpanel = elements.Add(new CuiPanel
	{
		Image = { Color = "0.3 0.3 0.6 0.8" },
		RectTransform = {
			AnchorMin = "0.5 0.5", AnchorMax = "0.5 0.5",
			OffsetMin = "-200 -300", OffsetMax = "200 300"
		},
	}, "Overlay", UIScrollName, UIScrollName);

	elements.Add(new CuiElement
	{
		Name = "panel1",
		Parent = UIScrollName,
		Components =
			{
				new CuiRawImageComponent {
					Sprite = "assets/content/effects/crossbreed/fx gradient skewed.png",
					Color = "0.1 0.81 0.1 0.7"
				},
				new CuiRectTransformComponent {
					AnchorMin = "0.015 0.015", AnchorMax = "0.985 0.985",
					OffsetMax = "0 -50",
				}
			}
	});

	elements.Add(new CuiElement
	{
		Parent = UIScrollName,
		Components =
			{
				new CuiTextComponent {
					Text = "Vertical scroll example",
					FontSize=12,
					Align=TextAnchor.MiddleCenter
				},
				new CuiRectTransformComponent {
					AnchorMin = "0 1", AnchorMax = "1 1",
					OffsetMin = "0 -50", OffsetMax = "0 0"
				}
			}
	});

	elements.Add(new CuiButton
	{
		Button = {
			Color = "0.8 0.2 0.2 0.8",
			Command = "closescroll"
		},
		RectTransform = {
			AnchorMin = "0.91 0.93", AnchorMax = "0.98 0.98"
		},
		Text = {
			Text = "Close",
			FontSize = 8,
			Align = TextAnchor.MiddleCenter }
	}, mainpanel);


	elements.Add(new CuiElement
	{
		Name = "Scroller",
		Parent = "panel1",
		Components = {
			new CuiNeedsCursorComponent(),

			new CuiRawImageComponent {
				Sprite = "assets/content/effects/crossbreed/fx gradient skewed.png", Color = "0.15 0.25 0.25 0.8"
			},

			new CuiScrollViewComponent {
				ContentTransform = new CuiRectTransform {
					AnchorMin = "0 0.98", AnchorMax = "1 0.98",
					OffsetMin = $"0 {panelSize}", OffsetMax = "0 0",
					Pivot = "0.5 1",
				},

				Vertical = true,
				Horizontal = false,
				MovementType = ScrollRect.MovementType.Clamped, //Unrestricted, Elastic, Clamped,
				Elasticity = 0.25f,
				Inertia = true,
				DecelerationRate = 0.3f,
				ScrollSensitivity = 24f,

				VerticalScrollbar = new CuiScrollbar {
					AutoHide = true, Size = 20
				},
			},

			new CuiRectTransformComponent {
				AnchorMin = "0 0", AnchorMax = "1 1",
				Pivot = "0.5 1",
			},
		}
	});

	for (int i = 0; i < numberOfButton; i++)
	{
		var offsetMin = -i * buttonSpacing - buttonSize;
		var offsetMax = -i * buttonSpacing;

		elements.Add(new CuiElement
		{
			Name = "Text_" + i,
			Parent = "Scroller",
			Components = {
				new CuiImageComponent {
					Color = "0.2 0.2 0.2 1.0",
					Sprite = "Assets/Content/UI/UI.Background.Tile.psd",
					ImageType = Image.Type.Tiled,
				},
				new CuiRectTransformComponent {
					AnchorMin = "0 0.998", AnchorMax = "0.7 0.998",
					OffsetMin = $"0 {offsetMin}", OffsetMax = $"0 {offsetMax}",
				},
				new CuiOutlineComponent {
					Distance= "2 2",
					Color= "0 0 0 0.06"
				},
				new CuiOutlineComponent {
					Distance= "4 4",
					Color= "0 0 0 0.025"
				},
			}
		});

		elements.Add(new CuiElement
		{
			Parent = "Text_" + i,
			Components =
			{
			new CuiTextComponent {
				Text = $"Item #{i+1}",
				Color = "0.95 0.95 0.95 1.0",
				FontSize = 10,
				Align = TextAnchor.MiddleLeft },
			}
		});

		elements.Add(new CuiElement
		{
			Name = "Button_" + i,
			Parent = "Scroller",
			Components =
			{
			new CuiImageComponent {
				Color = "0.2 0.2 0.2 1.0",
				Sprite = "Assets/Content/UI/UI.Background.Tile.psd",
				ImageType = Image.Type.Tiled,
			},
			new CuiRectTransformComponent {
				AnchorMin = "0.72 0.998", AnchorMax = "1 0.998",
				OffsetMin = $"0 {offsetMin}", OffsetMax = $"0 {offsetMax}"
			},
			new CuiOutlineComponent {
				Distance= "2 2",
				Color= "0 0 0 0.06" }
			}
		});

		elements.Add(new CuiElement
		{
			Name = "TheButton_" + i,
			Parent = "Button_" + i,
			Components =
			{
				new CuiButtonComponent { Color = "0.8 0.2 0.2 0.8", Command = "ui.testscrollui "+ (i+1), ImageType= Image.Type.Tiled },
				new CuiRectTransformComponent { AnchorMin = "0.02 0.02", AnchorMax = "0.98 0.98" },
				new CuiOutlineComponent { Distance= "2 2", Color= "0 0 0 0.50" },
			}
		});

		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 },
			new CuiRectTransformComponent { AnchorMin = "0.02 0.02", AnchorMax = "0.98 0.98"},
			}
		});
	}
	return elements;
}

Released under the MIT License.