دورة في windows presentation foundation و XAML

السلام عليكم

--------------

مشكور أخي الكريم على هذه الخلاصة .......

سأحول الموضوع إلى دورة في windows presentation foundation

حسنا ماذا تحتاج للتطوير ب wpf ؟

أولا ستحتاج visual studio 2005 و من الأفضل أن يكون proffesionel لأن express لا يدعم cider

ثانيا ستحتاج إلى winfx runtime و إصدار فبراير 2006 يمكنك تحميله على الرابط التالي

الرابط

ثالثا ستحتاج إلى windows sdk يمكنك تحميل ‘صدار فبراير 2006 على هذا الرابط

رابعا من الأفضل أن تحمل أدوات التطوير ب wpf وهي تشمل cider (xaml designer ) و XAML INTELLISENCE و غيرها رغم أنها لا زالت beta و ستكون مدرجة ضمن orcas

الرابط

في المرة القادمة سأعرض cider و التطوير ب xaml

وفقكم الله

حسنا ما هو cider ؟

CIDER هو DESIGNER الجديد المعتمد كليا على XAML

فهو إن صح التعبير CODE GENERATOR

مثلا عند تصميمك لتطبيق WINDOWS FORMS عادي تصنع BUTTON من خلال DESIGNER و تبدل خصائصه فهذا يجنبك كتابة أطنان من الكود و هذا ما يفعله CIDER فهو DESIGNER يقبل drag&drop و يولد xaml code

الجذير بالذكر إنه لا زال beta و سيكون مدرجا ضمن orcas (النسخة القادمة من visual studio )

لاحظوا الصور :

سأشرح في المرة القادمة أساسيات XAML

وفقكم الله

أخوكم programmer4fun

كما كنت قد قلت فإن xaml يحتوي على

Class

Propriétés خصائص

Namespace

خلق الأحداث ليتم قنصها في .net code

حستا فلنحلل هذا الكود

<Window x:Class="DemosWPF.Window1" 
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Title="DemosWPF" Height="768" Width="1024" 
WindowStartupLocation="CenterScreen" 
>

هاهو namespace

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

ها هو class

x:Class="DemosWPF.Window1"

حسنا ها هي الخاصية title

Title="DemosWPF"

أما الأحداث فسأفصل أمرها لاحقا

أنظر الصورة التالية

لتتضح إستعمالات xaml أكثر فسأقدم مثالا

لا شك أن كل واحد منا إضطلع على asp.net إذن فإنتبهوا إلى هذه الكلمة codebehind

فتطبيقات aspx تفصل الواجهة عن الكود كما هو معروف

في wpf نفصل الكود عن الواجهة ولكن من وجهة نظر أخرى فتطبيقات الويب و الويندوز ستستعمل xaml

و تفصل xaml code في ملف خاص

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

أولا لنفتح visual studio 2005 و لنحدد هذا المشروع

حسنا لنبدأ بتطوير أول تطبيق بواجهة مبنية على xaml

لنخلق نافذة فارغة

<?xml version="1.0"?>
<Window xmlns:wfi="wfi"
	xmlns:wf="wf"
	Width="200" Height="150" Text="Mon application">
</Window>

لنضيف الوسوم canvas و windows forms host لتستقبل نافذتنا الأدوات

<?xml version="1.0"?>
<Window xmlns:wfi="wfi"
	xmlns:wf="wf"
	Width="200" Height="150" Text="Mon application">
	<Canvas>
	   <wfi:WindowsFormsHost>
		</wfi:WindowsFormsHost>
	</Canvas>
</Window>

لنخلق button

<?xml version="1.0"?>
<Window xmlns:wfi="wfi"
	xmlns:wf="wf"
	Width="200" Height="150" Text="Mon application">
	<Canvas>
	   <wfi:WindowsFormsHost>
		  <wf:Button Top="55" Left="60" Width="80" Height="18" Text="Hello!" />
		</wfi:WindowsFormsHost>
	</Canvas>
</Window>

لعلك لاحظت أن الزر يشمل النافذة كلها لذا سنضيف الوسم panel

<?xml version="1.0"?>
<Window xmlns:wfi="wfi"
	xmlns:wf="wf"
	Width="200" Height="150" Text="Mon application">
	<Canvas>
	   <wfi:WindowsFormsHost>
		  <wf:Panel>
			 <wf:Button Top="55" Left="60" Width="80" Height="18" 
			 Text="Hello!" />
		  </wf:Panel>
		</wfi:WindowsFormsHost>
	</Canvas>
</Window>

وبهذا تكون قد أعددت أول xaml code

أرى أن الإهتمام بالموضوع مفقود رغم أن هذا سيكون عماد برمجة windows vista

هذا واضح من خلال عدم وجود الردود وقلة المشاهدات :(

أرجو إهتمام أكثر بالموضوع قالمصادر التي تتحدث عنه قليلة و أنا أبذل ما بوسعي لأغني الدورة

قبل أن أتحدث عن إمكانيات أخرى ل wpf علينا التفكير كمبرمجين بهذه النقطة :

كيف يحدث هذا ؟

هذا السؤل شدني فبدأت أبحث حتى وجدت ضالتي في devdays 2006

تطبيقك يقسم إلى قسمين إثنين :

- الكود xaml

- الكود c sharp or vb.net

يقسم الكود xaml إلى ملفين :

- baml : وهو يحتوي و هو يحتوي على الكود xaml ولكنه مترجم إلى لغة الألة لتسريع التنفيذ

- .g : و هو يجمع مع الكود .net حيث يشكلان partial class

بعد الترجمة إلى ملف تنفيذي ، في زمن التنفيذ يحمل المعلومات الموجودة في الملف baml لصنع واجهة للتطبيق

أتمنى أن تكون الصورة قد توضحت الأن

و سأشرح عدة أوجه للتطوير ب wpf في المرة القادمة

يبدو أني لم أتطرق إلى expression gamme

إذن فأعلم يا أخي المبرمج أن expression هي مجموعة برامج موجهة خصيصا للمصممين و تولد xaml code وتتكون من 3 برامج هي :

Expression graphic designer

وهو موجه خصيصا للتعامل مع الصور و توليد صور معتمدة على xaml ويمتلك قدرات هائلة لم أرى لها مثيل

Expression interactive designer

وهو موجه خصيصا لتطوير تطبيقات ويندوز قياسية و يمنحك قدرات هائلة أيضا

تخيل أن بإمكانك تحريك الزر بدون كود واحد

Expression web designer

و هو يساعدك على تصميم صفحات ويب بواجهة ثورية معتمدة على xaml

بالنسبة لي أفضل أن يشتري المبرمج expression interactive designer أفضل من شراء visual studio proffesioinnel

لماذا |؟

فحسب devdays 2006 يمكنك البرمجة من خلال expression interactive designer ! ! !

حسنا كيف يقوم wpf بهذا ؟

لاحظوا الصورة

الصورة

Wpf يظهر البيانات بإستعمال مساري تنفيذ

الأول دوره الأساسي يتلخص في خلق العناصر التي ستظهر على الشاشة وهو managed

أما الثاني فدوره هو إظهار البيانات و هو unmanaged من أجل التسريع

عليك معرفة ان الأدوات في wpf مكونة من ادوات أخرى

مثلا

Stackpanel + scrollviewr = listbox

شكرا أخي أتمنى أن تستمر الدورة خصوصا أني لم أكن أعرف شيئا عن wpf

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

اقتباس

أرى أن الإهتمام بالموضوع مفقود رغم أن هذا سيكون عماد برمجة windows vista

هذا واضح من خلال عدم وجود الردود وقلة المشاهدات

معليش أخي programmer4fun أنا أعرف تماماً ما تحس به ..

الله يعطيك العافية على مجهودك .. رغم أني لم أقرأ موضوعك بعد ..

لكن حزّ في نفسي عدم تفاعل الأعضاء مع موضوعك رغم أهميته ..

أشكر حرصك على نشر الفائدة بين إخوتك و أثمنه ..

الله يعطيك العافية و الأجر .. :)

شكرا أخي programmer4fun

انت لفت نظري لحاجات جديده

و ان شاء الله تستمر في الدوره الجميله دي

السلام عليكم

أولا أنا أسف عن انقطاعي عن الدورة

فلنبدأ

عليك المعرفة أن الخاصية content في wpf تعوض الخاصية text في windows forms ولعل هذا سيمنحك القدرة على القيام بما تريد

لاحظ الكود التالي

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="WindowsApplication2" Height="300" Width="300" >
	<Grid>
	<Button Margin="67,106,90,123" Name="Button1"  >هذا زر  </Button>
	</Grid>
</Window>

لاحظ النتيجة

رابط الصورة

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

كما أنك تستطيع فعل أشياء أفضل فهذه الخاصية هي من النوع object ولهذا فإنك ستستطيع إضافة أي شيء

حسنا الأن سندرس خاصية رائعة لأدوات wpf و لا شك أنها ستكون الخاصية resources

فمن خلال هذه الخاصية ستستطيع القيام ب :

تعديل Styles

تعديل Templates

Animations

Transformations

قد لا تفهم شيئا مما قلته ولكن إعلم أن resources شبيهة بملفات css إلا أنها داخل تطبيقاتنا

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

موضوع جميل أخي العزيز

