我應該用不知道哪個屬性動畫

Question

我在Windows 8中創建一個信息亭應用，但在8.1分配訪問應用程序將使用它。我想爲廣告創建一個動畫。動畫的概念作爲圖像附加到此線程中。基本上會有6-10張L形圖像（右側一列&底部一排）。現在，一個極端右下角的廣告將靜止不動。列中的廣告將像HTML的選取框一樣遍歷並在那時排到行，行中的廣告將遍歷併到達列。通過這種方式，廣告將繼續以時鐘方式移動。我如何在我的C＃/ XAML應用程序中實現這一點？

請不是廣告將永遠不會在頂部或左邊顯示。該廣告是<Image /> &來源是互聯網網址。所有廣告都在ItemsControl。

Answer 1

呸，讓我們開始，我是多麼恨已經這個程序。

我們答案。

我不認爲你真的需要一個動畫。您可能會經常更換廣告。而他們的立場的簡單改變並不意味着他們的立場轉變就足夠了。

試試這個：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Rectangle Fill="White" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" Grid.RowSpan="3" /> 
    <Rectangle x:Name="Ad1" Fill="Green" Grid.Column="3" Grid.Row="3" /> 
    <Rectangle x:Name="Ad2" Fill="IndianRed" Grid.Column="0" Grid.Row="3" /> 
    <Rectangle x:Name="Ad3" Fill="Red" Grid.Column="1" Grid.Row="3" /> 
    <Rectangle x:Name="Ad4" Fill="DarkRed" Grid.Column="2" Grid.Row="3" /> 
    <Rectangle x:Name="Ad5" Fill="Pink" Grid.Column="3" Grid.Row="0" /> 
    <Rectangle x:Name="Ad6" Fill="HotPink" Grid.Column="3" Grid.Row="1" /> 
    <Rectangle x:Name="Ad7" Fill="Purple" Grid.Column="3" Grid.Row="2" /> 
</Grid> 

有了這個：

public MainPage() 
{ 
    this.InitializeComponent(); 
    var timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(1) }; 
    timer.Tick += (s, e) => Move(); 
    timer.Start(); 
} 

void Move() 
{ 
    var ads = new Rectangle[] { Ad1, Ad2, Ad3, Ad4, Ad5, Ad6, Ad7 }; 
    foreach (var item in ads) 
    { 
     var row = (int)item.GetValue(Grid.RowProperty); 
     var col = (int)item.GetValue(Grid.ColumnProperty); 
     if (row == 3) 
     { 
      if (col == 0) 
      { 
       row = 0; 
       col = 3; 
      } 
      else 
       col--; 
     } 
     else 
     { 
      if (row == 2) 
      { 
       row = 3; 
       col = 2; 
      } 
      else 
       row++; 
     } 
     item.SetValue(Grid.RowProperty, row); 
     item.SetValue(Grid.ColumnProperty, col); 
    } 
} 

而且它看起來相當不錯。

但如果你必須有動畫，試試這個。

void Move() 
{ 
    var ads = new Rectangle[] { Ad1, Ad2, Ad3, Ad4, Ad5, Ad6, Ad7 }; 
    foreach (var item in ads) 
    { 
     var row = (int)item.GetValue(Grid.RowProperty); 
     var col = (int)item.GetValue(Grid.ColumnProperty); 
     var x = item.ActualWidth; 
     var y = item.ActualHeight; 

     // bottom 
     if (row == 3) 
     { 
      // left-last 
      if (col == 0) 
      { 
       row = 0; 
       col = 3; 
       x = -x; 
       y = 0; 
      } 
      // others 
      else 
      { 
       col--; 
       x = -x; 
       y = 0; 
      } 
     } 
     // right 
     else 
     { 
      // bottom-last 
      if (row == 2) 
      { 
       row = 3; 
       col = 2; 
       x = -x; 
      } 
      else 
      { 
       row++; 
       x = 0; 
      } 
     } 

     var dr = new Duration(TimeSpan.FromSeconds(.5)); 
     var tx = item.RenderTransform = new TranslateTransform(); 

     var ax = new DoubleAnimation { To = x, Duration = dr }; 
     Storyboard.SetTarget(ax, tx); 
     Storyboard.SetTargetProperty(ax, "X"); 

     var ay = new DoubleAnimation { To = y, Duration = dr }; 
     Storyboard.SetTarget(ay, tx); 
     Storyboard.SetTargetProperty(ay, "Y"); 

     var st = new Storyboard { FillBehavior = FillBehavior.HoldEnd }; 
     st.Children.Add(ax); 
     st.Children.Add(ay); 
     st.Completed += (s, e) => 
     { 
      item.SetValue(Grid.RowProperty, row); 
      item.SetValue(Grid.ColumnProperty, col); 
      st.Stop(); 
     }; 
     st.Begin(); 
    } 
} 

祝你好運！