UWP trying to animate scrollviewer with attached dependency propert

Question

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>

here is the c# code

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

}

do i miss anyting

Answer 1

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.

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

}

Please note that you would need to enable EnableDependentAnimation, if not, your animation will not work.