UWP 尝试为带有附加依赖属性的滚动查看器设置动画 [英] UWP trying to animate scrollviewer with attached dependency propert

问题描述

我正在尝试在 UWP 中为滚动查看器的水平偏移设置动画.但是动画目标没有识别附加的属性.

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 的 Horizo​​ntalofset.

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 尝试为带有附加依赖属性的滚动查看器设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！