MAFSpinnerButton

The MAFSpinnerButton control extends the capabilities of the android.widget.Button native button. MAF adds styling capabilities to the Button UI component and supports skinning of tapped/untapped, and enabled/disabled visual states.

To create and present a default SAP style instance of MAFSpinnerButton, use:

button = new MAFSpinnerButton(context);

The MAF skinning engine customizes the buttons. To apply SAP style, set the custom style for background, foreground, shadow, font family, and font size in the XML file.

This is the XAML content for the default style of the MAFSpinnerButton:

	<Style TargetType="ComboBox" Key="SpinnerDef" platform="android">
		<VisualStates>
			<VisualState Name="Unfocused_Enabled">
				<Setter Property="Background" Value="#ff999999" />
				<!-- base line color -->
				<Setter Property="SolidColorBrush" Value="#ff666666" />
				<!-- triangle color -->
				<Setter Property="Foreground" Value="#ff333333" />
				<!-- text color -->
			</VisualState>

MAF supports skinning of tapped/untapped, and enabled/disabled visual states.

To set visual states, use the <VisualStates></VisualStates> tag:

			<VisualState Name="Unfocused_Disabled">
…
			</VisualState>
			<VisualState Name="Focused_Disabled">
				…
			</VisualState>
			<VisualState Name="Focused_Enabled">
				…
			</VisualState>
			<VisualState Name="Pressed">
				…
			</VisualState>

You can also inherit the style definition from the standard spinner, and create a flavored spinner. This is an example of the style definition for a red styled spinner flavor:

	<Style TargetType="ComboBox" Key="SpinnerButtonRed" BasedOn="SpinnerDef" platform="android">
		<VisualStates>
			<VisualState Name="Unfocused_Enabled">
				<Setter Property="Background" Value="#B60000" />
				<!-- base line color -->
				<Setter Property="SolidColorBrush" Value="#0abb00" />
				<!-- triangle color -->
			</VisualState>
			<VisualState Name="Unfocused_Disabled">
				<Setter Property="Background" Value="#B60000" />
				<!-- base line color -->
				<Setter Property="SolidColorBrush" Value="#0abb00" />
				<!-- triangle color -->
			</VisualState>
			<VisualState Name="Focused_Disabled">
				<Setter Property="Background" Value="#B00400" />
				<!-- base line color -->
				<Setter Property="SolidColorBrush" Value="#0abb00" />
				<!-- triangle color -->
				<Setter Property="BorderBrush" Value="#00F300" />
				<!-- selection border color -->
			</VisualState>
			<VisualState Name="Focused_Enabled">
				<Setter Property="Background" Value="#0AC200" />
				<!-- base line color -->
				<Setter Property="SolidColorBrush" Value="#aabb00" />
				<!-- triangle color -->
				<Setter Property="BorderBrush" Value="#FAF300" />
				<!-- selection border color -->
			</VisualState>
			<VisualState Name="Pressed">
				<Setter Property="Background" Value="#D00400" />
				<!-- base line color -->
				<Setter Property="SolidColorBrush" Value="#a0bb00" />
				<!-- triangle color -->
				<Setter Property="BorderBrush" Value="#0AF300" />
				<!-- selection border color -->
			</VisualState>
		</VisualStates>
	</Style>

To create an MAFSpinnerButton from code, use:

MAFSpinner mafspinner = new MAFSpinnerButton(context,”SpinnerButtonRed”);

You can change these properties in the skinning XML:

Background	Color of the MAFSpinner’s background; can also be a freestyle gradient. Colors are defined as RGBA (red, green, blue, alpha).
Foreground	Control's text color.
SolidColorBrush	Control's triangle color.
BorderBrush	Border attribute of the MAFSpinner.