您只需要将控件限制在其边界之外即可。这可以通过使用以下任一方法来实现
<Grid x:Name="Root" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Gray">
<Grid.Clip>
<RectangleGeometry Rect="0,0,200,80" />
</Grid.Clip>
在你的 XAML(200
是宽度和80
是高度),或者
public POIButton()
{
InitializeComponent();
var visual = ElementCompositionPreview.GetElementVisual(this);
visual.Clip = visual.Compositor.CreateInsetClip();
}
在新的代码隐藏中合成API。请注意,如果控件的大小发生变化,则使用 XAML 方法时,您需要通过绑定或代码隐藏来手动更新宽度和高度,而使用 Composition 则不需要。
另外,我注意到您使用了在 UI 线程上运行的路径动画(例如EnableDependentAnimation
)。这可以替换为Ellipse
with a ScaleTransform
动画通常是推荐的方法,因为它的性能要好得多。
产生“涟漪”效应XamlLight
由于您正在针对 UWP 进行开发,因此重要的是要了解该平台可以做什么,以及实现类似效果的 UWP 方式,但仍尊重其自身的优势流畅的设计系统.
我创建了以下内容FluentButton
借助新的控制如下所示XamlLight类引入于15063
。您会注意到灯光跟随您的鼠标光标,并且在单击/点击时它会产生波纹。
第二部分由定制完成XamlLight
我称之为RippleXamlLight
,这就是它的实现方式 -
首先,创建一个继承自的类XamlLight
.
public class RippleXamlLight : XamlLight
然后,在其OnConnected
覆盖方法,创建一个SpotLight
实例和一个Vector3
将用于为灯光设置动画Offset
。它还将负责订阅指针事件,例如PointerPressed
.
protected override void OnConnected(UIElement newElement)
{
_compositor = Window.Current.Compositor;
var spotLight = CreateSpotLight();
CompositionLight = spotLight;
_lightRippleOffsetAnimation = CreateLightRippleOffsetAnimation();
SubscribeToPointerEvents();
AddTargetElement(GetId(), newElement);
...
}
}
最后,每当按下控件时就启动动画。这Offset
值由指针位置和一个提供_rippleOffsetZ
这是根据控件的大小计算的。
private void OnPointerPressed(object sender, PointerRoutedEventArgs e) =>
StartLightRippleOffsetAnimation(e.GetCurrentPoint((UIElement)sender).Position.ToVector2());
private void StartLightRippleOffsetAnimation(Vector2 position)
{
var startingPoisition = new Vector3(position, 0.0f);
_lightRippleOffsetAnimation?.InsertKeyFrame(0.0f, startingPoisition);
_lightRippleOffsetAnimation?.InsertKeyFrame(1.0f, new Vector3(position.X, position.Y, _rippleOffsetZ));
CompositionLight?.StartAnimation("Offset", _lightRippleOffsetAnimation);
}
如果我解释得不够清楚,这是完整源码供你参考。 :)