ARTICLE AD BOX
I have a custom bit of code in App.xaml that creates an override for my TabView. It is a hard style application without being referenced, which I assumed would propagate to other elements within it.
<Color x:Key="TabViewBackgroundLight">lightGrey</Color> <Color x:Key="TabViewBackgroundDark">#1f1f1f</Color> <Style TargetType="Layout" Class="TabView.Header" ApplyToDerivedTypes="True" x:Key="TabViewHeaderOverride" > <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource TabViewBackgroundLight}, Dark={StaticResource TabViewBackgroundDark}}" /> </Style> <Style TargetType="ContentView" Class="TabView.Content" > <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource TabViewBackgroundLight}, Dark={StaticResource TabViewBackgroundDark}}" /> </Style>If I write a hardcoded tab within Xaml code, then the above is properly applying the theme when tabs are switched (Basically a selected tab is a lighter color than not selected one). The style works fine. But when I am testing on adding a new tab through codebehind (programmatically) in preparation of further functionality, then the tab style does not seem to be applied.
class CreateDynamicTab(string tabName, UraniumUI.Material.Controls.TabView tabView) { string tabHeaderName = tabName; UraniumUI.Material.Controls.TabView sourceTabView = tabView; public TabItem CreateNewTab() { var testList = new List<(string var1,string var2,int value)>(); testList.Add(("variabl 1 ", "variable 2 ", 3)); testList.Add(("variabl 4 ", "variable 5 ", 6)); testList.Add(("variabl 7 ", "variable 8" , 9)); var resultMessage = new VerticalStackLayout { Spacing = 10, Padding = 10 }; foreach (var item in testList) { resultMessage.Children.Add ( new Label { Text = item.var1 + item.var2 + item.value } ); } var newTab = new TabItem { Title = "2nd Tab", Content = resultMessage }; newTab.HeaderTemplate = new DataTemplate(() => { //Create main container for header elements of tab. var headerLayout = new Microsoft.Maui.Controls.Grid { ColumnDefinitions = { new Microsoft.Maui.Controls.ColumnDefinition{ Width = new GridLength(1, GridUnitType.Star ) }, new Microsoft.Maui.Controls.ColumnDefinition { Width = GridLength.Auto} } }; //Form the Text element displayed on tab (The Label) var titleLabel = new Label { VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Start, Padding = 5 }; titleLabel.Text = tabHeaderName; //Form the Button Element on the tab for closing itself. var closeButton = new Microsoft.Maui.Controls.Button { Text = "X", HeightRequest = 25, WidthRequest = 26, Padding=1, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.End }; closeButton.Clicked += (s, e) => { sourceTabView.Tabs.Remove(newTab); }; //Add layout and button to the header element of the tab. headerLayout.Add(titleLabel); headerLayout.Add(closeButton); return headerLayout; }); return newTab; } }This is called from a small function that creates a tab, and adds it to (the only) tabview:
public void CreateNewTabViewElement() { var newTab = new CreateDynamicTab("Test Tab", TabViewElement); var createdTab = newTab .CreateNewTab(); TabViewElement.Tabs.Add(createdTab ); }All other aspects of the tab are properly formed. And all functionality is as it should be, except the style.
Just in case and to answer any questions, here is some extra info and a visual of the issue:
XAML TabView Section:
<Grid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Padding="0,0,8,8" HorizontalOptions="Fill" VerticalOptions="Fill" Style="{StaticResource BackgroundThemeOverride}" > <Border StrokeThickness="4" StrokeShape="Rectangle" Style="{StaticResource BorderBevelThemeOverride}" > <material:TabView x:Name="TabViewElement" HorizontalOptions="Fill" > <material:TabItem Title="Details" > <--- Rest is a Datagrid for the main tab with functionality and an extra blank tab made in similar manner called "Placeholder" -->Visual:
