دورة في windows presentation foundation و XAML

حسنا

سنتعلم كيف نتعامل مع الأداة image و كيف نضيف الصور إلى أدواتنا

لنكمل البرنامج السابق و سنحذف tabcontrol و combobox

إذا أردنا إضافة صورة في برنامجنا فما علينا إلا أن نضيف أداة جديدة هي الأداة image

والجذير بالذكر أن cider يعاني قصورا معها أيضا (لقد صدعت رأسكم بهذه الجملة :lol: )

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

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


	<Image Margin="19,130,0,71" Name="Image1" HorizontalAlignment="Left" Width="117"/>
  </Grid>
</Window>

لاحظ الصورة

إذن كيف سنضيف الصورة إلى هذه الأداة

الجواب هو بإستعمال الخاصية source

لاحظ الكود

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


	<Image Margin="19,130,0,71" Name="Image1" HorizontalAlignment="Left" Width="117"  Source ="C:\Documents and Settings\All Users\Documents\Mes images\Échantillons d'images\collines.jpg" />
  </Grid>
</Window>

لاحظ النتيجة

الأن أظن أنكم ستتسائلون عن كيفية إضافة صورة إلى أداة أخرى مثل button

الجواب لن يكون بإستعمال الخاصية source

بل سيكون بإضافة أداة image داخل button

لاحظ الكود

<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>
	<Button Height="71" Margin="117,0,48,36" Name="Button1" VerticalAlignment="Bottom" >
	  <Image Source ="C:\Documents and Settings\All Users\Documents\Mes images\Échantillons d'images\collines.jpg" />
	</Button>
  </Grid>
</Window>

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

الأن سنتعامل مع أداة أخيرة هي listbox

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

لاحظ الكود

<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>
	<Button Height="71" Margin="117,0,48,36" Name="Button1" VerticalAlignment="Bottom" >
	  <Image Source ="C:\Documents and Settings\All Users\Documents\Mes images\Échantillons d'images\collines.jpg" />
	</Button>
	<ListBox Height="119" Margin="9,8,0,0" Name="ListBox1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="93">

	</ListBox>
  </Grid>
</Window>

هاهي النتيجة

سنضيف أشياء جديدة في listbox بإستعمال <listboxitem>

لاحظ الكود

<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>
	<Button Height="71" Margin="117,0,48,36" Name="Button1" VerticalAlignment="Bottom" >
	  <Image Source ="C:\Documents and Settings\All Users\Documents\Mes images\Échantillons d'images\collines.jpg" />
	</Button>
	<ListBox Height="119" Margin="9,8,0,0" Name="ListBox1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="93">
	  <ListBoxItem>
		programmer4fun
	  </ListBoxItem>
	  <ListBoxItem>
		coding4fun
	  </ListBoxItem>
	  <ListBoxItem>
		arabteam2000
	  </ListBoxItem>
	  <ListBoxItem>
		xaml
	  </ListBoxItem>
	  <ListBoxItem>
		wpf
	  </ListBoxItem>
	  <ListBoxItem>
		.netframework
	  </ListBoxItem>
	  <ListBoxItem>
		winvista
	  </ListBoxItem>

	</ListBox>
  </Grid>
</Window>

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

أظن أنك فهمت الأن فكرة عمل الأدوات في wpf لذا سأتوقف عن شرحها لأتمكن من توضيح أمور أكثر أهمية

حتى الأن لقد رأيت أن wpf ستحقق طفرة في الواجهات الرسومية على ويندوز

لكن ماذا عن تطبيقات الويب ؟

هل ستعمل wpf في تطبيقات الويب عند مستخدمي mac مثلا ؟

إذن فأعلم أن مايكروسوفت طورت wpf/E أي(Windows Presentation Foundation /EveryWhere) وتعمل حتى الأن على PC, Mac, Pocket PC, Smartphone,...

و توجد محاولات لتعمل على linux و solaris

حيث ستعمل هذه التطبيقات على المتصقحات التالية

Opéra, FireFox et Internet Explorer على ويندوز

Safari et FireFox على mac

ولكي تعمل تطبيقاتنا هذه التي ستكون بواجهة ثورية

علينا إنشاء تطبيقات من نوع xaml browser application

ساشرح في المرة القادمة أساسيات Windows Presentation Foundation /EveryWhere

"ملاحظة : سأغيب عن المنتدى غدا وقد أغيب بعد غد لذا أعذروني فإمتحان القيزياء صعب "

جزاك الله موضوع شيق و مفصل الله يبارك فيك

موضوعك اكثر من رائع. جزاك الله خيرا

موضوعك اكثر من رائع. جزاك الله خيرا

موضوعك اكثر من رائع. جزاك الله خيرا

السلام عليكم

WPF /E كنت قد تكلمت عن

فتعال نشاهد هذه الصور عن تطبيقات ويب ثورية

لاحظ الصورة

هذا تطبيق فيه ساعة بعقارب تتحرك ،هذه الساعة شفافة وهكذا تستطيع رؤية ما يوجد تحتها

هذا تطبيق ثان

لاحظ الصورة

هذا تطبيق أقوى حيث يمكنك أن تعمل zoom لهذه الكريات

لاحظنا التطبيقات السابقة

حيث أنها تطبيقات XAML لاتحتاج التثبيت فالتوزيع يعتمد على CLICKONCE

وهذه التطبيقات لتعمل على جهاز العميل يجب :

أن يتوفر على مستعرض ويب داعم

أن يتوفر على WINFX RUNTIME

أما من جانب الأمان فهذه التطبيقات أمنة لذا لن تظهر تحذيرات الأمان المزعجة

الجذير بالذكر أن هذه التطبيقات تستعمل javascript

حسنا لتفهم أفضل إليك هذه الصورة

السلام عليكم

حتى الأن لقد ذكرنا مقدمة عن wpf وطورنا تطبيقات بسيطة أيضا

ولكن منذ هذه اللحظة ستبدأ الدورة بالتعمق في wpf ولكن مع ذلك إعذروني لأنني لن أذكر التعامل مع 3D في WPF

أثناء تجوال اليومي بين صفحات الأنترنت وجدت صورة رائعة عن معمارية و هيكلة wpf

راقب الصورة

حسنا كنت قد قلت أن كل تطبيق wpf يحتوي على المصادر أو ressources

وذكرت أن ressources هي :

Styles

Template

Trigres

Storyboards

قد لا تفهم شيئا مما قلته لذا سننشأ تطبيقا جديدا فيه button واحد نبدل الخاصية content فيه إلى arabteam2000

لاحظ الكود

<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 Margin="75,96,77,109"  Name="Button1"   Content="arabteam2000" />

  </Grid>
</Window>

لاحظ النتيجة

الأن سنضيف الوسم <Grid.Resources>

في داخل هذا الوسم سنضيف style وهو يبين كيفية ظهور أداتك أي أنه يبدل خصائصها

يحمل كل style الخاصية TargetType التي تحدد نوع الأداة التي سيطبق عليها style

إضافة إلى الخاصية x:Key التي تحدد إسم Style حتى نستعمله في أدواتنا

حسنا كيف تعدل الخصائص من خلال style لذلك سنستعمل الوسم setter داخل style

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

و الثانية هي Value و نحدد فيها القيمة التي نسندها إليها

قد لا تفهم شيئا من كل هذا لذا لا تكتئب وتابع معي هذا الكود

  <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.Resources>

	  <Style TargetType="{x:Type Button}" x:Key="MonStyleDePolice">
		<Setter Property="Button.FontStyle" Value="Italic" />
		<Setter Property="Button.Foreground" Value="Red" />
	  </Style>

	</Grid.Resources>

	<Button Margin="75,96,77,109"  Name="Button1"   Content="arabteam2000" />

  </Grid>
</Window>

ستقولون أظهر النتيجة ولكني سأرد أنه لم يتغير شيء

كيف لم يتغير شيء ؟ إذا لماذا نتعب أنفسنا ؟

انتظر ، فعلينا إضافة الخاصية style في أداتنا ونحدد فيها إسم style الذي سنستعمله

حسنا لاحظ الكود مرة أخرى

<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.Resources>

	  <Style TargetType="{x:Type Button}" x:Key="MonStyleDePolice">
		<Setter Property="Button.FontStyle" Value="Italic" />
		<Setter Property="Button.Foreground" Value="Red" />
	  </Style>

	</Grid.Resources>

	<Button Margin="75,96,77,109"  Style="{StaticResource MonStyleDePolice}" Name="Button1"   Content="arabteam2000" />

  </Grid>
</Window>

قبل أن أظهر النتيجة ستقولون عن هذه الخاصية

Style="{StaticResource MonStyleDePolice}"

لماذا نكتب StaticResource ؟

ذلك حتى نحدد أن style الذي عرفناه موجود داخل مصادر تطبيقنا

الأن تفضلوا النتيجة

سنتطرق اليوم إلى template

وهو بخلاف style فهو يصف البنية الظاهرية للأداة (أنا متأكد أنك لم تفهم هذا التعبير )

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

حسنا لاحظ الكود

<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 Margin="45,70,41,83"  Name="Button1"   Content="arabteam2000" />

  </Grid>
</Window>

لقد أنشأنا زرا جديدا

(لاأظن أنك بحاجة لترى النتيجة )

سنعرف template

لاحظ الكود

<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.Resources>
	  <ControlTemplate TargetType="{x:Type Button}" x:Key="mutemplate">
		<Grid>
		  <Ellipse Width="135" Height="70" >
			<Ellipse.Fill>
			  <SolidColorBrush Color ="Aqua" />
			</Ellipse.Fill>
		  </Ellipse>
		</Grid>
	  </ControlTemplate>


	</Grid.Resources>

	<Button Margin="45,70,41,83"  Name="Button1"   Template="{StaticResource mutemplate}" Content="arabteam2000" />

  </Grid>
</Window>

لقد أضفنا الوسم ellipse داخل template لكي يصبح زرنا دائريا

يوجد العديد من الوسوم الأخرى

الأن يمكنك رؤية زرنا الجديد

شكرا اخي العزيز على هذا الموضوع الرائع الذي كنت احتاجه

ولكن بعض الصور لا تظهر عندي مما يسبب لي مشاكل في متابعة الموضوع بصورة جيدة

والامر الاخر هو انني لا استطيع الحصول على هذه الاشياء:

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

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

الرابط

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

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

الرابط

وذلك لانني عندما افتح الرابط لا اجد ما يدل على تنزيل اية ملفات

معذرة اخي لمقاطعة حديثك الرائع

وارجو الافادة في امري هذا

وشكرا لك مرة اخرى

اخوك/ محمد رمضان

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

بالنسبة للروابط فسأبحث عن روابط أخرى و أوافيكم بها

programmer4fun درس جميييييييييل جدا جدا ولم اشاهدة من قبل لقد سلطت الضوء على موضوع

مهم جدا وجميل , ارجو ان تواصل في شرح البقية فلقد اطلق العنان في مخيلتي ... ارجوك اكمل

تحياتي

والله تمام يا مان

السلام عليكم

جزاك الله خيرا على الموضوع الجميل

ولي استفسار هل يعني هذا انه بالمستقبل نستطيع تصميم واجهه واحده ونستخدمها لتطبيق ويب و تطبيق ويندوز

اخي الكريم جزاك الله خيرا على هذا الموضوع القيم لأنه كما اسلفت ستصبح WPF هي عماد البرمجة في بيئة Windows وانا مهتم جدا بتعلم هذه التقنية ولقد استفدت كثيرا مما تطرحه. شكرا اخي العزيز ونتمنى منك مواصلة هذا الجهد الطيب لأننا بأمس الحاجة إلى ما تقدمه.

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

جزاك الله ألف ألف خيرا" على هل الموضوع المميز اخي الكريم programmer4fun بصارحة انها المرة الاولى لي في هذا المنتدى الكريم وقد شاهدت الدورة وشدتني اليها واتمنى من الله لك التوفيق والمتابعة بها .

جزاك الله خيرا اخى الحبيب

بس انا كان ليا استفسار انا شايف ان كل الاكواد دى عباره عن اكواد تصميم يعنى ممكن اقوم بالتصميم على اكسبريشن ديزاين مثلا ومن ثم استخراج كود xaml ووضعه فى المشروع ثم من اضافه الاكواد التى تقوم بعمل البرنامج

ارجوا النقاش فى مثل هذه النقطه

نقطه اخرى وهى اريد مجموعه من الكتب لل wpf ةلة كان لدين نسخه كامله من هذا البرنامج يرجى وضعها وجزاك الله خيرا

فى انتظار المزيد

السلام عليكم

شكرا لك اخي على هذا الموضوع

لكن عندي سؤال هو انه انا رح استعمل wpf في تصميم مواقع انترنت

يعني رح تكون بديله للasp.net

الصراحه انا مافهمت ايش الهدف من هذه التقنيه الجديده

قمت بالبحث في الانترنت ووجدت وجد تقنيه اخرى هي wcf

فانا مش عارف ايش القصد او الهدف منها وايش رح تفرق عن asp.net

وشكرا لك

لمن يريد نظرة عامة حول تقنية ال WPF هنا درس فيديو + ما تحتاجه للبرمجة بهذه التقنية

رأيت الموضوع واجبرنى روعته على شكر صاحبه وبارك الله فيك يا اخى والله

شكرا جداااااااااااا على الدروس دى ونرجو المزيد لان الموضوع ده مهم بالنسبه لى فى شغلى وعاوزه اتعلمه

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

مشكووووووووووووووووووور اخي الكريم على هذا التقديم الاكثر من رائع ..

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

وجزاك الله خير