介紹：
Blend for visual studio 與 visual studio 是有區別的 兩者雖然是IDEA 但是專注的方向是不同的，前者是專注UI後者專注業務邏輯，當然你要用blend for visual studio 去開發也行，不過blend for visual studio在UI上面是能體現出強大的優勢，尤其是在WPF的動畫上，你可以不用寫程式碼就能做出動畫來 就如製作Flash動畫一樣 你可以對動畫的每一幀都能進行精確的控制，好了廢話不多說 我們來實操
使用方法：
開啟blend for visual studio（就以2019為例子）
建立新專案
給專案命名（我們就以載入動畫為例子進行學習使用）
建立完成後的主介面是這個樣子的：
我們這時看到的主要五個板塊就如我圖上框出來的：
1：解決方案是當前的專案
2：資產為當前專案之預設提供給你的一下能是用的基礎控制元件
3：狀態（本人沒試用過，可以自己嘗試摸索）
4：觸發器，就是幫你完成一系列動作的事件（本人是這麼理解的）。下圖右上角即為建立觸發器的按鈕
5：資料（暫時我們用不到）
實現Loading動畫：
1：給Window個背景色 #7F1F1F1F
2：給Grid中加入一個圓 大小為10 圓角為5的Border，Grid大小給100，讓Border以Grid的中心點進行旋轉位移快捷鍵為Ctrl+滑鼠左鍵（點選圓點進行拖動，拖到Grid的中心上，如紅色的框框中），此時你對Border進行旋轉即為以Grid的中心點進行旋轉
3：建立觸發器，點選觸發器進行新增，由於我們這時初始化載入動畫那麼我們對於的屬性為Loaded
4：由於我是作用在Window頁面那麼我們設定Window的Loaded屬性讓其載入就進行動畫
5：上圖為有三個框框從左往右依次對於的東西為 Window（當前控制元件）、屬性（當前控制元件的屬性）、建立關鍵幀按鈕（即為你看到的新增新操作）
6：點選建立關鍵幀（新增新操作）按鈕，此時系統提示你沒有要開始或控制的情節提要，將建立一個。此時我們點選確定按鈕即可
7：此時系統介面會出現一個皮膚如圖，一個是物件個時間線一個是時間線錄製已開啟
8：我們開始拖動物件個事件線中的黃線（0~1~2~3~指的是以秒為單位的關鍵幀時間線，我們將其拖到2的位置，同時設定當前的Border圓的旋轉角度為360度
9：由於我們需要當前的圓持續旋轉我們需要將Storyboard的RepeatBehavior屬性設定為Forever，代表是無限制旋轉
10：啟動當前專案你會發現你的圓已經在無限制的旋轉（此時你離你的載入動畫還差點善後，我們要讓你的動畫更加順滑有動畫的感覺我們需要多加幾個圓）
11：再加上四個圓（為了偷懶 我將其命名為border——border4，大家不要學我，好好命名）
12：我們Copy DoubleAnimationUsingKeyFrames 這一塊程式碼 跟別對應於每個控制元件（border——border4），對於的屬性為 Storyboard.TargetName，他的值為（border——border4）
13：為了讓我們的圓不一起旋轉，我們給個時間差，每個間隔一毫秒，在DoubleAnimationUsingKeyFrames中設定BeginTime="0:0:0.1" 每個DoubleAnimationUsingKeyFrames依次累加如border2對應的為BeginTime="0:0:0.2"
14：啟動專案集合看到好看的載入動畫啦
原始碼為：
<Window.Resources>
<Storyboard x:Key="OnLoaded1" RepeatBehavior="Forever" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0:0:0.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border1">
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border2">
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0:0:0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border3">
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border4">
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="OnLoaded1_BeginStoryboard" Storyboard="{StaticResource OnLoaded1}"/>
</EventTrigger>
</Window.Triggers>
<Grid Width="100" Height="100">
<Border x:Name="border" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border x:Name="border1" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border x:Name="border2" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border x:Name="border3" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border x:Name="border4" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Grid>
備註：程式碼和教材提供學習，不允許拿去CSDN混分，本人最討厭這種人 盜竊別人的勞動成功，鄙視 (#‵′)凸