Silverlight - 用鼠標點擊一個帶有動畫的矩形

Question

我希望能夠在leftmousebuttondown上使用動畫填充矩形（稍後將更改爲在加載時運行）。

我的矩形吸引到代碼畫布背後基於傳遞

（每個數據行的一個矩形）在他們充滿靜態圖像時數據，但我想這個填充是一個動畫，一個微調，如果我可以。

我對Silverlight非常陌生，不確定如何實現這一點。有人能指引我朝着正確的方向嗎？

我的代碼（部分）到目前爲止。

XAML：

<Canvas x:Name="Grid" Background="LightGray"></Canvas> 

CS：

public partial class ProductView : UserControl 
{ 
    Processing processingDialog = new Processing(); 

    private int colsRequired = 0; 
    private int rowsRequired = 0; 

    private const int minSize = 5; 

    private int cellSize = 1; 

    public ProductView() 
    { 
     InitializeComponent(); 
    } 

    public void UpdateGrid(ObservableCollection<Product> productList) 
    { 
     calculateRowsCols(productList); 
     drawGrid(productList); 
    } 

    public void calculateRowsCols(ObservableCollection<Product> productList) 
    { 
     int tileCount = productList.Count(); 
     double tileHeight = Grid.ActualHeight; 
     double tileWidth = Grid.ActualWidth; 

     if (tileCount == 0) 
      return; 

     double maxSize = Math.Sqrt((tileHeight * tileWidth)/tileCount); 

     double noOfTilesHeight = Math.Floor(tileHeight/maxSize); 

     double noOfTilesWidth = Math.Floor(tileWidth/maxSize); 

     double total = noOfTilesHeight * noOfTilesWidth; 
     cellSize = (maxSize < minSize) ? minSize : Convert.ToInt32(maxSize); 

     while ((cellSize >= minSize) && (total < tileCount)) 
     { 
      cellSize--; 
      noOfTilesHeight = Math.Floor(tileHeight/cellSize); 
      noOfTilesWidth = Math.Floor(tileWidth/cellSize); 
      total = noOfTilesHeight * noOfTilesWidth; 
     } 

     rowsRequired = Convert.ToInt32(Math.Floor(tileHeight/cellSize)); 
     colsRequired = Convert.ToInt32(Math.Floor(tileWidth/cellSize)); 
    } 

    private void drawCell(int row, int col, string label, Color fill) 
    { 
     Rectangle innertec = new Rectangle(); 
     innertec.Height = cellSize * 0.7; 
     innertec.Width = cellSize * 0.9; 
     innertec.StrokeThickness = 1; 
     innertec.Stroke = new SolidColorBrush(Colors.Black); 

     ImageBrush imageBrush = new ImageBrush(); 
     imageBrush.ImageSource = new BitmapImage(new Uri("Assets/loading.png", UriKind.Relative)); 
     innertec.Fill = imageBrush; 

     Grid.Children.Add(innertec); 
     Canvas.SetLeft(innertec, (col * cellSize) + ((cellSize - innertec.Width)/2)); 
     Canvas.SetTop(innertec, row * cellSize + 4); 

     Border productLabelBorder = new Border(); 
     Grid.Children.Add(productLabelBorder); 
     Canvas.SetLeft(productLabelBorder, col * cellSize); 
     Canvas.SetTop(productLabelBorder, row * cellSize); 

     TextBlock productLabel = new TextBlock(); 
     productLabel.Margin = new Thickness(0, innertec.Height + 5, 0, 5); 
     productLabel.TextAlignment = TextAlignment.Center; 
     productLabel.TextWrapping = TextWrapping.NoWrap; 
     productLabel.TextTrimming = TextTrimming.WordEllipsis; 
     productLabel.MaxWidth = cellSize; 
     productLabel.Height = cellSize * 0.3; 
     productLabel.Width = cellSize; 
     productLabel.Text = label; 
     productLabel.HorizontalAlignment = HorizontalAlignment.Center; 
     productLabel.VerticalAlignment = VerticalAlignment.Center; 
     productLabel.FontSize = cellSize * 0.13; 

     ToolTipService.SetToolTip(productLabel, label); 
     productLabelBorder.Child = productLabel; 

    } 

    public void drawGrid(ObservableCollection<Product> data) 
    { 
     int dataIndex = 0; 
     Grid.Children.Clear(); 

     for (int i = 0; i < rowsRequired; i++) 
     { 
      for (int j = 0; j < colsRequired; j++) 
      { 

       Product product = (dataIndex < data.Count) ? data.ElementAt(dataIndex) : null; 

       if (product != null) 
       { 
        drawCell(i, j, product.productName, Colors.White); 
       } 
       dataIndex++; 
      } 
     } 
    } 
} 

任何幫助，任何人都可以給，在正確的方向，甚至一個指針將是巨大的。

在此先感謝

Answer 1

嘗試創建自定義的控制，將封裝從矩形做想要的一切。 您可以添加新的VisualState「MouseDownState」並在xaml中執行所需的animatin。 如果您需要更多關於實施的細節，請告訴我。後期只需添加新的控件而不是矩形。