Action Slider Quick Start Guide
For iOS and Android development with Xamarin and Visual Studio Sample AppsGetting Started with Action Sliders
To use an Action Slider in your mobile application include the ActionComponents.dll
library and reference the following using statement in your C# code:
using ActionComponents;
Size and Placement
The Action Slider is designed to be oriented vertically (taller rather than wider), with the 0% position at the bottom of the control and the 100% at the top:
Additionally, the Action Slider needs to be a minimum of 50 pixels wide. Failing to honor either of these conditions will result in the control rendering and/or behaving incorrectly.
Appearance
Action Slider was designed to look and function the same across platforms, however you have full control over its look and feel. Action Slider is fully customizable with user definable appearances for every element of its UI. You can make adjust the following properties to control the appearance:
BorderColor
– Defines the frame that appears on the outer edge of the control and the border around theDragThumb
at the top of the control.BodyColor
– Defines the background fill color of the control and the fill color of theDragThumb
.FillColor
– Defines the color of the percent filled area.Icon
– Defines an optional icon that will be displayed at the bottom of the control.
Any change to the above properties will cause the Action Slider to instantly redraw and reflect the change.
Features
Action Slider includes a fully documented API with comments for every feature. The ActionAlert‘s user interface is drawn with vectors and is fully resolution independent. Additionally, an Action Slider can be added to an app’s .storyboard
(iOS) or .axml
(Android) file at design time or added to the UI programmatically at runtime.
Use the FillPercent
property to get or set the amount that the control is filled from 0% to 100%. As the percent is increased, the control will fill from bottom to top.
Responding to User Interaction
The user can interact with an Action Slider in one of two ways:
- Tapping – If the user quickly taps and releases a location inside of the control, the
FillPercent
will instantly be set to the appropriate value corresponding to the location of the tap. - Dragging – If the user taps and drags up or down inside of the control, the
FillPercent
will interactively be adjusted.
Based on the type of interaction, the ValueChanged
, Touched
, Moved
and/or Released
events will be raised in response.
iOS Example
In this example, an ACSlider
has been added to the app’s Main.storyboard
file and exposed via the brightnessSlider
outlet along with a fillPercent
label:
using ActionComponents;
…
// Set icon
brightnessSlider.Icon = UIImage.FromBundle("Brightness");
// Respond to slider change
brightnessSlider.ValueChanged += (percent) => {
fillPercent.Text = $"{percent}%";
};
When run, this will look like the following:
Android Examples
And here is the same example Action Alerts created in the OnCreate
method of an Android Activity
:
using ActionComponents;
…
// Access the slider
var slider = FindViewById<ACSlider>(Resource.Id.brightnessSlider);
slider.Icon = BitmapFactory.DecodeResource(Resources, Resource.Drawable.iconBrightness);
// Access text view
var brightnessLevel = FindViewById<TextView>(Resource.Id.brightnessLevel);
// Wire-up changes
slider.ValueChanged += (fillPercent) => {
brightnessLevel.Text = $"{fillPercent}%";
};
When run, this will look like the following:
Trial Version
The Trial version of Action Slider is fully functional but includes a Toast
style popup. The fully licensed version removes this popup.