Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Posts Tagged ‘Xaml

ابدأ التطبيق الشامل لتطوير تطبيقات ويندوز 8 و ويندوز فون 8 فى نفس الوقت

with one comment

مرحبا بك 🙂
منذ حوالى ما يقرب من الشهرين كشفت مايكروسوفت عن ويندوز فون 8.1 و عن مدا تقاربة مع ويندوز 8 فى استخدام WinRT و كشفت ايضا عن ما يسمى بالتطبيق الشامل (Universal App) و الذى يتيح لك ان تكتب نفس الكود لتطبيقان ويندوز فون و ويندوز 8 فى نفس الوقت مع وجود بعض الاختلافات البسيطة جدا فى استخدام خصائص الهاتف مثل الكاميرا.

هيا بنا نبدأ باستخدام هذا النوع من التطبيق لكن للبدأ يجب ان يكون عندك

1) Visual Studio 2013
2)Windows 8.1
3) Windows Phone 8.1 SDK

و الان جاء وقت التعلم

1)افتح Visual Studio و أختار #C ثم Store App ثم Universal App ثم Black App

1

يتضح ايضا انه يوجد نوع اخر من القوالب و هو Hub App (يجب عليك تجربتة لانة يتيح لك الكثير من الامكانتيات الجاهزة)

2) سمى التطبيق كما تريد و اضغط على OK فيتم اظهار ال Solution لك

2

و التركيز فى الناتج نستنتج التالى

1) هناك مشروع ل ويندوز 8.1
2) هناك مشروع لويندوز 8.1
3) هناك ما بسمى بالمشروع المشترك و به ال app.xaml . و هذا المشروع فائدتة ان تكتب فية كود مشترك بين التطبيقين و مثال على ذلك الكود الذى يتواصل مع ال Database او ال Web Services . فتكمن اهمية هذا المشروع فى انك تكتب الكود مرة واحده فقط بين المشروعين. و بهذا المشروع ايضا ال App.xaml و هو نقطة انطلاق كل من التطبيقين و بة ال OnLaunched Event و ايضا Event لم يكن يوجد قبل فى تطبيقات ويندوز فون 8 من قبل و هو OnSuspending

3

و هذا ال Event كان يوجد فى ويندوز 8 و الان اضيف لويندوز فون 8.1 لان مراحل تشغيل و ايقاف وغلق التطبيقات فى الاتنين اصبحو واحد

4) ولكن هل يوجد هناك أختلافات فى الصور و ال Tiles فى التطبيقين ؟؟ بالطبع لان تطبيقات ويندوز فون 8.1 تستهدف الهواتف المحمولة و تطبيقات ويندوز 8.1 تستهدف الكمبيوتر اللوحى

فهيا بنا نفتح ال Package.Appmanifest لكلن من المشروعين

5 6

و الان جاء وقت البدا فى الكود. كما ترا فانى اضفت ملف اسمة Model فى المشروع المشترك و بة 2 Classes و احد لالوحدة المستخدمة فى التطبيق و الاخر ك مصدر للوحدات

class DataEntity

{

public string ImgURI { set; get; }

public string Name { set; get; }

}

class DataSource

{

private static List<DataEntity> _dataEntityList = null;

internal static List<DataEntity> DataEntityList

{

get

{

if (_dataEntityList == null)

{

_dataEntityList = GetAllEntities();

}

return _dataEntityList;

}

private set { _dataEntityList = value; }

}

private static List<DataEntity> GetAllEntities()

{

List<DataEntity> list = newList<DataEntity>();

list.Add(newDataEntity() { Name = الاسمالاول, ImgURI = “Assets/blueball.png” });

list.Add(newDataEntity() { Name = الثانى, ImgURI = “Assets/blueball.png” });

list.Add(newDataEntity() { Name = الثالث, ImgURI = “Assets/blueball.png” });

list.Add(newDataEntity() { Name = الرابع, ImgURI = “Assets/blueball.png” });

return list;

}

}