من بين نقاط قوة ال wpf انها أصبحت تفرق ما بين عمل المبرمج و المصمم بل و أعطت المصمم كل ما يسهل عليه تصميم الواجهات دون الحاجة لتعلم لغات برمجة مثل vb او c# .. فالمبرمج لن يحتاج الا لعمل الكود و بعد ذلك ربطه بكود ال xaml بطريقة معينة و بهذا يمكن تصميم واجهات عدة لبرنامج واحد بسهولة و أنصح الجميع بمتابعة الموضوع و تطبيق عملي لكل هذه الأمور و سوف تكتشفون انها بالفعل أمور مدهشة :)

بارك الله فيك أخي programmer4fun و اكمل دروسك باذنه تعالى

جزاك الله خيراً على هذا المجهود

مشاركة

http://www.xamldev.com/

السلام عليكم

و هذا الرابط

http://www.codeproject.com/useritems/DotNet_XAML.asp

الموقع الخاص بتقنية الفريم ورك 3

http://www.netfx3.com

مدونة تتكلم عن هذة التقنية الجديد وبها العديد من الامثلة الرائعة.

http://thewpfblog.com

مشكورين - جزاكم الله خيرا

أسف عن توقفي عن الدورة بسبب الإمتحان كما ذكرت و الحمد لله فقد مر الإمتحان و أرجو منكم دعوات حتى أتفوق فيه

حسنا

ذكرت أننا سنتحدث عن styles و لكن تذكرت إني لم أعرض أدوات wpf

لنعرف نافذة جديدة

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300"
	>
	<Grid>  
	</Grid>
</Window>

أنظر النتيجة

ثم نعرف زرا جديدا

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300"
	>
	<Grid>
	<Button Height="23" Margin="137,34,80,0" Name="Button1" VerticalAlignment="Top">زر جديد </Button>
  </Grid>
</Window>

لاحظ النتيجة

نبدل لون الزر إلى الأحمر

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300"
	>
	<Grid>
	<Button Height="23" Margin="137,34,80,0" Name="Button1" VerticalAlignment="Top" Background="#FFFF0000">زر جديد </Button>
  </Grid>
</Window>

لاحظ النتيجة

و نبدل لون الجوانب إلى الأحمر أيضا

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300"
	>
	<Grid Opacity="1">
	<Button Height="23" Margin="137,34,80,0" Name="Button1" VerticalAlignment="Top" Background="#FFFF0000" BorderBrush="#FFFF0000" >زر جديد </Button>
  </Grid>
</Window>

لاحظ النتيجة

كما نحول حجم الخط إلى 12

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300"
	>
	<Grid Opacity="1">
	<Button Height="23" Margin="137,34,80,0" Name="Button1" VerticalAlignment="Top" Background="#FFFF0000" BorderBrush="#FFFF0000" FontSize="12">زر جديد </Button>
  </Grid>
</Window>

لا شك أنك عند قرائتك للكود تقرأ هذا Name="Button1" هذه ليست الخاصية text بل هي خاصية إسم الكائن الذي يمثل الزر حيث بإمكانك قنص الحدث بلغة برمجتك المفضلة (لتكن vb .net ) هكذا

ندون هذا الكود في window1.xaml.vb

نعرف إجراء يقوم عند ضغطك على الزر بإعطائك التاريخ و الوقت الحاليين

