• مقدمه

در جلسه شماره ۵۶ از آموزش زبان برنامه‌نویسی سی‌شارپ، شما با نحوه ایجاد یک مرورگر وبِ بسیار ساده آشنا شدید. در این بخش، قصد داریم که کمی این مرورگر وب خود را با امکاناتی بیشتر مجهز نماییم. پس پروژه‌ی جلسه قبل خود را بارگذاری کرده و به مطالعه ادامه این بخش آموزش بپردازید.

  • اضافه کردن Buttonهای حرکت و …

می‌خواهیم امکاناتی را به مرورگر وب خودمان اضافه کنیم که قابلیت‌هایی از جمله Forward، Back، رفتن به صفحه خانگی، متوقف کردن بارگذاری صفحه و رفرش صفحه را برای ما مهیا سازد.

از آن‌جایی که می‌خواهیم هر یک از این قابلیت‌ها را درون یک Button جداگانه اعمال کنیم، می‌خواهیم جهت زیباتر شدن شکل ظاهری، از آیکون‌های آماده استفاده کنیم؛ مثلاً برای انتقال به صفحه خانگی، از یک آیکون با تصویر «خانه» استفاده کنیم.

برای اضافه کردن عکس‌ها به Buttonهای خود، می‌توانید که ابتدا از Toolbox، گزینه ImageList را به پروژه خود اضافه کنید. در Properties این شیء، گزینه‌ای با نام ColorDepth می‌باشد که توصیه می‌کنیم که مقدار آن را روی 32bit قرار دهید تا آیکون‌ها با رنگ واقعی‌تر و زیباتر نمایش داده شوند.

image_list_props

در ImageList، می‌توانید عکس‌های موردنظرتان را لیست کرده و بعداً از آن‌ها استفاده کنید. برای اضافه کردن عکس ها، از گزینه Images موجود در پنجره Properties استفاده کنید.colour_depth

وقتی که بر روی آن گزینه کوچک سه‌نقطه «…» کلیک می‌کنید، پنجره‌ای شبیه به پنجره‌ی زیر باز می‌شود. با استفاده از Button با نام Add، آیکون‌های خود را به آن اضافه کنید.

image_list

این آیکون‌ها را می‌توانید بر روی اینترنت پیدا کنید. کافیست که با جستجوی عبارت “Free Icons” در گوگل، به هزاران آیکون رایگان دسترسی پیدا کنید. دو آیکون اول که جهت فلش‌ها هستند، برای استفاده از Forward و Back است؛ آیکون سوم جهت توقف بارگذاری صفحه؛ آیکون چهارم همانطور که می‌بینید آیکون یک خانه است که به معنی صفحه خانگی می‌باشد. برای رفرش نیز ما در اینجا از یک آیکون لامپ استفاده کردیم.

آیکون‌هایی که در این بخش استفاده کرده‌ایم، دارای طول و عرض ۳۲ × ۳۲ می‌باشد. ImageList آیکون‌ها را بصورت پیشفرض بر روی سایز ۱۶×۱۶ در نظر می‌گیرد، پس می‌بایست شما این مقدار را در Properties تغییر دهید.

image_list_size

اضافه کردن آیکون به Buttonها

اضافه کردن این آیکون‌ها به Buttonها بسیار ساده است. یک Button ابتدا به فرم خود اضافه کنید، مقدار (Name) آن را به btnBack تغییر دهید. مقدار text آن را نیز کاملاً پاک کنید.

برای اضافه کردن آیکون، پس از وارد شدن به بخش Properties مربوط به button، به‌دنبال ImageList بگردید و مقدار آن را برابر با ImageList فعلی خود کنید.

button_image_list_prop

حال پس از آن، به‌دنبال ImageIndex بگردید (در همان جا). با باز کردن منوی آن، آیکون‌های موجود در دسترس را خواهید دید.image_list_buttons

با انتخاب آیکون مورد نظر، نگاهی به Button خود بیاندازید. خواهید دید که آیکون مورد نظر شما در داخل آن قرار گرفت و یک گرافیک زیبایی را به آن بخشیده است.

back_button

حال برای نوشتن کد‌های مربوط به بازگشت به صفحه پیشین (Back)، کدهای زیر را در نظر بگیرید و آن‌ها را وارد کنید:

if(webBrowser1.CanGoBack)

{

webBrowser1.GoBack();

}

در این کد ما ابتدا بررسی می‌کنیم که آیا صفحه‌ای برای بازگشت به عقب وجود دارد یا خیر، در صورت مثبت بودن پاسخ، با استفاده از متد GoBack()، یک قدم به صفحه قبل باز خواهیم گشت.

تمرین: ۴ Button دیگر را با نام‌های btnForward، btnHome، btnStop و btnRefresh را به برنامه خود اضافه کرده و آیکون‌های مرتبطه را برای آن‌ها لحاظ کنید.

هنگامی که کار تمام می‌شود، شکل نهایی برنامه شبیه به زیر خواهد شد:

browser

ابتدا یک بار برنامه خود را اجرا کرده و آن را امتحان کنید. فعلاً تنها کلید Back کار می‌کند.

تمرین: برای اضافه کردن دیگر قابلیت‌ها به مرورگر خود، به کدهای زیر که مربوط به هرکدام است دقت کنید:

if(webBrowser1.CanGoForward)

{

webBrowser1.GoForward();

}

کد فوق برای Forward بود؛ سایر کدها نیز مشابه است که در اینجا ما تنها به ذکر متدهای آن اکتفا می‌کنیم:

webBrowser1.Stop();

webBrowser1.GoHome();

webBrowser1.Refresh();