Universal Windows Platform یا به اختصار UWP به معنای پلتفرم یکپارچه ویندوز است، یکپارچه شدن کدها و نوشتن یکبار کد و خروجی گرفتن از آن برای ویندوز و ویندوز فون از زمان ویندوز و ویندوز فون 8.1 شروع شد، در پروژه یکپارچه ویندوز/فون 8.1 که به WinRT نیز معروف است، هنگامی که یک راه حل ایجاد میکردیم سه پروژه ایجاد میشد، یکی ویندوزی، یکی ویندوزفونی و دیگری نیز پروژه ای به نام Shared یا مشترک بود که اگر کد، عکس یا فایل، صفحه جدیدی را در پروژه Shared ایجاد می کردیم در هر دو پروژه قابل استفاده بودند، همچنین نیز می توانستیم برای هر کدام در پروژه های خود(پروژه ویندوزی یا ویندوزفونی) کدهایی را بنویسیم که فقط میشود در همان پروژه استفاده کرد. بدی پروژه های یکپارچه ویندوز/فون 8.1 این بود که بعضی از کدها در ویندوز وجود داشت و در ویندوزفون نمیتوانستیم از آن استفاده کنیم و همچنین بعضی از کدها در ویندوزفون قابل استفاده بود و در ویندوز قابل استفاده نبود و باعث دوگانگی کدنویسی برای ویندوز و ویندوزفون میشد.

اما در ویندوز 10 مایکروسافت همه کدها را یکی کرده است، هنگامی که یک راه حل جدید برای ویندوز یکپارچه توسط ویژوال استودیو ایجاد می کنیم، فقط یک پروژه در آن ایجاد می شود که قابل اجرا بر روی هر دستگاهی که از سیستم عامل ویندوز 10 استفاده می کند، می باشد. یک بار کدنویسی را انجام میدهیم و در هر دستگاهی برنامه مان را اجرا می کنیم. پایه و اساس کدهای UWP نیز همان WinRT است، پس نمی توانیم از Silverlight که در ویندوزفون 8.0 و 8.1 نیز وجود داشتند استفاده کنیم.

نرم افزاری که ما در اینجا از آن استفاده می کنیم ویژوال استودیو 2015 نسخه Community به روز رسانی دوم می باشد.

دانلود نسخه های مختلف ویژوال استودیو 2015 به همراه آپدیت دوم:

نکته: در هنگام نصب ویژوال استودیو ممکن است به اینترنت نیاز داشته باشید، پس حداقل حجم اینترنت 2 گیگابایت داشته باشید تا در هنگام نصب به مشکل برنخورید.

نکته: این آموزش ها بر پایه ویژوال استودیو 2015 نسخه Community به روز رسانی دوم می باشد.

نکته: ویندوز رایانه شما حتما حداقل باید ویندوز 10 نسخه 10240 یا بالاتر باشد.

نکته: اگر می خواهید شبیه ساز ویندوز 10 موبایل روی کامپیوتر شما نصب شود، حداقل رم کامپیوتر شما باید 4 گیگابایت یا بالاتر باشد.

نکته: برای نصب شبیه ساز یا Emulator نیاز به فعال سازی Hyper-V دارید.

نکته: چنانچه رم کامپیوتر شما کمتر از 4 گیگابایت است، نگران نباشید، تنها نیاز دارید که یک موبایل ویندوز 10ـی داشته باشید(فرقی نمی کنید Insider باشد یا رسمی) تا به صورت مستقیم از ویژوال استودیو برنامه را در گوشی خود با کابل USB اجرا کنید.

آموزش نصب ویژوال استودیو 2015 و نصب SDK ویندوز 10

پس از دانلود فایل ISO مربوط به ویژوال استودیو آنرا با استفاده از نرم افزارهای فشرده سازی مانند WinRAR آنرا Extract کنید:

فایل vs_community.exe را اجرا کنید(در نسخه های دیگر vs_enterprise.exe یا vs_professional.exe خواهد بود).

چنانچه به اینترنت دسترسی نداشته باشید با این تصویر روبه رو می شوید:

چنانچه روی Continue کلیک کنید می توانید به صفحه بعدی نصب بروید، اما پیشنهاد می شود به اینترنت وصل شوید و روی Retry کلیک کنید. پس از انجام این کار با این صفحه مواجه میشوید:

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

نوع نصب را ما باید Custom انتخاب کنیم تا بتوانیم هر چیزی را که می خواهیم نصاب برایمان نصب کند و هر چیزی که نمی خواهیم را نصب نکند. پس از کلیک بر روی Custom در قسمت Choose the type of installation روی Next کلیک کنید.

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

اگر این موارد تیک نداشت آنها را تیک بزنید، در تصویر بالا چون من برای ویندوز/فون 8.1 و ASP هم برنامه نویسی میکنم دو گزینه زیر نیز تیک خورده اند:

ویژوال استودیو در زیر صفحه برای شما می نویسد که چه فضای آزادی در پارتیشن برای نصب نیاز دارد. مثلا در تصویر بالا 23 گیگابایت برای نصب نیاز دارد.

روی Next کلیک کنید تا با تصویر زیر مواجه شوید:

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

پس از اتمام نصب ویژوال استودیو آنرا را اجرا کنید، در اولین اجرا تصویری مانند تصویر زیر را نشان می دهد (نکته چون من یادم رفته بود از این قسمت عکس بگیرم، دو عکس زیر مربوط به نصب ویژوال استودیو 2013 است، اما در این قسمت چندان تفاوتی ندارند)

ویژوال استودیو از شما می خواهد که به حساب مایکروسافت خود وصل شوید، نیازی نیست که حتما به حساب خود وصل شوید، اگه می خواهید به ویژوال استودیو حساب خود را دهید روی Sign In کلیک کنید، در غیر اینصورت زیر Not now, maybe later کلیک کنید تا این صفحه را نادیده بگیرد.)

از شما می خواهد زبان پیشفرض پروژه ها و پوسته ویژوال استودیو را انتخاب کنید، در قسمت Development Settings گزینه Visual C# را انتخاب کنید، من چون پوسته تاریک ویژوال استودیو را بیشتر می پسندم گزینه Dark را در انتخاب پوسته، انتخاب می کنم.

در آخر روی Start Visual Studio کلیک کنید تا تنظیماتی را برای شما انجام دهد و سپس ویژوال استودیو را برای شما باز کند.

آنلاک کردن موبایل یا کامپیوتر برای نصب و اجرای برنامه ها

برای آنلاک کردن موبایل یا کامپیوتر به Settings بروید، سپس به Update & security رفته و گزینه For developers را انتخاب کنید. پس از باز شدن این قسمت گزینه Developer mode را تیک بزنید. به همین راحتی موبایل یا کامپیوتر ویندوز 10یی شما آنلاک شد.

ویژوال استودیو را باز کنید و پروژه جدید Windows Universalـی به نام Hello World ایجاد کنید.(طبق شماره ها پیش بروید)

پس از ایجاد پروژه ویژوال استودیو از شما می خواهد که نسخه ویندوز 10 ای که می خواهید برای آن برنامه نویسی کنید و کمترین نسخه ای که برنامه شما می تواند روی آن اجرا شود را انتخاب کنید. در اینجا هر دو را روی نسخه 10240 قرار میدهیم و روی OK کلیک میکنیم:

صفحه اولی که بعد از آن نشان می دهد این است. کلاس App.xaml.cs برای شما به صورت پیشفرض هر بار که پروژه جدیدی ایجاد کنید باز خواهد شد. در این کلاس می توانید تعیین کنید که کدام صفحه، صفحه اول برنامه شما باشد، تعیین کنید که برنامه بتواند از بیرون و با استفاده از OpenWith فرمتی را با استفاده از برنامه شما باز کند و خیلی کارهای دیگر... .

کلاس App.xaml.cs را ببندید و روی MainPage.xaml در پنجره راه حل دو بار کلیک کنید تا صفحه طراحی آن باز شود:

چنانچه مانند تصویر بالا خطای بالا را مشاهده کردید روی گزینه اول یعنی Click here to reload the designer کلیک کنید، اگر دوباره این خطا را نشان داد روی مورد دوم کلیک کنید، اگر باز هم این اتفاق افتاد، صفحه را ببندید و دوباره باز کنید، اگر باز هم این خطا را مشاهده نمودید ویژوال استودیو را ببندید و دوباره آنرا باز کنید، سپس پروژه را باز کرده و روی MainPage.xaml کلیک کنید تا با این صفحه رو به رو شوید:

روی Toolbox کلیک کنید تا پنجره آن باز شود، سپس مانند عکس روی شماره 2 که مشخص شده است کلیک کنید:

حال از Toolbox روی کنترل دکمه (Button) ـی یکبار کلیک کرده و آنرا بکشید و روی صفحه طراحی قسمت سفید رنگ رها کنید:

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

        <Button x:Name="button"
                Content="Button"
                HorizontalAlignment="Left"
                Margin="161,255,0,0"
                VerticalAlignment="Top" />

حال مقدار Content که در واقع متن این دکمه است را از پنجره تنظیمات به Click here! تغییر دهید:

      <Button x:Name="button"
                Content="Click here!"
                HorizontalAlignment="Left"
                Margin="161,255,0,0"
                VerticalAlignment="Top" />

نکته اگر قسمت کدهای XAML شما به مرتبی عکس بالا نیست، کافی است روی منو Tools ویژوال استودیو کلیک کنید و گزینه Settings را انتخاب کنید:

سپس روی مثلث کوچک کنار Text Editor در قسمت سمت چپ کلیک کنید و به دنبال XAML بگردید و روی مثلث کنار آن نیز کلیک کنید و سپس روی مثلث کنار Formatting نیز کلیک کرده و گزینه Spacing را انتخاب کنید. در قسمت سمت راست گزینه Position each attribute on between attributes را انتخاب کنید و گزینه زیر آن یعنی Position firs attribute on same line as start tag را نیز تیک بزنید و روی OK کلیک کنید. اکنون در قسمت XAML دکمه های Ctrl+A را بزنید و Ctrl+X را بزنید و در آخر Ctrl+V بزنید (یعنی کدها را Cut کرده و سپس Paste کنید). به همین راحتی!

برگردیم به آموزش، حال روی دکمه دو بار کلیک کنید یا در پنجره تنظیمات مربوط به آن روی علامت رعد کلیک کنید تا رویداد ها را ببینید زیرا می خواهیم رویداد Click دکمه را بسازیم:

حال روی جعبه متنی روبه روی Click دوبار کلیک کنید تا رویداد کلیک برای آن ایجاد شود:

پس از این کار خودکار تابع رویداد Click دکمه button در صفحه MainPage.xaml.cs برای شما ساخته می شود، همچنین این صفحه به صورت خودکار برایتان باز می شود و اولین خط این تابع انتخاب شده است را به شما نشان می دهد:

اگر به تصویر بالا نگاه کنید، می بینید که MessageDialog به رنگ سفید در آمده است و زیر آن یک خط قرمز رنگ کشیده شده است، به خاطر این است که فظای نامی مربوط به آن به صفحه اضافه نشده است، در سمت چپ تصویر در خط MessageDialog… یک آیکون چراغ وجود دارد، چند ثانیه موس را روی آن بگیرید تا مثلث کوچکی در سمت راست آن ظاهر شود، روی آن مثلث کلیک کنید و سپس اولین گزینه یعنی using Windows.UI.Popups; را انتخاب کنید تا فضای نامی MessageDialog به صفحه اضافه شود:

پس از این کار، رنگ MessageDialog ها باید به رنگ سبز در آیند:

زمانی که این کد را بنویسید، همانند کد MessageDialog خطایی دریافت خواهید کرد:

اما این خطا مربوط فضای نامی نیست، این خطا مربوط به استفاده از کلمه کلیدی await است، برای استفاده از این کلمه کلیدی باید در تعریف تابع کلمه کلیدی async را به کار ببریم. برای اضافه کردن کلمه کلیدی async می توانیم آنرا پیش از تعریف تابع (قبل یا بعد از private یا public) بنویسیم، یا اینکه روی آیکون چراغ اول خط چند ثانیه موس را بگیریم و اولین گزینه یعنی Make the containing scope ‘async’. را انتخاب کنیم:

        private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {

            string text = "Hello world!" +
                Environment.NewLine +
                "Powered by Win Nevis";
            MessageDialog md = new MessageDialog(text);
            await md.ShowAsync();
        }

حال وقت اجرای برنامه است، روی Local machine در نوار ابزار کلیک کنید تا برنامه اجرا شود( یا از منو ویژوال استودیو، گزینه DEBUG را انتخاب کرده و روی Start Debugging کلیک کنید):

این کار باعث می شود برنامه روی هر معماری که است اجرا شود، در اینجا x86 انتخاب شده است پس در خود کامپیوتر برنامه ما اجرا می شود:

اگر روی Click here! کلیک پیغامی به ما نشان میدهد:

به همین سادگی اولین برنامه یکپارچه خود را نوشتیم! اگر می خواهید برنامه را روی موبایل خود اجرا کنید، کافی است روی مثلث کوچک کنار x86 کلید کنید و گزینه ARM را انتخاب کنید، سپس موبایل خود را با کابل USB به کامپیوتر وصل کنید و صفحه آنرا باز کنید(نگذارید صفحه خاموش یا قفل شود) حال روی Device کلیک کنید تا برنامه مستقیما از ویژوال استودیو روی موبایل ویندوز 10یی خود اجرا شود: