C＃Windows 10應用程序 - 畫線緩慢從X1，Y1到X2，Y2

Question

我正在努力解決這個問題，應該相當容易解決。我想簡單地爲畫布上的一條線指定X1和Y1以及X2和Y2座標，並在這些點之間畫一條線，時間爲1秒。

我的畫布名稱是cnvML，行的名稱是L1。這需要在運行時完成，所以我寧願使用C＃，但是如果我可以修改在XAML中創建的命名故事板，那很好。我假設我需要一個Storyboard，儘管我一直無法讓它工作。 以下是我已經嘗試了最後2天：

1. 沖刷谷歌的很多例子。通過更改動畫的X和Y屬性，我可以在畫布上設置線條，矩形和橢圓的動畫效果。我一直無法弄清楚如何改變線路本身的X2和Y2屬性。我已經看到了一些舊的框架的例子，但一些方法的構造函數是不同的，並且不適用於Windows 10應用程序。

2. 我曾嘗試在Blend中構建動畫，但它只適用於在設計時建立的動畫線。如果我沒有指定動畫的目標，它會給我一個錯誤。另外，在Blend中做它並不是真正以我想要的方式完成變換。如果我從時間0開始，以非常短的線條，然後在1秒，我將線條拉伸到所需的長度，它將改變線條的比例，從而改變路徑對象的明顯的筆劃厚度。

我真的很感激，如果有人能告訴我如何做到這一點，甚至可能不使用故事板。我希望它全部用C＃。命名爲cnvML的畫布將在設計時存在，但這些畫線將在運行時創建。

再一次，我想傳遞給方法X1，Y1，X2和Y2方法。然後線將被繪製並且在這兩個點之間花費1秒鐘。

謝謝， 大衛

Answer 1

免責聲明：我不WPF，所以這是從其他地方發現的例子拼湊。

使用故事板，你可以動畫X2和Y2性質是這樣的：

<Storyboard> 
     <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="X2" From="10" To="100" Duration="0:0:1.0"/> 
     <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="Y2" From="10" To="100" Duration="0:0:1.0"/> 
    </Storyboard> 

你怎麼踢的關閉是由你。我只是將它添加到按鈕控件的Button.Click事件觸發器中。

這樣做是線性內插的跨越目標屬性的時間等效，所以在這個例子在第二過程中的X1和Y1值將11和100之間平滑地變化。這將顯示從其原點（在我的測試版本中爲10,10）沿着朝向最終端點的線延伸的線的外觀100,100。

下面是我測試的完整XAML。因爲我不WPF我想到有可能是幾件事情我可以做的更好:)

<Window x:Class="AnimTest.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:AnimTest" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <Canvas HorizontalAlignment="Left" Height="300" Margin="10,10,0,0" VerticalAlignment="Top" Width="426"> 
      <Line Name="line1" X1="10" Y1="10" X2="10" Y2="10" StrokeThickness="3" Stroke="Black"/> 
     </Canvas> 
     <Button Margin="441,279,10,10"> 
      OK 
      <Button.Triggers> 
       <EventTrigger RoutedEvent="Button.Click"> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="X2" From="10" To="100" Duration="0:0:1.0"/> 
          <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="Y2" From="10" To="100" Duration="0:0:1.0"/> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Button.Triggers> 
     </Button> 
    </Grid> 
</Window> 

---

我安裝了通用的應用工具，並嘗試了一下。事實證明，與WPF相比，他們改變了Universal Apps中的很多東西，包括在XAML中拋棄了路由事件的概念。這聽起來像是一個讓很多開發者煩惱的好方法，呵呵？

所以，現在不是能給出一個唯一的XAML的答案，對WPF的工作，這裏有兩部分XAML +代碼答案通用（對W10，VS2015）：

首先XAML：

<Page 
    x:Class="UniversalApp1.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:UniversalApp1" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid.Resources> 
      <Storyboard x:Name="btnClick_SB" > 
       <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="X2" From="10" To="400" Duration="0:0:1.0" EnableDependentAnimation="True"/> 
       <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="Y2" From="10" To="400" Duration="0:0:1.0" EnableDependentAnimation="True"/> 
      </Storyboard> 
     </Grid.Resources> 
     <Canvas HorizontalAlignment="Left" Height="300" Margin="10,50,0,0" VerticalAlignment="Top" Width="426"> 
      <Line Name="line1" X1="10" Y1="10" X2="10" Y2="10" StrokeThickness="3" Stroke="Black"/> 
     </Canvas> 
     <Button Margin="441,279,10,10" Click="Button_Click">OK</Button> 
    </Grid> 
</Page> 

和代碼（的相關部分）：

private void Button_Click(object sender, RoutedEventArgs e) 
    { 
     btnClick_SB.Stop(); 
     btnClick_SB.Begin(); 
    } 

的btnClick_SB.Stop()調用確保你不調用，而它已經在運行的情節串連圖板，這是appare當然是一種會引發異常的禁止行爲。