Columns are not aligning with the ColumnHeaders

[DevTKSS]

Description:

A clear and concise description of what the bug is.

• the Column headers are not aligning with the actual Columns.
• The Dsp usage seems to introduce conflicts with the WinUI.TableView Filter Flyout. The left Button adheres to the Dsp defined colors and stylings, but the right one is Fluent styled with Fluent blue...

Steps to Reproduce:

Steps to reproduce the behavior.
Use Uno App with Material + Dsp + Mvvm

<tv:TableView ItemsSource="{Binding Items}"
              SelectedItem="{Binding SelectedPerson, Mode=TwoWay}"
              HorizontalAlignment="Center"
              VerticalAlignment="Top"
              Grid.Row="1"
              SelectionMode="Single"
              SelectionUnit="Row"
              IsReadOnly="True"
              CanSortColumns="True"
              CanReorderItems="False"
              CanDrag="False"
              AutoGenerateColumns="False"
              AllowDrop="False"
              CanDragItems="False"
              CanResizeColumns="True"
              CanFilterColumns="True">
<tv:TableView.Columns>
  <tv:TableViewTextColumn Header="Name"
                          Binding="{Binding Name}"
                          Width="2*" />
  <tv:TableViewTextColumn Header="City"
                          Binding="{Binding City}"
                          Width="*" />
  <tv:TableViewTextColumn Header="Country"
                          Binding="{Binding Country}"
                          Width="*" />
  <tv:TableViewTextColumn Header="Status"
                          Binding="{Binding Status}"
                          Width="*" />
</tv:TableView.Columns>
</tv:TableView>

public partial record Person(
    [property:Key]string Name,
    int Age,
    [property:Key]string City,
    [property: Key] string Country,
    string Status,
    string BehaviorSummary,
    string Wish,
    DeliveryInfo Delivery);

Expected behavior:

A clear and concise description of what you expected to happen.

The Columns should align with their Headers and the styling of the Buttons should adhere to the Dsp defined values and not be different

Screenshots:

If applicable, add screenshots to help explain your problem.

Environment:

• Package Version: 1.3.4

• WinAppSDK Version: 1.8 (if I would build to Windows target)

• Uno.Sdk 6.4.42

• csproj:

  <Project Sdk="Uno.Sdk">
    <PropertyGroup>
      <TargetFrameworks>net10.0-desktop;net10.0-android;net10.0-ios;net10.0-browserwasm;net10.0-windows10.0.26100</TargetFrameworks>
      <OutputType>Exe</OutputType>
      <UnoSingleProject>true</UnoSingleProject>
      <UnoFeatures>
          Material;
          Dsp;
          Hosting;
          Toolkit;
          Logging;
          Mvvm;
          Configuration;
          Http;
          Serialization;
          Localization;
          Authentication;
          Navigation;
          ThemeService;
          SkiaRenderer;
      </UnoFeatures>
    </PropertyGroup>
    <ItemGroup>
      <PackageReference Include="WinUI.TableView" />
    </ItemGroup>
  </Project>

[w-ahmad]

TableView doesn't support Material theme yet, see #172.

[DevTKSS]

@w-ahmad okay and the colum alignment with their headers? Is this material too, or what is the cause for this?

[w-ahmad]

@w-ahmad okay and the colum alignment with their headers? Is this material too, or what is the cause for this?

Yes, the material theme overrides the button style, resulting in the button in the top right corner of the TableView becoming larger.

[DevTKSS]

@w-ahmad okay. Could you tell which Resources Keys are used for the elements that are:

1. causing this issue on my side, which seem to have a override or Resource coming from Material Theme
2. showed in fluent theme (the Button especially) so I could align them via my own ResourcesDictionary

I would miss a kind of lookup for this.

My idea as a workaround would be, to kind of "reset" or apply missing ones via Lightweight Styling the next *.Resources Property providing Control level above the WinUI.TableView Control as Workaround until Material might got better Support for this Control or to fit the styling of it generally in my app.

For example, my considered Options:

1. Choice: apply this local Style override in a Border- or Grid-Control, if they have such Property (not checked by now)
2. Alternative: nest the WinUI.TableView it in its own Page/ContentControl/UserControl using Uno.Extensions.Navigation with Areas in the Page, where I want it to show up in the end

Thanks!