Dealing with Custom Header and Footer

19 May 20204 minutes to read

This section will explain about the header and footer customization of SfPicker.

Enable or Disable Header

SfPicker allows enabling or disabling the header section by setting SfPicker.ShowHeader property to True or False. Default property of SfPicker.ShowHeader property is True.

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    SfPicker picker = new SfPicker();
    picker.ShowHeader = false;
    this.View.AddSubview(picker);
}

Set Custom Header

SfPicker allows providing custom text to header of SfPicker by setting SfPicker.HeaderText property. Default value of SfPicker.HeaderText property is Null.

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    SfPicker picker = new SfPicker();
    picker.HeaderText = "Selecte a Date";
    this.View.AddSubview(picker);
}

Header Customization

SfPicker allows customizing Background, TextColor and Fonts.

Background

Header background color can be customized by setting SfPicker.HeaderBackgroundColor property of SfPicker.

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    SfPicker picker = new SfPicker();
    picker.HeaderBackgroundColor = UIColor.Green;
    this.View.AddSubview(picker);
}

Text Color

Header text color can be customized by setting SfPicker.HeaderTextColor property of SfPicker

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    SfPicker picker = new SfPicker();
    picker.HeaderTextColor = UIColor.Red;
    this.View.AddSubview(picker);
}

Font

This section will explains about the customization of Header text of Font

FontFamily

Header text FontFamily can be customized by setting SfPicker.HeaderFont property of SfPicker.

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    SfPicker picker = new SfPicker();
    picker.HeaderFont = UIFont.FromName("sans-serif", 12f);
    this.View.AddSubview(picker);
}

SfPicker allows enabling or disabling the footer section by setting SfPicker.ShowFooter property to True or False. Default value of SfPicker.ShowFooter property is False.

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    SfPicker picker = new SfPicker();
    picker.ShowFooter = true;
    this.View.AddSubview(picker);
}

SfPicker allows providing custom view to Footer of SfPicker by setting SfPicker.FooterView property. Default value of SfPicker.FooterView property is Null.

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    SfPicker picker = new SfPicker();
    UIStackView stackView = new UIStackView();
    UIButton button = new UIButton();
    button.SetTitle("Ok", UIControlState.Normal);
    stackView.AddSubview(button);
    picker.FooterView = stackView;
    picker.ShowFooter = true;
    this.View.AddSubview(picker);
}

Perform validation with default validation button

SfPicker allows performing validation based on OK or Cancel button by hooking SfPicker.OkButtonClicked and SfPicker.CancelButtonClicked. In this event from the SelectionChangedEvent Argument current selected items can be obtained.

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    SfPicker picker = new SfPicker();
    picker.CancelButtonClicked += Picker_CancelButtonClicked;
    picker.OkButtonClicked += Picker_OkButtonClicked;
    this.View.AddSubview(picker);
}