آموزش قدم به قدم برنامه نویسی ویندوز فون 7
نمایش نتایج: از شماره 1 تا 6 , از مجموع 6

موضوع: آموزش قدم به قدم برنامه نویسی ویندوز فون 7

  1. ★ سحربلا ★ آواتار ها
    ★ سحربلا ★
    کاربر سایت
    Feb 2010
    5,629
    1,855
    تشکر شده : 2,196

    پیش فرض آموزش قدم به قدم برنامه نویسی ویندوز فون 7

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

    البته یه نکته رو هم در نظر داشته باشید که همینجوری با یه آموزش تئوری نمیتونید یه شبه برنامه نویس بشید!!!

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

    دوستان لطفا عجله نکنید, من سعی میکنم هر روز یک بخش از آموزش رو بگذارم چون سرم خیلی شلوغه پس لطفا صبور باشید

    از پست بعد شروع به نوشتن آموزش میکنم که همه ی قسمت ها جدا باشن
    #1 ارسال شده در تاريخ 23rd March 2012 در ساعت 19:00

  2. یک کاربر از این پست تشکر کرده است :


  3. ★ سحربلا ★ آواتار ها
    ★ سحربلا ★
    کاربر سایت
    Feb 2010
    5,629
    1,855
    تشکر شده : 2,196

    پیش فرض

    جلسه ی اول
    خوب اولین جلسه ی آموزش رو شروع میکنیم

    "توجه کنید که با نسخه های پرتابل اون نمیتونید برنامه نویسی کنید"

    بعد از ایشالا 4 ساعت اگه با این سرعت بالای اینترنت ایران SDK دانلود شد, ویژوال استدیو رو باز کنید (اگه ندارید باید دانلودش کنید! ترجیحا از ورژن 2010 استفاده کنید ولی من خودم 2008 دارم!)

    یک پروژه جدید ایجاد کنید و Silverlight for WindowsPhone رو انتخاب کنید



    حالا ورژن مورد نظر ویندوزفون که میخواید براش برنامه رو بسازید انتخاب کنید:

    منظورم قسمت اول OS Version هست که میتونه 7.0 یا 7.1 باشه



    حالا باید نوار ابزار ها نمایش داده بشه و شکلی شبیه این رو ببینید:



    -فایل های موجود و مورد نیاز برای ساختن برنامه Silverlight:

    Project file: منظور توضیحات برنامه هست

    AppManifest.xml: یه فایل برای ساخت برنامست که فعلا ما بهش کاری نداریم پس بهش دست نزنید

    AssemblyInfo.cs: اینم برای ورژن و اسم و بقیه اطلاعات برنامه در فرمت Assembly هست

    WMAppManifest.xml: اطلاعات برنامه شما توش ذخیره میشه و بیشتر به درد زمانی که میخواید تو مارکت ثبتش کنید میخوره!

    MainPage.xaml: مربوط به رابط کاربری و صفحهی اول برنامه میشه

    MainPage.xaml.cs: یکسری کد ها رو در صفحه ی اول برنامه اجرا میکنه که برای استفاده از کلاس های مختلف ازش استفاده میشه

    خوب رسیدیم به قسمت جالبش:

    ApplicationIcon.png
    Background.png
    SplashScreenImage.jpg


    اینها 3 تا فایل عکس هستند که به ترتیب از بالا به پایین مربوط به:


    آیکون برنامه
    عکس پس زمینه
    عکس شروع برنامه (همون لودینگ خودمون)
    #2 ارسال شده در تاريخ 23rd March 2012 در ساعت 19:01

  4. یک کاربر از این پست تشکر کرده است :


  5. ★ سحربلا ★ آواتار ها
    ★ سحربلا ★
    کاربر سایت
    Feb 2010
    5,629
    1,855
    تشکر شده : 2,196

    پیش فرض

    جلسه ی دوم
    چون خواستم یه ذره بیشتر حال کنید یه ذره دیگه هم آموزش میذارم

    خوب حالا برای اضافه کردن صفحه به برناممون میتونید از گزینه ی Add New Item استفاده کنید



    خوب حالا وقتی میخواید برنامه رو ایجاد کنید به طور پیشفرض یه صفحه به اسم MainPage ایجاد میشه

    میتونید اسم این فحه رو تغییر بدید یا صفحات جدید ایجاد کنید ولی برای ایجاد تغییرات کلی در رابط کاربری برنامه باید فایل AppManifest.xml رو ادیت کنید که بعدا راجبش توضیح میدم (فعلا با AppManifest.xml کار نداشته باشید که مبادا خرابکاری نکنید)

    ساختن برنامه به صورت ویژوال:

    چند تا عکس میگذارم که قسمت های مختلف SDK رو براتون مشخص کردم:







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

    كد:

    <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton IconUri="/Images/fillup.png" Text="add fill-up" Click="" IsEnabled="False" /> <shell:ApplicationBarIconButton IconUri="/Images/car.png" Text="car details" Click="CarButton_Click" /> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem Text="about fuel tracker" Click="AboutMenuItem_Click"/> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>
    و برای گذاشتن عکس روی اونها میتونید از کد زیر استفاده کنید:

    كد:

    <shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.png" Text="save car" Click="SaveButton_Click" />
    خوب اینم از جلسه دوم
    #3 ارسال شده در تاريخ 23rd March 2012 در ساعت 19:01

  6. یک کاربر از این پست تشکر کرده است :


  7. ★ سحربلا ★ آواتار ها
    ★ سحربلا ★
    کاربر سایت
    Feb 2010
    5,629
    1,855
    تشکر شده : 2,196

    پیش فرض

    خوب امروز وقت ندارم که زیاد توضیحات بدم ولی برای اینکه بتونید از آیکون هایی که جلسه قبل آموزش ساختش رو دادم استفاده کنید یک آموزش کوچیک میذارم

    شما میتونید با استفاده از آیکون ها یا منو ها بین صفحات جا به جا بشید و برای این کار میتونید از کد زیر استفاده کنید:

    كد:

    <HyperlinkButton NavigateUri="SecondPage.xaml" />


    توجه کنید که باید اسم صفحه ی مورد نظر خودتون رو به جای SecondPage بگذارید
    #4 ارسال شده در تاريخ 23rd March 2012 در ساعت 19:02

  8. یک کاربر از این پست تشکر کرده است :


  9. ★ سحربلا ★ آواتار ها
    ★ سحربلا ★
    کاربر سایت
    Feb 2010
    5,629
    1,855
    تشکر شده : 2,196

    پیش فرض

    برای اضافه کردن عکس ابتدا باید یک عکس با پسوند JPG یا PNG داشته باشید

    حالا قسمت Build Action فایل رو روی حالت Content بذارید و یک Image Controle به صفحه اضافه کنید و در قسمت Source آدرس عکس رو بگذارید

    كد:

    <Image Source="/Images/myPicture.jpg">
    عکس رو هم میتونید به صورت آنلاین لود کنید و هم میتونید از مموری Internal دستگاه لود کنید و یا اینکه با DLL اصلی برنامتون Bind کنید و از اونجا لود کنید (این روش آخر یه ذره سخت تره ولی در آینده توضیح میدم)

    برای اینکه بتونید اندازه ی عکس رو تغییر بدید باید اندازه هارو از کد زیر عوض کنید

    كد:

    <Image Height="75" Width="75" Margin="15" Stretch="UniformToFill" Source="{Binding Picture}" VerticalAlignment="Top"/>
    خوب حالا اگر بخوایم یه عکس رو به عنوان بکگراندمون قرار بدیم چی؟؟؟ خوب ادامه ی آموزشو بخونید تا بگم

    اول اینکه ارتفاع عکستون حتما باید 800 پیکسل باشه ولی عرض اگر زیاد تر باشه مشکلی نیست چون تو طول صفحات جا به جا میشه!

    حالا دوباره مثل دفعه قبل عمل میکنیم:

    برای اضافه کردن عکس ابتدا باید یک عکس با پسوند JPG یا PNG داشته باشید

    حالا قسمت Build Action فایل رو روی حالت Content بذارید و یک Image Controle به صفحه اضافه کنید و در قسمت Source آدرس عکس رو بگذارید

    تو کدی که پایین میذارم اگه از عکس با فرمت PNG استفاده کنید میتونید درجه ی روشنی عکس رو تنظیم کنید (با تغییر مقدار Opacity به 0 یا 1)

    كد:

    <ImageBrush x:Key="Name" ImageSource="/Images/gasPump.png" Opacity=".1" Stretch="UniformToFill" />
    حالا باید از کد دستوری زیر استفاده کنید تا عکس رو به عنوان بک گراند بشناسه

    كد:

    <!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="{StaticResource Name}">
    توجه کنید که در همه ی کد ها هرجا Name هست باید با اسم دلخواه خودتون عوض کنید. سعی کنید اسمی بگذارید که اگر بعدا خواستید کد رو دستکاری کنید کلی نگردید دنبالش و با یه سرچ کوچیک پیداش کنید!

    برای گذاشتن عکس موقع لود شدن برنامه چند راه داره که من راحت ترینشو میگم!

    وقتی مرحله ساخت برنامتون تموم شد و فاید XAP رو ساختید میتونید فایل رو با WinRAR باز کنید و SplashScreenImage.jpg رو جایگزین کنید!

    البته از داخل خود studio هم میشه که یه ذره دردسر داره!

    خوب اینم از آموزش ایندفعه , به امید روزی که WP7 رده ی اول سیستم عامل ها قرار بگیره
    #5 ارسال شده در تاريخ 23rd March 2012 در ساعت 19:02

  10. یک کاربر از این پست تشکر کرده است :


  11. ★ سحربلا ★ آواتار ها
    ★ سحربلا ★
    کاربر سایت
    Feb 2010
    5,629
    1,855
    تشکر شده : 2,196

    پیش فرض

    خوب تو این جلسه میخوایم با هم روش هماهنگسازی برنامه با تم گوشی رو بررسی کنیم



    شما برای اینکه بتونید رنگ اجزای مختلف برنامه رو با تم اصلی دستگاه هماهنگ کنید میتونید به جای گذاشتن کد رنگ و ... از این کد استفاده کنید:

    كد:

    {StaticResource PhoneAccentBrush}
    برای اینکه بهتر متوجه بشید یک مثال ساده هم میزنم:

    مثلا برای هماهنگ سازی رنگ یک دکمه با AccentColor میتونید کد رو به این صورت ادیت کنید:

    كد:

    <Button Content="Button" Height="72" Background="{StaticResource PhoneAccentBrush}" Width="160" />


    البته شما میتونید استایل هارو خودتون بسازید که نحوه ی ساختن اون ها از کد زیر کاملا معلوم هست(یه ذره با کد ور برید تغییرات رو مشاهده کنید تا متوجه بشید چون این قسمت خیلی جای مانور داره نمیشه توضیح داد!)

    كد:

    <Grid.Resources> <Style x:Key="LabelStyle" TargetType="TextBlock"> <Setter Property="HorizontalAlignment" Value="Right"/> <Setter Property="Margin" Value="15,5" /> </Style> <Style x:Key="ValueStyle" TargetType="TextBlock"> <Setter Property="Margin" Value="15,5" /> </Style> </Grid.Resources>. . .<TextBlock Grid.Row="2" Grid.Column="0" Style="{StaticResource LabelStyle}" Text="date:" /> <TextBlock Grid.Row="2" Grid.Column="1" Style="{StaticResource ValueStyle}" Text="{Binding LastFillup.Date, StringFormat=\{0:d\} }" />
    برای تغییر رنگ Listbox ها و... روش دیگری وجود داره که آموزشش رو در پست بعد میدم!

    امیدوارم تا اینجا این آموزشها کمک کرده باشه به یادگیری شما
    #6 ارسال شده در تاريخ 23rd March 2012 در ساعت 19:03

  12. یک کاربر از این پست تشکر کرده است :


علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •