نحوه طراحی Theme

[reza_ali202000]

سلام دوستان عزیز
امروز میخوام در رابطه با طراحی تم صحبت کنم. البته بیشترش ترجمه هست با کمی دخالت.
عموما کامپوننت های زیادی واسه طراحی و تغییر فرمها و ابزار روی اونها وجود داره مثل dev telerik و غیره که تعدادشون هم کم نیستن.
منتها برخی دوستان دوست ندارن از این کامپوننت ها استفاده کنند و در عین حال دلشون میخواد فرمهاشون هم قشنگ بشه و کاربر پسند.
بنده حقیر سعی کردم در این تایپک به این موضوع بپردازم. فقط نکته ای که باید بگم اینه که خلاقیت هم مهم هست. مثلا بنده همه ابزار فتوشاپ رو به صورت حرفه ای بلد هستم ولی اگه کسی بهم بگه مثلا پوستر برام طراحی کن به معنای تمام کلمه نمیتونم. پس ادم باید خلاقیت هم داشته باشه.
و اما بعد....
فرم های که ما طراحی میکنیم ابزار مختلفی روش قرار داره. تقریبا بعضی از مشخصاتشون توی همه کنترلها یکی هست که الان ما به اونا نیاز داریم. مثل رنگ نوشته، رنگ پس زمینه و فونت
برا طراحی تم ما به این سه مورد نیاز خاصی داریم.
برا همین روی این سه مورد بیشتر بحث میکنیم. خوب نکته اول اینه که ببینیم کدوم ابزارها بیشتر استفاده میشن.
Textbox, Label, button, Form بیشترین استفاده میشه. اولین کاری که میکنیم یه کلاس میسازیم:
اسمشو میزاریم theme
بعد از ساخته شدن دوتا using اضاف میکینیم و class رو پابلیک میکنیم:

using System.Windows.Forms;
using System.Drawing;
namespace WindowsFormsApplication44
{
public class theme



حالا کاری که باید بکنیم اینه که برا هر کنترل یه تابع بنویسی. برا label به صورت زیر یه تابع که کلاس استفاده میکنیم:

static void ApplyTheme(Label c)
{
c.Font = new Font("Arial", 12.0f); c.BackColor = Color.Black; c.ForeColor = Color.White;
}


و برا textbox:

static void ApplyTheme(TextBox c)
{
c.Font = new Font("Arial",12.0f); c.BackColor=Color.Blue; c.ForeColor = Color.White;
}


و form:

static void ApplyTheme(Form c)
{
c.Font = new Font("Arial", 12.0f); c.BackColor = Color.Black; c.ForeColor = Color.White;
}


و در نهایت تابع زیر رو اضاف میکنیم.

public static void UseTheme(Form form)
{
ApplyTheme(form);
foreach (var c in form.Controls)
{
switch(c.GetType().ToString())
{
case "System.Windows.Forms.TextBox":
ApplyTheme((TextBox)c);
break;
case "System.Windows.Forms.Label":
ApplyTheme((Label)c);
break;


}
}
}


141322
خوب حالا دستور زیر رو توی فرما فراخونی میکنیم.

public Form1()
{
InitializeComponent();
theme.UseTheme(this);
}


141321
حالا فرمی که طراحی کردیم:
و141319
و خروجی نهایی:

141320

حالا شما میتونید کلاس رو با متغییر طراحی کنید و مثلا فونتها رو سراسری تعریف کنید. میتونید برا هر کنترل همین توابع که به صورت نمونه نوشته شده رو بنویسد و این دیگه بستگی به سلیقه شما داره. نمونه های دیگری از این تم ها:



141315141316141317141318141315

[reza_ali202000]

حالا میتونید علاوه بر اعمال تم سراسری، دستورات کاستم هم بنویسید. مثلا میتونید textbox وقتی که فوکاس شد رنگش سفید بشه:

static void ApplyTheme(TextBox c)
{
c.Font = new Font("b mitra", 12.0f,FontStyle.Bold); c.BackColor = Color.Blue; c.ForeColor = Color.White;
c.GotFocus += new System.EventHandler(c_GotFocus);
c.LostFocus += new System.EventHandler(c_LostFocus);
}

static void c_LostFocus(object sender, System.EventArgs e)
{
((TextBox)sender).BackColor = Color.Blue;
}

static void c_GotFocus(object sender, System.EventArgs e)
{
((TextBox)sender).BackColor = Color.White;
}

[محمد آشتیانی]

سلام
ممنون از وقتی که برای دوستان صرف کردید و البته یک سوال ، از روشی که ابتدا فرمودید ، چطور امکان داره خروجی شبیه تصاویری که پیوست کردید به دست بیاد؟ چیزی که بنده دیدم در حد تغییر فونت و رنگ پیش زمینه و پس زمینه بود.

[reza_ali202000]

سلام
ممنون از وقتی که برای دوستان صرف کردید و البته یک سوال ، از روشی که ابتدا فرمودید ، چطور امکان داره خروجی شبیه تصاویری که پیوست کردید به دست بیاد؟ چیزی که بنده دیدم در حد تغییر فونت و رنگ پیش زمینه و پس زمینه بود.

هدفم از این تایپک بیشتر راه انداختن و ایده دادن به دوستان هست. البته theme ها چیزی جز بازی با رنگ ها نیست.

[reza_ali202000]

خوب الان میتونیم تمام چیزایی رو که برا طراحی یاد گرفته بودیم اینجا بنویسیم و توی تمام فرمها فراخونی کنیم.
مثلا میتونیم رنگ فرم رو به صورت گرادیان در آورد.

static void ApplyTheme(Form c)
{
c.Font = new Font("b mitra", 12.0f, FontStyle.Bold); c.BackColor = Color.Black; c.ForeColor = Color.White;
c.Paint += new PaintEventHandler(c_Paint);

}

static void c_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
Rectangle rect = new Rectangle(0, 0, ((Form)sender).Size.Width, ((Form)sender).Size.Height);
LinearGradientBrush brush = new LinearGradientBrush(rect, Color.Green, Color.White, LinearGradientMode.ForwardDiagonal);
g.FillRectangle(brush, rect);
brush.Dispose();
}

