Рисование сетки изображений с помощью WPF

вы можете написать собственный пользовательский элемент управления (на основе холста, панели и т. д...) и переопределить OnRender, например:

   public class BigGrid : Canvas
    {
        private const int size = 3; // do something less hardcoded

        public BigGrid()
        {
        }

        protected override void OnRender(DrawingContext dc)
        {
            Pen pen = new Pen(Brushes.Black, 0.1);

            // vertical lines
            double pos = 0;
            int count = 0;
            do
            {
                dc.DrawLine(pen, new Point(pos, 0), new Point(pos, DesiredSize.Height));
                pos += size;
                count++;
            }
            while (pos < DesiredSize.Width);

            string title = count.ToString();

            // horizontal lines
            pos = 0;
            count = 0;
            do
            {
                dc.DrawLine(pen, new Point(0, pos), new Point(DesiredSize.Width, pos));
                pos += size;
                count++;
            }
            while (pos < DesiredSize.Height);

            // display the grid size (debug mode only!)
            title += "x" + count;
            dc.DrawText(new FormattedText(title, CultureInfo.InvariantCulture, FlowDirection.LeftToRight, new Typeface("Arial"), 20, Brushes.White), new Point(0, 0));
        }

        protected override Size MeasureOverride(Size availableSize)
        {
            return availableSize;
        }
    }

Я могу успешно рисовать и изменять размер сетки 400x400 с помощью этого на ноутбуке y (а не на соревновательной машине...).

есть более причудливые и лучшие способы сделать это (используя StreamGeometry на DrawingContext), но это, по крайней мере, хороший тестовый верстак.

конечно, вам придется переопределить методы HitTestXXX.

продолжая с Canvas подход, похоже, если бы вы могли быстро нарисовать линии сетки, вы могли бы опустить все пустые квадраты и резко уменьшить общее количество элементов на экране, в зависимости от плотности того, что вы делаете. В любом случае, чтобы быстро нарисовать линии сетки, вы можете использовать DrawingBrush такой:

<Grid>
    <Grid.Background>
        <DrawingBrush x:Name="GridBrush" Viewport="0,0,20,20" ViewportUnits="Absolute" TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush="#CCCCCC">
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0,0 20,1"/>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                    <GeometryDrawing Brush="#CCCCCC">
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0,0 1,20"/>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Grid.Background>
</Grid>

что приводит к этому эффекту:

Я думаю, вам будет трудно иметь дело с таким количеством элементов, если только небольшое число было видно Виртуализирующее управление Canvas здесь может помочь,но это помогает только при прокрутке. Чтобы иметь столько ячеек, видимых одновременно, вам, вероятно, придется так или иначе рисовать растровое изображение.

вот пример, когда VisualBrush ячейки выложен плиткой, а затем каждая ячейка переключается с помощью OpacityMask. Подход ниже довольно аккуратный, как только один нужен пиксель в клетке; элементы могут быть любого размера и не требует сложного кода блитирование содержимое ячейки в растровое изображение.

образец создает сетку 1000 * 1000, и есть 3 типа ячеек, если вам нужно только два, код может быть упрощен дальше, и многие петли удалены. Обновления были быстрыми (3 мс для 200*200, 100 мс для 1k*1k), прокрутка работает так, как ожидалось, и добавление масштабирования не должно быть слишком сложным.

<Window ... >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25*" />
            <RowDefinition Height="286*" />
        </Grid.RowDefinitions>
        <Button Click="Button_Click" Content="Change Cells" />
        <ScrollViewer Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Auto">
        <Grid x:Name="root" MouseDown="root_MouseDown" />
    </ScrollViewer>
    </Grid>
