It's similar to a checkbox list (or radio buttons list if MultiSelect is set to True). This component is also internally used by ItemPicker which effectively shows an OptionsList in a pop-up.

To use this component, install the Zebble.OptionList nuget package. 
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

 

In Markup (.zbl file):

<OptionsList Id="MyOptionsList" Direction="Vertical" MultiSelect="true" />In C# (dynamic UI creation):await Add(new OptionsList { Id = "MyOptionsList", Direction = RepeatDirection.Vertical, MultiSelect = true });

     

  public List<Contact> Items;
        public override async Task OnInitializing()
        {
            Items = GetSource().ToList();
            await base.OnInitializing();
            await InitializeComponents();
            
        }
        IEnumerable<Contact> GetSource() => Database.GetList<Contact>();

Data source:

You can set the DataSource property (either in markup or C#) to populate the options list. The data source can be any IEnumerable object. 

Markup

<OptionsList ... DataSource="GetSource() />

C# code-behind:

IEnumerable<ANYTHING> GetMyOptions()
{
     ....
}Of course you can also set the DataSource at run-time using C#:

MyOptionsList.DataSource = GetMyOptions();

 

Enabled & Ignored

 

Stylesheet has a boolean property named Ignored, which is false by default. When set to true it works the same as "display: none" in HTML. It means that the element will not only be invisible, but also it won't occupy space on the screen.

View has a boolean property named Enabled, which is true by default. When set to false the object will not respond to UI gesture events. But it will remain visible. Also, its PseudoCssState will be set to "disabled" which allows you to specify a visual style for it in CSS.

If you set the Enabled property of Checkbox to false, the user can not change the value of it.

 

Rotation

 

<OptionsList MultiSelect="false"  DataSource="GetSource()"  Style.Border="1" RotationX="50"/>

 

 

 

 

 

 

 

 

 

 

 

 

<OptionsList MultiSelect="false"  DataSource="GetSource()"  Style.Border="1" Style.BackgroundColor ="blue" RotationY="50"/>

 

 

 

 

 

 

 

 

 

 

 

You can see some information about rotation in  Zebble here: http://zebble.net/docs/rotation-in-zebble

Margin & Padding

You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding

Value:

This property gives you the value of selected item. If MultiSelect property is set to true, the content of Value property is a Enumerable value.

Actions:

In the event of changing selected item in an options list by user, you can handle it using the following code:

MyOptionsList.SelectedItemChanged = SelectedChanged;private void SelectedChanged(OptionsList.ItemTemplate obj) {/* Do something here. */}

Events:

• on-Flashed: Raised when the object is flashed.
• on-Initialized: Raised when the object object is created and rendered.
• on-Initializing: Raised when the object object is being created and rendered.
• on-LongPressed: Raised when user clicked on the object for a long time.
• on-PanFinished: Raised when user panned on the object .
• on-Panning: Raised when user starts to pan on the object .
• on-PreRendered: Raised when the object is not started to rendered before rendering.
• on-SelectedItemChanged: Raised when user selected or unselected an item.
• on-Swiped: Raised when user swiped on the object .
• on-Tapped: Raised when user tapped on the object .