Skip to content

Commit 0173097

Browse files
aleksandervallealeksandervalle
committed
SfTabView HeaderItemSpacing property
Introduce new property to enable customization of spacing between tab header items. Previously hardcoded to 36.
1 parent 958f07b commit 0173097

File tree

2 files changed

+93
-10
lines changed

2 files changed

+93
-10
lines changed

‎maui/src/TabView/Control/SfTabBar.cs‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ internal partial class SfTabBar : SfStackLayout, ITapGestureListener
3030

3131
// Dimension and positioning fields
3232

33-
readonly int _defaultTextPadding = 36;
3433
double _previousTabX = 0d;
3534
double _selectedTabX = 0d;
3635
double _currentIndicatorWidth = 0d;
@@ -215,6 +214,17 @@ internal partial class SfTabBar : SfStackLayout, ITapGestureListener
215214
typeof(SfTabBar),
216215
propertyChanged: OnHeaderTemplateChanged);
217216

217+
/// <summary>
218+
/// Identifies the <see cref="HeaderItemSpacing"/> bindable property.
219+
/// </summary>
220+
internal static readonly BindableProperty HeaderItemSpacingProperty =
221+
BindableProperty.Create(
222+
nameof(HeaderItemSpacing),
223+
typeof(int),
224+
typeof(SfTabBar),
225+
36,
226+
propertyChanged: OnHeaderItemSpacingChanged);
227+
218228
/// <summary>
219229
/// Identifies the <see cref="HeaderDisplayMode"/> bindable property.
220230
/// </summary>
@@ -513,6 +523,18 @@ internal DataTemplate? HeaderItemTemplate
513523
set => SetValue(HeaderItemTemplateProperty, value);
514524
}
515525

526+
/// <summary>
527+
/// Gets or sets the value that defines the spacing between header items.
528+
/// </summary>
529+
/// <value>
530+
/// It accepts int values and the default value is 36.
531+
/// </value>
532+
internal int HeaderItemSpacing
533+
{
534+
get => (int)GetValue(HeaderItemSpacingProperty);
535+
set => SetValue(HeaderItemSpacingProperty, value);
536+
}
537+
516538
/// <summary>
517539
/// Gets or sets a value that can be used to customize the corner radius of selection indicator.
518540
/// </summary>
@@ -1481,6 +1503,11 @@ void UpdateTabPadding()
14811503
CalculateTabItemsSourceWidth();
14821504
}
14831505

1506+
void UpdateTabHeaderItemSpacing()
1507+
{
1508+
CalculateTabItemWidth();
1509+
}
1510+
14841511
void AddTabViewItemFromTemplate(object? item)
14851512
{
14861513
var view = item as View;
@@ -2125,8 +2152,8 @@ void CalculateTabItemWidthForCustomMode()
21252152
if (item.Header != null)
21262153
{
21272154
Size desiredSize = item.Header.Measure((float)item.FontSize, item.FontAttributes, item.FontFamily);
2128-
double width = desiredSize.Width + _defaultTextPadding;
2129-
UpdateTabItemWidth(item, item.IsSelected ? width : _tabHeaderImageSize + _defaultTextPadding);
2155+
double width = desiredSize.Width + HeaderItemSpacing;
2156+
UpdateTabItemWidth(item, item.IsSelected ? width : _tabHeaderImageSize + HeaderItemSpacing);
21302157
}
21312158
}
21322159
}
@@ -2163,7 +2190,7 @@ void CalculateTabItemWidthForSizeToContentForItem(SfTabItem item, Size desiredSi
21632190
if (item.HeaderContent != null)
21642191
{
21652192
Size headerContentSize = item.HeaderContent.Measure(double.PositiveInfinity, double.PositiveInfinity);
2166-
width = headerContentSize.Width + _defaultTextPadding;
2193+
width = headerContentSize.Width + HeaderItemSpacing;
21672194
}
21682195
else if (item.ImageSource != null && !string.IsNullOrEmpty(item.Header))
21692196
{
@@ -2172,12 +2199,12 @@ void CalculateTabItemWidthForSizeToContentForItem(SfTabItem item, Size desiredSi
21722199
else if (item.ImageSource != null)
21732200
{
21742201
item.HeaderDisplayMode = TabBarDisplayMode.Image;
2175-
width = _tabHeaderImageSize + _defaultTextPadding;
2202+
width = _tabHeaderImageSize + HeaderItemSpacing;
21762203
}
21772204
else
21782205
{
21792206
item.HeaderDisplayMode = TabBarDisplayMode.Text;
2180-
width = desiredSize.Width + _defaultTextPadding;
2207+
width = desiredSize.Width + HeaderItemSpacing;
21812208
}
21822209
UpdateTabItemWidth(item, width);
21832210
}
@@ -2189,22 +2216,22 @@ double GetWidthForSizeToContentWithImageAndText(SfTabItem item, Size desiredSize
21892216
if (HeaderDisplayMode == TabBarDisplayMode.Image)
21902217
{
21912218
item.HeaderDisplayMode = TabBarDisplayMode.Image;
2192-
return _tabHeaderImageSize + _defaultTextPadding;
2219+
return _tabHeaderImageSize + HeaderItemSpacing;
21932220
}
21942221
else if (HeaderDisplayMode == TabBarDisplayMode.Text)
21952222
{
21962223
item.HeaderDisplayMode = TabBarDisplayMode.Text;
2197-
return desiredSize.Width + _defaultTextPadding;
2224+
return desiredSize.Width + HeaderItemSpacing;
21982225
}
21992226
else
22002227
{
22012228
if (item.ImagePosition == TabImagePosition.Left || item.ImagePosition == TabImagePosition.Right)
22022229
{
2203-
return desiredSize.Width + _defaultTextPadding + _tabHeaderImageSize + item.ImageTextSpacing;
2230+
return desiredSize.Width + HeaderItemSpacing + _tabHeaderImageSize + item.ImageTextSpacing;
22042231
}
22052232
else
22062233
{
2207-
return desiredSize.Width + _defaultTextPadding;
2234+
return desiredSize.Width + HeaderItemSpacing;
22082235
}
22092236
}
22102237
}
@@ -3496,6 +3523,8 @@ protected override void OnBindingContextChanged()
34963523

34973524
static void OnHeaderTemplateChanged(BindableObject bindable, object oldValue, object newValue) => (bindable as SfTabBar)?.UpdateItemsSource();
34983525

3526+
static void OnHeaderItemSpacingChanged(BindableObject bindable, object oldValue, object newValue) => (bindable as SfTabBar)?.UpdateTabHeaderItemSpacing();
3527+
34993528
static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue) => (bindable as SfTabBar)?.UpdateItemsSource();
35003529

35013530
static void OnSelectedIndexChanged(BindableObject bindable, object oldValue, object newValue) => (bindable as SfTabBar)?.UpdateSelectedIndex((int)newValue, (int)oldValue);

‎maui/src/TabView/Control/SfTabView.cs‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,17 @@ public partial class SfTabView : ContentView, IParentThemeElement
228228
null,
229229
propertyChanged: OnHeaderItemTemplateChanged);
230230

