search

unoplatform / uno

Open-source platform for building cross-platform native Mobile, Web, Desktop and Embedded apps quickly. Create rich, C#/XAML, single-codebase apps from any IDE. Hot Reload included! 90m+ NuGet Downloads!!
https://platform.uno
Apache License 2.0
8.93k stars 724 forks source link

[Skia] The focus visual is not being clipped when it should in some cases. #18319

Open ramezgerges opened 1 month ago

ramezgerges commented 1 month ago

Current behavior

Currently, the focus visual is only clipped by things like scrolling. There are edge cases where the focus visual should be clipped but it doesn't. These cases are when the element of the focus visual is being partially covered by another element in a Panel (e.g. a Grid or a Canvas). WinUI image Uno image

Surprisingly, WinUI doesn't clip the focus visual if the focused element and the element that partially covers it are direct siblings inside the panel. In other words, the following snippet on WinUI behaves like the Uno image above.

<Grid Height="110">
       <ContentControl Content="TabToMe" VerticalAlignment="Top" UseSystemFocusVisuals="true" />
       <Border Background="Green" Height="100" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
</Grid>

But, if you wrap the focus element in anything (e.g. a UserControl), WinUI clips and Uno doesn't.

<Grid Height="110">
      <UserControl>
             <ContentControl Content="TabToMe" VerticalAlignment="Top" UseSystemFocusVisuals="true" />
       </UserControl>
       <Border Background="Green" Height="100" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
</Grid>

Expected behavior

No response

How to reproduce it (as minimally and precisely as possible)

<Grid Height="110">
      <ContentPresenter>
             <ContentControl Content="TabToMe" VerticalAlignment="Top" UseSystemFocusVisuals="true" />
       </ContentPresenter>
       <Border Background="Green" Height="100" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
</Grid>

Similarly:

<Canvas Height="110">
      <UserControl>
            <ContentControl Content="TabToMe" VerticalAlignment="Top" UseSystemFocusVisuals="true" />
      </UserControl>
      <Border Canvas.Top="10" Background="Green" Height="100" Width="100" />
</Canvas>

Workaround

No response

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

No response

Affected platforms

No response

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

MartinZikmund commented 1 month ago

The clipping is incorrect in non-Skia targets as well, but it is definitely going to be more complex to fix there