WPF當屬性值改變時利用PropertyChanged事件來載入動畫

weixin_34015860發表於2018-09-20
事件動畫
原文:WPF當屬性值改變時利用PropertyChanged事件來載入動畫

    在我們的程式中，有時我們需要當繫結到UI介面上的屬性值發生變化從而引起資料更新的時候能夠載入一些動畫，從而使資料更新的效果更佳絢麗，在我們的程式中儘量將動畫作為一種資源放在xaml中，而不是在後臺中通過寫程式碼的這種方式來載入動畫，在我們的這篇部落格中我們儘量使用簡潔的語言來闡述這一方法。

    1 首先來看一下寫到資源中的Storyboard

<Storyboard x:Key="FadeIn">
            <DoubleAnimation Storyboard.TargetName="translateTransform" Storyboard.TargetProperty="X" From="-516" To="0">
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseIn"></CircleEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="translateTransform" Storyboard.TargetProperty="Y" From="100" To="0">
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseIn"></CircleEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

　　這裡面的translateTransform是為Canvas所定義的一個RenderTansform。

   <Canvas Grid.Row="2" x:Name="NoticeTextBlock">
         <Canvas.RenderTransform>
                <TranslateTransform x:Name="translateTransform" X="0"></TranslateTransform>
         </Canvas.RenderTransform>
         <TextBlock  Text="{Binding Path=CurrentBindingObject.Notice,Mode=TwoWay}" TextWrapping="Wrap"></TextBlock>
   </Canvas>

　　2 第二步就是如何在繫結到前臺的資料更新時載入動畫效果。首先貼出程式碼，然後再做進一步的分析。

public partial class DisplayLayer : UserControl
    {        
        public DisplayLayer()
        {
            InitializeComponent();  
            Loaded+=new RoutedEventHandler(DisplayLayer_Loaded);
        }
        private void DisplayLayer_Loaded(object sender, RoutedEventArgs e)
        {
            DisplayViewModels current = this.DataContext as DisplayViewModels;
            if (current != null)
            {
                current.CurrentBindingObject.PropertyChanged+=Current_PropertyChanged;
            }
        }

        private void Current_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Notice")
            {
                Dispatcher.Invoke(new Action(() =>
                    {
                        (TryFindResource("FadeIn") as Storyboard).Begin();
                    }));
            
            }
        
        }
    }

　　3 這裡在當前使用者控制元件載入完成後，找到繫結到前臺的DataContext物件(這裡是current.CurrentBindingObject)然後利用PropertyChanged事件來寫該事件，首先我們來看一下PropertyChangedEventArgs這個類。

 // 摘要:
    //     為 System.ComponentModel.INotifyPropertyChanged.PropertyChanged 事件提供資料。
    public class PropertyChangedEventArgs : EventArgs
    {
        // 摘要:
        //     初始化 System.ComponentModel.PropertyChangedEventArgs 類的新例項。
        //
        // 引數:
        //   propertyName:
        //     已更改的屬性的名稱。
        public PropertyChangedEventArgs(string propertyName);

        // 摘要:
        //     獲取已更改的屬性名稱。
        //
        // 返回結果:
        //     已更改的屬性的名稱。
        public virtual string PropertyName { get; }
    }

　　這裡面定義了當前類的建構函式，和獲取已更改的屬性的名稱。在我們的程式中通過e.PropertyName能夠獲取當前屬性的變化物件，這裡我們找到Notice繫結的物件，然後通過(TryFindResource("FadeIn") as Storyboard).Begin();來動態載入動畫，這種方式在WPF中應該是一種比較合理的載入動畫的方式，另外還有一個需要注意的地方是必須是在整個窗體載入完成(Loaded載入時)才能夠獲取到當前繫結的DataContext否則獲取的值為null。

相關文章