</Window>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        Loaded += new RoutedEventHandler(MainWindow_Loaded);
    }

    const int size = 1000, elementSize = 20;
    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        var c = new[] { Brushes.PowderBlue, Brushes.DodgerBlue, Brushes.MediumBlue};
        elements = c.Select((x, i) => new Border
        {
            Background = x,
            Width = elementSize,
            Height = elementSize,
            BorderBrush = Brushes.Black,
            BorderThickness = new Thickness(1),
            Child = new TextBlock
            {
                Text = i.ToString(),
                HorizontalAlignment = HorizontalAlignment.Center
            }
        }).ToArray();

        grid = new int[size, size];

        for(int y = 0; y < size; y++)
        {
            for(int x = 0; x < size; x++)
            {
                grid[x, y] = rnd.Next(elements.Length);
            }
        }

        var layers = elements.Select(x => new Rectangle()).ToArray();

        masks = new WriteableBitmap[elements.Length];
        maskDatas = new int[elements.Length][];

        for(int i = 0; i < layers.Length; i++)
        {

            layers[i].Width = size * elementSize;
            layers[i].Height = size * elementSize;

            layers[i].Fill = new VisualBrush(elements[i])
            {
                Stretch = Stretch.None,
                TileMode = TileMode.Tile,
                Viewport = new Rect(0,0,elementSize,elementSize),
                ViewportUnits = BrushMappingMode.Absolute

            };

            root.Children.Add(layers[i]);

            if(i > 0) //Bottom layer doesn't need a mask
            {
                masks[i] = new WriteableBitmap(size, size, 96, 96, PixelFormats.Pbgra32, null);
                maskDatas[i] = new int[size * size];

                layers[i].OpacityMask = new ImageBrush(masks[i]);
                RenderOptions.SetBitmapScalingMode(layers[i], BitmapScalingMode.NearestNeighbor);
            }
        }

        root.Width = root.Height = size * elementSize;

        UpdateGrid();
    }

    Random rnd = new Random();

    private int[,] grid;
    private Visual[] elements;
    private WriteableBitmap[] masks;
    private int[][] maskDatas;

    private void UpdateGrid()
    {
        const int black = -16777216, transparent = 0;
        for(int y = 0; y < size; y++)
        {
            for(int x = 0; x < size; x++)
            {
                grid[x, y] = (grid[x, y] + 1) % elements.Length;

                for(int i = 1; i < maskDatas.Length; i++)
                {
                    maskDatas[i][y * size + x] = grid[x, y] == i ? black : transparent;
                }
            }
        }

        for(int i = 1; i < masks.Length; i++)
        {
            masks[i].WritePixels(new Int32Rect(0, 0, size, size), maskDatas[i], masks[i].BackBufferStride, 0);
        }
    }


    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var s = Stopwatch.StartNew();
        UpdateGrid();
        Console.WriteLine(s.ElapsedMilliseconds + "ms");

    }

    private void root_MouseDown(object sender, MouseButtonEventArgs e)
    {
        var p = e.GetPosition(root);

        int x = (int)p.X / elementSize;
        int y = (int)p.Y / elementSize;

        MessageBox.Show(string.Format("You clicked X:{0},Y:{1} Value:{2}", x, y, grid[x, y]));
    }
}

Если вы хотите, чтобы ячейки были одинакового размера, я думаю, что UniformGrid может лучше всего подойти. Таким образом, вам не придется беспокоиться о настройке размеров в коде.

Если вы реализуете, я был бы очень заинтересован в результатах.

Я предлагаю вам написать пользовательскую панель для этого, написание этого может быть простым, так как вам просто нужно переопределить методы MeasureOverride и ArrangeOverride. На основе no строк / столбцов вы можете выделить доступный размер для каждой ячейки. Это должно дать вам лучшую производительность, чем сетка, также если вы хотите оптимизировать ее еще больше, вы также можете реализовать виртуализацию на панели.

Я сделал это таким образом, когда мне пришлось создать матрицу рулона, которая должна отображать некоторый текст информация вместо изображений и количество строк/столбцов менялись. Вот пример того, как написать пользовательскую панель

http://blogs.msdn.com/b/dancre/archive/2005/10/02/476328.aspx

Дайте мне знать, если вы хотите, чтобы я поделился кодом, который я написал с вами.

собираюсь сделать несколько предположений:

1. используйте подход холста.
2. отключить тестирование хитов на холсте, чтобы держите mouseover CPU от сойти с ума.
3. отслеживание изменений отдельно от пользовательский интерфейс. Только изменить заливку свойство для элементов, которые имеют изменены с момента последнего обновления. Я предполагая, что медленные обновления из-за обновления тысяч UI элементы и последующие перерисовка всего.