UWPでスクロールビューワのアニメーションを添付する依存関係のプロパティ

Question

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

} 

である私は、あなたが原因でWindowsランタイムXAML実装の既存の制限のためのカスタム添付プロパティをアニメーション化することはできませんanyting

Answer 1

を欠場します。 XAML添付プロパティのアニメーションセクションをMSDN documentに表示してください。

あなたのケースでは、カスタムusercontrolを作成し、このusercontrolの依存関係プロパティを定義することができます。次に、この依存関係プロパティをアニメートすることができます。

このプロパティのPropertyChangedCallbackハンドラメソッドでは、ScrollViewerのHorizo​​ntalofsetを変更できます。

詳細については、私の次のサンプルコードを参照してください：

<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を有効にする必要があることに注意してください、そうでない場合は、お使いください。アニメーションは機能しません。