Public Sub g(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
		MsgBox(Now)
	End Sub

وهكذا تكون قد قمت بأول برنامج كامل بإستخدام wpf

تم تثبيت الموضوع... بارك الله فيك programmer4fun على المجهود الرائع..

أولا أنا أشكر المشرفين على تثبيتهم للموضوع

اليوم سنقوم بتعقيد البرنامج السابق قليلا لغرض إظهار بعض الأمور في wpf

سنقوم بإضافة textbox إلى تطبيقنا

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300" xmlns:my="clr-namespace:System;assembly=mscorlib">
	<Grid Opacity="1">
	<Button Height="23" Margin="137,34,80,0" Name="Button1" VerticalAlignment="Top" Background="#FFFF0000" BorderBrush="#FFFF0000" FontSize="12">زر جديد </Button>
	<TextBox Height="26" Margin="141,78,51,0" Name="TextBox1" VerticalAlignment="Top"></TextBox>
  </Grid>
</Window>

لاحظ النتيجة

كما ذكرت فللخاصية content تعوض الخاصية text

لذا يمكننا إضافة نص في wpf هكذا

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300" xmlns:my="clr-namespace:System;assembly=mscorlib">
	<Grid Opacity="1">
	<Button Height="23" Margin="137,34,80,0" Name="Button1" VerticalAlignment="Top" Background="#FFFF0000" BorderBrush="#FFFF0000" FontSize="12">زر جديد </Button>
	<TextBox Height="26" Margin="141,78,51,0" Name="TextBox1" VerticalAlignment="Top">دورة </TextBox>
  </Grid>
</Window>

ستكون النتيجة

إذا لاحظت نافذة الخصائص فسترى أن إسم هذا textbox هو textbox1

لاحظ الصورة

لذا سيمكنك إستخدام هذا textbox في لغة برمجتك المفضلة كما أحببت

Public Sub g(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
		MsgBox(TextBox1.Text)
	End Sub

السلام عليكم

أريد أن أكمل في شرح بعض الأدوات

و سنكمل كل هذا في تطبيقنا

أول أداة سأشرحها هي combobox فستفاجئون إذا علمتم أن cider لا يمكنك حتى الأن من التعامل بشكل جيد مع هذه الأداة

سننشأ أداة جديدة

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300" xmlns:my="clr-namespace:System;assembly=mscorlib">
	<Grid Opacity="1">
	<Button Height="23" Margin="136,87,81,0" Name="Button1" VerticalAlignment="Top" Background="#FFFF0000" BorderBrush="#FFFF0000" FontSize="12">زر جديد </Button>
	<TextBox Margin="133,117,81,126" Name="TextBox1"	>دورة </TextBox>
	  <ComboBox Height="26" Margin="99,0,72,27" Name="ComboBox1" VerticalAlignment="Bottom" >
	  </ComboBox>
  </Grid>
</Window>

لاحظ النتيجة

و لكن ستقولون كيف نحدد ما هو بداخل هذا combobox

الجواب هو بإستعمال <comboboxitem>

لاحظ الكود

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300" xmlns:my="clr-namespace:System;assembly=mscorlib">
	<Grid Opacity="1">
	<Button Height="23" Margin="136,87,81,0" Name="Button1" VerticalAlignment="Top" Background="#FFFF0000" BorderBrush="#FFFF0000" FontSize="12">زر جديد </Button>
	<TextBox Margin="133,117,81,126" Name="TextBox1"	>دورة </TextBox>
	  <ComboBox Height="26" Margin="99,0,72,27" Name="ComboBox1" VerticalAlignment="Bottom" >
		<ComboBoxItem>arabteam2000</ComboBoxItem>
		<ComboBoxItem>xaml</ComboBoxItem>
		<ComboBoxItem>wpf</ComboBoxItem>
	  </ComboBox>
  </Grid>
</Window>

و هاهي النتيجة

الأن سوف نقوم بالتعامل مع أداة رائعة هي tabcontrol

كما قلت فإن الخاصية content من النوع object وبهذا يمكنك وضع أدوات داخل أخرى

Cider beta يعاني قصورا مع هذه الاداة أيضا

لذا سوف تقوم بالتعامل معها عن طريق الكود

لاحظ الكود التالي

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300" xmlns:my="clr-namespace:System;assembly=mscorlib">
	<Grid Opacity="1">

	<TextBox Margin="135,49,79,0" Name="TextBox1" Height="31" VerticalAlignment="Top">دورة </TextBox>
	  <ComboBox Height="26" Margin="99,0,72,27" Name="ComboBox1" VerticalAlignment="Bottom" Grid.Row="1">
		<ComboBoxItem>arabteam2000</ComboBoxItem>
		<ComboBoxItem>xaml</ComboBoxItem>
		<ComboBoxItem>wpf</ComboBoxItem>
	  </ComboBox>
	  <TabControl Margin="36,100,31,67" Name="TabControl1">
	</TabControl>
  </Grid>
</Window>

لاحظ النتيجة

لانستطيع أن نترك أداتنا هكذا لذا سنضيف الكود التالي

<Window x:Class="Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="لنجرب تقنيات المستقبل " Height="300" Width="300" xmlns:my="clr-namespace:System;assembly=mscorlib">
	<Grid Opacity="1">

	<TextBox Margin="135,49,79,0" Name="TextBox1" Height="31" VerticalAlignment="Top">دورة </TextBox>
	  <ComboBox Height="26" Margin="99,0,72,27" Name="ComboBox1" VerticalAlignment="Bottom" Grid.Row="1">
		<ComboBoxItem>arabteam2000</ComboBoxItem>
		<ComboBoxItem>xaml</ComboBoxItem>
		<ComboBoxItem>wpf</ComboBoxItem>
	  </ComboBox>
	  <TabControl Margin="36,100,31,67" Name="TabControl1"  >
		<TabItem>
		  <Button> arabteam2000</Button>
		</TabItem>
		<TabItem>xaml </TabItem>
	  <TabItem>wpf</TabItem>
	</TabControl>
  </Grid>
</Window>

لا أشك في أنك فهمت الكود إذا كنت قد فهمت الكود الذي يتعامل مع combobox إلا أننا أضفنا الأن button داخل <TabItem>

لاحظ النتيجة في الصور التالية