UWP试图用附加的依赖属性来设置滚动查看器的动画

Question

Am试图在UWP中设置滚动查看器的水平偏移动画，但动画目标无法识别附加属性。

<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);
}
}

我想念吗

Answer 1

由于Windows运行时XAML实现的现有限制，无法为自定义附加属性设置动画。请参阅MSDN文档中的"设置XAML附加属性的动画"部分。

对于您的情况，您可以创建一个自定义用户控件，并为该用户控件定义一个依赖属性。然后，可以设置该依赖属性的动画。

在该属性的PropertyChangedCallback处理程序方法中，您可以更改ScrollViewer的Horizontaltalofset。

有关详细信息，请参阅我的以下代码示例：

<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，否则，您的动画将无法工作。