UWP尝试使用附加的依赖属性使scrollviewer动画化 [英] UWP trying to animate scrollviewer with attached dependency propert
问题描述
正在尝试为UWP中的scrollviewer的水平偏移设置动画,但是动画目标无法识别附加的属性.
Am trying to animate horizontal offset of scrollviewer in UWP.but the attached properties are not being identified by animation target.
<Grid x:Name="maingrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Storyboard x:Key="animation" x:Name="animation">
<DoubleAnimation Storyboard.TargetName="scrolviewer"
Storyboard.TargetProperty="(local:ScrollviewerBehaviour.Horizontalofset)"
Duration="0:0:1" From="0" To="80"/>
</Storyboard>
</Grid.Resources>
<Button Width="100" Height="50" Click="Button_Click_1"/>
<ScrollViewer x:Name="scrolviewer" local:ScrollviewerBehaviour.Horizontalofset="0" Width="200" Height="100" HorizontalScrollBarVisibility="Visible">
<TextBlock Text="aaaaaaaaaaaaaaaaaaaaaaaaa" FontSize="20"/>
</ScrollViewer>
</Grid>
这是C#代码
public class ScrollviewerBehaviour
{
public static readonly DependencyProperty Horizontalofsetproperty =
DependencyProperty.RegisterAttached("Horizontalofset",
typeof(double),
typeof(ScrollviewerBehaviour),
new PropertyMetadata(0,new PropertyChangedCallback(OnHorizontalofsetchanged)));
public static void SetHorizontalofset(ScrollViewer element, double value)
{
element.SetValue(Horizontalofsetproperty, value);
}
public static double GetHorizontalofset(ScrollViewer element)
{
return (double)element.GetValue(Horizontalofsetproperty);
}
public static void OnHorizontalofsetchanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
var scrollviewer = (sender as ScrollViewer);
scrollviewer.ChangeView((double)e.NewValue, scrollviewer.VerticalOffset, scrollviewer.ZoomFactor);
}
}
我想念任何东西吗
推荐答案
由于Windows运行时XAML实现的现有限制,您无法设置自定义附加属性的动画.请参阅为XAML附加属性设置动画部分. > MSDN文档.
You cannot animate a custom attached property because of an existing limitation of the Windows Runtime XAML implementation. Please see Animating XAML attached properties section in MSDN document.
对于您的情况,可以制作一个自定义用户控件并为此用户控件定义一个依赖项属性.然后,您可以为该依赖项属性设置动画.
For your case, you could make a custom usercontrol and define a dependency property for this usercontrol. Then, you could animate this dependency property.
在此属性的PropertyChangedCallback处理程序方法中,您可以更改ScrollViewer的Horizontalofset.
In this property's PropertyChangedCallback handler method, you could change ScrollViewer's Horizontalofset.
请参阅我的以下代码示例以获取详细信息:
Please refer to my following code sample for details:
<UserControl
x:Class="Appanimate.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Appanimate"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<ScrollViewer x:Name="scrolviewer" Width="200" Height="100" HorizontalScrollBarVisibility="Visible">
<TextBlock Text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" FontSize="20"/>
</ScrollViewer>
</Grid>
public sealed partial class MyUserControl1 : UserControl
{
public MyUserControl1()
{
this.InitializeComponent();
}
public double Horizontalofset
{
get { return (double)GetValue(HorizontalofsetProperty); }
set { SetValue(HorizontalofsetProperty, value); }
}
// Using a DependencyProperty as the backing store for Horizontalofset. This enables animation, styling, binding, etc...
public static readonly DependencyProperty HorizontalofsetProperty =
DependencyProperty.Register("Horizontalofset", typeof(double), typeof(MyUserControl1), new PropertyMetadata(0,PropertyChangedCallback));
public static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var distance = (d as MyUserControl1).scrolviewer.ScrollableWidth;
if (distance > (double)e.NewValue)
{
var ret = (d as MyUserControl1).scrolviewer.ChangeView((double)e.NewValue, (d as MyUserControl1).scrolviewer.VerticalOffset, (d as MyUserControl1).scrolviewer.ZoomFactor);
Debug.WriteLine(ret);
}
}
}
<Grid x:Name="maingrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Storyboard x:Key="animation" x:Name="animation">
<DoubleAnimation Storyboard.TargetName="myusercontrol"
Storyboard.TargetProperty="Horizontalofset"
Duration="0:0:1" From="0" To="80" EnableDependentAnimation="True"/>
</Storyboard>
</Grid.Resources>
<Button Width="100" Height="50" Click="Button_Click"/>
<local:MyUserControl1 x:Name="myusercontrol" Horizontalofset="0"></local:MyUserControl1>
</Grid>
private void Button_Click(object sender, RoutedEventArgs e)
{
animation.Begin();
}
请注意,您需要启用EnableDependentAnimation
,否则,动画将无法正常工作.
Please note that you would need to enable EnableDependentAnimation
, if not, your animation will not work.
这篇关于UWP尝试使用附加的依赖属性使scrollviewer动画化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!