mobilecontrols-devexpress-dot-xamarinforms-dot-navigation-dot-tabitem-2ccd35c4.md
Gets or sets the position of the icon relative to the text in the item header.
Namespace : DevExpress.XamarinForms.Navigation
Assembly : DevExpress.XamarinForms.Navigation.dll
NuGet Package : DevExpress.XamarinForms.Navigation
public Position HeaderIconPosition { get; set; }
| Type | Description |
|---|---|
| Position |
The position of the icon relative to the text in the item header.
|
Available values:
| Name | Description |
|---|---|
| Default |
Identifies the default element position.
| | Top |
An element is at the top edge of the container.
| | Bottom |
An element is at the bottom edge of the container.
| | Left |
An element is at the left edge of the container.
| | Right |
An element is at the right edge of the container.
|
The following positions are available:
|
Position
|
Sample image
|
Description
| | --- | --- | --- | |
Top
|
|
The icon is above text.
| |
Left
|
|
The icon is before text.
| |
Bottom
|
|
The icon is below text.
| |
Right
|
|
The icon is after text.
|
The following code configures a TabView‘s item according to Material Design guidelines.
<dxn:TabViewItem HeaderText="CALENDAR"
HeaderIcon="ic_calendar.png"
HeaderFontSize="14"
HeaderFontAttributes="Bold"
HeaderTextColor="#99191919"
HeaderIconColor="#99191919"
HeaderIconPosition="Top"
HeaderIconSpacing="4"
HeaderWidth="*"
HeaderMinWidth="90"
HeaderMaxWidth="360"
HeaderPadding="16,0,16,0"
HeaderVisibleElements="TextAndIcon"
SelectedHeaderTextColor="#1e88e5"
SelectedHeaderIconColor="#1e88e5"
SelectedHeaderBackgroundColor="Transparent">
<dxn:TabViewItem.Content>
<StackLayout>
<Label Text="Calendar Here"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
</StackLayout>
</dxn:TabViewItem.Content>
</dxn:TabViewItem>
The markup above uses the following properties of the TabViewItem object:
|
Property
|
Description
| | --- | --- | |
|
Gets or sets the text of the item header title.
| |
|
Gets or sets an icon the item header displays.
| |
|
Gets or sets the size of the font for the item header’s text.
| |
|
Gets or sets a value that indicates whether the font for the item header’s text is bold, italic, or neither.
| |
|
Gets or sets the color the tab item uses in the default state to paint its header text.
| |
|
Gets or sets the color the tab item uses in the default state to paint its header icon.
| |
HeaderIconPosition
|
Gets or sets the position of the icon relative to the text in the item header.
| |
|
Gets or sets spacing between the icon and the text in the item header.
| |
|
Gets or sets the item header width when TabView.HeaderPanelPosition is set to Top or Bottom.
| |
|
Gets or sets the minimum width of the item header when TabView.HeaderPanelPosition is set to Top or Bottom.
| |
|
Gets or sets the maximum width of the item header when TabView.HeaderPanelPosition is set to Top or Bottom.
| |
|
Gets or sets the inner padding of the item header.
| |
|
Gets or sets a value that specifies elements the item header shows.
| |
|
Gets or sets the color the tab item uses in the selected state to paint its header text.
| |
|
Gets or sets the color the tab item uses in the selected state to paint its header icon.
| |
|
Gets or sets the background color of the tab item header in the selected state.
| |
|
Gets or sets a view that the TabView displays in the content area when the item is selected.
|
Note
TabView contains the majority of the visual settings that TabViewItem provides. TabView’s properties simultaneously configures the appearance of all tab items the view contains.
See Also