CoDriven Advanced UI documentation

CmScroller

Description

CmScroller is a scrollable container based on VisualElement from UI Toolkit called Scroller. You can add child controls to it, and it will enable vertical or horizontal scrolling, depending on its configuration.

Adding Controls to CmScroller

You can add controls to a CmScroller by using:

CmButton someButton = new CmButton();
//
CmScroller scroller = new CmScroller();
scroller.AddContent(someButton);

CmScroller control built-in methods

    // set scroll direction Vertical or Horizontal
    public void SetScrollerDirection(SliderDirection direction)

    // current scroll value
    public void SetScrollerValue(float value)

    // set scroll observable, so you can change observable value and it will change scroller value inside
    public void BindScrollerValue(CmObservableData<float> observableScrollerValue)

    // returns unity Visual element which is Scroller
    public override VisualElement GetVisualElement()
    {
        return _scroller;
    }

Style CmScroller Elements

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

public class CmScrollerModifiers : ICmControlModifiers
{
    public CmMainModifiers Main
    {
        get { return new CmMainModifiers(_cmModifiersContainer); }
    }

    public CmDraggerModifiers Dragger
    {
        get { return new CmDraggerModifiers(_cmModifiersContainer); }
    }

    public CmScrollerButtonsModifiers ScrollerButtons
    {
        get { return new CmScrollerButtonsModifiers(_cmModifiersContainer); }
    }

    public CmTrackerModifiers Tracker
    {
        get { return new CmTrackerModifiers(_cmModifiersContainer); }
    }

    public CmLabelModifiers Label
    {
        get { return new CmLabelModifiers(_cmModifiersContainer); }
    }

    public class CmLabelModifiers : ICmControlModifiers
    {
        public CmLabelModifiers Control(CmModifierText modifier)
    }

    public class CmMainModifiers : ICmControlModifiers
    {
        public CmMainModifiers Background(CmModifierBackground modifier)
    }

    public class CmDraggerModifiers : ICmControlModifiers
    {
        public CmDraggerModifiers Border(CmModifierBackground modifier)
        public CmDraggerModifiers Background(CmModifierBackground modifier)
        public CmDraggerModifiers DragContainer(CmModifierBackground modifier)
    }

    public class CmScrollerButtonsModifiers : ICmControlModifiers
    {
        public CmScrollerButtonsModifiers ArrowLow(CmModifierBackground modifier)
        public CmScrollerButtonsModifiers ArrowHigh(CmModifierBackground modifier)
    }

    public class CmTrackerModifiers : ICmControlModifiers
    {
        public CmTrackerModifiers Background(CmModifierBackground modifier)
    }
}

CmScroller can be styled using above elements so you can style it like here:

// Create scroller somewhere
CmScroller scroller = new CmScroller();
scroller.SetStyle(GetTheme().ScrollerStyle);

// In your theme
public ICmControlModifiers ScrollerStyle()
{
    var modifiers = CmScroller.GetModifiersBuilder();
    var scrollbar = modifiers.VerticalScroll;

    // style scroller main background
    scrollbar.Main.Background(new CmModifierBackground(CmSelector.DefaultState)
        .OverflowVisible()
    );

    // style scroller buttons
    scrollbar.ScrollerButtons.ArrowLow(new CmModifierBackground(CmSelector.DefaultState)
        .Hide()
    );
    scrollbar.ScrollerButtons.ArrowHigh(new CmModifierBackground(CmSelector.DefaultState)
        .Hide()
    );

    // style scroller tracker 
    scrollbar.Tracker.Background(new CmModifierBackground(CmSelector.DefaultState)
        .BorderWidth(1)
        .BorderRadius(_scrollBarRadius)
        .BorderColorRGBA(_bgColorTint)
    );
    return modifiers;
}

To learn about modifiers for all controls, click here