231+
/// <summary>
232+
/// Identifies the <see cref="HeaderItemSpacing"/> bindable property.
233+
/// </summary>
234+
public static readonly BindableProperty HeaderItemSpacingProperty =
235+
BindableProperty.Create(
236+
nameof(HeaderItemSpacing),
237+
typeof(int),
238+
typeof(SfTabView),
239+
36,
240+
propertyChanged: OnHeaderItemSpacingChanged);
241+
231242
/// <summary>
232243
/// Identifies the <see cref="ContentItemTemplate"/> bindable property.
233244
/// </summary>
@@ -1033,6 +1044,33 @@ public DataTemplate? HeaderItemTemplate
10331044
get => (DataTemplate?)GetValue(HeaderItemTemplateProperty);
10341045
set => SetValue(HeaderItemTemplateProperty, value);
10351046
}
1047+
1048+
/// <summary>
1049+
/// Gets or sets the value that defines the spacing between header items.
1050+
/// </summary>
1051+
/// <value>
1052+
/// It accepts int values and the default value is 36.
1053+
/// </value>
1054+
/// <example>
1055+
/// Here is an example of how to set the <see cref="HeaderItemSpacing"/> property.
1056+
///
1057+
/// # [XAML](#tab/tabid-1)
1058+
/// <code><![CDATA[
1059+
/// <tabView:SfTabView HeaderItemSpacing="32" />
1060+
/// ]]></code>
1061+
///
1062+
/// # [C#](#tab/tabid-2)
1063+
/// <code><![CDATA[
1064+
/// SfTabView tabView = new SfTabView();
1065+
/// tabView.HeaderItemSpacing = 32;
1066+
/// Content = tabView;
1067+
/// ]]></code>
1068+
/// </example>
1069+
public int HeaderItemSpacing
1070+
{
1071+
get => (int)GetValue(HeaderItemSpacingProperty);
1072+
set => SetValue(HeaderItemSpacingProperty, value);
1073+
}
10361074

10371075
/// <summary>
10381076
/// Gets or sets the template that is used to display the content.
@@ -1961,6 +1999,11 @@ internal void RaiseCenterButtonTappedEvent(EventArgs args)
19611999
/// </summary>
19622000
static void OnHeaderItemTemplateChanged(BindableObject bindable, object oldValue, object newValue) => (bindable as SfTabView)?.UpdateHeaderItemTemplate();
19632001

2002+
/// <summary>
2003+
/// Handles changes to the <see cref="HeaderItemTemplate"/> property.
2004+
/// </summary>
2005+
static void OnHeaderItemSpacingChanged(BindableObject bindable, object oldValue, object newValue) => (bindable as SfTabView)?.UpdateHeaderSpacing();
2006+
19642007
/// <summary>
19652008
/// Handles changes to the <see cref="ContentItemTemplate"/> property.
19662009
/// </summary>
@@ -2096,6 +2139,17 @@ void UpdateHeaderItemTemplate()
20962139
}
20972140
}
20982141

2142+
/// <summary>
2143+
/// Updates the header item spacing of the tab bar.
2144+
/// </summary>
2145+
void UpdateHeaderSpacing()
2146+
{
2147+
if (_tabHeaderContainer != null)
2148+
{
2149+
_tabHeaderContainer.HeaderItemSpacing = HeaderItemSpacing;
2150+
}
2151+
}
2152+
20992153
/// <summary>
21002154
/// Updates the content item template if both ItemsSource and ContentItemTemplate are set.
21012155
/// </summary>

0 commit comments

Comments
 (0)