Dealing with Header, Footer and Selection in MAUI Picker (SfPicker)
19 Sep 20248 minutes to read
This section explains the header, footer and selection view customization of picker control.
Enable or disable header
SfPicker enables or disables the header section by setting the SfPicker.HeaderView.Height property to a value greater than 0. The default value of the Height property is 0.
<sfPicker:SfPicker x:Name="picker">
<sfPicker:SfPicker.HeaderView>
<sfPicker:PickerHeaderView Height="40"/>
</sfPicker:SfPicker.HeaderView>
</sfPicker:SfPicker>this.picker.HeaderView.Height= 40;
Header customization
SfPicker allows customizing background, text style.
Background
The Header’s Background color can be customized by setting the SfPicker.HeaderView.Background property.
<sfPicker:SfPicker x:Name="picker">
<sfPicker:SfPicker.HeaderView>
<sfPicker:PickerHeaderView Background="#D3D3D3"/>
</sfPicker:SfPicker.HeaderView>
</sfPicker:SfPicker>this.picker.HeaderView.Background = Color.FromArgb("#6750A4");
Header text style
The .NET MAUI Picker control and header TextStyle such as TextColor, FontSize, FontFamily, and FontAttributes can be customized as shown in the following code.
<sfPicker:SfPicker x:Name="picker">
<sfPicker:SfPicker.HeaderView>
<sfPicker:PickerHeaderView>
<sfPicker:PickerHeaderView.TextStyle>
<sfPicker:PickerTextStyle TextColor="Gray"
FontSize="18"
FontAttributes="Italic"/>
</sfPicker:PickerHeaderView.TextStyle>
</sfPicker:PickerHeaderView>
</sfPicker:SfPicker.HeaderView>
</sfPicker:SfPicker>this.picker.HeaderView.TextStyle = new PickerTextStyle()
{
TextColor = Colors.Gray,
FontSize = 18,
FontAttributes = FontAttributes.Italic
};
Divider color
The Header’s DividerColor color can be customized by setting the SfPicker.HeaderView.DividerColor property.
<sfPicker:SfPicker x:Name="picker">
<sfPicker:SfPicker.HeaderView>
<sfPicker:PickerHeaderView DividerColor="Red"/>
</sfPicker:SfPicker.HeaderView>
</sfPicker:SfPicker>this.picker.HeaderView.DividerColor = Colors.Red;
Enable or disable footer
SfPicker enables or disables the footer section by setting the SfPicker.FooterView.Height property to a value greater than 0. The default value of the Height property is 0.
<sfPicker:SfPicker x:Name="picker">
<sfPicker:SfPicker.FooterView>
<sfPicker:PickerFooterView Height="40"/>
</sfPicker:SfPicker.FooterView>
</sfPicker:SfPicker>this.picker.FooterView.Height= 40;
Footer view customization
SfPicker allows customizing the background, text, and text style of the ok and cancel buttons and the visibility of the ok button.
Background
The Header’s Background color can be customized by setting the SfPicker.HeaderView.Background property.
<sfPicker:SfPicker x:Name="picker">
<sfPicker:SfPicker.FooterView>
<sfPicker:PickerFooterView Background="#D3D3D3"/>
</sfPicker:SfPicker.FooterView>
</sfPicker:SfPicker>this.picker.FooterView.Background = Color.FromArgb("#6750A4");
Buttons customization
SfPicker enables or disables the ok button by setting the SfPicker.FooterView.ShowOkButton property to true or false. The default value of the ShowOkButton property is true. Customize the text of the ok and cancel buttons using the OkButtonText and CancelButtonText property.
<sfPicker:SfPicker x:Name="picker">
<sfPicker:SfPicker.FooterView>
<sfPicker:PickerFooterView
ShowOkButton="False"
OkButtonText="Done"
CancelButtonText="Exit"/>
</sfPicker:SfPicker.FooterView>
</sfPicker:SfPicker>this.picker.FooterView.OkButtonShow = false;
this.picker.FooterView.OkButtonText= "Done";
this.picker.FooterView.CancelButtonText= "Exit";
Footer text style
The .NET MAUI Picker control and footer TextStyle such as TextColor, FontSize, FontFamily, and FontAttributes can be customized as shown in the following code.
<sfPicker:SfPicker>
<sfPicker:SfPicker.FooterView>
<sfPicker:PickerFooterView>
<sfPicker:PickerFooterView.TextStyle>
<sfPicker:PickerTextStyle TextColor="Gray" FontSize="18" FontAttributes="Italic"/>
</sfPicker:PickerFooterView.TextStyle>
</sfPicker:PickerFooterView>
</sfPicker:SfPicker.FooterView>
</sfPicker:SfPicker>this.picker.FooterView.TextStyle = new PickerTextStyle()
{
TextColor = Colors.Gray,
FontSize = 18,
FontAttributes = FontAttributes.Italic
};
Divider color
The Footer’s DividerColor color can be customized by setting the SfPicker.FooterView.DividerColor property.
<sfPicker:SfPicker x:Name="picker">
<sfPicker:SfPicker.FooterView>
<sfPicker:PickerFooterView DividerColor="Red"/>
</sfPicker:SfPicker.FooterView>
</sfPicker:SfPicker>this.picker.FooterView.DividerColor = Colors.Red;
Perform validation with default validation button
Picker allows validation based on the OK or Cancel button by hooking into the SfPicker.OkButtonClicked and SfPicker.CancelButtonClicked In this event, from the SelectionChangedEvent argument, current selected items can be obtained.
<sfPicker:SfPicker x:Name="picker"
OkButtonClicked="SfPicker_OkButtonClicked"
CancelButtonClicked="SfPicker_CancelButtonClicked">
</sfPicker:SfPicker>this.picker.OkButtonClicked += SfPicker_OkButtonClicked;
this.picker.CancelButtonClicked += SfPicker_CancelButtonClicked;
private void SfPicker_OkButtonClicked(object sender, EventArgs e)
{
//// Perform any operation.
}
private void SfPicker_CancelButtonClicked(object sender, EventArgs e)
{
//// Perform any operation.
}Selection view customization
Customize the picker selection view by using the SelectionView property of the SfPicker.
Background and selection shape customization
In the SfPicker control, the corner radius, stroke, background and padding can be customized by setting the CornerRadius, Stroke, Background and Padding properties in the PickerSelectionView.
<picker:SfPicker x:Name="picker" >
<picker:SfPicker.SelectionView >
<picker:PickerSelectionView CornerRadius="10" Stroke="#36454F" Padding="10, 5, 10, 5" Background="#808080" />
</picker:SfPicker.SelectionView>
</picker:SfPicker>SfPicker picker = new SfPicker();
picker.SelectionView = new PickerSelectionView()
{
CornerRadius = 10,
Stroke = Color.FromArgb("#36454F"),
Pading = new Thickness(10, 5, 10, 5),
Background = Color.FromArgb("#808080"),
};
this.Content = picker;