C# Bitmap drawing using graphics

Question

I'm writing function in C# which can draw random data to bitmap image. Actually it looks work but its image is looks has gradation effect and tried to disable this but couldn't make it.

What I want to draw is 'A' but I got 'B'.

'A'

'B'

How can I draw image like a 'A', not 'B'?

Below is my code...

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace BitmapTest
{
    public partial class Form1 : Form
    {
        Bitmap btImg = null;
        Graphics g = null;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            btImg = new Bitmap(4, 4);

            g = Graphics.FromImage(btImg);
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.Low;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            int width = 4, height = 4;

            //random number
            Random rand = new Random();

            //create random pixels
            for (int y = 0; y < height; y++)
            {
                for (int x = 0; x < width; x++)
                {
                    //generate random ARGB value
                    int a = rand.Next(256);
                    int r = rand.Next(256);
                    int g = rand.Next(256);
                    int b = rand.Next(256);

                    //set ARGB value
                    btImg.SetPixel(x, y, Color.FromArgb(a, r, g, b));
                }
            }

            Rectangle rt = new Rectangle(0, 0, width, height);
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.Low;
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.None;
            g.DrawImageUnscaledAndClipped(btImg, rt);
            g.DrawImage(btImg, 0, 0, 4, 4);
            pictureBox1.Image = btImg;

            btImg.Save("D:\\RandomImage.png");
        }
    }
}

Actually 'A' is same as 'B'. 'B' is Form image and 'A' is saved image which is same data.

Answer 1

I think you want this:

Being C# I went the object-oriented way and created a Grid object that holds the color information, and can render itself on a picture box.

Grid.cs

public class Grid
{
    static readonly Random rng = new Random();
    readonly Color[,] data;

    public Grid(int rows, int columns)
    {
        Rows=rows;
        Columns=columns;

        data = new Color[rows, columns];

        for (int i = 0; i < rows; i++)
        {
            for (int j = 0; j < columns; j++)
            {
                SetRandomColor(i, j);
            }
        }
    }

    public void SetRandomColor(int row, int column)
    {
        data[row, column] = Color.FromArgb(
            rng.Next(256),
            rng.Next(256),
            rng.Next(256),
            rng.Next(256));
    }

    public int Rows { get; }
    public int Columns { get; }

    public (int row, int column) GetCoordinates(Control target, Point point)
    {
        float wt = target.ClientSize.Width, ht = target.ClientSize.Height;
        float dx = wt/Columns, dy = ht/Rows;

        return ((int)(point.X/dx), (int)(point.Y/dy));
    }

    public Color this[int row, int column]
    {
        get => data[row, column];
        set => data[row, column]=value;
    }

    public void Render(Graphics g, Control target)
    {
        float wt = target.ClientSize.Width, ht = target.ClientSize.Height;
        float dx = wt/Columns, dy = ht/Rows;
        using (var fill = new SolidBrush(Color.Black))
        {
            for (int i = 0; i < Rows; i++)
            {
                for (int j = 0; j < Columns; j++)
                {
                    float x = i*dx, y = j*dy;

                    fill.Color = data[i, j];

                    g.FillRectangle(fill, x, y, dx, dy);
                }
            }
        }
    }

    public Bitmap GenerateBitmap(PictureBox target)
    {
        int wt = target.ClientSize.Width, ht = target.ClientSize.Height;
        Bitmap bmp = new Bitmap(wt, ht, PixelFormat.Format32bppArgb);
        Graphics g = Graphics.FromImage(bmp);
        Render(g, target);
        return bmp;
    }
}

Next is to define a grid in the form, and interact with it. For fun when you left-click on a square it changes color. When you right-click on the image it saves it to a file.

Form1.cs

public partial class Form1 : Form
{
    Grid grid;
    public Form1()
    {
        InitializeComponent();
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        grid = new Grid(4, 4);

        pictureBox1.Paint += (s, ev) =>
        {
            ev.Graphics.CompositingQuality = CompositingQuality.HighQuality;
            ev.Graphics.SmoothingMode = SmoothingMode.HighQuality;
            grid.Render(ev.Graphics, pictureBox1);
        };
        pictureBox1.Resize += (s, ev) =>
        {
            pictureBox1.Invalidate();
        };

        pictureBox1.MouseClick += (s, ev) =>
        {
            if (ev.Button == MouseButtons.Left)
            {
                var (row, column)= grid.GetCoordinates(pictureBox1, ev.Location);
                grid.SetRandomColor(row, column);
                pictureBox1.Invalidate();
            }
            else if (ev.Button == MouseButtons.Right)
            {
                Bitmap bmp = grid.GenerateBitmap(pictureBox1);
                var fn = "D:\\RandomImage.png";
                bmp.Save(fn);
                MessageBox.Show($"Image saved to {fn}.");
            }
        };
    }
}