How to change the Font/TextBlock Color of the Tab .

[henrrymoraes83]

Hi Nick Polyak,

It's not a issue, but a technical question.

Firstly, I would like to thank you for the contribution of knowledge and content that you make to the software development community. Much of my learning on Avalonia came from reading the articles you published on the CodeProject website.

And thanks also for the new release of NP.UniDock for Avalonia 11.

I'm trying to customize the colors of the Np.UniDock Tab to support Dark and Light themes, I put the code below in my Window AXAML file and I was able to change the background color, but I was unable to change the Font/TextBlock Color of the Tab .

How to change the Font/TextBlock Color of the Tab , I mean, change the Foreground?

 <Window.Styles>

      <!-- Tab line color -->
      <Style Selector="np|TabbedDockGroup[IsFullyActive=True]">
          <Setter Property="TabSeparatorBackground"
              Value="#7092BE"/>
          <!--{StaticResource StatusBarBackground}-->
      </Style>

      <!-- Background color of current Tab -->
      <Style Selector="np|DockTabItem.Dock[IsActive=True]">
          <!-- ??? -->
          <Setter Property="Background"
                  Value="{StaticResource DockSelectedBrush}"/>
      </Style>
  </Window.Styles>

How to change the color of the two fonts/TexBlock, from the active tab and the one that is not?

[henrrymoraes83]

I made the change directly in the DataTemplate but it changes the color of all TextBoxs, it does not differentiate between the Tab that is active and that is not.

<DataTemplate x:Key="StockHeaderDataTemplate">
    <TextBlock Text="{Binding Path=Symbol, StringFormat='Symbol: \{0\}'}" Foreground="LightSlateGray" FontWeight="Bold" >
    </TextBlock>
</DataTemplate>

I would like to put the font color of the active tab in different colors than this one.

[npolyak]

Sorry for the delay answering - I have a full time job and essentially can only work on my own projects Sundays and during my vacation time. I'll check it tomorrow for you. Should not be very difficult.

[npolyak]

I created a small sample for you - the selected tabs have red foreground.

[npolyak]

The for this sample is under NP.Demos.ChangeForeground.

All I had to do is to modify the App.axaml file inserting a reference to np.com/visuals xml namespace at the top:

  xmlns:np="https://np.com/visuals"

and adding a special style for selected tab:

<Style Selector="np|DockTabItem.Dock[IsSelected=True]">
        <Setter Property="Foreground"
                Value="Red"/>
</Style>

at the end of App.axaml Styles section. It is important that this style will be after the StyleInclude for DockStyles.axaml so that it will override whatever is in defined in that file.

[npolyak]

please tell me if this works for you

[npolyak]

Pleasure :)

Please star the NP.Avi.UniDock repository if you have not done so yet.

[henrrymoraes83]

Worked perfectly. Thank you so much!! Worked perfectly. Thank you so much!!

<Style Selector="np|DockTabItem.Dock[IsSelected=True]">
        <Setter Property="Foreground"
                Value="Red"/>
</Style>

<Style Selector="np|DockTabItem.Dock[IsSelected=False]">
        <Setter Property="Foreground"
                Value="Green"/>
</Style>

[npolyak]

You are very welcome!