VB Helper

دوره في السلفرلايت - الدرس الثالث

9 ردود في هذا الموضوع

السلام عليكم ورحمه الله وبركاته

بعد أن بنينا تطبيقنا الأول في الدرس السابق سنتتطرق اليوم عن كيفية التعامل مع أدوات السلفرلايت, درس اليوم سينقسم إلى قسمين الأول كيفية التحكم بالتصميم وترتيب الأدوات من خلال أدوات الإحتواء, والثاني التعامل مع الأدوات المرئية.

إن عملية التحكم بالتصميم Layout للواجهات تعتبر مشكلة للمطورين, فعلى مر السنوات مطوروا برامج الويندوز كتبوا الآلاف الأسطرمن الأكواد في ترتيب عناصر الواجهات في التطبيق عند تغير حجم النموذج أو النافذه. أما مطوروا الويب بذلوا جهداً كبيراً في إيجاد مخطط ترتيب بداية مع جداول ال HTML وبعد ذلك التصميم بال CSS والمعاناه نظراً للتعامل مع أكثر من متصفح وتفسيره لهذا التصميم.

فكرت شركة مايكروسوفت في المشاكل الأساسية في تطوير واجهات التطبيقات وأخذتها في الحسبان, وقامت بإنشاء نظام قوي ومرن في التصميم وذلك مع ظهور تقنية ال WPF ومعظم مفاهيم التصميم المستخدمه فيها تم نقلها لعالم السلفرلايت.

والآن جاء دور لوائح التصميم (أدوات الإحتواء) المتوفره ألا وهي:

Canvas

تزودنا هذه الأداه في طريقة ترتيب العناصر بإستخدام نظام إحداثي غير ضمني بمعنى آخر أن أي عنصر داخل هذه الحاويه يكون موقعه نسبياً للحافه اليسرى العلويه من اللوحه والتي موقعها 0,0.

المثال التالي سيوضح الفكره لعملها

<Canvas>

<Button Canvas.Left="0" Canvas.Top="0" Content="Button1" />

<Button Canvas.Left="50" Canvas.Top="25" Content="Button2" />

<Button Canvas.Left="100" Canvas.Top="50" Content="Button3" />

<Button Canvas.Left="150" Canvas.Top="75" Content="Button4" />

<Button Canvas.Left="200" Canvas.Top="100" Content="Button5" />

<Button Canvas.Left="250" Canvas.Top="125" Content="Button6" />

</Canvas>

مثالنا السابق بسيط فهو يتكون من حاويه تضم 6 أزرار, ونلاحظ تحكمنا بإحداثياتها من خلال الخاصيتين Canvas.Left و Canvas.Top, تلك الخاصيتين تحددان المقدار الذي ستبعد عنه الأداة من أعلى يسار الحاويه.

post-240106-053181300 1303747859_thumb.p

StackPanel

هذه الأداه من إسمها تقوم بتكديس الأدوات داخلها أفقياً أو عموديأً, المثال التالي سيوضح الفكره لعملها

	<StackPanel>

<Button Content="Button1" />

<Button Content="Button2" />

<Button Content="Button3" />

<Button Content="Button4" />

<Button Content="Button5" />

<Button Content="Button6" />

</StackPanel>

post-240106-022324200 1303747933_thumb.p

كما نلاحظ من الشكل السابق تم ترتيب العناصر عمودياً, كما يمكننا تغير الإتجاه من خلال الخاصيه Orientation.

Grid

هذه الأداه تقوم بعمل شبكه من الصفوف والأعمده التي يمكن ترتيب العناصر فيها, ربما تعتبر أقوى أداه إحتواء في السلفرلايت , المثال التالي سيوضح فكرة عملها

<Grid Background="White" ShowGridLines="True">

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Button Content="Grid Cell 0/0" Grid.Row="0" Grid.Column="0" />

<Button Content="Grid Cell 0/1" Grid.Row="0" Grid.Column="1" />

<Button Content="Grid Cell 1/0" Grid.Row="1" Grid.Column="0" />

<Button Content="Grid Cell 1/1" Grid.Row="1" Grid.Column="1" />

</Grid>

post-240106-098451300 1303748041_thumb.p

كما نلاحظ من الشكل السابق تم ترتيب الأدوات على شكل شبكه من الصفوف والأعمده وذلك من خلال Grid.RowDefinitions لتعريف الصفوف و Grid.ColumnDefinitions لتعريف الأعمدة داخل الحاويه ومن ثم يمكننا تحديد موقع الأداه في الحاويه من خلال تحديد رقم الصف والعمود بإستخدام الخاصيتين Grid.Row و Grid.Column.

كما يوجد حاويتان في ال Silverlight Toolkit وهما WrapPanel و DockPanel.

وبعد أن تعرفنا على أدوات الإحتواء المقدمه من السلفرلايت ننتقل للتعرف على الأدوات المرئية الموجوده في هذه التقنية وكيفية التعامل معها. وفرت السلفرلايت مجموعة من الأدوات الغنية التي تسهل للمستخدم بناء تطبيقاته مثل:

