Question

我希望能够在leftmousebuttondown上填充带动画的矩形（稍后将更改为在加载时运行）。

根据传递的数据（每行数据一个矩形）将我的矩形绘制到后面的代码中的画布上

目前他们充满了静态图像，但我希望这个Fill是一个动画，如果可以的话，我想要一个微调器。

我是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。如果您需要有关实施的更多详细信息，请与我们联系。迟到只需添加新控件而不是矩形。

Silverlight - 在鼠标单击时填充带动画的矩形

1 个答案: