amwx / FluentAvalonia

Control library focused on fluent design and bringing more WinUI controls into Avalonia
MIT License
1.05k stars 97 forks source link

TabView border disappears when there is a single tab only #552

Closed cricketthomas closed 3 months ago

cricketthomas commented 7 months ago

Describe the bug When using the TabView component, the border to the right of the tab disappears if there is just one item in the TabView list. Not sure if this is intentional or not, it can easily be styled. That being said, the right border arc does disappear when the tab is empty.

<Style Selector="ui|TabView /template/ ContentPresenter">
      <Setter Property="BorderBrush">
          <Setter.Value>
              <SolidColorBrush Opacity="1" Color="{DynamicResource TabViewBorderBrush}" />
          </Setter.Value>
      </Setter>
      <Setter Property="BorderThickness" Value="0,0,0,1" />
  </Style>

Border visible on multiple tabs: image

Border gone when there's a single tabview item:

image

Desktop/Platform:

amwx commented 7 months ago

Definitely a bug, probably missing a resource somewhere. WinUI: image

robloo commented 7 months ago

The border is also missing in your first image.

image

The issue appears to be that this part of the border is part of the non-selected tab style itself.

cricketthomas commented 7 months ago

It also seems to be the same with front of the tab missing the border if you add margin to the front of the tabs or whitespace with TabStripHeader=" ". I've been trying to fix it in the source, but I am really new to Avalonia. image

amwx commented 7 months ago

Issue has been fixed*

image

Two issues: 1- Avalonia for some reason won't render a 1px height Border, so that wasn't even rendering. Rectangle works fine, so these elements were changed to that (which may even be a perf benefit). 2- Avalonia's ItemsPresenter doesn't support Header and Footer like WinUI does, and so I ignored them. Turns out its kind of needed to fill some gaps, so I've docked the ItemsPresenter in a DockPanel. This shouldn't cause any issues now as this is essentially the same thing as WinUI and TabView doesn't support virtualization right now anyway.

Fix is now in the 2.1 branch

robloo commented 7 months ago

Avalonia for some reason won't render a 1px height Border, so that wasn't even rendering. Rectangle works fine, so these elements were changed to that (which may even be a perf benefit).

Hm, hope I didn't break that. Will keep an eye on it.

cricketthomas commented 7 months ago

Thank you for the fix! Quick question, the border left seems to be different color FA than it is on WinUI but only on dark mode? It's the most unimportant thing but i just noticed it between dark mode and light mode. It almost seems like a WinUi quirk too where the border at the top is slightly lighter than the sides. I am still looking for the resource to style and I can open a PR when I find it (if acceptable or appropriate).

FluentAvaloniaUI 2.1.0-preview2 image

WinUI

image

robloo commented 7 months ago

I noticed a darker border in Expander too. I also noticed the CalendarDatePicker symbol icon is now black. Was going to look into this more later but it may be an Avalonia 11.1 issue.