فرمی رو که طراحی کردیم:
141327
بعد از اجرا:
141326

[حسین.کاظمی]

سلام
خدا قوت
مر سی از اینکه موضوع جالبی را مطرح کردید ولی سوال منم مثل سوال جناب آقای آشتیانی است.....
اون عکس هایی که ضمیمه کردید مثلا border و دکمهای بستن و...... متمایز است چطوری میشه اینجور تمی ساخت؟؟؟؟
و یا طرح چک باکس ها و ردیو باتن ها و یا اسکرول بار لیست باکس ها، طراحی اینها را اگه زحمتی نیست آموزش بدید ممنون میشم.:لبخند::چشمک:


تشکر-موفق باشید

[reza_ali202000]

مرحله بعد اینه که بیایم title فرم رو به دلخواه تنظیم کنیم تا اون شکلی رو که میخوایم پیدا کنه.
دقت داشته باشید که همه این کارا رو میتونید توی paint هر شی انجام بدین. این طرحایی رو که بنده میزنم و رنگهای تندی رو که انتخاب میکنم برا مشخص شدن کار هست و تمام طراحی ها فقط برا ایده دادن به دوستان هست.

اولین کاری که باید انجام بدیم اینه که توی کلاس تمی که اماده کردیم قسمت فرم دستور زیر رو بنویسیم:

c.FormBorderStyle = FormBorderStyle.None;

حالا اون اندازه ای که میخواید title باشه رو کنترلهاتون شیف میدین به پایین(مثلا button):

static void ApplyTheme(Button c)
{
c.FlatStyle = FlatStyle.Flat;
c.Font = new Font("b mitra", 12.0f, FontStyle.Bold); c.BackColor = Color.Yellow; c.ForeColor = Color.Red;
c.Top +=40;

}

در واقع با این کار title رو میخوایم 40 در نظر بگیریم برا همین 40 تا تمام کنترلها میان پایین و اینجوری میتونید به راحتی title رو طراحی کنید.
مرحله بعد برا فرم رویداد paint رو میسازید:

c.Paint += new PaintEventHandler(c_Paint);

و در واقع کنترل فرممون به این شکل میشه:

static void ApplyTheme(Form c)
{
c.Font = new Font("b mitra", 12.0f, FontStyle.Bold); c.BackColor = Color.Black; c.ForeColor = Color.White;
c.FormBorderStyle = FormBorderStyle.None;
c.Paint += new PaintEventHandler(c_Paint);

}

خوب حالا میایم تصاویری که میخوایم توی title باشه رو به پروژه اد میکنیم تا توی ریسورس بیاد. بعد از اون تابع paint فرم رو به صورت زیر مینویسیم. دقت کنید که اسم فایلهای عکستون توی ریسورس موجود باشه.