TextBlock

وهي الأداة الأساسيه لعرض النصوص ويمكننا ضبط محتواها عبر الخاصيه Text.

<TextBlock Text="Content goes here ..." />

ولاتعتبر الأداة بسيط كما في نظر البعض يعني عرض نص فقط!! هذه الأداة تعطيك قدرة هائلة في تنسيق أجزاء من النص مثلاً, لنرى المثال الآتي

<TextBlock>

<Run Foreground="Green">Line 1</Run>

<LineBreak />

<Run FontFamily="Courier New">Line 2</Run>

</TextBlock>

فبإستخدام الوسم Run يمكننا ضبط تنسيق جزء معين من النص ففي المثال أعلاه تم ضبط لون الخط إلى أخضر من ثم ضبط نوع الخط في الجزء الآخر إلى Courier New وليس هذا فقط, يمكننا عمل سطر جديد بإستخدام الوسم <LineBreak>.

TextBox

وهي أداة الإدخال المشهورة كما في أغلب التقنيات الآخرى

<TextBox Text="Simple Text" />

PasswordBox

يمكننا بإستخدام هذه الأداة إدخال كلمات المرور, كما يمكننا تغيير الرمز الظاهر فيها من خلال الخاصيه PasswordChar.

<PasswordBox PasswordChar="#" Password="Secret Password" />

RichTextBox

وهي أداة جديدة أضيفت في الإصدار الرابع لعرض وتحرير النصوص المنسقة في تطبيقك.

<RichTextBox>

<Paragraph>

<Run>The is a simple text.</Run>

<LineBreak />

<Italic>also this is another text</Italic>

<Bold>,bold text</Bold>

</Paragraph>

</RichTextBox>

يمكننا من خلال هذه الأداة إضافة فقرات, صور, روابط .. إلخ, كما يمكننا التحكم بتنسيق النصوص كما هو الحال في برامج معالج النصوص.

Slider

وهو شريط إنزلاق يسمح للمستخدم من تحرير قيم رقمية في نطاق محدد

<Slider Minimum="0" Maximum="100" Value="20" />

فبإستخدام الخاصيتين Minimum و Maximum يمكننا تحديد نطاق الأعداد لهذه الأداة, كما يمكننا ضبط القيمة الحالية من خلال الخاصية Value.

ListBox

وهي الأداة التي تمكننا من عمل قائمة بالعناصر التي يمكن الإختيار منها.

<ListBox Height="100" Name="ListBox1" Width="120">

<ListBox.Items>

<ListBoxItem Content="Item 1" />

<ListBoxItem Content="Item 2" />

<ListBoxItem Content="Item 3" />

</ListBox.Items>

</ListBox>

ComboBox

وهي أداة القائمة المنسدلة والتي تشبه كثيراً الأداة السابقة عدا أنها تعرض عنصر واحد ولرؤية البقية نقوم بالنقر على زر الإنسدال.

<ComboBox Height="23" Name="ComboBox1" Width="120" SelectedIndex="0">

<ComboBox.Items>

<ComboBoxItem Content="Item 1"/>

<ComboBoxItem Content="Item 2"/>

<ComboBoxItem Content="Item 3"/>

</ComboBox.Items>

</ComboBox>

كما يمكننا تحديد العنصر الإفتراضي من خلال الخاصية SelectedIndex.

Button

وهي أداة الزر, ويمكننا ضبط النص الظاهر عبر الخاصية Content.

   <Button Content="Click Me" />

HyperlinkButton

وهي أداة لعمل رابط لصفحة معينة.

<HyperlinkButton ClickMode="Release" TargetName="_blank" NavigateUri="http://www.silverlight.net">

<HyperlinkButton.Content>

<TextBlock Text="Silverlight" TextDecorations="Underline" />

</HyperlinkButton.Content>

</HyperlinkButton>

نرى من المثال أننا أنشئنا رابط لموقع السلفرلايت ويمكن ضبط نص الرابط والخط الأسفل من خلال الخاصيتين Text و TextDecorations الموجوده في ال Content, كذلك تم ضبط الصفحة المراد الذهاب إليها من خلال NavigationUri وهل يتم فتح الرابط في نفس الصفحة أو صفحة جديدة من خلال TargetName, طبعاً أغلبها نفس خواص ال html و ال CSS.

ToggleButton

وهي أداة لعمل زر تتغير حالته عند النقر, بمعنى آخر يكون إفتراضياً غير مضغوط وعند النقره الثانيه يكون مضغوط وعند النقر الثالثة يكون غير مضغوط وهكذا.

<ToggleButton Content="Toggle Me!" IsChecked="true" Height="100" Width="100" />

يمكننا ضبط الحالة الإفتراضية للزر من خلال الخاصية IsChecked.

Image

ويمكننا بهذه الأداة من عرض الصور.

<Image Source="/Controls;component/Logo.png" Stretch="Uniform"/>

ويمكننا ضبط الصورة من خلال الخاصية Source وضبط نوع التمدد من خلال الخاصية Stretch.

ViewBox

وهي أداة كانت ضمن ال Silverlight Toolkit ولكن تم إضافتها لحزمة أدوات السلفرلايت الإفتراضيه في هذا الإصدار, وتستخدم لتتواكب مع حجم محتواها.

<Viewbox>

<TextBlock>This is a short text</TextBlock>

</Viewbox>

<Viewbox>

<TextBlock>This is a very very veryyyyyyyyyyyy long text</TextBlock>

</Viewbox>

ToolTip

وهي أداة لعرض التلميح عند المرور على أداة معينة

<Button Content="This is a button" Height="100" Width="100" ToolTipService.Placement="Mouse">

<ToolTipService.ToolTip>

<Grid>
<TextBlock Text="This is the buttons tooltip" />

</Grid>

</ToolTipService.ToolTip>

</Button>

ففي المثال السابق تم عمل التلميح من خلال الوسم ToolTipService.ToolTip وتم ضبط مكانه عبر الخاصية Placement ومحتوى التلميح الذي في مثالنا عبارة عن أداة النص.

ScrollViewer

وهي أداة تقوم بإظهار شريط إنزلاق حول محتواها للتمكن من عرض المحتوى كاملاً.

<ScrollViewer>

<StackPanel>

<TextBlock Text="A" />

<TextBlock Text="B" />

<TextBlock Text="C" />

<TextBlock Text="D" />

<TextBlock Text="E" />

<TextBlock Text="F" />

<TextBlock Text="G" />

<TextBlock Text="H" />

<TextBlock Text="I" />

<TextBlock Text="K" />

<TextBlock Text="L" />

<TextBlock Text="M" />

<TextBlock Text="N" />

<TextBlock Text="O" />

<TextBlock Text="P" />

<TextBlock Text="Q" />

<TextBlock Text="R" />

<TextBlock Text="S" />

<TextBlock Text="T" />

<TextBlock Text="U" />

<TextBlock Text="V" />

<TextBlock Text="W" />

<TextBlock Text="X" />

<TextBlock Text="Y" />

<TextBlock Text="Z" />

</StackPanel>

</ScrollViewer>

سنرى في مثالنا السابق أنه سيتم عرض مجموعة من الأدوات وظهور شريط إنزلاق نستطيع من خلاله رؤية البقية.

أحببت أن أذكر واحد من أحلى ميزات ال XAML الموجودة في السلفرلايت ألا و هي تداخل الأدوات, للنظر للمثال التالي

<Button>

<Button.Content>

<Border Margin="20" BorderBrush="Black" BorderThickness="3" >

<Image Source="/Controls;component/Logo.png" />

</Border>

</Button.Content>

</Button>

سنرى في مثالنا أنه سيتم إظهار الصوره كمحتوى للزر, وفي هذا مرونة كبيرة في التعامل مع الأدوات.

لقد تعرفنا على مجموعة لابأس بها من الأدوات المتوفرة في السلفرلايت – ليس أدوات ال Toolkit – وتعرفنا على بعض خواصها, هنالك الكثير منها ولكن نكتفي بهذا القدر وإذا يوجد أي إستفسار في أي أداة أخرى سوف أقوم بشرحها.

وأخيرا وصلنا إلى نهاية درسنا الثالث .. انتظروني في الدرس التالي للتعامل مع الأنماط والقوالب في السلفرلايت.

تم تعديل بواسطه VB Helper
7

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

ماشاء الله ..... الله يعطيك الف عافية ....ننتظر الدرس القادم

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

يا سلااام...شكله مشوق

ان شاء الله بس تتحسن حالتي الصحيه

سأدرسه واسال على الدرس التاني

تحياتي

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

السلام عليكم ورحمه الله وبركاته

الله يعافيك اخ احمد ...

اخت ضحى ياريت لو معاك اسئله في الدرس السابق تسأليها في نفس الدرس ...

تم تعديل بواسطه VB Helper
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

رائع جدًا .. أتمنى أن تواصل

حتى نصل إلى كيفية النشر كديسك تب ابليكيشن على الأنظمة الأخرى .

تحياتي لك أخي الكريم happy.gif

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

السلام عليكم ورحمه الله وبركاته

اخي احمد هل قصدك ال Out Of Broswer؟؟ لأنه ليس في مجال دورتنا هذه .. سيتم الحديث عنه وعن اشياء كثيره متقدمه في دورة السلفرلايت المتقدمه بإذن الله

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

لقد كنت أقصدها blush.gif

ولكن لا بأس سنتابع , حتى ولو كنت تشرح على سطح المريخ

كما سيكون من الجميل جدًا التعامل مع السرفر بالـasp.net

تحياتي ^__^

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

السلام عليكم ورحمه الله وبركاته

بالتوفيق اخي

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .