[Руководство] Создаем свой внешний вид окна (WinForms). C# version

[Kitsune]

> Создаем свой внешний вид окна (WinForms) <

В данной статье речь пойдет о том как придать уникальности нашему приложени и в тоже время украсить.

Конечный материал данной статьи (скрин):

• [Ссылки могут видеть только зарегистрированные пользователи. ]

Теория:

• В данной статье мы будем рассматривать самый простой пример, а именно мы немного изобретем велосипед
• Как же получить вместо обычного WinForm окна, окошко наподобе моего?
  Все очень просто. Сначала скрываем существующие оформление, потом рисуем своё. Просто, не так ли?

Практика - Дизайнер:

1. Для начала создадим новый WinForms проект
2. Затем изменим пару свойств у нашей формы:
   
   
   • FormBorderStyle = None
     Убираем стиль окна
   • Size = 400; 300
     Устанавливаем размер
   • StartPosition = CenterScreen
     Устанавливаем начальную позицию окна
   • TransparencyKey = Magneta (255; 0; 255)
     Выставляем ключ прозрачности (По скольку мы рассматриваем примитивный вариант, то речи об Alpha канале быть не может и прозрачность мы зададим как ярко фиолетовый цвет.
     Это означает, что любой пиксель на форме этого цвета будет прозрачным)
   
   
3. Разместим на форуме 3 PictureBox и выставим для них пару свойств:
   
   
   • 1ый - мы назовем pTitleBarLeft
     Location = 0; 0
     Size = 65; 24
   • 2ой - мы назовем pTitleBarCenter
     Anchor = Top, Left, Right
     Location = 65; 0
     Size = 330; 24
   • 3ий - мы назовем pTitleBarRight
     Anchor = Top, Right
     Location = 395; 0
     Size = 5; 24
   
   
   Размеры pTitleBarLeft и pTitleBarRight выставляются такие же, как и ваши картинки.
   Размер pTitleBarCenter выставляется такой, чтобы заполнить все пустое пространство между левой и правой частью.
   
   
4. После этих изменений, у нас должны быть такая картина:
   
   [Ссылки могут видеть только зарегистрированные пользователи. ]
   
   
5. Остался у нас заключительный этап в работе с дизайнером, а именно добавление ресурсов в проект.
   Под ресурсами я имею ввиду наши картинки, которые послужат нам визуальным оформлением.
   В данном проект используется всего 4 изображения:
   
   
   • buttons_normal.png - левая часть Тайтла(обычное состояние)
   • buttons_hover.png - левая часть Тайтла(активное состояние)
   • bg.png - фон центральной части(Тейл) Не путать с Тайтлом.
   • right.png - правая часть Тайтла
   
   
   Тейл* - Это вид наложения спрайтов. Смысл в том, что мы берем текустуру 1х24 (bg.png) и высталяем её как BackgroundImage.
   При отрисовке будет происходить следующее, сначала нарисуется 1 текстура, рядом другая такая же и т.д. пока все свободное место блока, в котором она рисуется не будет занято.
   
   
6. Чтобы добавить ресуры в проект, нам необходимо открывать Редактор ресурсов.
   Для этого два раза кликните по файлу: Resources.resx в обозревателе решения.
   
   [Ссылки могут видеть только зарегистрированные пользователи. ]
   
   
7. В появившемся окне, выберите закладку из выпадающего списка Images.
   
   [Ссылки могут видеть только зарегистрированные пользователи. ]
   
   
8. Перетащите файлы туда с рабочего стола или любой папки или же добавьте с помощью соседнего выпадающего списка Add resource -> Add existing file... В конечном счете у вас должно получится так:
   
   [Ссылки могут видеть только зарегистрированные пользователи. ]

Практика - Код:

1. С дизайнером мы покончили и теперь можем смело приступать к коду нашего приложения, дабы оболочка была "живой".
2. Добавим в тело класса следующий кусочек:
   

   // Свойство: для хранения заголовка окна
   public String CustomTitleText = "Leopard Style Window © 2010 TBX1n";
   // Свойство: для хранения шрифта заголовка окна
   public Font CustomTitleFont = new Font("Tahoma", 10f, FontStyle.Bold);
   
   // Свойство: флаг, зажата ли кнопка мыши, чтобы тащить окно
   private bool movingWindow = false;
   // Свойство: объект для хранения положения курсора до начала перемещения
   private Point oldCursorPosition;

3. В конструктор формы добавим следующий код:
   

   PrepairForm();
   
   // Событие: рисование формы
   this.Paint += new PaintEventHandler(Main_Paint);
   // Событие: рисование центральной части Тайтла
   pTitleBarCenter.Paint += new PaintEventHandler(pTitleBarCenter_Paint);
   // Событие: зажатие кнопки мыши на центральной части Тайтла
   pTitleBarCenter.MouseDown += new MouseEventHandler(pTitleBarCenter_MouseDown);
   // Событие: отжатие кнопки мыши на центральной части Тайтла
   pTitleBarCenter.MouseUp += new MouseEventHandler(pTitleBarCenter_MouseUp);
   // Событие: перемещение курсора по центральной части Тайтла
   pTitleBarCenter.MouseMove += new MouseEventHandler(pTitleBarCenter_MouseMove);
   // Событие: попадание курсора в левую область Тайтла (с кнопками)
   pTitleBarLeft.MouseEnter += new EventHandler(pTitleBarLeft_MouseEnter);
   // Событие: выход курсора из левой части Тайтла
   pTitleBarLeft.MouseLeave += new EventHandler(pTitleBarLeft_MouseLeave);
   // Событие: клик по левой части Тайтла
   pTitleBarLeft.MouseClick += new MouseEventHandler(pTitleBarLeft_MouseClick);

4. А рядом с конструктором опишем метод PrepairForm, который мы вызываем в конструкторе формы.
   

   private void PrepairForm()
   {
       // Устанавливаем стили окна
       SetStyle(ControlStyles.AllPaintingInWmPaint, true);
       SetStyle(ControlStyles.DoubleBuffer, true);
       SetStyle(ControlStyles.UserPaint, true);
   
       // Устанавливаем стандартные фоновые изображения для Тайтла
       pTitleBarLeft.BackgroundImage = global::VisualTweak.Properties.Resources.buttons_normal;
       pTitleBarCenter.BackgroundImage = global::VisualTweak.Properties.Resources.bg;
       pTitleBarRight.BackgroundImage = global::VisualTweak.Properties.Resources.right;
   }

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

   private void Main_Paint(object sender, PaintEventArgs e)
   {
       DrawBorder(e.Graphics);
   }
   
   private void pTitleBarCenter_Paint(object sender, PaintEventArgs e)
   {
       DrawTitle(e.Graphics);
   }
   
   private void pTitleBarCenter_MouseDown(object sender, MouseEventArgs e)
   {
       // Перед началом перемещения окно сохраняем текущие координаты курсора мышки
       oldCursorPosition = new Point(e.X, e.Y);
       // Устанавливаем флаг на Да
       movingWindow = true;
   }
   
   private void pTitleBarCenter_MouseUp(object sender, MouseEventArgs e)
   {
       // Когда мы отпускаем кнопку мышки, устанавливаем флаг на Нет
       movingWindow = false;
   }
   
   private void pTitleBarCenter_MouseMove(object sender, MouseEventArgs e)
   {
       //Если флаг имеет значение Да
       if (movingWindow)
       {
           // Получаем текущее положение курсора
           Point newCursorPosition = new Point(e.X, e.Y);
           // Получаем разницу между текущим положением курсора и тем, что было
           // до того как мы начали перемещать курсор
           newCursorPosition.X = newCursorPosition.X - oldCursorPosition.X;
           newCursorPosition.Y = newCursorPosition.Y - oldCursorPosition.Y;
           // К текущему положению окна прибавляем разницу, чтобы получить сдвиг
           // в нужные стороны
           this.Location = new Point(this.Location.X + newCursorPosition.X,
                                     this.Location.Y + newCursorPosition.Y);
       }
   }
   
   private void pTitleBarLeft_MouseEnter(object sender, EventArgs e)
   {
       // Когда курсор мыши попадает в область левой части Тайтла, то мы меняем фон
       // на другой (в нашем случаи это фон с нажатыми кнопками)
       pTitleBarLeft.BackgroundImage = global::VisualTweak.Properties.Resources.buttons_hover;
   }
   
   private void pTitleBarLeft_MouseLeave(object sender, EventArgs e)
   {
       // Когда курсор мыши уходит из области левой части Тайтла, то мы возвращаем фон
       // в обычное состояние
       pTitleBarLeft.BackgroundImage = global::VisualTweak.Properties.Resources.buttons_normal;
   }
   
   private void pTitleBarLeft_MouseClick(object sender, MouseEventArgs e)
   {
       CommandButtonsClick(e.Location);
   }

