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

Welcome to my blog :)

ابدأ التطبيق الشامل لتطوير تطبيقات ويندوز 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

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

Written by Ibraheem Osama Mohamed

May 23, 2014 at 12:03 pm

Aflam Privacy Policy

leave a comment »

Aflam is committed to ensuring that your privacy is protected.No data is saved or transferred or shared over the network.

Written by Ibraheem Osama Mohamed

May 3, 2014 at 5:11 pm

Posted in Windows 8

My Latest article in TechNet Wiki

leave a comment »

Coming from an asp.net background, let’s build our first Windows Store Application

Check it please and waiting your feedback

2056910448_thanks_xlarge

Ibraheem Osama Mohamed[MVP]
@IbraheemOM

Written by Ibraheem Osama Mohamed

March 29, 2014 at 9:55 am

Posted in Windows 8

Windows 8 Future Access List

leave a comment »

One of Windows 8’s amazing feature is FutureAccessList. The idea behind it is once the user picked a certain file using the file picker you can added this file to the future access list and use it later in your application.
You get access to the file using a token , so when you add a file to the future access list you get a token for that file and you can use this token later to get this file.

Another amazing thing is that every application has its own futureAccessList so many apps can share the same file at the same time.

Now let’s try and see how it works.
1)Add new Windows 8 applicaiton from Visual Studio.
2)Add 2 buttons in the MainPage.xaml

<Button Content=”Get File From Token” Name=”GetFileFromTokenButton” HorizontalAlignment=”Left” Margin=”740,224,0,0″ VerticalAlignment=”Top” Click=”GetFileFromTokenButton_Click”/>

<Button Content=”Set token” HorizontalAlignment=”Left” Name=”SetTokenButton” Margin=”927,227,0,0″ VerticalAlignment=”Top” Click=”SetTokenButton_Click”/>

4)Add the event handlers for the events and define a string called token to save the token in it.

string token = null;

        private async void SetTokenButton_Click(object sender, RoutedEventArgs e)

        {

            var op = newFileOpenPicker { FileTypeFilter = { “*” }, CommitButtonText = “select this file”, SuggestedStartLocation = PickerLocationId.Desktop, ViewMode = PickerViewMode.List };

            var file = await op.PickSingleFileAsync();

            if (file != null)

            {

                token = StorageApplicationPermissions.FutureAccessList.Add(file);

            }

        }

        private async void GetFileFromTokenButton_Click(object sender, RoutedEventArgs e)

        {

            if (token != null)

            {

                StorageFile fileFromList = awaitStorageApplicationPermissions.FutureAccessList.GetFileAsync(token);

                await(new Windows.UI.Popups.MessageDialog(fileFromList.DisplayName)).ShowAsync();

            }

        }

Now lets run the application and press the set button

Select a file.

1

Then press the get button a message with a file name pops up as written in our code🙂

2

For sure the best practice is to save the token in a place you can get back to it later

2056910448_thanks_xlarge

Ibraheem Osama Mohamed
[MVP]
@IbraheemOM

Written by Ibraheem Osama Mohamed

January 13, 2014 at 6:44 pm

Posted in Windows 8, Windows 8.1, xaml

Changing AppBarButton Icon on Run time in Windows 8 (Windows 8.1)

leave a comment »

Today I was testing the AppBarButton in Windows 8.1 and I thought of what if I want to change the Icon of the AppBarButton ex : from zoom out to zoom in??

<AppBarButton Click=”Zoom_Click_1″ Label=”Zoom Out” Icon=”ZoomOut” Name=”ZoomOutButton”/>

4

Just change the Icon property on the button click event but take care of something Icon Property takes IconElement and there are 3 class that inherits from it

FontIcon
PathIcon
SymbolIcon

So you can use any of those class to change the AppBarButton Icon in this sample I used the SymbolIcon

bool IsZoomIn = false;

        privatevoid Zoom_Click_1(object sender, RoutedEventArgs e)

        {

            if (!IsZoomIn)

            {

                ZoomOutButton.Label = “Zoom In”;

                ZoomOutButton.Icon = newSymbolIcon(Symbol.ZoomIn);

                IsZoomIn = true;

            }

            else

            {

                ZoomOutButton.Label = “Zoom Out”;

                ZoomOutButton.Icon = newSymbolIcon(Symbol.ZoomOut);

                IsZoomIn = false;

            }

        }

5

So simple🙂

2056910448_thanks_xlarge

Ibraheem Osama Mohamed
[MVP]
@IbraheemOM

Written by Ibraheem Osama Mohamed

November 9, 2013 at 1:10 pm

Posted in C#, Windows 8, Windows 8.1, xaml

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

leave a comment »

هذا هو ثانى مقال فى السلسلة و سوف نتحدث فيه عن  DatePicker و TimePicker و Hyperlink  و Flyout

كان هناك الكثير من ال Controls التى تقوم بمهام ال DatePicker و باقى ال Controls  فى ويندوز 8 ولاكن للاسف لم تكن ببلاش و كان المطور ليبرمج ال DatePicker او ال Flyout الخاص به ياخذ الكثير من الوقت و قد حل ويندوز 8.1 هذه المشكلة بتنزيل ال DatePicker Control

والان هيا بنا نتخيل ان فى التطبيق المطلوب ان لدينا الكثير من ال Controls فى الصفحة و من ضمن المتطلبات ان يدخل المستخدم تاريخ معين و يجب ان يكون هناك شرح بسيط للتاريخ , هناك مشكلة واحده و هى اين سوف اضع هذا ال DatePicker و الشرح الخاص به ؟؟
ال Flyout حلت هذه المشكلة فهى عباره عن Popup يظهر للمستخدم عند حدوث حدث معين و تختفى عند الضغط على اى شاء داخل الشاشة عدا جزئها

هيا بنا نبدأ الجزء العملى🙂
1)افتح مشروع ويندوز 8 جديد
2)اضف Button : عند الضغط على ال Button تظهر ال Flyout و بها ال DatePicker
3)ما هى ال Controls التى سوف تحتوى عليها ال Flyout ؟؟
أ)ال DatePicker و ال TimePicker لاختيار التاريخ
ب)RichTextBlock لشرح ما استخدام هذا التاريخ و به HyperLink يذهب بك الى صفحة ويب بها المزيد من الشرح

4) اضف على كل Control خاصية FlowDirection=RightToLeft حتى يظهر العربى بالشكل المناسب🙂

<Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>

        <Button FlowDirection=”RightToLeft” Content=”انقرهنا HorizontalAlignment=”Left”
Margin
=”267,221,0,0″ VerticalAlignment=”Top”>

            <Button.Flyout>

                <Flyout>

                    <StackPanel>

                        <RichTextBlock Width=”200″ FlowDirection=”RightToLeft”>

                            <Paragraph>

                                هذاهوالتطبيقالخاصبماهوالجديدفىويندوز 8

                                <Hyperlink NavigateUri=”https://ibraheemosama.wordpress.com/”&gt;لقرائةالمذيدانقرهنا</Hyperlink>

                                نهايهالمقال

                            </Paragraph>

                        </RichTextBlock>

                        <DatePicker FlowDirection=”RightToLeft” Header=”أختارالتاريخ“/>

                        <TimePicker FlowDirection=”RightToLeft” Header=”أختارالوقت“/>

                    </StackPanel>

                </Flyout>

            </Button.Flyout>

        </Button>

    </Grid>

5)شغل التطبيق

1

2

3

4

ان كان لك اى سؤال فى هذا المقال او عن ويندوز 8 ارجوك لا تتردد فى سؤالى🙂
شكرا
ابراهيم اسامة محمد

2056910448_thanks_xlargeIbraheem Osama Mohamed
[MVP]
IbraheemOM@

Written by Ibraheem Osama Mohamed

November 8, 2013 at 5:28 pm

Posted in Windows 8

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 , , ,

Follow

Get every new post delivered to your Inbox.

Join 611 other followers

%d bloggers like this: