CmScrollView

Description

CmScrollView is a scrollable container based on the Unity UI Toolkit's VisualElement called ScrollView. It provides more advanced and flexible scrolling capabilities. You can add child controls to it, and it supports both vertical and horizontal scrolling depending on its configuration.

Adding Controls to CmScrollView

You can add controls to a CmScrollView by using:

CmButton someButton = new CmButton();
//
CmScrollView scrollView = new CmScrollView();
scrollView.AddContent(someButton);

CmScrollView Control Built-In Methods

    // set visibility for ScrollView scrollbars
    public void SetVerticalScrollerVisibility(ScrollerVisibility verticalScrollerVisibility)
    public void SetHorizontalScrollerVisibility(ScrollerVisibility horizontalScrollerVisibility)

    public void SetScrollOffset(Vector2 scrollOffset)


    public void SetHorizontalPageSize(float horizontalPageSize)
    public void SetVerticalPageSize(float verticalPageSize)

    public void SetElasticity(float elasticity)
    public void SetElasticAnimationIntervalMs(long elasticAnimationIntervalMs)

    public void SetScrollDecelerationRate(float scrollDecelerationRate)

    // Horizontal, Vertical, or HorizontaAndVertical
    public void SetScrollViewMode(ScrollViewMode scrollViewMode)

    // returns Unity VisualElement that represents the ScrollView
    public override VisualElement GetVisualElement()
    {
        return _scrollView;
    }

Style CmScrollView Elements

CmScrollView.GetModifiersBuilder() will return modifiers that you can use to style CmScrollView.

public class CmScrollViewModifiers : ICmControlModifiers
{
    public CmMainContentModifier Main
    {
        get { return new CmMainContentModifier(_cmModifiersContainer); }
    }

    public CmVerticalScrollerModifier VerticalScroll
    {
        get { return new CmVerticalScrollerModifier(_cmModifiersContainer); }
    }

    public CmHorizontalScrollerModifier HorizontalScroll
    {
        get { return new CmHorizontalScrollerModifier(_cmModifiersContainer); }
    }

    public class CmMainContentModifier : ICmControlModifiers
    {
        public CmMainContentModifier Background(CmModifierBackground modifier)
        public CmMainContentModifier ContentViewPort(CmModifierBackground modifier)
        public CmMainContentModifier ContentContainer(CmModifierBackground modifier)
    }

    public class CmVerticalScrollerModifier : ICmControlModifiers
    {
        public CmVerticalScrollerModifier Container(CmModifierBackground modifier)
        public CmVerticalScrollerModifier LowButton(CmModifierBackground modifier)
        public CmVerticalScrollerModifier HighButton(CmModifierBackground modifier)
        public CmVerticalScrollerModifier Background(CmModifierBackground modifier)
        public CmVerticalScrollerModifier Tracker(CmModifierBackground modifier)
        public CmVerticalScrollerModifier DraggerBorder(CmModifierBackground modifier)
        public CmVerticalScrollerModifier Dragger(CmModifierBackground modifier)
        public CmVerticalScrollerModifier DragContainer(CmModifierBackground modifier)
    }

    public class CmHorizontalScrollerModifier : ICmControlModifiers
    {
        public CmHorizontalScrollerModifier Container(CmModifierBackground modifier)
        public CmHorizontalScrollerModifier LowButton(CmModifierBackground modifier)
        public CmHorizontalScrollerModifier HighButton(CmModifierBackground modifier)
        public CmHorizontalScrollerModifier Background(CmModifierBackground modifier)
        public CmHorizontalScrollerModifier Tracker(CmModifierBackground modifier)
        public CmHorizontalScrollerModifier DraggerBorder(CmModifierBackground modifier)
        public CmHorizontalScrollerModifier Dragger(CmModifierBackground modifier)
        public CmHorizontalScrollerModifier DragContainer(CmModifierBackground modifier)
    }
}

So you can style CmScrollView using above methods like this:

// Create scroll view
CmScrollView scrollView = new CmScrollView();
scrollView.SetStyle(GetTheme().ScrollViewStyle);

// In your theme
public ICmControlModifiers ScrollViewStyle()
{
    var modifiers = CmScrollView.GetModifiersBuilder();

    var verticalScroll = modifiers.VerticalScroll;

    verticalScroll.Container(new CmModifierBackground(CmSelector.DefaultState)
        .MarginHorizVert(7.Px(), 7.Px())
    );

    verticalScroll.Background(new CmModifierBackground(CmSelector.DefaultState)
        .OverflowVisible()
    );

    // hide top and buttom arrows
    verticalScroll.LowButton(new CmModifierBackground(CmSelector.DefaultState)
        .Hide()
    );

    verticalScroll.HighButton(new CmModifierBackground(CmSelector.DefaultState)
        .Hide()
    );

    // style tracker 
    verticalScroll.Tracker(new CmModifierBackground(CmSelector.DefaultState)
        .BorderWidth(1)
        .BorderRadius(_scrollBarRadius)
        .BorderColorRGBA(_bgColorTint)

    return modifiers;
}

To learn about modifiers for all controls, click here