static void c_Paint(object sender, PaintEventArgs e)
{
//رنگ اصلی فرم رو به صورت رنگین کمانی در میاره.
Graphics g = e.Graphics;
Rectangle rect = new Rectangle(0, 0, ((Form)sender).Size.Width, ((Form)sender).Size.Height);
LinearGradientBrush brush = new LinearGradientBrush(rect, Color.Green, Color.White, LinearGradientMode.ForwardDiagonal);
g.FillRectangle(brush, rect);
//اگه فقط میخواد تایتلتون رنگی باشه
e.Graphics.FillRectangle(Brushes.Red,0,0,((Form)se nder).Width,40);
//اگه میخواید عکس روی بکگروند تایتلتون باشه
e.Graphics.DrawImage(WindowsFormsApplication44.Pro perties.Resources._13, 0, 0, ((Form)sender).Size.Width, 40);
//عکس شبیه سازی دکمه خروج
e.Graphics.DrawImage(WindowsFormsApplication44.Pro perties.Resources.Close, 10, 10);
//دور فرم رو مربع میکشه
e.Graphics.DrawRectangle(new Pen(Color.Black, 3), ((Form)sender).DisplayRectangle);
brush.Dispose();
}

و خروجی فرم به صورت زیر میشه:
141413141414
اینم یه فرم ساده که به همین صورت طراحی شده.
141420

[ms-ninja]

لفطا یک بار کدهای thme و فرم کامل قرار بدید:قلب:

[Helpco]

نمونه اجرایی هم بزارید

[reza_ali202000]

نمونه اجرایی هم بزارید
دوست عزیز مرحله به مرحله پیش میریم و قطعا در اخر کار یه نمونه خوب و تقریبا کامل رو میزارم.

[ms-ninja]

http://barnamenevis.org/attachment.php?attachmentid=141420&d=1468314008

sampel همین فرم قرار بدید لطفا کل مشکلات من حل میشه:قلب::لبخند::لبخند:

[reza_ali202000]

خوب حالا میخوایم تو این مرحله وقتی روی دکمه ضربدر میریم آیکنش تغییر کنه.
برا این کار اول باید ایونت موس موو رو فراخونی کنیم:

c.MouseMove += new MouseEventHandler(c_MouseMove);

بعد کافیه مشخصات دکمه مون رو بدست بیاریم و زمانی که موس توی اون قسمت رفت آیکن پیشفرضی رو که گذاشته بودیم تبدیل کنیم به آیکن جدید:

static bool closemouse,moving;
static void c_MouseMove(object sender, MouseEventArgs e)
{
if (e.X >= (((Form)sender).Width - (WindowsFormsApplication44.Properties.Resources.Cl ose.Width * 2)))
{
if (e.Y <= WindowsFormsApplication44.Properties.Resources.Clo se.Width * 2)
{
closemouse = true;
((Form)sender).Refresh();
moving = true;
}
}
else
{

closemouse = false;
if (moving)
{
((Form)sender).Refresh();
moving = false;
}
}

}

ما اینجا دوتا متغییر بولین تعریف کردیم. یکی از اونا که مشخصه کارش اینه که تشخیص بدیم آیا به محل مورد نظر رسیدیم یا خیر.
حالا که رسیدیم فرم رو رفرش کن و در واقع تابع پینت رو دوباره فراخونی میکنه:

static void c_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
Color myColor = Color.FromArgb(112, 128, 144);
SolidBrush myBrush = new SolidBrush(myColor);
e.Graphics.FillRectangle(myBrush, 0, 0, ((Form)sender).Width, 60);
if (!closemouse)
{
e.Graphics.DrawImage(WindowsFormsApplication44.Pro perties.Resources.Close, ((Form)sender).Width - (WindowsFormsApplication44.Properties.Resources.Cl ose.Width * 2), 10);
}
else
{
e.Graphics.DrawImage(WindowsFormsApplication44.Pro perties.Resources.close_icone_5186_64, ((Form)sender).Width - (WindowsFormsApplication44.Properties.Resources.cl ose_icone_5186_64.Width * 2), 10);
}
e.Graphics.DrawRectangle(new Pen(Color.FromArgb(112, 128, 144), 10), ((Form)sender).DisplayRectangle);
//brush.Dispose();
}



همونطور که میبینید میاد عکس جدید رو جای عکس قبلی میزاره.
و اما متغییر دومی که به نام مووینگ هست رو گذاشتیم به این دلیل که اگه از محدوده خارج شد فقط یک بار فرم رو رفرش کنه.
قبل از رفتن موس روی کلوز:
141525
بعد از رفتن موس روی کلوز:
141524

[mrali.jalali]

همچنان منتظر ادامه آموزش هستیم ...

[ms-ninja]

همچنان منتظر سمپل هستیم:لبخند::قلب::قهقهه: