آموزش برنامه نویسی ویندوزفون جلسه ششم

به نام خدا

دانلود آموزش برنامه نویسی ویندوزفون جلسه ششم

باسلام خدمت کاربران وبسایت آموزشی اسفندونه

جلسه ششم آموزش برنامه نویسی ویندوزفون هست.

و اینکه از این جلسه به بعد روال آموزش عوض میشه و تو هر دو جلسه یا یک جلسه یک پروژه با هم خواهیم ساخت و در استور منتشر میکنیم.

در این جلسه به مباحث ذیل میپردازیم:

  • نحوه ارسال شماره و تماس به تلفن
  • ارسال یک لینک اینترنتی به تلفن و بازکردن آن درون مرورگر پیشفرض
  • قرار دادن تصویر و تعویض آن با استفاده از کد
  • دستور if ,Else, if else

دراین جلسه میخوایم یه اپلیکیشنی بسازیم که مثلا شش رقم اول کارت بانکی رو کاربر وارد کنه و برنامه ما نام و تلفن و کد USSD و وبسایت بانک رو نمایش بده.

بدلیل اینکه بعضی از دوستان با سیلورلایت و بعضی با ویندوزفون پروژه رو مینویسن من هر دونوع کد رو در آموزش قرار میدم.

چون مراحل اولیه قبلا توضیح داده شده تو این جلسه دیگه توضیح نمیدم.

یک اپلیکیشن با نام دلخواه مثلا Codebank بسازید.

خب ما باید چند تکست بلاک و چند دکمهButton بسازیم و براشون کد بنویسیم.

یک تکست بلاک با نام lbltitle بسازید:

فونت : دلخواه اندازه قلم: دلخواه جهت: راست به چپ

متن اون رو به : .”شش رقم اول کارت خود را وارد کنید” تغییر بدید.

موقیتش رو به بالای برنامه تغییر بدید:

1

حالا باید تکست باکس هایی رو قرار بدیم تا کاربر بتونه درون اونها شش رقم اول کارت بانکی رو وارد کنه.

درنتیجه یک تکست باکس میسازیم و نامش رو به txtinput تغییر میدیم.

ویژگی هاشو به شکل گفته شده تغییر بدید:

فونت: دلخواه || اندازه: متناسب با فضا || نوع ورودی: فقط عدد* || جهت: چپ به راست

نکته : برای تنظیم ورودی تکست باکس به عدد(به صورتی که نشه حرفی رو بهش وارد کرد) کار های انجام شده را با تصویر انجام دهید.

اول آی دی(نام)تکست باکس به txtinput تغییر میدیم. سپس در پنجره Properties به قسمت “Common” میرویم در این قسمت به دنبال بخش “Input scope” بروید.

شکل ۲ :

2

آبی: آن را به Number تغییر میدهیم. در این لیست کشویی انواع ورودی ها هست که متناسب با نوع تکست باکس میتونه انتخاب بشه.

قرمز: همونطور که جلسات قبل ذکر شد Text متن پیشفرض هست اون رو به شش تا صفر تغییر بدید.

حالا متن پیشفرض ما ۰۰ ۰۰۰۰ هست و نوع ورودی تکست باکس عدد.

خب این شد تکست باکس ما:

3

من رنگش رو به نارنجی تغییر دادم شما دلخواه خودتونه رنگش.

حالا باید کاری کنیم که کاربر نتونه بیشتر از ۶ عدد درون تکست باکس وارد کنه برای اینکار:

در پنجره Properties قسمت Text بخش maxleghnt  تعداد حداکثر کاراکتر ورودی را به ۶ تغییر میدیم:

5

توجه داشته باشید که روی مثلث رو به پایین کلیک کنید.

خب حالا ما به یک تکست باکس نیاز داریم که ده رقم بقیه کارت بصورت پیشفرض باشه و کاربر گمراه نشه.

ینی فقط کاربر میتونه شش رقم اول رو تغییر بده و بقیه اعداد قیرقابل تغییر هستند.

برای این کار میتونیم دوکار انجام بدیم:

یک اینکه یک تکست بلاک بسازیم و دیگری اینکه یک تکست باکس بسازیم و خاصیت اون رو فقط خواندنی یا همونReadOnly کنیم.

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

یک تکست بلاک بسازید:

 

ویژگی هاشو به صورت گفته شده تغییر بدید:

 

نام: txtnum

فونت: فونت انتخاب شده در تکست باکس txtinput || رنگ: رنگ انتخاب شده در تکست باکس txtinput || جهت نوشتاری: چپ به راست || اندازه فونت : اندازه فونت تعیین شده در تکست باکس txtinput || اندازه تکست باکس: عرض به اندازه تکست باکس txtinput

علت این تشابه با تکست باکس txtinput چیست؟

علت این است که ما میخواهیم تکست باکس دومی یعنی(txtnum) مقابل تکست باکس txtinput قرار دهیم – این کار باعث انسجام و زیبایی ظاهری پروژه خواهد شد.

میریم سراغ تغییر ویژگی تکست باکس txtnum به Readonly:

در پنجره Properties  قسمت common تیک Is readonly را بزنید:

4

تکست پیشفرض همون Text رو به مثلا بقیه شماره کارت تغییر بدید.(به عدد توی تصویر کار نداشته باشید).

من گذاشتم: ۲۰۹۷  ۵۶۱۰ ۷۹   برای من این شکلی شده.

4444

دقت کنید هنگام درگ کردن(کشیدن) این خطوط ظاهر بشن و یجورایی حس کنید که این تکست باکس مقابل تکست باکس txtinput قرار گرفته.

اگه چمیدونم مثلا عرض یا طول یا اندازه فونت یا هرچی تکست باکس دومی کمتر بیشتر بود تنظیمش کنید.

خب ما تااینجا پیش رفتیم به ابزار هایی که نیاز داریم:

۱)سه دکمه

۲)چند عکس

۳)چند تکست بلاک

و در آخر کد نویسی

بنظر شما بهتر نیست در زیر این دو تکست باکس برای زیبایی برنامه یک عکس از کارت بانکی قرار بدیم؟

من عکسی رو از اینترنت گرفتم و قبلا در فتوشاپ ویرایش کردم. این عکس:

12

من عکس هایی که در پروژه به کار بردم آپلود و در سایت اسفندونه قرار دادم.

برای بارگزاری عکس در برنامه مراحل زیر را دنبال کنید:

در پنجره Toolbox ابزار Image را انتخاب کنید.

456

و روی صفحه بکشید(Drag)کنید.

به اینشکل در خواهد امد.

4543543

روی آن کلیک کنید نام آن را به imgcard تغییر بدید.

حالا میخواهیم عکسی را در پروژه قرار دهیم و آن را بوسیله ابزار Image  نمایش دهیم.

برای این کار روی Solution Explorer  کلیک کنید تا باز شود.

روی پوشه Assets راست کلیک کنید.

روی Add سپس روی Existing Item کلیک کنید:

563

پنجره کاوش(Browse) باز خواهد شد.

عکس خود را انتخاب کنید.(عکس کارت عابربانک)

میبینید که عکس به اپلیکیشن اضافه شده است.

شما میتوانید هرچیزی مثل عکس – فیلم – آهنگ – فایل متنی و هرچیزی که اپلیکیشن شما به آن نیاز دارد به همین روش به اپلیکیشن خود اضافه و با استفاده از ابزار در اپلیکیشن از آن استفاده کنید.

میبینید که تصویر ۱۲٫JPG اضافه شده است.

653

خب روی image کلیک کنید.

به پنجره Properties رفته – قسمت Common بخش Source :

با انتخاب لیست کشویی فایل مورد نظرتون رو انتخاب کنید. عکس ما ۱۲٫JPG بود. انتخابش میکنیم.

6

حالا در قسمت Stretch باید نوع نمایش تصویر یا کشیدگی تصویر رو مشخص کنیم

معرفی :

None: تصویر را در اندازه واقعیش نمایش میدهد.

Fill: اندازه تصویر را به تناسب اندازه ابزار image  تنظیم میکند.

Uniform: به تناسب اندازه تصویر – ابزار image  را پوشش می دهد.

Uniform Fill: با رعایت تناسب و اندازه تصویر و میزان اندازه ابزار image اندازه را تنظیم میکند(خودتون استفاده کنید میفهمید منظور رو).

در این پروژه گزینه Fill را انتخاب کنید.

5555

اندازه تصویر رو تنظیم کنید و اون رو در زیر تکست باکس های txtinput و txtnum قرار دهید.

نکته : اگر تصویر روی تکست باکس ها قرار گرفت(که صد درصد ) قرار میگیرد – چون تصویر بعد از تکست باکس ها ایجاد شده است(بحث لایه ها). این کار را انجام می دهیم:

sendtoback

روی تصویر یا شی مورد نظر راست کلیک کرده:

گزینه Order سپس روی گزینه send to back کلیک کنید:

معرفی:

Bring to Front: ارسال این شی به بالا ترین لایه (روی تمامی اشیا)

Bring Forward : ارسال این شی به یک لایه بالاتر(یک لایه بالاتر از لایه های زیرین)

Send Backward:ارسال این شی به یک لایه پایین تر

Send to back: ارسال این شی به زیرین ترین لایه(زیر تمامی اشیا) ما این گزینه رو انتخاب میکنیم.

 

تصویر کارت رو در زیر تکست باکس ها بصورت حرفه ای تنظیم کنید.

برای من این شد.

9

خب!

فعلا تا همینجا برای این جلسه کافی هست.

ادامه همین پروژه در جلسه بعد.

اگر قسمتی نامفهوم بود در نظرات قید کنید که راهنماییتون کنم.

موفق باشید.

پایان جلسه ششم.

 

وبسایت آموزشی اسفندونه
Keikhosro Heidari Nejat

قسمت قبلی آموزش

قسمت بعدی آموزش بزودی

لینک کوتاه شده مطلب: http://www.esfandune.ir/m618w

درباره abbasalim

سلام دوم بهمن امسال(93) بهترین روز زندگی من بود. روزی که با همسرم آغاز زندگی مشترکمون رو شروع کردیم. ببخشید که این چند وقته نتونستم مطلب جدید بزارم، برامون و برای همه دعا کنید.

ما را دنبال کنید:


آموزش های پیشنهادی سایت (نمایش همه):


۷ نظر

نظر خود را بیان کنید

*

code

بسته آموزشی زمستانه فارسی اندروید
تخفیف نورورزی
تخفیف سورس اینستا
تخفیف سورس اینستا
تخفیف سورس اینستا
تخفیف سورس اینستا