‫مرحبًا بعودتك.
‫في هذا الفيديو ، سنلقي نظرة فاحصة على zemo وقد ترغب في مثال zemo هو
‫نوع من لغة XML ، كما ترون هنا في الأسفل.
‫وفي الواقع سأقوم بسحبها إلى أبعد من ذلك.
‫إذن ، يتيح لنا أحد الأمثلة كتابة واجهة المستخدم الخاصة بنا ، لذلك لا نحتاج إلى المضي قدمًا وسحب جميع العناصر إلى
‫واجهة المستخدم الخاصة بنا ثم ضبطها هناك.
‫يمكننا القيام بكل ذلك في الكود.
‫الآن قد تقول ، أوه ، أنا أكثر من رجل بصري.
‫أريد المضي قدمًا وسحب الأشياء إلى الداخل وأنا على ما يرام مع ذلك.
‫حسنًا ، يمكنك القيام بذلك ، لكنك مقيد بالتجول في ذلك الوقت.
‫وباستخدام المثال ، يمكنك ضبط الكثير ويمكنك تعديل ليس فقط تلك الأشياء مثل هذا الالتفاف الذي رأيته
‫في الفيديو الأخير ، يمكنك فعل الكثير وسنرى ما هو ربط البيانات ، وما هي الخصائص ، وخصائص
‫التبعية وما إلى ذلك هي الأشياء التي يمكنك القيام بها باستخدام الأمثلة التي تسمح لنا بإنشاء
‫واجهات مستخدم رائعة جدًا يمكن صيانتها بسهولة.
‫إذن وهنا ما يمكنك رؤيته هو هذه النافذة ، أولاً وقبل كل شيء.
‫بشكل عام ، ما لديك هو أن لديك علامة افتتاحية ولديك علامة إغلاق.
‫إذا كنت تعرف لغة HTML ، فقد تكون على دراية بذلك.
‫لديك الأقواس الزاوية وتغلق أيضًا.
‫لذلك أقل من التوقيع بالكلمة ثم أكبر من التوقيع.
‫وترى أن لدينا نفس الشيء مع النافذة وهنا أيضًا.
‫ثم خاتمة واحدة ، لديك أيضًا الشرطة المائلة قبل الكلمة.
‫لذلك هذا هو نفسه للشبكة ، للنافذة لأي شيء آخر.
‫لذا إذا أردت ، على سبيل المثال ، استخدام زر ، يمكنني المضي قدمًا والقيام بذلك.
‫وإذا استخدمت علامة أكبر من ، فسيتم إنشاء علامة الإغلاق تلقائيًا.
‫الآن ما يمكنني فعله هو أنه يمكنني إجراء جميع التعديلات داخل العلامة الافتتاحية ، كما ترون هنا ، الزر ، يمكنني
‫المضي قدمًا وعلى سبيل المثال ، إضافة محتوى إليها.
‫لذلك هناك العديد من الخصائص المختلفة كما ترون.
‫وسأستخدم خاصية المحتوى وسأستخدم شيئًا مثل Click Me.
‫يوجد الآن هذا الزر في المنتصف ، كما ترون ، ويقول ، انقر فوقي.
‫بالطبع ليس لدينا ارتفاع وليس لدينا عرض.
‫لم يتم ذكر كل هذه الأنواع من الخصائص بعد.
‫لكن لنفترض أنني أريد أن يكون ارتفاع هذا الزر 50 بكسل ، ثم أريد أن يكون عرضه 100 بكسل ، كما ترون.
‫الآن ، هذا هو الزر الذي قمت بإنشائه.
‫بالطبع كان بإمكاني سحبها ، لكن القيام بذلك كمثال مفيد للغاية.
‫وماذا الان؟
‫شيء لم أتطرق إليه كثيرًا حتى الآن.
‫والتي لن تكون مطلوبة حتى وقت لاحق من الدورة.
‫لكن بشكل عام ما يمكنك رؤيته هنا هو X و L و S.
‫ما يمثله هذا هو مساحة اسم XML و XAML تعني لغة ترميز التطبيقات القابلة للتوسيع.
‫لذا اسمحوا لي أن أضيف ذلك هنا.
‫دعونا نضيف تعليق.
‫سأستخدم تعليقًا كهذا.
‫كما ترى ، هذا أخضر الآن وهذا تعليق إلى حد كبير.
‫لذا يمكنني كتابة شيء ما هنا ، مثل XAML هي لغة
‫ترميز قابلة للتوسيع.
‫حسنا.
‫الآن الزر ، كما ترى ، موجود هنا.
‫والآن دعنا نمضي قدمًا ونفعل المزيد من الأشياء باستخدام الأزرار.
‫لذلك دعونا ننشئ بعض الأزرار الإضافية.
‫يرجى المضي قدما وإنشاء زر آخر.
‫تمام.
‫أتمنى أن تكون قد جربتها.
‫ما عليك سوى استخدام اسم الزر هنا أو الكلمة الأساسية ، ثم المضي قدمًا وإنشاء الزر الإضافي.
‫الآن ، قد تتساءل ، أوه - ، لم يتم وضعها بشكل صحيح.
‫لدي هذا الزر ومحتواه.
‫أهلاً.
‫فلماذا الآن؟
‫أين هذا انقر فوق الزر الآن؟
‫حسنًا ، إنها داخل الشبكة واختفت لأننا نستخدم شبكة حتى لا تظهر الأزرار فوق بعضها
‫البعض وهكذا دواليك.
‫لذا إذا جربت ذلك ، فقد شاهدته وسننظر في الشبكات لاحقًا أيضًا.
‫لكني أردت فقط أن أريكم ذلك الآن.
‫حسنا.
‫لذلك دعونا نتخلص من هذا الزر مرة أخرى.
‫الآن لدينا زر انقر فوقي ودعنا نشغل التطبيق حتى نتمكن من رؤية كيف يبدو
‫في الواقع في الواقع وكيف يمكن لهذا الشيء برمته أن يجعل حياتنا جميلة بمجرد النقر عليه.
‫لذا كما ترون ، يمكنني أن أحوم فوقها وتغير لونها ويمكنني النقر عليها
‫وتجعل هذه النقرات المتحركة الصغيرة وهذا كل شيء.
‫ولكن لا شيء يحدث عند النقر فوقه وهناك عدة طرق لتنفيذ وظيفة النقر
‫وسنفعل ذلك لاحقًا.
‫حسنا.
‫هذه هي الطريقة التي يمكننا من خلالها إنشاء زر ، على سبيل المثال.
‫الآن ، هناك الكثير من العناصر الإضافية التي يمكننا الوصول إليها هنا أو الخصائص.
‫على سبيل المثال ، يمكننا الوصول إلى خاصية حجم الخط وزيادة حجم الخط إلى 32 ، على سبيل المثال.
‫الآن الزر ليس بعرض النص ، لذلك دعونا نضبط العرض.
‫حسنًا الآن مرة أخرى ، يمكننا رؤية النص الكامل للزر.
‫ولكن عندما تتلاعب بحجم الخط وكل هذه العناصر ، عليك أن تكون حريصًا على أنها لا تزال
‫مناسبة.
‫الآن ما يمكنك فعله أيضًا هو أنه يمكنك ، بدلاً من إضافة المحتوى هنا إلى خاصية المحتوى ،
‫يمكنك ببساطة إضافته داخل علامات الأزرار.
‫لذا هنا سأقول شيئًا مثل Click Meet ، وكما ترون ، هناك.
‫هذا هو المحتوى الموجود بين العلامات حيث يكون لديك المحتوى الخاص بك.
‫هذه طريقة واحدة للقيام بذلك.
‫الطريقة الأخرى هي ببساطة استخدام خاصية المحتوى هنا وتعيين نص مثل هذا ، كما رأينا
‫من قبل.
‫الآن زر علامة الإغلاق هذا غير مطلوب إذا قمت ببساطة بإغلاق الزر على الفور مثل هذا حتى تتمكن
‫من إغلاقه بطريقة أقصر من هذا القبيل.
‫لذلك لا تحتاج إلى زر علامة الإغلاق.
‫وطريقة أخرى لتصميم الزر هي التالية.
‫لذا إذا رأيت شيئًا كهذا ، فلا بأس أيضًا.
‫لذلك تقوم بإنشاء الزر والعلامة والإغلاق والفتح ، وهنا لديك نقطة زر ثم يمكنك المضي قدمًا وضبط
‫جميع الخصائص المختلفة التي تريدها.
‫كما ترى ، هناك العديد من الخصائص المختلفة التي يمكننا الوصول إليها ، على سبيل
‫المثال ، حجم الخط من هذا القبيل.
‫لذا يمكنني ضبط حجم الخط على 72 مثل ذلك ، على سبيل المثال.
‫وخاصية زر أخرى أريد تعديلها ، لنقل ، المحتوى.
‫لذا يمكنني المضي قدمًا ومجرد إخفاء المحتوى هناك.
‫الآن ترى أن هناك هذا الزر الضخم بحجم خط 72 وهو مكتوب عليه مرحبًا.
‫إذن هذا هو النهج الثاني.
‫وهناك أيضًا شيء آخر يمكنك القيام به.
‫لذلك دعونا نضبط هذا الزر أكثر.
‫لذلك دعنا نقول كمحتوى ، لا أريد أن يكون لدي مجرد نص مرحبًا هناك.
‫أريد أن أذهب أبعد من ذلك.
‫أريد إضافة لوحة مندوب.
‫الآن ، ما تفعله لوحة المندوب هو أنها ببساطة تكرر جميع عناصر التحكم أو العناصر الموجودة بجانب بعضها البعض من اليسار
‫إلى اليمين.
‫لذلك سيكون العنصر الأول ، دعنا نقول ، كتلة نصية.
‫ورأينا ما هي كتل النص؟
‫نص بسيط وهذا سيقول متعدد.
‫الآن أنا بحاجة إلى كتلة نصية أخرى وثالثة.
‫حتى الآن تقول متعددة ثلاث مرات.
‫لكن ما يمكنني فعله الآن هو أنه يمكنني ضبط لون كل جانب على حدة أو كل كتلة نصية واحدة.
‫لنفترض أنني غيرت ذلك إلى اللون الأزرق ، ثم في المقدمة.
‫إذن ، لون المقدمة هو لون المقدمة ، وسيكون هذا اللون أحمر.
‫وأخيرًا ، ستحتوي آخر كتلة نصية على المقدمة باللون الأبيض.
‫والآن بدلاً من "متعدد" ، "متعدد" ، "متعدد" ، يقول الزر متعدد الألوان.
‫والآن ربما نريد تعديل حجم الخط قليلاً.
‫لنجعلها أصغر.
‫أيضًا ، الزر الأول ، كما ترى ، يكون مخفيًا لأن الشبكة تعرض العنصر الأخير فقط.
‫إذا لم يتم تعيينهم في هيكل الشبكة الصحيح ، والذي سنراه لاحقًا ، لكن دعنا نتخلص من الزر
‫الأول الذي كان لدينا.
‫والآن لنحدد حجم الزر أيضًا.
‫لذلك دعونا نمضي قدمًا ونستخدم عرض نقطة الزر ، لنفترض 200.
‫وزر بهذا الارتفاع ، والذي سيكون 100.
‫ومثل ذلك.
‫لذا ها نحن ذا.
‫وحجم الخط كبير جدًا بحيث لا يتناسب مع كل شيء.
‫لذا إذا مضينا قدمًا وقمنا بذلك مع 24 ، فهو الآن هناك.
‫لذلك إذا قمت بتشغيل الكود ، فسيكون لدي زر متعدد الألوان يحتوي على عدة كتل نصية مختلفة فيه.
‫وها نحن ذا.
‫لذلك فقط كما ترى ، هناك عدة طرق مختلفة للقيام بذلك.
‫إذا كنت تريد التفاف جوانب متعددة فيه ، فيمكنك استخدام لوحة rep هذه.
‫يمكنك أيضًا استخدام شبكة داخل الزر واستخدام علامة الشبكة لإنشاء عناصر
‫تحكم متعددة ومختلفة داخل الزر.
‫لكن هذا شيء سنقوم بتغطيته لاحقًا.
‫في الوقت الحالي ، من المهم أن تفهم.
‫يتيح لك هذا المثال القيام بالكثير من الأشياء الفاخرة لتحقيق هدفك دون الحاجة إلى السحب والإفلات
‫، وأيضًا مع التحكم الكامل في شكل الأشياء وما تفعله.
‫الآن ، ما سأفعله هو أنني سأعلق على ذلك وسأوضح لك كيفية القيام بنفس الشيء الذي رأيناه هنا مع الكود ، لأننا
‫رأيناه مع مثال الكود ، ولكن يمكننا أيضًا القيام بذلك في الكود الخلفي ، وهو
‫ما يعني بلغة C الحادة ، والتي تعلمناها كثيرًا للصف بأكمله حتى الآن أو للدورة التدريبية
‫بأكملها.
‫لذلك دعونا ندخل في الكود الموجود خلفنا.
‫كما ترون ، يوجد ملف مثال نقطي وهو الملف الذي فتحناه هنا ، النافذة
‫الرئيسية التي XML وكل ملف مثال له رمز خلف الملف وهو ملف نقطي CSS وهذا الملف هو C- ملف حاد ، مما
‫يعني أن لدينا فئة C جزئية حادة هنا والتي يمكننا استخدامها الآن لضبط أو إنشاء واجهة
‫المستخدم الخاصة بنا.
‫وكما ترى ، تسمى النافذة الرئيسية وترث من النافذة.
‫وهنا لدينا طريقة تسمى Main Window ، والتي تشبه الطريقة الرئيسية في تطبيقات وحدة التحكم لدينا
‫التي رأيناها حتى الآن.
‫يتم استدعاء هذا بمجرد فتح النافذة أو بمجرد بدء التطبيق.
‫وكما ترون هنا ، هناك مكون تهيئة يسمى ببساطة يهيئ كل شيء آخر
‫مطلوب لتشغيل نافذتنا.
‫على سبيل المثال ، يقوم بتهيئة هذا العنوان ويقوم بتهيئة الحجم وما إلى ذلك.
‫والآن يمكننا المضي قدمًا وكتابة الكود الخاص بنا هنا.
‫لذا سأريكم كيفية إنشاء زر أولاً.
‫أولًا ، نحتاج إلى شبكة يمكننا من خلالها تخصيص هذا الزر.
‫لذا سأسميها شبكة ، وهي شبكة جديدة.
‫ثم أقوم بتعيين محتوى هذا على شبكتي التي ستفعل كما أقول ببساطة ، النافذة الرئيسية.
‫يجب أن يحتوي على بعض المحتوى ، صحيح ، كما رأينا في ملف المثال.
‫لذلك يتم فتح نافذة هذه العلامة هنا وكل ما هو موجود بين علامات الفتح والختام هذه هو إلى حد كبير هذا المحتوى
‫بأكمله هنا.
‫هذا هو محتوى نافذتي.
‫وما أقوله هنا هو أن هذا المحتوى النقطي يجب أن يكون الشبكة.
‫لذلك قمنا بإنشاء شبكة جديدة كما رأينا هنا.
‫إذن لدينا شبكة هنا أيضًا ، وهي علامة فتح وإغلاق للشبكة هنا والآن.
‫لقد قمت بتعيين ذلك كمحتواه ويمكنني الآن إضافة أشياء إلى هذه الشبكة.
‫على سبيل المثال ، يمكنني إضافة زر إلى الشبكة.
‫بادئ ذي بدء ، لنقم بإنشاء هذا الزر وسأطلق عليه اسم BTN سيكون زرًا جديدًا.
‫الآن لدي هذا الزر ويمكنني تعديل خصائصه.
‫لنفترض أنني أريد تعيين حجم خط الزر الخاص بي ويمكنني ببساطة القيام بهذه الطريقة.
‫أستطيع أن أقول ببساطة إنه سيكون شيئًا مثل 26.
‫الآن في زرنا ، كما رأيتم هنا ، لدينا لوحة التفاف ، وهي محتوى الزر.
‫لذا ما سأفعله هو أن أقوم بإنشاء لوحة التفاف.
‫لوحة التفاف وسأسميها لوحة التفاف ستكون لوحة التفاف جديدة.
‫الآن ، يمكننا إضافة أشياء إلى لوحة الالتفاف.
‫نضيف لوحة الالتفاف إلى الزر ونضيف زر الخفافيش إلى الشبكة.
‫والشبكة هي بالفعل جزء من المحتوى الخاص بنا.
‫الآن دعنا نمضي قدمًا وننشئ كل الأشياء التي نريد إضافتها إلى لوحة الالتفاف وإضافتها إلى ذلك.
‫لذلك نحن بحاجة إلى كتلة نصية أولاً.
‫وكتلة النص ، كما رأيتم هنا ، هي هذه هنا.
‫لذلك قمنا بإنشاء 1 إلى 3 كتل نصية.
‫الأول سيكون t t سيكون عبارة عن كتلة نصية جديدة وأقول ببساطة t t dot text.
‫إذن فهو يحتوي على خاصية نص ، هذا النص هنا ، وهو المحتوى.
‫لذلك بالنسبة للزر ، يسمى المحتوى المحتوى ولكتلة النص ، يُطلق على النص نفسه اسم
‫النص.
‫لذلك نصل إلى خاصية النص في كتلة النص الخاصة بنا وقمنا بتعيين ذلك على متعدد ثم بعد ذلك نقوم بتعيين اللون.
‫لذا ، ستكون مقدمة النقطة النصية عبارة عن فرش تم التفكير فيها وأي لون لدي أولًا بالنسبة إلى اللون المتعدد الذي كان باللون الأزرق.
‫حسنًا ، سأقوم بعمل ذلك باللون الأزرق وكما ترون ، يتم عمل الفرشاة جيدًا باستخدام الفرشاة ، لذا فإن
‫لون النص يتم باستخدام فئة الفرش.
‫لذلك أحتاج إلى استخدام هذه الفرشاة كفئة ثم الوصول إلى لونها.
‫فرشاة ذات لون صلب للغاية من نوع الفرش.
‫وبعد ذلك يمكنني إضافة ذلك إلى لوحة الالتفاف.
‫والآن بعد أن أصبح لدي النص ، يمكنني إضافته إلى لوحة الالتفاف وأقوم بذلك عن طريق الوصول
‫كأطفال وإضافة النص الخاص بي إليه.
‫هذه هي الطريقة التي أضيف بها كتلة نصية واحدة ، وإذا قمنا بتشغيل هذا لا شيء ، فلن نرى أي شيء بعد لأننا لم نضف
‫اللوحة الحمراء إلى الزر بعد ولا الزر إلى الشبكة.
‫لكننا سنفعل ذلك في ثانية.
‫لذلك دعونا نمضي قدمًا ونعدل النص أو نعدل هذه الأجزاء الثلاث مرة أخرى.
‫إذن ما نفعله هو بعد ذلك أن نضبط النص على ألوان متعددة وآخرها كان الزر والآن لدينا
‫اللون الأحمر واللون الأبيض.
‫لذلك قمت فقط بنسخ هذه الأسطر الثلاثة ولصقها لأنها متطابقة.
‫لست بحاجة إلى إنشاء كتلة نصية جديدة في كل مرة أقوم فيها بإضافة الكتلة القديمة ثم أقوم بتعديلها.
‫أو اضبط قيمها.
‫ثم أقوم بإضافته مرة أخرى إلى لوحة المرجع.
‫الآن هذه النصوص الثلاثة في لوحة مندوب وما يمكنني فعله الآن هو أنه يمكنني إضافة لوحة rep.
‫إلى زر بلدي.
‫لذا زر هذا المحتوى سيكون لوحة الالتفاف الخاصة بي.
‫وأخيرًا نقاط شبكة الأطفال نقطة الإضافة.
‫وهنا أقوم بإضافة الزر الخاص بي.
‫هذا ما كنت أتحدث عنه.
‫إذن لدينا الشبكة ، ولدينا الزر ، ولدينا لوحة التفاف.
‫والآن نضيف تلك النصوص إلى اللوحة الحمراء.
‫نضيف اللوحة الحمراء إلى الزر ، ونضيف الزر إلى الشبكة ، وأضفنا الشبكة إلى النافذة.
‫وكما ترى ، هذه هي الطريقة التي يمكنك بها القيام بذلك باستخدام الكود.
‫وقبل تشغيل الكود ، ما علي فعله هو التعليق على الشبكة أيضًا.
‫لذا أنا.
‫في الواقع يمكن أن يكون فقط النافذة.
‫إذن هناك فقط النافذة في نافذتنا الرئيسية.
‫ملف XML وجميع الكودات الأخرى موجودة داخل إطاراتنا الرئيسية إلى الزمالك ، وهو الكود الموجود خلفه.
‫إذن هذا الملف هو الكود الموجود خلف نافذتنا الرئيسية XAML.
‫الآن هناك شيء واحد مفقود قبل أن نختبر ذلك ، وهو أنني قمت بتعيين كتلة نصية جديدة للنص الخاص
‫بي.
‫لذلك أحتاج إلى القيام بذلك لكلا النصين الخاصين بي.
‫لذا فالشيء هو أننا بشكل جيد ، أنشأنا نصًا هنا ونقوم بتهيئته باستخدام كتلة النص الجديدة
‫والآن نحتاج إلى إنشاء كتلة نصية جديدة وتعيينها إلى نصنا قبل أن نتمكن من إضافة ذلك إلى لوحة الالتفاف الخاصة
‫بنا.
‫والآن لدينا ذلك ، يمكننا تشغيل الكود.
‫وسنرى أن لدينا أيضًا زرنا متعدد الألوان.
‫وكما ترون ، لقد فعلنا نفس الشيء الذي فعلناه من قبل مع Zemo ، والذي كان هنا
‫، والذي يبدو أيضًا بسيطًا وأنيقًا.
‫لقد فعلنا ذلك باستخدام كود C-حاد من هذا القبيل.
‫الآن يمكنك الذهاب بالطريقة التي تفضلها ، لكننا سنعمل بشكل أساسي مع zemo.
‫أردت فقط أن أوضح لك أنه يمكنك القيام بكل ما تفعله باستخدام XAML ، يمكنك القيام به أيضًا باستخدام الكود الموجود خلفه ،
‫ولكن في بعض الأحيان يكون من المنطقي استخدام الكود خلفه.
‫على سبيل المثال ، إذا كنت ترغب في تعديل شيء ما ديناميكيًا ، فإن الكود الخلفي يكون أكثر منطقية.
‫لذا فإن تشغيله باستخدام C حاد أو إجراء التعديلات باستخدام C-sharp و Zemo يكون أكثر منطقية
‫عندما يكون لديك واجهات مستخدم ثابتة.
‫وبالمناسبة ، كلما قمت بإنشاء ملف XAML كما لدينا هنا ، ما يفعله هو المضي قدمًا
‫وإنشاء هذا الرمز خلف الملف.
‫لذلك يقوم ببساطة بإنشاء هذا الرمز وتشغيله بمجرد بدء تشغيل التطبيق.
‫بمجرد أن يتم استدعاء نافذتنا الرئيسية.
‫لذلك تم ذلك على أي حال.
‫ونفعل ذلك على هذا النحو باستخدام XAML ، أو نفعل ذلك يدويًا عن طريق إنشاء الكود.
‫الآن يمكنك بالطبع أن تجادل ، هناك شيء مثل هذا العرض والجانب الذي لم تحدده.
‫حسنًا ، يمكنني فعل ذلك بسهولة شديدة هنا.
‫يمكنني ببساطة أن أقول الزر بهذا العرض ويمكنني ضبط ذلك على 150 وزر هذا الارتفاع وضبطه على 100 ، على
‫سبيل المثال.
‫ثم سيتم تعديل الزر وفقًا لذلك.
‫وكما ترون الآن ، فهي موزعة على سطرين.
‫حسنا.
‫إذن هذا هو Zemo والرمز الموجود خلف الكود.
‫أعلم أنه كان مقطع فيديو طويلًا ، لكننا سنشاهد المزيد من الأشياء الرائعة من WPF في الفيديو التالي.
‫لذا أراك هناك.