Issues with TabControl Highlighting
Posted: 08 Mar 2024, 12:11
Hey All,
We've recently updated our project from Noesis v3.1.1 -> 3.2.3 owing to needing some fixes for Android 14 and the process has largely been smooth so far, plenty of magenta appeared on stuff which was fine in 3.1.1, this was fixed by moving to more strictly styled buttons/elements that derive from the theme and that has worked well so far. The last real blocker we've come across is specifically with a tabbed menu we use in our game, this appears to be exclusive to the TabControl element children.
Our issue is that when a Tab is selected a blue line appears underneath and if input is dragged whilst another tab is selected there's a fairly nasty dark gray background that appears behind the relevant tab.
Below is the snippets of code for both the TabItem Style and the Tab Item in situ with the parent tabcontrol.
So far we've tried the following:
Thank you for taking the time to read this, any and all help is appreciated.
We've recently updated our project from Noesis v3.1.1 -> 3.2.3 owing to needing some fixes for Android 14 and the process has largely been smooth so far, plenty of magenta appeared on stuff which was fine in 3.1.1, this was fixed by moving to more strictly styled buttons/elements that derive from the theme and that has worked well so far. The last real blocker we've come across is specifically with a tabbed menu we use in our game, this appears to be exclusive to the TabControl element children.
Our issue is that when a Tab is selected a blue line appears underneath and if input is dragged whilst another tab is selected there's a fairly nasty dark gray background that appears behind the relevant tab.
Below is the snippets of code for both the TabItem Style and the Tab Item in situ with the parent tabcontrol.
Code: Select all
<Style x:Key="CastlesTabItem" TargetType="{x:Type TabItem}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Control x:Name="ForegroundSVGImage"
Template="{TemplateBinding local:PropEx.BackgroundControlImage}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Visible"
RenderTransformOrigin="0.5,0.5">
<Control.RenderTransform>
<ScaleTransform ScaleY="-1"/>
</Control.RenderTransform>
</Control>
<Control
x:Name="BackgroundSVGImage"
Template="{TemplateBinding local:PropEx.LockedBackgroundControlImage}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Visible"
RenderTransformOrigin="0.5,0.5">
<Control.RenderTransform>
<ScaleTransform ScaleY="-1"/>
</Control.RenderTransform>
</Control>
<TextBlock x:Name="LabelText"
Style="{StaticResource CastlesText}"
Text="{TemplateBinding Header}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextAlignment="Center"
FontSize="35"
Foreground="White"
RenderTransformOrigin="0.5,0.5">
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" Value="True">
<Setter TargetName="ForegroundSVGImage" Property="Visibility" Value="Visible"/>
<Setter TargetName="BackgroundSVGImage" Property="Visibility" Value="Hidden"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="LabelText" Property="TextBlock.FontWeight" Value="Bold"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" Value="False">
<Setter TargetName="ForegroundSVGImage" Property="Visibility" Value="Hidden"/>
<Setter TargetName="BackgroundSVGImage" Property="Visibility" Value="Visible"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="LabelText" Property="TextBlock.FontWeight" Value="Normal"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
Code: Select all
<TabControl
x:Name="BuildingTabs"
ItemsSource="{Binding BuildMenuContext.buildingTabs}"
IsSynchronizedWithCurrentItem="True"
TabStripPlacement="Bottom"
HorizontalAlignment="Center"
Width="1920"
Height="500"
Margin="100,0,0,0"
VerticalAlignment="Bottom">
<TabControl.ItemTemplate>
<DataTemplate>
<TabItem
Width="250"
Height="84"
Style="{StaticResource CastlesTabItem}"
Header="{Binding Path=label}"
local:PropEx.BackgroundControlImage="{StaticResource PanelTab02f}"
local:PropEx.LockedBackgroundControlImage="{StaticResource PanelTab02b}"
VerticalAlignment="Bottom">
</TabItem>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
- Setting the background of the TabItem to transparent
- Making the TabItem a button and seeing if this is exclusive to this element or not, the gray background & line highlight still appeared on the button when pressed
- Adding borders to the style and forcefully making them transparent along with the borderbrush
- Making the tabcontrol an items control and using buttons, this was a bust as we need the implicit content switching behaviour the tabcontrol provides
Thank you for taking the time to read this, any and all help is appreciated.