6. Получилось довольно много, но это еще не все. Из методов(обработчиков) событий вызываются и другие методы, которые сейчас мы тоже пишем:
   

   private void CommandButtonsClick(Point e)
   {
       // Проверка по высоте
       if (e.Y > 1 && e.Y <= 23)
       {
           // Красная кнопка (Закрыть)
           if (e.X > 1 && e.X <= 26)
           {
               this.Close();
           }
           // Оранжевая кнопка (Свернуть)
           else if (e.X > 26 && e.X <= 47)
           {
               this.WindowState = FormWindowState.Minimized;
           }
           // Зеленая кнопка (Развернуть)
           else if (e.X > 47 && e.X <= 65)
           {
               if (this.WindowState == FormWindowState.Maximized)
                   this.WindowState = FormWindowState.Normal;
               else this.WindowState = FormWindowState.Maximized;
   
               // Вызываем принудительную перерисовку окно, 
               // чтобы наши рамки формы отрисовались правильно
               this.Invalidate();
           }
       }
   }
   
   /// <summary>
   /// Метод, который рисует текст в Тайте
   /// </summary>
   private void DrawTitle(Graphics g)
   {
       // Устанавливаем сглаживание на максимальное
       g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
   
       // Узнаем сколько место займет наш текст
       // Это нам необходимо, чтобы определить в каком точно месте расположить его
       SizeF CustomTitleTextSize = g.MeasureString(CustomTitleText, CustomTitleFont);
   
       // Рисуем текст
       // Передаем: текст, шрифт, кисточку и координаты
       // (Ширина прямоугольника в котором мы рисуем / 2) - (ширина текста / 2)
       // (Высота прямоугольника в котором мы рисуем / 2) - (высота текста /2)
       // В конечном счете дадут нам X, Y по по которым мы нарисуем наш текст и будет
       // Это точный центр для текста с данными размерами
       g.DrawString(CustomTitleText, CustomTitleFont, Brushes.Black,
           new PointF(
               pTitleBarCenter.Width / 2 - CustomTitleTextSize.Width / 2,
               pTitleBarCenter.Height / 2 - CustomTitleTextSize.Height / 2));
   
       // Возвращаем сглаживание на обычное
       g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.Default;
   }
   
   private void DrawBorder(Graphics g)
   {
       // Рисуем прямоугольник, он же серая рамка вокруг формы
       g.DrawRectangle(
           Pens.DimGray,
           ClientRectangle.X, ClientRectangle.X,
           ClientRectangle.Width - 1, ClientRectangle.Height - 1);
   }

