Browse Source

Set default refresh indicator content in control theme (#14443)

* Set default refresh indicator content in control theme

* Apply composition animation to any RefreshVisualizer content, not just path icons

* move refresh indicator initializing to OnPropertyChanged
fixes/macos-uri-handling
Emmanuel Hansen 3 years ago
committed by GitHub
parent
commit
b8eec42167
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 112
      src/Avalonia.Controls/PullToRefresh/RefreshVisualizer.cs
  2. 1
      src/Avalonia.Themes.Fluent/Accents/BaseResources.xaml
  3. 19
      src/Avalonia.Themes.Fluent/Controls/RefreshVisualizer.xaml
  4. 19
      src/Avalonia.Themes.Simple/Controls/RefreshVisualizer.xaml

112
src/Avalonia.Controls/PullToRefresh/RefreshVisualizer.cs

@ -129,70 +129,58 @@ namespace Avalonia.Controls
if (_root != null)
{
_content = Content as Control;
if (_content == null)
OnOrientationChanged();
if (_root != null && _content != null)
{
_content = new PathIcon()
{
Height = DefaultIndicatorSize,
Width = DefaultIndicatorSize,
Name = "PART_Icon"
};
_root.Children.Insert(0, _content);
_content.VerticalAlignment = Layout.VerticalAlignment.Center;
_content.HorizontalAlignment = Layout.HorizontalAlignment.Center;
_content.Loaded += (s, e) =>
{
var composition = ElementComposition.GetElementVisual(_content);
UpdateContent();
}
}
}
if(composition == null)
return;
private void OnContentLoaded(object? s, RoutedEventArgs e)
{
if (_content == null)
return;
var composition = ElementComposition.GetElementVisual(_content);
var compositor = composition.Compositor;
composition.Opacity = 0;
if (composition == null) return;
var smoothRotationAnimation
= compositor.CreateScalarKeyFrameAnimation();
smoothRotationAnimation.Target = "RotationAngle";
smoothRotationAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue", new LinearEasing());
smoothRotationAnimation.Duration = TimeSpan.FromMilliseconds(100);
var compositor = composition.Compositor;
composition.Opacity = 0;
var opacityAnimation
= compositor.CreateScalarKeyFrameAnimation();
opacityAnimation.Target = "Opacity";
opacityAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue", new LinearEasing());
opacityAnimation.Duration = TimeSpan.FromMilliseconds(100);
var smoothRotationAnimation = compositor.CreateScalarKeyFrameAnimation();
smoothRotationAnimation.Target = "RotationAngle";
smoothRotationAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue", new LinearEasing());
smoothRotationAnimation.Duration = TimeSpan.FromMilliseconds(100);
var offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
offsetAnimation.Target = "Offset";
offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue", new LinearEasing());
offsetAnimation.Duration = TimeSpan.FromMilliseconds(150);
var opacityAnimation = compositor.CreateScalarKeyFrameAnimation();
opacityAnimation.Target = "Opacity";
opacityAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue", new LinearEasing());
opacityAnimation.Duration = TimeSpan.FromMilliseconds(100);
var scaleAnimation
= compositor.CreateVector3KeyFrameAnimation();
scaleAnimation.Target = "Scale";
scaleAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue", new LinearEasing());
scaleAnimation.Duration = TimeSpan.FromMilliseconds(100);
var offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
offsetAnimation.Target = "Offset";
offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue", new LinearEasing());
offsetAnimation.Duration = TimeSpan.FromMilliseconds(150);
var animation = compositor.CreateImplicitAnimationCollection();
animation["RotationAngle"] = smoothRotationAnimation;
animation["Offset"] = offsetAnimation;
animation["Scale"] = scaleAnimation;
animation["Opacity"] = opacityAnimation;
var scaleAnimation = compositor.CreateVector3KeyFrameAnimation();
scaleAnimation.Target = "Scale";
scaleAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue", new LinearEasing());
scaleAnimation.Duration = TimeSpan.FromMilliseconds(100);
composition.ImplicitAnimations = animation;
var animation = compositor.CreateImplicitAnimationCollection();
animation["RotationAngle"] = smoothRotationAnimation;
animation["Offset"] = offsetAnimation;
animation["Scale"] = scaleAnimation;
animation["Opacity"] = opacityAnimation;
UpdateContent();
};
SetCurrentValue(ContentProperty, _content);
}
else
{
RaisePropertyChanged(ContentProperty, null, Content, Data.BindingPriority.Style, false);
}
}
OnOrientationChanged();
composition.ImplicitAnimations = animation;
UpdateContent();
}
@ -229,6 +217,7 @@ namespace Avalonia.Controls
visualizerVisual.Offset = IsPullDirectionVertical ?
new Vector3D(visualizerVisual.Offset.X, 0, 0) :
new Vector3D(0, visualizerVisual.Offset.Y, 0);
visual.Offset = visualizerVisual.Offset;
_content.InvalidateMeasure();
break;
case RefreshVisualizerState.Interacting:
@ -353,14 +342,27 @@ namespace Avalonia.Controls
}
else if (change.Property == ContentProperty)
{
if (change.OldValue is Control c)
{
c.Loaded -= OnContentLoaded;
_root?.Children.Remove(c);
}
_content = change.NewValue as Control;
if (_content != null)
{
_content.Loaded += OnContentLoaded;
}
if (_root != null && _content != null)
{
_root.Children.Insert(0, _content);
_content.VerticalAlignment = Layout.VerticalAlignment.Center;
_content.HorizontalAlignment = Layout.HorizontalAlignment.Center;
}
UpdateContent();
UpdateContent();
}
}
else if (change.Property == OrientationProperty)
{

1
src/Avalonia.Themes.Fluent/Accents/BaseResources.xaml

@ -13,6 +13,7 @@
<Thickness x:Key="TextControlThemePadding">10,6,6,5</Thickness>
<sys:Double x:Key="IconElementThemeHeight">20</sys:Double>
<sys:Double x:Key="IconElementThemeWidth">20</sys:Double>
<sys:Double x:Key="RefreshVisualizerIndicatorSize">24</sys:Double>
<Thickness x:Key="ButtonPadding">8,5,8,6</Thickness>
<!-- Override system shape defaults -->

19
src/Avalonia.Themes.Fluent/Controls/RefreshVisualizer.xaml

@ -11,19 +11,20 @@
Value="{DynamicResource RefreshVisualizerBackground}"/>
<Setter Property="Foreground"
Value="{DynamicResource RefreshVisualizerForeground}"/>
<Setter Property="Content">
<Template>
<PathIcon Name="PART_Icon"
Data="M18.6195264,3.31842271 C19.0080059,3.31842271 19.3290603,3.60710385 19.3798716,3.9816481 L19.3868766,4.08577298 L19.3868766,6.97963208 C19.3868766,7.36811161 19.0981955,7.68916605 18.7236513,7.73997735 L18.6195264,7.74698235 L15.7256673,7.74698235 C15.3018714,7.74698235 14.958317,7.40342793 14.958317,6.97963208 C14.958317,6.59115255 15.2469981,6.27009811 15.6215424,6.21928681 L15.7256673,6.21228181 L16.7044011,6.21182461 C13.7917384,3.87107476 9.52212532,4.05209336 6.81933829,6.75488039 C3.92253872,9.65167996 3.92253872,14.34832 6.81933829,17.2451196 C9.71613786,20.1419192 14.4127779,20.1419192 17.3095775,17.2451196 C19.0725398,15.4821573 19.8106555,12.9925923 19.3476248,10.58925 C19.2674502,10.173107 19.5398064,9.77076216 19.9559494,9.69058758 C20.3720923,9.610413 20.7744372,9.88276918 20.8546118,10.2989121 C21.4129973,13.1971899 20.5217103,16.2033812 18.3947747,18.3303168 C14.8986373,21.8264542 9.23027854,21.8264542 5.73414113,18.3303168 C2.23800371,14.8341794 2.23800371,9.16582064 5.73414113,5.66968323 C9.05475132,2.34907304 14.3349409,2.18235834 17.8523166,5.16953912 L17.8521761,4.08577298 C17.8521761,3.66197713 18.1957305,3.31842271 18.6195264,3.31842271 Z"
Width="{DynamicResource RefreshVisualizerIndicatorSize}"
Height="{DynamicResource RefreshVisualizerIndicatorSize}"
/>
</Template>
</Setter>
<Setter Property="Template">
<ControlTemplate>
<Grid Name="PART_Root"
MinHeight="80"
Background="{TemplateBinding Background}">
<Grid.Styles>
<Style Selector="PathIcon#PART_Icon">
<Setter Property="Data"
Value="M18.6195264,3.31842271 C19.0080059,3.31842271 19.3290603,3.60710385 19.3798716,3.9816481 L19.3868766,4.08577298 L19.3868766,6.97963208 C19.3868766,7.36811161 19.0981955,7.68916605 18.7236513,7.73997735 L18.6195264,7.74698235 L15.7256673,7.74698235 C15.3018714,7.74698235 14.958317,7.40342793 14.958317,6.97963208 C14.958317,6.59115255 15.2469981,6.27009811 15.6215424,6.21928681 L15.7256673,6.21228181 L16.7044011,6.21182461 C13.7917384,3.87107476 9.52212532,4.05209336 6.81933829,6.75488039 C3.92253872,9.65167996 3.92253872,14.34832 6.81933829,17.2451196 C9.71613786,20.1419192 14.4127779,20.1419192 17.3095775,17.2451196 C19.0725398,15.4821573 19.8106555,12.9925923 19.3476248,10.58925 C19.2674502,10.173107 19.5398064,9.77076216 19.9559494,9.69058758 C20.3720923,9.610413 20.7744372,9.88276918 20.8546118,10.2989121 C21.4129973,13.1971899 20.5217103,16.2033812 18.3947747,18.3303168 C14.8986373,21.8264542 9.23027854,21.8264542 5.73414113,18.3303168 C2.23800371,14.8341794 2.23800371,9.16582064 5.73414113,5.66968323 C9.05475132,2.34907304 14.3349409,2.18235834 17.8523166,5.16953912 L17.8521761,4.08577298 C17.8521761,3.66197713 18.1957305,3.31842271 18.6195264,3.31842271 Z">
</Setter>
</Style>
</Grid.Styles>
</Grid>
Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter>
</ControlTheme>

19
src/Avalonia.Themes.Simple/Controls/RefreshVisualizer.xaml

@ -13,19 +13,20 @@
Value="{DynamicResource RefreshVisualizerBackground}"/>
<Setter Property="Foreground"
Value="{DynamicResource RefreshVisualizerForeground}"/>
<Setter Property="Content">
<Template>
<PathIcon Name="PART_Icon"
Data="M18.6195264,3.31842271 C19.0080059,3.31842271 19.3290603,3.60710385 19.3798716,3.9816481 L19.3868766,4.08577298 L19.3868766,6.97963208 C19.3868766,7.36811161 19.0981955,7.68916605 18.7236513,7.73997735 L18.6195264,7.74698235 L15.7256673,7.74698235 C15.3018714,7.74698235 14.958317,7.40342793 14.958317,6.97963208 C14.958317,6.59115255 15.2469981,6.27009811 15.6215424,6.21928681 L15.7256673,6.21228181 L16.7044011,6.21182461 C13.7917384,3.87107476 9.52212532,4.05209336 6.81933829,6.75488039 C3.92253872,9.65167996 3.92253872,14.34832 6.81933829,17.2451196 C9.71613786,20.1419192 14.4127779,20.1419192 17.3095775,17.2451196 C19.0725398,15.4821573 19.8106555,12.9925923 19.3476248,10.58925 C19.2674502,10.173107 19.5398064,9.77076216 19.9559494,9.69058758 C20.3720923,9.610413 20.7744372,9.88276918 20.8546118,10.2989121 C21.4129973,13.1971899 20.5217103,16.2033812 18.3947747,18.3303168 C14.8986373,21.8264542 9.23027854,21.8264542 5.73414113,18.3303168 C2.23800371,14.8341794 2.23800371,9.16582064 5.73414113,5.66968323 C9.05475132,2.34907304 14.3349409,2.18235834 17.8523166,5.16953912 L17.8521761,4.08577298 C17.8521761,3.66197713 18.1957305,3.31842271 18.6195264,3.31842271 Z"
Width="24"
Height="24"
/>
</Template>
</Setter>
<Setter Property="Template">
<ControlTemplate>
<Grid Name="PART_Root"
MinHeight="80"
Background="{TemplateBinding Background}">
<Grid.Styles>
<Style Selector="PathIcon#PART_Icon">
<Setter Property="Data"
Value="M18.6195264,3.31842271 C19.0080059,3.31842271 19.3290603,3.60710385 19.3798716,3.9816481 L19.3868766,4.08577298 L19.3868766,6.97963208 C19.3868766,7.36811161 19.0981955,7.68916605 18.7236513,7.73997735 L18.6195264,7.74698235 L15.7256673,7.74698235 C15.3018714,7.74698235 14.958317,7.40342793 14.958317,6.97963208 C14.958317,6.59115255 15.2469981,6.27009811 15.6215424,6.21928681 L15.7256673,6.21228181 L16.7044011,6.21182461 C13.7917384,3.87107476 9.52212532,4.05209336 6.81933829,6.75488039 C3.92253872,9.65167996 3.92253872,14.34832 6.81933829,17.2451196 C9.71613786,20.1419192 14.4127779,20.1419192 17.3095775,17.2451196 C19.0725398,15.4821573 19.8106555,12.9925923 19.3476248,10.58925 C19.2674502,10.173107 19.5398064,9.77076216 19.9559494,9.69058758 C20.3720923,9.610413 20.7744372,9.88276918 20.8546118,10.2989121 C21.4129973,13.1971899 20.5217103,16.2033812 18.3947747,18.3303168 C14.8986373,21.8264542 9.23027854,21.8264542 5.73414113,18.3303168 C2.23800371,14.8341794 2.23800371,9.16582064 5.73414113,5.66968323 C9.05475132,2.34907304 14.3349409,2.18235834 17.8523166,5.16953912 L17.8521761,4.08577298 C17.8521761,3.66197713 18.1957305,3.31842271 18.6195264,3.31842271 Z">
</Setter>
</Style>
</Grid.Styles>
</Grid>
Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter>
</ControlTheme>

Loading…
Cancel
Save