Опубликован: 09.09.2008 | Уровень: специалист | Доступ: платный | ВУЗ: Российская международная академия туризма
Лекция 14:

Оформление интерфейса

< Лекция 13 || Лекция 14 || Лекция 15 >
Аннотация: В лекции приведен пример, демонстрирующий использование оформительских средств в разработках. Рассмотрена методика рисования и заливки графических элементов в окнах приложений

А теперь сделаем небольшую передышку и поговорим об оформительских средствах приложений.

Задача темы: изучить методику и получить навыки использования оформительских средств в разработках

Разработка: Приложение "Как я живу?" для оценки распределения своего личного времени

Состав выполняемых функций:

  • Файловые операции: нет
  • Алгоритмы: вычисление структуры распределения личного времени по 10 позициям
  • Информационно-справочные: О программе

Наращивание функциональности не предусматривается.

Защита данных – только от неквалифицированных действий пользователя.

В качестве входных данных используются программные данные с начальной структурой затрат личного времени. Выходные данные программы – графическое отображение результатов в виде гистограммы структуры данных для SmartDevice

Шаг 1. Разработка графического интерфейса

Используются две формы – одна для ввода данных, другая – для вывода. Вторая форма (добавьте в проект) предназначена для вывода диаграммы со структурой распределения личного времени и не содержит никаких элементов, так как оформляется программно. Единственное предусмотренное свойство формы Text = Вот так и живу!

Первая форма содержит 10 надписей: Работа, Учеба, Культурный отдых, Спорт, Шопинг, Хобби, Безделье, Любовь, Еда, Сон; кнопку "Очистить" и 10 полей, со следующими свойствами – таблица 13.1.

Примерный дизайн формы показан на рис.13.1

Из невидимых элементов – главное меню с опциями "Файл" и "Диаграмма". В списке опций "Файл" можно предусмотреть "Открыть", "Сохранить как" и "Выход" - процедуры уже рассматривались выше и могут быть созданы самостоятельно. Только не забудьте добавить элементы диалогов открытия и записи файлов.

Таблица 13.1. Свойства полей формы (Form1) "Как я живу?"
Свойство BackColor Свойство Text
Lime 18
255; 192; 128 16
192; 0; 0 14
192; 0; 0 12
Blue 10
128; 255; 255 8
128; 255; 128 6
Yellow 4
255; 128; 0 2
Red 10

Рис. 13.1.

Шаг 2. Добавляем библиотеки

Для Form1:

using System;
using System.Drawing;
using System.Collections;
using System.Windows.Forms;
using System.Data;
// добавляем собственную библиотеку (Add Reference -> Project)
using DigitValidateDLL;
using System.ComponentModel; // для графики
/*добавляем, если есть намерение самостоятельно разработать процедуры 
открытия, загрузки и записи исходных данных файлов диаграмм
*/
using System.IO;
using System.Xml;
	Для Form2:
using System;
using System.Drawing;
using System.Collections;
using System.ComponentModel;
using System.Windows.Forms;

Шаг 3. Добавляем переменные public class Form1 : System.Windows.Forms.Form

// объявляем глобальную переменную для использования в обоих классах 
public static string DigitValidate="0";
// добавляем массив переменных для данных диаграммы
public static int[] My_Life=new int[10];

Шаг 4. Создаем функцию проверки цифровых значений всех техстбоксов

void ValidaTextBox() {
foreach (Control NT in this.Controls)		
if (NT is TextBox)
if (NT.Text=="") {// проверка пустых значений
	NT.Text="0";
}
foreach (Control NT in this.Controls)		
if (NT is TextBox)	{// проверка цифр текстбокса
DigitValidate =NT.Text;
// подключаем библиотеку
DigitValidateDLL.Class1 DVL=new DigitValidateDLL.Class1();
if (DVL.ReturnString(DigitValidate)=="Ошибка") {
	NT.Text="0";
		}
	}			 
this.textBox10.Text="0"; // обнуляем сон
// ограничение 50 % для каждого текстбокса
foreach (Control NT in this.Controls)		
if (NT is TextBox) {
if (int.Parse(NT.Text)>=50) {
NT.Text="50";
}
}
// ограничение 100 % для суммы текстбоксов
int maxNT=0;
foreach (Control NT in this.Controls)		
if (NT is TextBox) {
if (maxNT+int.Parse(NT.Text)>=100) {
 NT.Text=((100-maxNT).ToString());
 maxNT=100;
}
else {
 maxNT=maxNT+int.Parse(NT.Text);
}
}
// Вывчисляем сон, если сумма меньше 100
maxNT=0;
foreach (Control NT in this.Controls)		
if (NT is TextBox) {
maxNT=maxNT+int.Parse(NT.Text);
}
if (maxNT<=100) {
this.textBox10.Text=(100-maxNT).ToString();
	}
}

Шаг 5. Создаем процедуры вызова функции проверки при кликании каждого из техтбоксов

private void textBox1_TextChanged_1(object sender, System.EventArgs e) {
ValidaTextBox();
}
private void textBox2_TextChanged_2(object sender, System.EventArgs e) {
ValidaTextBox();
}
private void textBox3_TextChanged(object sender, System.EventArgs e) {
ValidaTextBox();
}
private void textBox4_TextChanged(object sender, System.EventArgs e) {
ValidaTextBox();
}
private void textBox5_TextChanged(object sender, System.EventArgs e) {
ValidaTextBox();
}
private void textBox6_TextChanged(object sender, System.EventArgs e) {
ValidaTextBox();
}
private void textBox7_TextChanged(object sender, System.EventArgs e) {
ValidaTextBox();
}
private void textBox8_TextChanged(object sender, System.EventArgs e) {
ValidaTextBox();
}
private void textBox9_TextChanged(object sender, System.EventArgs e) {
ValidaTextBox();
}
private void textBox10_TextChanged(object sender, System.EventArgs e) {
// кроме десятого, так как оно результирующее
}

Шаг 6. Офрмляем дизайн Form1

Для того, чтобы программно раскрасить форму нужно в свойствах событий Form1 Paint написать имя вызываемого метода – OnPaint, для которого пишем процедуру:

private void OnPaint 
 (object sender, System.Windows.Forms.PaintEventArgs e) {
this.CreateGraphics();// создаем графический объект
Graphics g = e.Graphics; 
SolidBrush brush = new SolidBrush(Color.Green);
Pen pen = new Pen(Color.Blue); // красим в голубой цвет
g.DrawRectangle(pen,5,5,ClientRectangle.Width - 10, 
ClientRectangle.Height - 10); // рисуем рамочку формы 
}

Шаг 7. Создаем диаграмму в Form2

Также как и в Form1, загрузке графики предшествует определение имени вызываемого события, кстати, тоже OnPaint:

private void OnPaint
 (object sender, System.Windows.Forms.PaintEventArgs e) {
// считываем значения
this.CreateGraphics();
Graphics g = e.Graphics;
SolidBrush brush = new SolidBrush(Color.Red);
SolidBrush brush1 = new SolidBrush(Color.Orange);
SolidBrush brush2 = new SolidBrush(Color.Yellow);
SolidBrush brush3 = new SolidBrush(Color.Green);
SolidBrush brush4 = new SolidBrush(Color.Blue);
SolidBrush brush5 = new SolidBrush(Color.DarkBlue);
SolidBrush brush6 = new SolidBrush(Color.DarkViolet);
SolidBrush brush7 = new SolidBrush(Color.DarkRed);
SolidBrush brush8 = new SolidBrush(Color.DarkOrange);
SolidBrush brush9 = new SolidBrush(Color.Olive);
// вычисляем высоту графика и 10 на нижнюю границу
int My_High=ClientRectangle.Height-10;
Pen pen = new Pen(Color.Blue);
Font font = new Font("Arial",10,0);
g.DrawString(Form1.My_Life[0].ToString()+" - сон",font,brush,130,190);
g.DrawString(Form1.My_Life[1].ToString()+" - еда",font,brush1,130,170);
g.DrawString(Form1.My_Life[2].ToString()+" - любовь",font,brush2,130,150);
g.DrawString(Form1.My_Life[3].ToString()+" - безделье",font,brush3,130,130);
g.DrawString(Form1.My_Life[4].ToString()+" - хобби",font,brush4,130,110);
g.DrawString(Form1.My_Life[5].ToString()+" - шопинг",font,brush5,130,90);
g.DrawString(Form1.My_Life[6].ToString()+" - спорт",font,brush6,130,70);
g.DrawString(Form1.My_Life[7].ToString()+" - культпросвет", font, brush7, 
130,50);
g.DrawString(Form1.My_Life[8].ToString()+" - учеба",font,brush8,130,30);
g.DrawString(Form1.My_Life[9].ToString()+" - работа",font,brush9,130,10);
Font My_font = new Font("Arial",15,0);
g.DrawString("100 % !",My_font,brush7,140,220);
// Рамка
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height-10);
g.FillRectangle(brush,5,5,ClientRectangle.Width/2, ClientRectangle.Height-10);
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height - 10-
	Form1.My_Life[0]*My_High/100);
g.FillRectangle(brush1,5,5,ClientRectangle.Width/2, ClientRectangle.Height - 10-
	Form1.My_Life[0]*My_High/100);
// 2 Нижняя полоса
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height - 10-
	(Form1.My_Life[0]+Form1.My_Life[1])*My_High/100);
g.FillRectangle(brush2,5,5,ClientRectangle.Width/2, ClientRectangle.Height -10- 
	(Form1.My_Life[0]+Form1.My_Life[1])*My_High/100);
// 3 Нижняя полоса
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height -10-
(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2])*My_High/100);
g.FillRectangle(brush3,5,5,ClientRectangle.Width/2, ClientRectangle.Height -10- 
(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2])*My_High/100);
// 4 Нижняя полоса
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height - 10-
(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3])*My_High/100);
g.FillRectangle(brush4,5,5,ClientRectangle.Width/2, ClientRectangle.Height -10- 
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3])*My_High/100);
// 5 Нижняя полоса
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height - 10-
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4])*My_High/100);
g.FillRectangle(brush5,5,5,ClientRectangle.Width/2, ClientRectangle.Height -10- 
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4])*My_High/100);
// 6 Нижняя полоса
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height - 10-
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4]+Form1.My_Life[5])*
My_High/100);
g.FillRectangle(brush6,5,5,ClientRectangle.Width/2, ClientRectangle.Height -10- 
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4]+Form1.My_Life[5])*
My_High/100);
// 7 Нижняя полоса
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height - 10-
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4]+Form1.My_Life[5]+
Form1.My_Life[6])*My_High/100);
g.FillRectangle(brush7,5,5,ClientRectangle.Width/2, ClientRectangle.Height -10- 
(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4]+Form1.My_Life[5]+
Form1.My_Life[6])*My_High/100);
// 8 Нижняя полоса
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height - 10-
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4]+Form1.My_Life[5]+
Form1.My_Life[6]+Form1.My_Life[7])*My_High/100);
g.FillRectangle(brush8,5,5,ClientRectangle.Width/2, ClientRectangle.Height -10- 
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4]+Form1.My_Life[5]+
Form1.My_Life[6]+Form1.My_Life[7])*My_High/100);
// 9 Нижняя полоса
g.DrawRectangle(pen,5,5,ClientRectangle.Width/2, ClientRectangle.Height - 10-
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4]+Form1.My_Life[5]+
Form1.My_Life[6]+Form1.My_Life[7]+Form1.My_Life[8])*
My_High/100);
g.FillRectangle(brush9,5,5,ClientRectangle.Width/2, ClientRectangle.Height -10- 
	(Form1.My_Life[0]+Form1.My_Life[1]+Form1.My_Life[2]+
Form1.My_Life[3]+Form1.My_Life[4]+Form1.My_Life[5]+
Form1.My_Life[6]+Form1.My_Life[7]+Form1.My_Life[8])*
My_High/100);
// 10 Нижняя полоса
}
13.1.

Шаг 8. Создаем процедуру очистки текстбоксов в Form1

Для кнопки "Очистить" пишем:

private void button1_Click_1(object sender, System.EventArgs e) {
foreach (Control NT in this.Controls)		
if (NT is TextBox) {
NT.Text="0"; }		
}

Шаг 9. Создаем процедуру вызова диаграммы для просмотра

Для опции главного меню "Диаграмма" пишем:

private void menuItem6_Click(object sender, System.EventArgs e) {
int i=0;
foreach (Control NT in this.Controls)		
if (NT is TextBox) {// считываем значения
My_Life[i]=int.Parse(NT.Text); // пишем в массив
i=i+1;
}
Form AnForm=new Form2();
AnForm.Show();
}
< Лекция 13 || Лекция 14 || Лекция 15 >
jo jojo
jo jojo
Нидерланды
Ярославй Грива
Ярославй Грива
Россия, г. Санкт-Петербург