بعد ان كتبنا الكود اللازم لاحتواء التطبيق على بيانات هبا بنا لنرسم شكل التطبيق

1) افتح مشروع ويندوز8 ثم ال MainPage.Xaml

ثم اضف

910

و فى ال MainPage.xaml.cs اضف

public MainPage()

{

this.InitializeComponent();

Loaded += (a, b) => {

itemGridView.ItemsSource = UniversalGridViewApp.Model.DataSource.DataEntityList;

};

}

و بالطبع ال DataEntityList قادمة من المشروع المشترك 🙂

و الان قم بتشغيل التطبيق

4

هيا بنا لنفعل نفس الخطوات فى تطبيق ويندوز فون 8.1
1) قم بنسخ ال MainPage.xaml من مشروع ويندوز 8 ل مشروع ويندوز فون لكن هل يجب ان تترك ال Controls بنفس المساحة ؟؟ فى هذا التطبيق يمكنك لاكن هناك الكثير من الخلات التى تضطر الى ان تغيير بعض المسحات فى صفحات ويندوز فون مثل

11

2) ايضا قم بنسخ ال MainPage.xaml.cs من مشروع ويندوز 8 ال ويندوز فون و شغل التطبيق لكن لاختيار ويندوز فون كالتطبيق الاساسى للتشفيل كل ما عليك فعلة هو :

7

و الان شغل التطبيق 🙂

8

نعم لقد بنينا معا تطبيقين لويندوز 8 و اخر لويندوز فون 8 و وقت قليل جدا بأستخدام التطبيق الشامل 🙂

شكرا لك لحسن الاستماع و ارجوا ان اكون اضفت معلومات قيمة و بالطبع اذا كنت تريد السؤال عن اية تفصيلة ارجوج لا تتردد فى سؤالى 🙂

Thanks

إبراهيم أسامة محمد

Advertisements

Written by Ibraheem Osama Mohamed

May 23, 2014 at 12:03 pm

Windows 8.1 Xaml new Controls part 1 (Arabic) ما الجديد فى ويندوز 8.1 لمبرمج الواجهة

leave a comment »

مع التحديث الجديد لويندوز 8 (ويندوز8.1) تم اضافة و تحديث بعض ال Controls التى كان يطالب بها الكثير من المبرمجين فى هذا المقال سوف نتحدث بأختصار عن ال Controls الجديدة لمبرمجين ال #C و ال ++C و ال VB.Net فى ال XAML .

اول ما سوف نتكلم عليه هو ال AppBar Controls  فى السابق فى ويندوز 8 اذا كنت تريد ان تضيف Button فى ال AppBar كنت تضيف Button و تعطيه Style ليكون على شكل ال Controls الخاصة ب AppBar buttons و لم يكن بامكانك الحصول على AppBar Button من صورة مثلما فى ال Windows Phone.
و مع التطوير اصبح هناك Button مخصوص لل AppBar و هو ال AppBarButton . فى ال AppBarButto يمكنك وضع صورة لتكون Icon او رسم ال Icon عن طريق ال Path او تستخدم FontIcon و تكون هناك مجموعة من الاحرف تمثل شكل معين او اخرا ان تستخدم خاصية ال Icon فى ال Button و التى تعطيك عدة اشكال تختار منها
1و الان هيا بنا نأخذ مثال
1)افتح ال Visual Studio و اضف مشروع ويندوز 8 جديد
2)افتح ال MainPage.Xaml و اضف التالى

<Page.BottomAppBar>

        <AppBar>

            <StackPanel Orientation=”Horizontal”>

                <AppBarButton Icon=”Like” Label=”SymbolIcon” Click=”AppBarButton_Click”/>

                <AppBarButton Label=”BitmapIcon” Click=”AppBarButton_Click”>

                    <AppBarButton.Icon>

                        <BitmapIcon UriSource=”ms-appx:///Assets/Save.png”/>

                    </AppBarButton.Icon>

                </AppBarButton>

                <AppBarSeparator />

                <AppBarToggleButton Label=”FontIcon” Click=”AppBarButton_Click”>

                    <AppBarToggleButton.Icon>

                        <FontIcon FontFamily=”Candara” Glyph=”Σ”/>

                    </AppBarToggleButton.Icon>

                </AppBarToggleButton>

                <AppBarToggleButton Label=”PathIcon” Click=”AppBarButton_Click”>

                    <AppBarToggleButton.Icon>

                        <PathIcon Data=”F1 M 20,20L 24,10L 24,24L 5,24″/>

                    </AppBarToggleButton.Icon>

                </AppBarToggleButton>

            </StackPanel>

        </AppBar>

    </Page.BottomAppBar>

    <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>

    </Grid>

3)اضف Icon فى ملف ال Assets ليكون Icon لال AppBarButton الثانى
4)شغل التطبيق و انظر لال AppBarButtons2

ثانى Control سوف اتحدث عنه فى هذا المقال CommandBar .
عند اضافة AppBar Control سوف تجد Control جديد اسمة CommandBar : هو معمول خصيصن لوضع ال AppBarButton و ال AppBarToggleButton و ال AppBarSeparator فية  لكن ما الفرق بينه و بين ال AppBar العادية ؟؟ الاخيره تستخدم اذا كنت سوف تستخدم Controls غير الثلاثة المذكورين فى السطر السابق مثل ال Image او TextBox .

ايضا هناك ميزة اخرى فى ال CommandBar و هى تغيير حجم ال Controls فى داخلها على حسب التغيير فى حجم التطبيق.

الان جاء وقت التطبيق
1)افتح المشروع السابق
2)فى ال MainPage.Xaml اضف الاتى

<Page.BottomAppBar>

        <AppBar>

            <StackPanel Orientation=”Horizontal”>

                <AppBarButton Icon=”Like” Label=”SymbolIcon” Click=”AppBarButton_Click”/>

                <AppBarButton Label=”BitmapIcon” Click=”AppBarButton_Click”>

                    <AppBarButton.Icon>

                        <BitmapIcon UriSource=”ms-appx:///Assets/Save.png”/>

                    </AppBarButton.Icon>

                </AppBarButton>

                <AppBarSeparator />

                <AppBarToggleButton Label=”FontIcon” Click=”AppBarButton_Click”>

                    <AppBarToggleButton.Icon>

                        <FontIcon FontFamily=”Candara” Glyph=”Σ”/>

                    </AppBarToggleButton.Icon>

                </AppBarToggleButton>

                <AppBarToggleButton Label=”PathIcon” Click=”AppBarButton_Click”>

                    <AppBarToggleButton.Icon>

                        <PathIcon Data=”F1 M 20,20L 24,10L 24,24L 5,24″/>

                    </AppBarToggleButton.Icon>

                </AppBarToggleButton>

            </StackPanel>

        </AppBar>

    </Page.BottomAppBar>

    <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>

    </Grid>

3)و الان شغل التطبيق

3

هناك شئ اريدك ان تاخذ بالك منه و هو Secondary Commands فى ال CommandBar و هى واحدة من اساسيات تصميم تطبيقات ويندوز 8 وهى ان تضع الاوامر الغير متعلقة بشئ مختار فى التطبيق على اليمين و الاوامر المتعلقة بشئ مختار على الشمال او ان تضع  الاوامر الثانوية على الشمال و الاساسية على اليمين

الى الان ينتهى هذا المقال و فى المقالات القادمة سوف يتم تغطية باقى ال Controls

شكرا
إبراهيم أسامة محمد

2056910448_thanks_xlarge

Ibraheem Osama Mohamed
[MVP]
IbraheemOM@

Written by Ibraheem Osama Mohamed

November 8, 2013 at 2:41 pm

Posted in Windows 8

Tagged with , , ,

%d bloggers like this: