mobilecontrols-devexpress-dot-xamarinforms-dot-navigation-dot-tabitem-d3c27d42.md
Gets or sets the item header width when TabView.HeaderPanelPosition is set to Top or Bottom.
Namespace : DevExpress.XamarinForms.Navigation
Assembly : DevExpress.XamarinForms.Navigation.dll
NuGet Package : DevExpress.XamarinForms.Navigation
public TabItemLength HeaderWidth { get; set; }
| Type | Description |
|---|---|
| TabItemLength |
The width of the item header when TabView.HeaderPanelPosition is set to Top or Bottom.
|
Note that the Tab View computes item header size differently for various HeaderPanelPositions:
|
Position
|
Width
|
Height
| | --- | --- | --- | |
Top , Bottom
|
Actual Item Header Width
|
| |
Left , Right
|
|
Actual Item Header Height
|
Note that the Tab View calculates actual values as follows:
The Actual Item Header Width is equal to TabItem.HeaderWidth if it does not equal HeaderItemLength.Default; otherwise, the actual width equals TabView.ItemHeaderWidth.
The Actual Item Header Height is equal to TabItem.HeaderHeight if it does not equal HeaderItemLength.Default; otherwise, the actual width equals TabView.ItemHeaderHeight.
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.
| |
|
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.
| |
HeaderWidth
|
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