تم ها راهی عالی برای اجازه دادن به کاربران شما برای شخصی سازی برنامه شما بدون نیاز به درگیر شدن بیش از حد در جزئیات خاص هستند.
برای برنامه های مدرن رایج است که گزینه ای برای جابجایی بین تم های مختلف داشته باشند. برای مثال، برخی از برنامه‌ها به شما امکان می‌دهند بین یک تم روشن یا تم تیره جابه‌جا شوید، در حالی که برخی دیگر ممکن است انتخاب‌های تم بیشتری داشته باشند.
Windows Forms یک چارچوب رابط کاربری است که به شما امکان می دهد برنامه های دسکتاپ ایجاد کنید. می توانید با ایجاد دکمه های قابل انتخاب برای هر موضوع، تم ها را در یک برنامه فرم ویندوز پیاده سازی کنید.
هنگامی که کاربر یک تم را انتخاب می کند، می توانید رنگ پس زمینه یا رنگ متن هر عنصر را تغییر دهید تا با تم انتخاب شده مطابقت داشته باشد.
نحوه تنظیم پروژه فرم ویندوز
ابتدا یک اپلیکیشن فرم ویندوز جدید ایجاد کنید. پروژه جدید را با برخی از کنترل های اساسی، مانند دکمه ها و برچسب ها پر کنید.
- یک برنامه Windows Forms جدید در ویژوال استودیو ایجاد کنید.
- در پروژه جدید، از جعبه ابزار برای جستجوی کنترل دکمه استفاده کنید.
- کنترل دکمه را انتخاب کنید و آن را روی بوم بکشید. در مجموع سه دکمه کنترل اضافه کنید.
- با استفاده از جعبه ابزار، یک کنترل برچسب را کلیک کرده و روی بوم بکشید. برچسب را زیر دکمه ها قرار دهید.
- دکمه ها و برچسب ها را با استفاده از پنجره خصوصیات استایل دهید. ویژگی ها را به موارد زیر تغییر دهید: نام ویژگی کنترل دکمه مقدار جدید1 اندازه 580، 200 دکمه FlatStyle Flat Text Users2 اندازه 580، 100 FlatStyle Flat Text Accounts button3 اندازه 580، 100 FlatStyle Flat Text Permissions label1 Text
نحوه ایجاد دکمه تنظیمات و فهرست تم ها
برای اینکه منوی تم های ساده کار کند، چندین دکمه برای نمایش هر تم ایجاد کنید. این برنامه شامل سه تم، یک تم “روشن”، یک تم “طبیعت” و یک تم “تاریک” خواهد بود.
- کنترل دکمه دیگری را به بوم اضافه کنید تا دکمه تنظیمات (یا «موضوعات») را نشان دهد.
- ویژگی های این دکمه را به موارد زیر تغییر دهید: نام ویژگی نام مقدار جدید btnThemeSettings FlatStyle Flat Size 200، 120 تم متن
- سه دکمه دیگر را روی بوم بکشید. این دکمه ها سه تم مختلف را نشان خواهند داد. ویژگی‌های هر یک از دکمه‌ها را به موارد زیر تغییر دهید: نام ویژگی کنترلی مقدار جدید نام دکمه اول btnLightTheme رنگ پشتی سفید دود اندازه 200، 80 FlatStyle Flat Text Light قابل مشاهده نادرست نام دکمه دوم btnNatureTheme BackColor DarkSeaGreen3Tsty0 نام دکمه btnTarkTheme BackColor تیره خاکستری ForeColor سفید اندازه 200، 80 FlatStyle Flat Text Dark Visible False
- روی دکمه Themes دوبار کلیک کنید. با این کار، روشی برای مدیریت رویداد “on click” ایجاد می شود. این روش زمانی اجرا می شود که کاربر روی این دکمه کلیک کند.
- به طور پیش فرض، تم های “روشن”، “طبیعت” و “تاریک” قابل مشاهده نخواهند بود. در داخل تابع، عملکردی را اضافه کنید تا نمایان بودن دکمه‌ها را برای نمایش یا پنهان کردن تغییر دهید. خصوصی void btnThemeSettings_Click(فرستنده شی، EventArgs e){ btnNatureTheme.Visible = !btnNatureTheme.Visible; btnLightTheme.Visible = !btnLightTheme.Visible; btnDarkTheme.Visible = !btnDarkTheme.Visible;}
- با کلیک بر روی دکمه سبز رنگ در بالای پنجره ویژوال استودیو، برنامه را اجرا کنید.
- در زمان اجرا، برنامه به طور پیش فرض دکمه های هر یک از سه تم را مخفی می کند.
- روی دکمه Themes کلیک کنید تا تم ها نمایش داده شوند. می‌توانید دکمه تم‌ها را فشار دهید تا نمایان شدن آنها تغییر کند.
private void btnThemeSettings_Click(object sender, EventArgs e)
{
btnNatureTheme.Visible = !btnNatureTheme.Visible;
btnLightTheme.Visible = !btnLightTheme.Visible;
btnDarkTheme.Visible = !btnDarkTheme.Visible;
}
چگونه تم های خود را مدیریت کنید
برای هر تم فرهنگ لغت ایجاد کنید تا رنگ های مختلفی را که استفاده می شود ذخیره کنید. این به این صورت است که در صورت نیاز به چندین بار استفاده از آنها، تمام رنگ های تم خود را در یک مکان ذخیره می کنید. همچنین اگر می خواهید در آینده یک تم را با رنگ های جدید به روز کنید، این کار را آسان تر می کند.
- در بالای فایل پیش فرض C# Form1.cs و داخل کلاس Form، یک enum سراسری ایجاد کنید. این فهرست انواع مختلفی از رنگ‌هایی را که در یک theme استفاده می‌کنید ذخیره می‌کند.
- در زیر، سه فرهنگ لغت جهانی، یکی برای هر سه موضوع را اعلام کنید. اگر با نحوه استفاده از دیکشنری در سی شارپ آشنا نیستید، می توانید اطلاعات بیشتری در مورد دیکشنری ها بخوانید. Dictionary
- در داخل سازنده، دیکشنری ها را مقداردهی اولیه کنید. برای رنگ های مختلفی که هر تم استفاده می کند مقادیر اضافه کنید.public Form1(){ InitializeComponent(); // دیکشنری ها را در اینجا اضافه کنید Light = new Dictionary
enum ThemeColor
{
Primary,
Secondary,
Tertiary,
Text
}
Dictionary<ThemeColor, Color> Light = new Dictionary<ThemeColor, Color>();
Dictionary<ThemeColor, Color> Nature = new Dictionary<ThemeColor, Color>();
Dictionary<ThemeColor, Color> Dark = new Dictionary<ThemeColor, Color>();
public Form1()
{
InitializeComponent();
// Add dictionaries here
Light = new Dictionary<ThemeColor, Color>() {
{ ThemeColor.Primary, Color.WhiteSmoke },
{ ThemeColor.Secondary, Color.Silver },
{ ThemeColor.Tertiary, Color.White },
{ ThemeColor.Text, Color.Black }
};
Nature = new Dictionary<ThemeColor, Color>() {
{ ThemeColor.Primary, Color.DarkSeaGreen },
{ ThemeColor.Secondary, Color.AliceBlue },
{ ThemeColor.Tertiary, Color.Honeydew },
{ ThemeColor.Text, Color.Black }
};
Dark = new Dictionary<ThemeColor, Color>() {
{ ThemeColor.Primary, Color.DimGray },
{ ThemeColor.Secondary, Color.DimGray },
{ ThemeColor.Tertiary, Color.Black },
{ ThemeColor.Text, Color.White }
};
}
نحوه تغییر تم
برای مدیریت تم برنامه، توابعی ایجاد کنید. این توابع رنگ پس‌زمینه یا رنگ متن عناصر UI روی بوم را تغییر می‌دهند.
- یک تابع جدید به نام () ChangeTheme ایجاد کنید. تابع رنگ های یک موضوع را به عنوان آرگومان می گیرد.
- در داخل تابع، ویژگی های رنگ پس زمینه عناصر UI را تغییر دهید. رنگ‌های پس‌زمینه جدید از رنگ‌ها برای موضوع انتخاب شده استفاده می‌کنند.private void ChangeTheme(Color firstColor، Color secondaryColor، Color tertiaryColor){ // تغییر رنگ پس‌زمینه دکمه‌ها btnThemeSettings.BackColor =primaryColor; button1.BackColor = اولیه رنگ; button2.BackColor = secondaryColor; button3.BackColor = secondaryColor; this.BackColor = tertiaryColor;}
- یک تابع جدید به نام () ChangeTextColor ایجاد کنید. می توانید از این برای تغییر رنگ متن بین تیره و روشن استفاده کنید. این کار برای اطمینان از این است که متن روی پس‌زمینه تیره همچنان قابل خواندن است. خلأ خصوصی ChangeTextColor(Color textColor){ // تغییر رنگ متن button1.ForeColor = textColor; button2.ForeColor = textColor; button3.ForeColor = textColor; label1.ForeColor = textColor; btnThemeSettings.ForeColor = textColor;}
- از طراح، روی کنترل دکمه “Light” دوبار کلیک کنید. با این کار فایل کد پشت باز می شود و یک کنترل کننده رویداد برای زمانی که کاربر روی دکمه کلیک می کند ایجاد می کند.
- در کنترل کننده رویداد، از توابع ChangeTheme() و ChangeTextColor() استفاده کنید. رنگ هایی را که طرح زمینه استفاده می کند وارد کنید. می‌توانید این رنگ‌ها را از دیکشنری تم «نور» بازیابی کنید. خصوصی void btnLightTheme_Click(فرستنده شی، EventArgs e){ ChangeTheme(Light[ThemeColor.Primary]، Light[ThemeColor.Secondary]، Light[ThemeColor.Tertiary]); ChangeTextColor(Light[ThemeColor.Text])؛}
- به طراح برگردید و روی دکمه های “Nature” و “Dark” کلیک کنید. از توابع ChangeTheme() و ChangeTextColor() در کنترل کننده رویداد خود نیز استفاده کنید.private void btnNatureTheme_Click(object sender, EventArgs e){ ChangeTheme(Nature[ThemeColor.Primary], Nature[ThemeColor.Secondary], NatureTertimeColor]. ) ChangeTextColor(Nature[ThemeColor.Text]);}private void btnDarkTheme_Click(فرستنده شی، EventArgs e){ ChangeTheme(Dark[ThemeColor.Primary]، Dark[ThemeColor.Secondary]، Dark[ThemeColor.Tertiary]); ChangeTextColor(Dark[ThemeColor.Text])؛}
- به‌طور پیش‌فرض، زمانی که کاربر برای اولین بار برنامه را باز می‌کند، موضوع باید روی تم «Light» تنظیم شود. در سازنده، در زیر دیکشنری ها، از توابع ChangeTheme() و ChangeTextColor() استفاده کنید.ChangeTheme(Light[ThemeColor.Primary]، Light[ThemeColor.Secondary]، Light[ThemeColor.Tertiary]);ChangeTextColor(Light[Themelor). ])؛
- با کلیک بر روی دکمه سبز رنگ در بالای پنجره ویژوال استودیو، برنامه را اجرا کنید.
- به طور پیش فرض، برنامه از تم “Light” استفاده می کند و طرح رنگ خاکستری را روی کنترل های UI اعمال می کند. دکمه تم ها را تغییر دهید تا لیست تم ها را مشاهده کنید.
- روی تم طبیعت کلیک کنید.
- روی تم تیره کلیک کنید.
private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor)
{
// Change background color of buttons
btnThemeSettings.BackColor = primaryColor;
button1.BackColor = primaryColor;
button2.BackColor = secondaryColor;
button3.BackColor = secondaryColor;
this.BackColor = tertiaryColor;
}
private void ChangeTextColor(Color textColor)
{
// Change color of text
button1.ForeColor = textColor;
button2.ForeColor = textColor;
button3.ForeColor = textColor;
label1.ForeColor = textColor;
btnThemeSettings.ForeColor = textColor;
}
private void btnLightTheme_Click(object sender, EventArgs e)
{
ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);
ChangeTextColor(Light[ThemeColor.Text]);
}
private void btnNatureTheme_Click(object sender, EventArgs e)
{
ChangeTheme(Nature[ThemeColor.Primary], Nature[ThemeColor.Secondary], Nature[ThemeColor.Tertiary]);
ChangeTextColor(Nature[ThemeColor.Text]);
}
private void btnDarkTheme_Click(object sender, EventArgs e)
{
ChangeTheme(Dark[ThemeColor.Primary], Dark[ThemeColor.Secondary], Dark[ThemeColor.Tertiary]);
ChangeTextColor(Dark[ThemeColor.Text]);
}
ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);
ChangeTextColor(Light[ThemeColor.Text]);
ایجاد اپلیکیشن با استفاده از فرم های ویندوز
بسیاری از برنامه ها به کاربر اجازه می دهند بین چندین تم جابجا شود. می‌توانید با ایجاد گزینه‌هایی برای انتخاب کاربر، تم‌ها را به برنامه Windows Forms اضافه کنید.
وقتی کاربر روی یک تم کلیک می‌کند، می‌توانید رنگ پس‌زمینه، متن یا هر ویژگی دیگری را برای مطابقت با رنگ‌های استفاده شده در موضوع انتخابی تغییر دهید.
رنگ های هر یک از تم ها از رنگ های داخلی ویژوال استودیو استفاده می کنند. برای اینکه کاربران تجربه بهتری داشته باشند، باید از یک طرح رنگی مناسب استفاده کنید. می‌توانید درباره روش‌های مختلف انتخاب طرح رنگ برای برنامه‌تان اطلاعات بیشتری کسب کنید.