MAFUIButton

Load the content of Style.xml from MAFUIComponents.bundle, then create and present a default SAP-style instance of MAFUIButton:

MAFUIButton *stdButton = [[MAFUIButton alloc] initWithFrame:CGRectMake(60, 30, 200, 40)];
[stdButton setTitle:@"Standard Button" forState:UIControlStateNormal];
[self.view addSubview:stdButton];
//release mafUIView instance if not ARC based project.
[stdButton release];

If you do not set an mafStyleName, the skinning engine applies the style of the default TargetType, which is Button. This is the XAML content for the current default style of the Button TargetType:

<Style TargetType="Button" platform="ios">
	<VisualStates>
		<VisualState Name="Highlighted">
		</VisualState>
		<VisualState Name="Disabled">
		</VisualState>
	</VisualStates>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
	<LinearGradientBrush.GradientStops>
	<GradientStop Color="#FFFFFF" Offset="0.0"/>
	<GradientStop Color="#EFEFEF" Offset="0.65"/>
	<GradientStop Color="#EFEFEF" Offset="1.0"/>
	</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
		</Setter.Value>
	</Setter>
<Setter Property="Shadow" Value="#FFFFFF"/>
<Setter Property="FontFamily" Value="Helvetica-Bold"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Foreground" Value="#333333"/>
<Border BorderBrush="#666666" BorderThickness="1" CornerRadius="8"/>
</Style>

MAFUIButton supports different skins for different visual states of the UIButton. To set visual states, use the <VisualStates></VisualStates> tag:

Style BasedOn="stdButton" Key="EmphasizedButton"
        TargetType="Button" platform="ios">
        <VisualStates>
            <VisualState Name="Highlighted">
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="#00599A" Offset="0.0"/>
                                <GradientStop Color="#0062A9" Offset="0.5"/>
                                <GradientStop Color="#007AB6" Offset="1.0"/>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Shadow" Value="#004A7D"/>
                <Setter Property="Foreground" Value="#FFFFFF"/>
                <Border BorderBrush="#002D4D" BorderThickness="1.2" CornerRadius="8"/>
            </VisualState>
...
        </VisualStates>
...
</Style>

The above examples defined the core button skin, but the XAML inheritance capability also allows you to define child styles, such as stdButton:

<Style BasedOn=”Button” Key=”stdButton” TargetType=”Button” platform=”ios”/>

MAF also includes an EmphasizedButton XAML child style for MAFUIButton. To apply the child style, change the mafStyleName property of the MAFUIButton object:

MAFUIButton *empButton = [[MAFUIButton alloc] initWithFrame:CGRectMake(60, 30, 200, 40)];
[empButton setTitle:@"Emphasized Button" forState:UIControlStateNormal];
[empButton setMafStyleName:@"EmphasizedButton"];
[self.view addSubview:empButton];

//release MAFUIButton instance if not ARC based project.
[empButton release];

For the emphasized button, the mafStyleName is set to EmphasizedButton (this is the only difference from the basic button). The EmphasizedButton subclass of the stdButton style presents this button on screen:

You can change these properties in the skinning XML: