Can't seem to style TabBarItem

[cyraid]

Hi guys! The below XAML just doesn't seem to work for the TabBarItems. What would I be doing wrong?

<utu:TabBar x:Name="mainToolBar" CornerRadius="0"
            HorizontalAlignment="Left" VerticalAlignment="Top" 
            Orientation="Vertical">

  <utu:TabBar.Resources>
    <Style TargetType="utu:TabBarItem">
      <Setter Property="Width" Value="36" />
      <Setter Property="Height" Value="36" />
      <Setter Property="Margin" Value="0,0,0,2" />
      <Setter Property="Padding" Value="2,2,2,2" />
      <Setter Property="FontSize" Value="32" />
      <Setter Property="Background" Value="Red" />
    </Style>
  </utu:TabBar.Resources>

</utu:TabBar>

If I were to change the TargetType to say, "FontIcon" (which exists inside the TabBarItem) it seems to have an effect, but I'm not wanting to select the 'FontIcon', but rather each 'TabBarItem'.

Note: utu was defined with: xmlns:utu="using:Uno.Toolkit.UI", and works 'cause TabBar works, etc. :)

[cyraid]

Also when I do set the style (via code), it seems like TabBar (in Windows at least, with Fluent) seems to have a MinHeight set to 64. Is there a way I can set MinHeight on TabBar to auto? Or remove it? Because it seems to set the height of TabBar to MinHeight.

Because MinHeight is 64:

If I set TabBar's height to 108, it looks like:

Is the Height of TabBar in this case not derived from it's items?

[kazo0]

@cyraid if you were to change it from utu:TabBar.Resources to utu:TabBar.ItemContainerStyle, are you seeing your changes reflected?

<utu:TabBar x:Name="mainToolBar" CornerRadius="0"
            HorizontalAlignment="Left" VerticalAlignment="Top" 
            Orientation="Vertical">

  <utu:TabBar.ItemContainerStyle>
    <Style TargetType="utu:TabBarItem">
      <Setter Property="Width" Value="36" />
      <Setter Property="Height" Value="36" />
      <Setter Property="Margin" Value="0,0,0,2" />
      <Setter Property="Padding" Value="2,2,2,2" />
      <Setter Property="FontSize" Value="32" />
      <Setter Property="Background" Value="Red" />
    </Style>
  </utu:TabBar.ItemContainerStyle>

</utu:TabBar>

With that I am seeing:

If I remove the Setters for Width and Height from that TabBarItem style I get the default sizes:

The TabBarItems will always try to stretch to fit the space it is given. You would need to ensure that the available size for the tabbar will be enough to show the entire content of the items. It does seem like there may be a bug with the TabBarItem layout panel logic. So if I were to wrap the entire TabBar in a StackPanel, without setting any Heights or MinHeights I am seeing:

Which does not seem to make sense, it should be able to measure the items with enough space for the content to display. I will log this as an issue in the Toolkit repo

[cyraid]

Thank you for looking into this for me! :)