C#. Пишем свой ListBox. Учимся использовать градиент и наследование

И немного рекламы: играть в казино в Ореанде
Опубликовано октября 18, 2010 // C#

На сегодняшний день библиотека .NET предлагает разработчику достаточно много компонентов, которые можно легко настраивать под себя. Но, бывают моменты, когда хочется видеть чуть больше функций и возможностей. Поэтому, разработчик из Microsoft предоставляют нам возможность улучшать стандартные компоненты. И вот нам, вдруг захотелось сделать что-то свое, чтобы выглядело так, как мы хотим и функционал был нужный. Давайте вместе попробуем разработать свой ListBox (список). Немного забегая вперед я хочу показать, что у нас в итоге должно получиться:

Теперь переходим к постановке задачи. Что мы хотим реализовать:

Откройте Visual Studio и создайте проект с формой. После этого, в дерево проектов добавьте файл с классом ExListBox:

sealed class exList : ListBox
{
//...
}

Как видно из кода, мы унаследовали свой класс от стандартного ListBox и установили модификатор sealed, т.к. этот класс мы не будем проектировать как родителя для других классов.

Далее, в теле класса, записываем 

const int cornerRadius = 4; //радиус закругления
int x, y, rectWidth, rectHeight; //вспомогательные переменные для отрисовки

//конструктор класса
public ExListBox()
{
	DrawMode = DrawMode.OwnerDrawVariable;
}

Радиус закругления задается для углов прямоугольника, который будет указывать на активный элемент списка. В теле конструктора свойство компонента DrawMode следует задать как DrawMode.OwnerDrawVariable, для того, чтобы можно было самим рисовать на компоненте.

После наследование нашего класса от стандартного ListBox, мы фактически получили холст для рисования. Вот чем мы сейчас и займемся. Нам нужно перегрузить три метода класса ListBox:

Первый метод самый сложный и самый важный:

protected override void OnDrawItem(DrawItemEventArgs e)
{
	//e - элемент, с которым мы дальше и работаем
	//если текущего элемента нет или в списке нет вообще элементов,
	//значит выходить из метода
	if (e.Index <= -1 || this.Items.Count == 0) return;
	//получаем текст элемента
	string s = Items[e.Index].ToString();

	//формат строки для рисования текста
	StringFormat sf = new StringFormat();
	//формат выставляем по центру
	sf.Alignment = StringAlignment.Center;
	//создаем обычную кисть с заданным цветом
	Brush solidBrush = new SolidBrush(Color.FromArgb(45, 131, 218));
	//создаем кисть с градиентом по вертикали
	Brush gradientBrush = new LinearGradientBrush(e.Bounds, Color.FromArgb(121, 187, 255), Color.FromArgb(65, 151, 238), LinearGradientMode.Vertical);
	//теперь определяем какой элемент сейчас нужно отрисовать
	if ((e.State & DrawItemState.Focus) == 0) //если не активный
	{
		//заполняем прямоугольник выбранным цветом
		e.Graphics.FillRectangle(new SolidBrush(SystemColors.Window), e.Bounds.X, e.Bounds.Y, e.Bounds.Width, e.Bounds.Height + 1);
		//рисуем картинку
		e.Graphics.DrawImage(Properties.Resources.document, e.Bounds.Width / 2 - Properties.Resources.document.Width / 2, e.Bounds.Top);
		//пишем текст
		e.Graphics.DrawString(s, Font, new SolidBrush(SystemColors.WindowText), new RectangleF(0, e.Bounds.Y + 56, e.Bounds.Width, 16), sf);
	}
	else //если активный
	{
		//создаем путь который повторит контур с закругленными углами
		GraphicsPath gfxPath = new GraphicsPath();
		//определяем координаты элемента в списке
		//т.к. для каждого элемента они разные
		x = e.Bounds.X;
		y = e.Bounds.Y;
		//также определяем его ширину и высоту
		rectWidth = e.Bounds.Width - 2;
		rectHeight = e.Bounds.Height;
		#region Рисуем прямоугольник с закругленными углами
		gfxPath.AddLine(x + cornerRadius, y, x + rectWidth - (cornerRadius * 2), y);
		gfxPath.AddArc(x + rectWidth - (cornerRadius * 2), y, cornerRadius * 2, cornerRadius * 2, 270, 90);
		gfxPath.AddLine(x + rectWidth, y + cornerRadius, x + rectWidth, y + rectHeight - (cornerRadius * 2));
		gfxPath.AddArc(x + rectWidth - (cornerRadius * 2), y + rectHeight - (cornerRadius * 2), cornerRadius * 2, cornerRadius * 2, 0, 90);
		gfxPath.AddLine(x + rectWidth - (cornerRadius * 2), y + rectHeight, x + cornerRadius, y + rectHeight);
		gfxPath.AddArc(x, y + rectHeight - (cornerRadius * 2), cornerRadius * 2, cornerRadius * 2, 90, 90);
		gfxPath.AddLine(x, y + rectHeight - (cornerRadius * 2), x, y + cornerRadius);
		gfxPath.AddArc(x, y, cornerRadius * 2, cornerRadius * 2, 180, 90);
		gfxPath.CloseFigure();
		e.Graphics.DrawPath(new Pen(solidBrush, 1), gfxPath);
		//закрашиваем область
		e.Graphics.FillPath(gradientBrush, gfxPath);
		gfxPath.Dispose();
		#endregion
		//картинка и текст будут над областью заливки
		//рисуем картинку
		e.Graphics.DrawImage(Properties.Resources.document, e.Bounds.Width / 2 - Properties.Resources.document.Width / 2, e.Bounds.Top);
		//и пишем текст
		e.Graphics.DrawString(s, Font, new SolidBrush(SystemColors.WindowText), new RectangleF(0, e.Bounds.Y + 56, e.Bounds.Width, 16), sf);
	}
}

Комментарии написал почти к каждой строке, поэтому, думаю, что все будет понятно.

Два оставшихся метода короткие:

//после изменения размера
protected override void OnSizeChanged(EventArgs e)
{
	//вызываем обновление компонента
	Refresh();
	base.OnSizeChanged(e);
}

//во время задания размеров элемента
protected override void OnMeasureItem(MeasureItemEventArgs e)
{
	//если это элемент
	if (e.Index > -1)
	{
		//задаем высоту
		e.ItemHeight = 70;
		//и ширину
		e.ItemWidth = Width;
	}
}

После этого вам нужно загрузить в проект картинку, которая будет отображаться на элементах списка. В моем случае это Properties.Resources.document.

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

Следующим шагом будет заполнение нашего списка элементами. Предлагаю создавать объекты и добавлять их в список на основе следующего класса:

public class Book
{
	#region Переменные
	private string title, author, pagesCount, year;

	public string Author
	{
		get { return author; }
	}

	public string PagesCount
	{
		get { return pagesCount; }
	}

	public string Year
	{
		get { return year; }
	}
	#endregion

	public Book(string title, string author, string pagesCount, string year)
	{
		this.title = title;
		this.author = author;
		this.pagesCount = pagesCount;
		this.year = year;
	}

	public override string ToString()
	{
		return title + " [" + year + "]";
	}
}

Объекты этого класса будут содержать в себе информацию о книге. Эта же информация будет отображаться на форме.

При загрузке формы загружаем данные в наш список:

private void Form1_Load(object sender, EventArgs e)
{
	lstMain.Items.Add(new Book("Идеальное отражение", "Дмитрий Казаков", "500", "2010"));
	lstMain.Items.Add(new Book("Пепельный свет", "Андрей Ливадный", "300", "2010"));
        //...
	lstMain.SelectedIndex = 0;
}

При изменении элемента списка, загружаем из него данные:

private void lstMain_SelectedIndexChanged(object sender, EventArgs e)
{
	getInfo();
}

/// <summary>
/// Получить информацию о книге
/// </summary>
private void getInfo()
{
	//распаковываем объект
	Book book = (Book)lstMain.SelectedItem;
	if (book != null)
	{
		//и получаем из него данные
		lblAuthor.Text = book.Author;
		lblPagesCount.Text = book.PagesCount;
		lblYear.Text = book.Year;
	}
}

В итоге при выделении элемента, его информация будет отображаться на форме.

К статье прилагается исходный код для более глубокого изучения.

На этом все. Удачного кодинга!

Популярность: 25%

Теги: ,

Если у вас возникли вопросы, вы можете оставить их в комментариях

Комментарии к статье

11 Ответов на “C#. Пишем свой ListBox. Учимся использовать градиент и наследование”

Оставить комментарий

(обязательно)

(обязательно)