گییج عمودی در WPF با استفاده از ابزارهای تلریک

اگر برنامه‌نویس کامپیوتر باشید و با داده سروکار داشته باشید لزوم گزارش‌گیری را حتما مشاهده نموده‌اید. فرض کنید یک برنامه برای منابع انسانی شرکتی نوشته‌اید و تمامی داده‌های پرسنل شرکت نیز توسط اپراتورها وارد شده، حال اگر نتوانید گزارش‌هایی از اطلاعات واردشده به برنامه را تهیه کرده و به کاربران آن ارائه نمایید، برنامه شما کارایی نخواهد داشت. یا وقتی که اطلاعات مالی شرکت را در برنامه مالی(نرم‌افزار حسابداری) وارد کرده‌اید ولی نمی‌توانید حتی گزارشی از موجودی بانک‌تان را مشاهده نمایید آنگاه آن برنامه برای شما ارزش چندانی ندارد. پس فقط ورود اطلاعات نیست که مهم است بلکه گزارش‌گیری از داده‌ها بخصوص برای کاربران آن نیز اهمیت ویژه دارد. اهمیت گزارش آنگاه مهم‌تر می‌شود که لازم باشد گزارشی به مدیریت ارشد برای تصمیم‌های مهم که می‌تواند سرنوشت شرکت را تغییر دهد ارائه نمایید. در برنامه نویسی با ابزارهایی چون ویژوال‌استودیو(Visual Studio) یا دلفی(Dephi) و ... ابزارهایی همانند ریپورت بیلدر(Report Builder) وجود دارد که به شما در ارائه گزارش کاربری کمک می‌کند، اما برای گزارش‌های مدیریتی چه باید کرد.

ابزارهایی چون کلیک‌ویو و پاوربی‌آی و ... کاملا محیط مخصوص به خود دارند و محیط گزارش‌گیری در آن‌ها از محیط نرم‌افزارنویسی جدا می‌باشد. اما آیا می‌توان محیط گرافیکی زیبایی چون کلیک‌ویو را درون ویژوال‌استودیو وارد کرد. پاسخ بلی هست. شرکت ماکروسافت برای محیط برنامه‌نویسی ویژوال‌استودیو یک پایه گرافیکی به‌نام WPF (کوتاه‌ شده (Windows Presentation Foundation ایجاد کرده‌است.

برنامه‌نویسی در این محیط کاملا با محیط اصلی ویژوال‌استودیو متفاوت است. اما فرض براین است که شما با این محیط آشنایی دارید. البته درآینده حتما آموزش برنامه‌نویسی WPF را ارائه خواهم‌کرد. درادامه نحوه ساخت یک گییج خطی عمودی(Vertical Linear Gauge) را با بکارگیری ابزارهای تلریک(Telerik) فراخواهید گرفت.


فرض براین است که شما برنامه‌نویس هستید و حتما با ویژوال‌استودیو هم برنامه نوشته‌اید و یا می‌نویسید و درضمن با WPFهم حداقل آشنایی دارید. اگر در سیستم شما ویژوال‌استودیو نصب باشد لازم است کامپوننت‌های تلریک(Telerik Components) را نصب کنید(در سیستمی که من کارمی‌کنم ویژوال‌استودیو ورژن 2012 با تلریک کامپوننت ورژن 2020 نصب می‌باشد. اما شما میتوانید آن را از سایت‌هایی چون سافت98 و پی‌سی‌دانلود و ... و یا از سایت اصلی دانلود نموده و نصب نمایید).

پس از نصب تلریک و بازکردن ویژوال استودیو یک پروژه جدید از نوع Telerik Wpf Application ایجاد کنید(اگر بدلایلی همچون خطا در نصب و یا ورژن خاص تلریک این گزینه را مشاهده نکردید پروژه‌ی از نوع WPF Application ایجادکنید). در قسمت Name(پیکان شماره 3) نام پروژه VerticalGaugeوارد کنید(توجه در زبان برنامه‌نویسی ویژوال‌بیسیک هم گزینه Telerik Wpf Application وجود دارد).

فقط درصورتی که از گزینه Telerik Wpf Application استفاده کنید باید در صفحه جدید گزینه Blank را انتخاب کنید و دکمه Finish را بزنید(شکل زیر).

از بخش Solution Explorer روی فایل MainWindow.xaml دابل‌کلیک کنید باز شود.

پس از بازشدن فایل MainWindow.xaml صفحه‌ای مشابه با شکل زیر باز می‌شود

کد زیر را به بخش ویندوز آن اضافه کنید:(در واقع این کد منبع ابزارهای تلریک را برای استفاده آماده‌می‌کند و در شکل بالا کادر قرمز کشیده‌شده)

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

توجه کنید از این پس هر‌آنچه تغییر می‌دهیم میان دو دستور گرید باز و بسته قرارخواهدگرفت.

حال از بخش ابزارها و از قسمت Telerik UI for WPF - Data Visualization گزینه RadVerticalLinearGaugeرا گرفته و داخل فرم قرار دهید،

و یا می‌توانید کد زیر را درون گرید باز و بسته کپی کنید(ممکن است با کپی‌کردن error ظاهر شود بنابر این بهتر است از روش بالا یعنی کشیدن و انداختن RadVerticalLinearGauge داخل فرم بجای کپی‌کردن کد استفاده کرد).

<telerik:radverticallineargauge height="100" width="100"/>

شکل زیر ظاهر خواهدشد.

همانگونه که در شکل بالا مشاهده می‌کنید اصلا شبیه یک گییج‌عمودی نیست, برای مدرج کردن گییج کد بالا را با کد زیر جایگزین کنید.

<telerik:radverticallineargauge height="100" width="100">
 <telerik:verticallinearscale majorticks="6" max="30" min="0" rangelocation="OverOutside"/>
</telerik:radverticallineargauge>

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

<telerik:radverticallineargauge height="100" width="100">
 <telerik:verticallinearscale majorticks="6" max="30" min="0" rangelocation="OverOutside">
  <telerik:verticallinearscale.indicators>
   <telerik:marker value="25"/>
  <⁄telerik:verticallinearscale.indicators>
 <⁄telerik:verticallinearscale>
<⁄telerik:radverticallineargauge>

حال یک گییج کامل درست کرده‌ایم که می‌تواند مقدار را نشان دهد(مقدارعددی Value در بخش Marker مقدار گییج را نشان می‌دهد).

سوال از شما: اگر بخواهیم رنگ‌بندی گییج متفاوت باشد چه باید کرد؟ یا بجای علامت ► از شکل دیگری استفاده‌کرد؟ چیزی مشابه شکل زیر:

برای دیدن همه این تغییرات به فایل ضمیمه مراجعه شود.


فایلهای مطلب

کپی
لینک اشتراک گذاری

  • 504
  • 0