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

آموزش مقدماتی برنامه نویسی در wp7

ابزار های مورد نیاز:

• Visual Studio 2010
• Windows Phone SDK 7.1
• اگر هم آپدیت جدید رو بگیرید Windows Phone SDK 7.1.1

توانایی های مورد نیاز : 

• برنامه نویسی به یکی از زبان های #C و یا VB.Net
• برنامه نویسی بوسیله SilverLight و یا WPF

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

• VS -->Visual Studio
• WP --> Windows Phone
• این مطب با زبان #C میباشد ولی تفاوتی با VB ندارد و میتوانید از کد های مشابه در VB هم استفاده کنید.

توجه : اگر حداقل زبان #C و یا VB.Net را بلد نیستید این مطب را نخوانید

بعداز نصب ابزار های بالا ، به ترتیب .
حالا میخوایم برنامه Hello World که هر برنامه نویسی میشناستش رو بنویسیم.

اول VS رو اجرا کرده و بر روی New Project کلیک کنید.



ساخت پروژه : 
خوب حالا توی صفحه باز شده از سمت چپ وارد دسته زبان دلخواه خود شده و بر روی SilverLight for Windows Phone کلیک کنید.
حالا سمت راست میتونید انواع مختلف پروژه هایی که میشه برای WP ساخت رو ببینید :



در پایین نام پروژه را HelloWorldApp نوشته و بر روی OK کلیک کنید.

حالا یک صفحه ظاهر میشود که ورژن SDK رو از شما میپرسه.
داخلش Windwos Phone OS 7.1 و 7.0 هست. که بهتر است همان 7.1 را انتخاب کرده و OK کنید.



حالا یک صفحه به شکل زیر ظاهر میشود که در سمت چپ ظاهر برنامه و سمت راست کد وجود دارد.



کد های سمت راست ، کدهای SilverLight هست که برای ظاهر برنامه از این کدها استفاده میشود. و کد های پشت برنامه همان #C و یا VB هستند.

ساخت برنامه : 
حالا Toolbox را بیاورید . برای اینکار از منو View بر روی ToolBox کلیک کنید. و یا CTRL+W,X
در اینجا لیستی از کنترل هایی که میتوانید برای WP استفاده کنید وجود دارد.

بر روی Button کلیک کرده و آن را کشیده و بر روی فرم قرار دهید.



شما میتوانید Button را در هر مکان از صفحه Design کشیده و قرار دهید.
آن را در وسط صفحه قرار دهید.




حالا بیایید متن روی دکمه را تغییر دهیم. از سمت راست در Propertice بر روی Content رفته و محتویات آن را به Click Me! تغییر دهید و Enter را فشار دهید.

حالا مثل مراحل قبل ولی اینبار یک TextBlock را بر روی فرم قرار دهید و هر چیزی که در قسمت Text آن در Propertice هست را پاک کنید که به یک مستطیل خالی تبدیل شود.



حالا بر روی Button ای که بر روی فرم قرار دادید دو کلیک کنید تا یک فایل دیگر به نام MainPage.Xaml.cs باز شود.
خوب همانطور که میبینید یک Event Handler برای Click دکمه هم ایجاد شده



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

کد:

private void button1_Click(object sender, RoutedEventArgs e)
{
    textBlock1.Text = "Hello World!!!";       //خطی که باید اضافه شود
}

همچنین فراموش نشود که نام برنامه را با کلیک بر روی TextBlock آن که در بالا قرار دارد را هم تغییر بدهید.



حالا برنامه شما آمادست. با زدن بر روی علامت Play بالا و یا دکمه F5 برنامه شما اجرا میشود.
بعد از اجرای برنامه بر روی دکمه "Click Me!!!" کلیک کرده و میبینید که متنی که در برنامه نوشتید پایین ظاهر میشود.



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


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

Solution Explorer:
با ساخت پروژه ، VS این فایل ها را برای شما میسازد که تک تک آنها توضیح میدهم : 


فایلهای App.xaml و MainPage.xaml دو فایل XAML هستند و فایلهای App.xaml.cs , MainPage.xaml.cs دو فایل #C هستند (یا App.xaml.vb هست که فایل VB.Net میباشد)
دو فایل با پسوند CS فایلهای کد پشت صحنه مربوط به فایلهای XAML هستند.
فایلهای دیگر نیز عکس هستند :

• ApplicationIcon.png : فایل آیکون برنامه شما در ویندوز فون.
• Background.png : فایل عکسی هست که وقتی برنامه شما Pin میشود نمایش داده میشود.
• SplashScreenImage.png : عکسی که وقتی برنامه شما در حال لود شدن میباشد نمایش داده میشود.

در زیر References نیز لیستی از کتابخانه هایی که (LIB , Assembly) برنامه شما با آنها کار میکند آورده شده است.
در زیر بخش Propertice این فایلها را میبینید : 

• AppManifest.xml : فایل Manifest برنامه که برای ساخت پکیج برنامه از آن استفاده میشود.
• AssemblyInfo.cs : فایلی که اطلاعاتی از قبلی ورژن برنامه نام برنامه و ... میباشد.
• WMAppManifest.xml : فایلی که Manifestها و Meta Data هایی مرتبط با Silverlight قابل اجرا بر روی ویندوز فون میباشد .

App.xaml و App.xaml.cs : 
حالا فایل App.xaml.cs را باز کنید. میبینید که یک Namespace به اسم پروژه شما از نوع کلاس App که معرف کلاس Silverlight برنامه است تعریف شده است.
اینجا جایی هست که عملیات شروع برنامه و اتمام برنامه مدیریت میشوند : 

کد:

namespace HelloWorldApp
{
    public partial class App : Application
    {
        public PhoneApplicationFrame RootFrame { get; private set; }

        public App()
        {
            ...
        }
        ...
    }} 

حالا فایل App.xaml را باز کنید.
شما آن را به فرمت xml میشناسید ولی این یک فایل XAML هست .
شما باید از این فایل برای نگه داری منابعی مانند : رنگ ، رنگ های از نوع Brush و استایل هایی که در برنامه استفاده میکند.
دقت کنید که Element اصلی Application میباشد که شامل 4 تعریف XML میباشد (Xmlns)

کد:

<Application 
    x:Class="HelloWorldApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
    ...
</Application>

اولین تعریف : تعریف استاندارد Silverlight میباشد که به کامپایلر این اجازه را میدهد که کلاس های Silverlight مانند همین Application را شناسایی کند.
دومین تعریف : تعریف خود زبان XAML میباشد.
سومین تعریف : کنترل های ویندوز فون
چهارمین : ظاهر و...
این دو فایل هنگام کامپایل شدن ، VS آنها را کامپایل کرده و فایل دیگری به نام App.g.cs میسازد.
در زمان اجرای برنامه این دو فایل هستند که تعیین میکنند باید یک برنامه با سایز 480x800 ساخته شود(فراموش نکنید در ویندوز فون 7 این سایز ثابت است)
و یک سری توضیحات دیگر در سایت منبع هست که زیاد مهم نیست :D

MainPage.xaml , MainPage.xaml.cs : 
این فایل همان صفحه اصلی برنامه شما است که در آن یک سری کد هم نوشتید.
فایل MainPage.xaml.cs را که باز کنید که کلاس میبینید که از نوع PhoneApplicationPage تعریف شده است.

کد:

namespace HelloWorldApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        ...
    }
} 

فایل MainPage.xaml را که باز کنید ، چهار تعریف اول همان چهار تای قبلی است.
بعد از آن d به منظور Designer و mc به منظور Markup Compability میباشد که از مزیت های برنامه نویسی XAML میباشد.
(توضیحات کامپایل و اجرا همانند قبل است)

کد:

<phone:PhoneApplicationPage 
    x:Class="HelloWorldApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        ...
    </Grid>
</phone:PhoneApplicationPage>

شما یک سری تنظیمات را در فایل MainPage.xaml میبینید. مانند FontFamily , FontSize , Foreground که با تغییر آنها ، تنظیمات کل صفحه عوض میشود.
که بعد از آن Grid , که در آن یک StackPanel میباشد به اسم TilePanel و چند TextBlock و یک Grid دیگر به نام ContentPanel میبینید.

کد:

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="HELLO WORLD APP" 
                       Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" 
                       Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Click Me!" Height="72" HorizontalAlignment="Left" 
                    Margin="146,143,0,0" Name="button1" VerticalAlignment="Top" 
                    Width="160" Click="button1_Click" />
            <TextBlock Height="59" HorizontalAlignment="Left" Margin="146,287,0,0" 
                       Name="textBlock1" Text="" VerticalAlignment="Top" Width="160" />
        </Grid>
</Grid>

وقتی شما مثلا یک TextBox را در محیط Design (طراحی) میکشید و قرار میدهید ، خود VS به صورت خودکار خطر مربوط به آن را در این قسمت ها مینویسد.
به عنوان مثال همان دکمه ای که گذاشتید و درونش نوشتید Click Me! را اینجا میبینید.
مقدار Content را نیز میتوانید از همینجا تغییر دهید (بجای منوی Propertice)
اگر بر روی Button دابل کلیک کنید خود VS برای شما یک Event Handler میسازد که میتوانید مقدار آن را در رویدادی که در قسمت کد نویسی به عنوان Click هست ببینید.

از این قسمت شما قابلیت های بیشتری برای طراحی نیز در اختیارتان میباشد(ولی خوب سخت تر نیز هست)
در اصل کد نویسی Silverlight همین قسمت میباشد.

وقتی شما F5 میزنید در فولدر Bin->Debug یک فایل XAP نیز ساخته میشود.
که این فایل برنامه شماست میتوانید آن را خودتان بر روی گوشی نصب کنید.