Silverlight - 마우스로 애니메이션으로 사각형을 채우기

Question

leftmousebuttownown에서 애니메이션으로 직사각형을 채울 수 있기를 원합니다 (나중에로드시 실행되도록 변경됩니다).

내 사각형 뒤에 그들은 정적 이미지로 가득 순간

(데이터의 행 당 하나 개의 사각형을) 전달되는 데이터를 기반으로 코드에서 캔버스에 그려하지만 난 수 있도록이 채우기를 원하는 애니메이션, 스피너를 할 수 있다면 가능합니다.

저는 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을 추가 할 수 있습니다. 구현에 대한 자세한 내용이 필요하면 알려주십시오. 늦게 단순히 사각형 대신 새 컨트롤을 추가하십시오.