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。 如果您需要更多关于实施的细节，请告诉我。后期只需添加新的控件而不是矩形。