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

Welcome to my blog :)

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@

Advertisements

Written by Ibraheem Osama Mohamed

November 8, 2013 at 2:41 pm

Posted in Windows 8

Tagged with , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: