I'm having a little bit of trouble with an Avalonia TabStrip. I want to style it without tab headers, the background color from a bound value and not too high. The whole idea is that this tab strip will show a "history of health checks" (green, orange, red). When the user selects a tab, the details for that specific health check will be shown.

Most of that I've already figured out, but two things still bother me:

1. When I hover over a tab, the background color disappears
2. When I change the height to anything less than 42, the "select bar" moves into the tab instead of staying below it.

This is how it looks at the moment:

When I hover over the second tab, it changes to this:

I've tried to change this by explicitly styling the TabStripItem:pointerover, but nothing seems to have an effect. Ideally I would just have a subtle effect, like a small change in opacity.

For the second issue, I'm seeing this when I set the MaxHeight of the TabStripItem to e.g. 16:

I really would like to have this "select bar" below the tab and not inside it.

Any ideas on how to fix these issues? The relevant AXAML currently looks like this:

 <TabStrip Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="0" Padding="0"
           ItemsSource="{Binding History}" SelectedItem="{Binding SelectedHistoryItem, Mode=TwoWay}">
     
     <TabStrip.ItemTemplate>
         <DataTemplate DataType="m:ServiceHealthHistory">
             <TabItem Background="{Binding Status, Converter={StaticResource ServiceHealthColorConverter}}" 
                      Margin="0" Padding="0" Header="" MinHeight="0"/>
         </DataTemplate>
     </TabStrip.ItemTemplate>
     
     <TabStrip.ItemsPanel>
         <ItemsPanelTemplate>
             <UniformGrid Rows="1" />
         </ItemsPanelTemplate>
     </TabStrip.ItemsPanel>
     
     <TabStrip.Styles>
        
         <Style Selector="TabStripItem">
             <Setter Property="Padding" Value="2,0,0,0"/>
             <Setter Property="Margin" Value="0"/>
             <Setter Property="MinHeight" Value="0"/>
             <Setter Property="MaxHeight" Value="42"/>
         </Style>
         
         <Style Selector="TabStripItem:pointerover">
             <Setter Property="Opacity" Value="0.75" />
             <Setter Property="Background" Value="MediumVioletRed" />
             <Setter Property="Foreground" Value="MediumVioletRed" />
         </Style>

     </TabStrip.Styles>
     
 </TabStrip>

I'm having a little bit of trouble with an Avalonia TabStrip. I want to style it without tab headers, the background color from a bound value and not too high. The whole idea is that this tab strip will show a "history of health checks" (green, orange, red). When the user selects a tab, the details for that specific health check will be shown.

Most of that I've already figured out, but two things still bother me:

1. When I hover over a tab, the background color disappears
2. When I change the height to anything less than 42, the "select bar" moves into the tab instead of staying below it.

This is how it looks at the moment:

When I hover over the second tab, it changes to this:

I've tried to change this by explicitly styling the TabStripItem:pointerover, but nothing seems to have an effect. Ideally I would just have a subtle effect, like a small change in opacity.

For the second issue, I'm seeing this when I set the MaxHeight of the TabStripItem to e.g. 16:

I really would like to have this "select bar" below the tab and not inside it.

Any ideas on how to fix these issues? The relevant AXAML currently looks like this:

 <TabStrip Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="0" Padding="0"
           ItemsSource="{Binding History}" SelectedItem="{Binding SelectedHistoryItem, Mode=TwoWay}">
     
     <TabStrip.ItemTemplate>
         <DataTemplate DataType="m:ServiceHealthHistory">
             <TabItem Background="{Binding Status, Converter={StaticResource ServiceHealthColorConverter}}" 
                      Margin="0" Padding="0" Header="" MinHeight="0"/>
         </DataTemplate>
     </TabStrip.ItemTemplate>
     
     <TabStrip.ItemsPanel>
         <ItemsPanelTemplate>
             <UniformGrid Rows="1" />
         </ItemsPanelTemplate>
     </TabStrip.ItemsPanel>
     
     <TabStrip.Styles>
        
         <Style Selector="TabStripItem">
             <Setter Property="Padding" Value="2,0,0,0"/>
             <Setter Property="Margin" Value="0"/>
             <Setter Property="MinHeight" Value="0"/>
             <Setter Property="MaxHeight" Value="42"/>
         </Style>
         
         <Style Selector="TabStripItem:pointerover">
             <Setter Property="Opacity" Value="0.75" />
             <Setter Property="Background" Value="MediumVioletRed" />
             <Setter Property="Foreground" Value="MediumVioletRed" />
         </Style>

     </TabStrip.Styles>
     
 </TabStrip>

• c#
• avaloniaui
• avalonia

Share Improve this question Follow asked Mar 24 at 12:42 CameO73CameO73 10311 silver badge77 bronze badges 7

• 1 In visual tree you have weird layout TabStrip/.../TabStripItem/.../TabItem, in other words inside each TabStripItem you have TabItem. The first issue is because you are changing background of wrong element, maybe try TabItem? The second is due to that weird layout too I guess, that element is a Border called PART_SelectedPipe it has VerticalAlignment=Bottom, but I couldn't reproduce your first screenshot, because of lack of minimal reproducible example. – Sinatr Commented Mar 24 at 14:58
• I've added 5 TabItems into TabStrip in xaml and always see PART_SelectedPipe at bottom, but somewhat in the middle. This can be fixed by adding additional margin to TabItem in data template, just add Margin="0,0,0,20". Then it's somewhat below (visually). – Sinatr Commented Mar 24 at 15:01
• Tip: always press F12 and inspect VisualTree during debugging. It's an awesome way to learn and understand problems. – Sinatr Commented Mar 24 at 15:03
• Thanks for the quick responses! First of all: I made a minimal reproducible example: github/CameO73/TabStripTest. Second: I am using the F12 visual inspector, but I assumed that a TabStrip > TabStripItem > TabItem was a normal layout. If it's not, then please tell me how I can generate tabs from a collection. – CameO73 Commented Mar 24 at 15:43
• I was expecting you edit question instead of creating GitHub repository (see meta-topic regarding). Accent is always on "minimal" in minimal reproducible example. Have you tried suggested fixes? Does using TabItem in style selector solves the issue? Do you understand why? How about leaving space below TabItem for PART_SelectedPipe? Useful? Not working? What is not working? Here is suggestion to use data templates (like you do) to bind content. Typically hosted by ContentControl, not TabItem. – Sinatr Commented Mar 24 at 15:55

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 0

I now realize that my idea of the TabStrip.ItemTemplate was wrong. You only have to specify the contents of the tab (thanks Sinatr!)

The fix then becomes obvious: only specify what you want to show up in the tab contents -- in my case a simple colored rectangle. The main changes below are in the <DataTemplate> part:

<TabStrip Margin="0" Padding="0" Width="400"
          ItemsSource="{Binding History}" SelectedItem="{Binding SelectedHistoryItem, Mode=TwoWay}">

    <TabStrip.ItemTemplate>
        <DataTemplate DataType="models:ServiceHealthHistory">
            <Panel Height="16">
                <Rectangle Fill="{Binding Status}"/>
            </Panel>
        </DataTemplate>
    </TabStrip.ItemTemplate>

    <TabStrip.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1" />
        </ItemsPanelTemplate>
    </TabStrip.ItemsPanel>

    <TabStrip.Styles>

        <Style Selector="TabStripItem">
            <Setter Property="Padding" Value="2,0,0,0" />
            <Setter Property="MinHeight" Value="0" />
            <Setter Property="MaxHeight" Value="28" />
        </Style>

        <Style Selector="TabStripItem:pointerover">
            <Setter Property="Opacity" Value="0.70" />
        </Style>

    </TabStrip.Styles>

</TabStrip>

Which looks exactly as I wanted and doesn't have the weird "disappears on hover" issue anymore.