Issues with TabControl Highlighting

JackM · 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.

    <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>

                        <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>

So far we've tried the following:

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.

08 Mar 2024, 12:27

Hi,

For a TabControl that uses ItemsSource, TabItems are automatically created by the TabControl for each item in the source collection, and it assigns the style set in ItemContainerStyle property, so this is where you have set your custom TabItem style:

<TabControl x:Name="BuildingTabs" 
  ItemsSource="{Binding BuildMenuContext.buildingTabs}" 
  ItemContainerStyle="{StaticResource CastlesTabItem}" 
  IsSynchronizedWithCurrentItem="True" 
  TabStripPlacement="Bottom" 
  HorizontalAlignment="Center" 
  Width="1920" 
  Height="500" 
  Margin="100,0,0,0" 
  VerticalAlignment="Bottom"/>

Could you try that?

JackM · 08 Mar 2024, 12:58

Hey There,

Thank you for the swift response!

That does indeed to have been part of the issue, the visual bugs with interaction are fixed!

However to make it work I had to temporarily hardcode some values into the style, mainly the width and height as they'd be enormous otherwise. Also the text seems to be missing, looking at the logs this is a binding issue which I assume is now due to the overriding of the ItemContainerStyle so the bindings now need to be set differently?

Ideally I'd prefer to template bind the size & text so this style could be used elsewhere but that appears to be the last issue.

Here's where the xaml is now, we're not 100% sure where the bindings would be handled at this point so any last pointers on that would be greatly appreciated, thanks again.

                        <TabControl 
                            x:Name="BuildingTabs" 
                            ItemsSource="{Binding BuildMenuContext.buildingTabs}"
                            ItemContainerStyle="{StaticResource CastlesTabItem}"
                            IsSynchronizedWithCurrentItem="True" 
                            TabStripPlacement="Bottom" 
                            HorizontalAlignment="Center" 
                            Width="1920" Height="500" 
                            Margin="100,0,0,0" 
                            VerticalAlignment="Bottom"
                            Background="Transparent">
                            <TabControl.ItemTemplate>
                                <DataTemplate>
                                    <TabItem
                                        Header="{Binding Path=label}"/>
                                </DataTemplate>
                            </TabControl.ItemTemplate>

JackM · 08 Mar 2024, 16:55

Hey All,

I've managed to fix this by binding the value necessary this directly in the style, thanks again for such a swift turn around, greatly appreciated.

11 Mar 2024, 11:25

Just for reference for other users, in the ItemTemplate you shouldn't put a TabItem, as I explained above the TabItem is automatically created by the TabControl when using ItemsSource.

So either you use a TextBlock in the TabItem template and bind its text directly to the appropriate item property (whithout using an ItemTemplate):

<TextBlock x:Name="LabelText" Style="{StaticResource CastlesText}" Text="{Binding label}"
  HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"
  FontSize="35" Foreground="White"/>

Or you use a ContentPresenter in the TabItem template, and define an ItemTemplate to show the contents of the TabItem header:

<ContentPresenter ContentSource="Header"/>

<TabControl.ItemTemplate>
  <DataTemplate>
    <TextBlock Style="{StaticResource CastlesText}" Text="{Binding label}"
      HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"
      FontSize="35" Foreground="White"/>
  </DataTemplate>
</TabControl.ItemTemplate>

Glad to be helpful.

Issues with TabControl Highlighting Topic is solved

Issues with TabControl Highlighting

Re: Issues with TabItem highlighting when unecessary

Re: Issues with TabControl Highlighting

Re: Issues with TabControl Highlighting

Re: Issues with TabControl Highlighting

Who is online