FluentAvalonia
FluentAvalonia copied to clipboard
Port TeachingTip
By community request in #106, this PR is a port of the WinUI TeachingTip
control.
More on the TeachingTip: https://docs.microsoft.com/en-us/windows/apps/design/controls/dialogs-and-flyouts/teaching-tip
and https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.teachingtip?view=winui-2.8
A couple of usage and dev notes for the control:
- The property
ShouldConstrainToRootBounds
is not supported on the TeachingTip in FA. That really needs to be implemented in the popup, as is done in WinUI, and it's not worth my time to try to hack the positioning logic to keep it constrained to the window. Essentially, if windowed popups are enabled this property is implicitly false, if overlay popups are used it's implicitly true. - The TeachingTip MUST be connected to the visual tree to be used. Easiest way is to declare it in Xaml. If you declare it in C#, you must attach it to the visual tree yourself.
- While most of the positioning logic from WinUI works, Avalonia popup positioning logic may still make adjustments if its opened near screen edge and may cause some misalignments from the desired
PreferredPlacement
- Thanks to the new Composition renderer, the animations have been included. However, there appears to be an issue with a couple things. Right now only the opening animation works - it seems there's a bug where only one CompositionAnimation can be applied to a given element. We also don't have ScopedBatch animations yet so I've had to get clever with waiting for animations to complete. Also note, for the best experience, Mica or Acrylic on popup windows should be disabled since that is applied to the window itself and not any of the Xaml elements.
- From above point, I'm going to look into a method to disable animations should they not be desired. Also, as the Composition Renderer is going to be Avalonia's primary renderer going forward, it is required for this control.
- There is also a slight pause the first time the TeachingTip is opened - I've noticed first time creating a popup can be quite slow in Avalonia for some reason.
- Like other popups, no shadows are present on the TeachingTip.
Still TODO:
-
Opening animation changes origin if the TeachingTip is opened more than once. -
After localization PR, add localized strings where appropriate - TeachingTip tail margin issues in certain placements
- Code cleanup
- Event args & add deferral mechanism to closing event
- [...]
Xaml:
<Panel>
<Button VerticalAlignment="Center" HorizontalAlignment="Center"
Content="Click me" Name="Target" />
<ui:TeachingTip Target="{Binding ElementName=Target}"
IsLightDismissEnabled="False"
Content="Test Content"
Title="Test Title"
Subtitle="Test subtitle"
ActionButtonContent="Action Button"
CloseButtonContent="Close Button"
PreferredPlacement="Left"
Name="TeachingTip">
<ui:TeachingTip.HeroContent>
<Border Width="100" Height="100"
Background="DarkSlateBlue">
<TextBlock Text="Hero Content"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontWeight="SemiBold"/>
</Border>
</ui:TeachingTip.HeroContent>
</ui:TeachingTip>
</Panel>
Closes #106