7. Собственно на этом код заканчивается Ниже приведен блок с полным кодом главной формы моего приложения:
   

   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Data;
   using System.Drawing;
   using System.Text;
   using System.Windows.Forms;
   
   namespace VisualTweak
   {
       public partial class Main : Form
       {
           // Свойство: для хранения заголовка окна
           public String CustomTitleText = "Leopard Style Window © 2010 TBX1n";
           // Свойство: для хранения шрифта заголовка окна
           public Font CustomTitleFont = new Font("Tahoma", 10f, FontStyle.Bold);
   
           // Свойство: флаг, зажата ли кнопка мыши, чтобы тащить окно
           private bool movingWindow = false;
           // Свойство: объект для хранения положения курсора до начала перемещения
           private Point oldCursorPosition;
   
           public Main()
           {
               InitializeComponent();
   
               PrepairForm();
   
               // Событие: рисование формы
               this.Paint += new PaintEventHandler(Main_Paint);
               // Событие: рисование центральной части Тайтла
               pTitleBarCenter.Paint += new PaintEventHandler(pTitleBarCenter_Paint);
               // Событие: зажатие кнопки мыши на центральной части Тайтла
               pTitleBarCenter.MouseDown += new MouseEventHandler(pTitleBarCenter_MouseDown);
               // Событие: отжатие кнопки мыши на центральной части Тайтла
               pTitleBarCenter.MouseUp += new MouseEventHandler(pTitleBarCenter_MouseUp);
               // Событие: перемещение курсора по центральной части Тайтла
               pTitleBarCenter.MouseMove += new MouseEventHandler(pTitleBarCenter_MouseMove);
               // Событие: попадание курсора в левую область Тайтла (с кнопками)
               pTitleBarLeft.MouseEnter += new EventHandler(pTitleBarLeft_MouseEnter);
               // Событие: выход курсора из левой части Тайтла
               pTitleBarLeft.MouseLeave += new EventHandler(pTitleBarLeft_MouseLeave);
               // Событие: клик по левой части Тайтла
               pTitleBarLeft.MouseClick += new MouseEventHandler(pTitleBarLeft_MouseClick);
           }
   
           #region :: Methods ::
           private void CommandButtonsClick(Point e)
           {
               // Проверка по высоте
               if (e.Y > 1 && e.Y <= 23)
               {
                   // Красная кнопка (Закрыть)
                   if (e.X > 1 && e.X <= 26)
                   {
                       this.Close();
                   }
                   // Оранжевая кнопка (Свернуть)
                   else if (e.X > 26 && e.X <= 47)
                   {
                       this.WindowState = FormWindowState.Minimized;
                   }
                   // Зеленая кнопка (Развернуть)
                   else if (e.X > 47 && e.X <= 65)
                   {
                       if (this.WindowState == FormWindowState.Maximized)
                           this.WindowState = FormWindowState.Normal;
                       else this.WindowState = FormWindowState.Maximized;
   
                       // Вызываем принудительную перерисовку окно, 
                       // чтобы наши рамки формы отрисовались правильно
                       this.Invalidate();
                   }
               }
           }
   
           private void PrepairForm()
           {
               // Устанавливаем стили окна
               SetStyle(ControlStyles.AllPaintingInWmPaint, true);
               SetStyle(ControlStyles.DoubleBuffer, true);
               SetStyle(ControlStyles.UserPaint, true);
   
               // Устанавливаем стандартные фоновые изображения для Тайтла
               pTitleBarLeft.BackgroundImage = global::VisualTweak.Properties.Resources.buttons_normal;
               pTitleBarCenter.BackgroundImage = global::VisualTweak.Properties.Resources.bg;
               pTitleBarRight.BackgroundImage = global::VisualTweak.Properties.Resources.right;
           }
   
           /// <summary>
           /// Метод, который рисует текст в Тайте
           /// </summary>
           private void DrawTitle(Graphics g)
           {
               // Устанавливаем сглаживание на максимальное
               g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
   
               // Узнаем сколько место займет наш текст
               // Это нам необходимо, чтобы определить в каком точно месте расположить его
               SizeF CustomTitleTextSize = g.MeasureString(CustomTitleText, CustomTitleFont);
   
               // Рисуем текст
               // Передаем: текст, шрифт, кисточку и координаты
               // (Ширина прямоугольника в котором мы рисуем / 2) - (ширина текста / 2)
               // (Высота прямоугольника в котором мы рисуем / 2) - (высота текста /2)
               // В конечном счете дадут нам X, Y по по которым мы нарисуем наш текст и будет
               // Это точный центр для текста с данными размерами
               g.DrawString(CustomTitleText, CustomTitleFont, Brushes.Black,
                   new PointF(
                       pTitleBarCenter.Width / 2 - CustomTitleTextSize.Width / 2,
                       pTitleBarCenter.Height / 2 - CustomTitleTextSize.Height / 2));
   
               // Возвращаем сглаживание на обычное
               g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.Default;
           }
   
           private void DrawBorder(Graphics g)
           {
               // Рисуем прямоугольник, он же серая рамка вокруг формы
               g.DrawRectangle(
                   Pens.DimGray,
                   ClientRectangle.X, ClientRectangle.X,
                   ClientRectangle.Width - 1, ClientRectangle.Height - 1);
           }
           #endregion
   
           #region :: Actions ::
           private void pTitleBarLeft_MouseClick(object sender, MouseEventArgs e)
           {
               CommandButtonsClick(e.Location);
           }
           #endregion
   
           #region :: Move Window ::
           private void pTitleBarCenter_MouseDown(object sender, MouseEventArgs e)
           {
               // Перед началом перемещения окно сохраняем текущие координаты курсора мышки
               oldCursorPosition = new Point(e.X, e.Y);
               // Устанавливаем флаг на Да
               movingWindow = true;
           }
   
           private void pTitleBarCenter_MouseUp(object sender, MouseEventArgs e)
           {
               // Когда мы отпускаем кнопку мышки, устанавливаем флаг на Нет
               movingWindow = false;
           }
   
           private void pTitleBarCenter_MouseMove(object sender, MouseEventArgs e)
           {
               //Если флаг имеет значение Да
               if (movingWindow)
               {
                   // Получаем текущее положение курсора
                   Point newCursorPosition = new Point(e.X, e.Y);
                   // Получаем разницу между текущим положением курсора и тем, что было
                   // до того как мы начали перемещать курсор
                   newCursorPosition.X = newCursorPosition.X - oldCursorPosition.X;
                   newCursorPosition.Y = newCursorPosition.Y - oldCursorPosition.Y;
                   // К текущему положению окна прибавляем разницу, чтобы получить сдвиг
                   // в нужные стороны
                   this.Location = new Point(this.Location.X + newCursorPosition.X,
                                             this.Location.Y + newCursorPosition.Y);
               }
           }
           #endregion
   
           #region :: Draw Title Bar ::
           private void pTitleBarLeft_MouseEnter(object sender, EventArgs e)
           {
               // Когда курсор мыши попадает в область левой части Тайтла, то мы меняем фон
               // на другой (в нашем случаи это фон с нажатыми кнопками)
               pTitleBarLeft.BackgroundImage = global::VisualTweak.Properties.Resources.buttons_hover;
           }
   
           private void pTitleBarLeft_MouseLeave(object sender, EventArgs e)
           {
               // Когда курсор мыши уходит из области левой части Тайтла, то мы возвращаем фон
               // в обычное состояние
               pTitleBarLeft.BackgroundImage = global::VisualTweak.Properties.Resources.buttons_normal;
           }
   
           private void pTitleBarCenter_Paint(object sender, PaintEventArgs e)
           {
               DrawTitle(e.Graphics);
           }
   
           private void Main_Paint(object sender, PaintEventArgs e)
           {
               DrawBorder(e.Graphics);
           }
           #endregion
       }
   }

Заключение:

1. После прочтения, вникания и практических занятий у вас должно получится приложение точно такой же как и на первом скриншоте.
2. Вы научитесь примитивной работе с GDI+ а так же получите много другого опыта разрабатывая нечно подобное.
3. Готовый проект на Visual Studio 2010 вы можете скачать из вложения.

[Geni]

да как открать эту прогу через которую вы делаете этот фейк не понятно

[Kitsune]

Geni, здесь фейки никто не делает. Название статьи прочитайте сударь...

[ultrazzz]

Сложный гайд скрины хоть залейте =(

[w1nsis]

TBX1n сколько учился на программиста чтоб этому всему научиться?

[Sashok7714444]

Нормальный гайд! По ходу дела, + есть исходник..

[Sinyss]

Цитата: Сообщение от w1nsis TBX1n сколько учился на программиста чтоб этому всему научиться?

Учится на программиста... даже звучит стремно....

[Sleepy_Master]

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

[[RO]jkpro]

Цитата: Сообщение от Sleepy_Master Скрины не отображаются , не видно конечный результат , реализовать сам код проблем не составляет , но время в пустую тоже тратить не хочется.

Да именно поэтому под примером находится исходник, там же и бинарник

Цитата: (WinForms)

Для лохов же

[Kitsune]

Цитата: Сообщение от [RO]jkpro Для лохов же

Высказывание "Windows для лохов" равносильно. WinForms такая же живая технология как и сотни других.

[Pupsiks]

Обновите пожалуйста скрины к уроку.

[gre3nsis]

Спасибо полезно! Adrenaline