فهم XAML: المكونات الأساسية وأهم الأحداث

Amine

12/09/2024

في هذا الدرس، سنتعرف على المكونات الأساسية المستخدمة في تطوير واجهات المستخدم الرسومية باستخدام XAML. هذه المكونات تشمل TextBlock، TextBox، ComboBox، CheckBox، و RadioButton. بالإضافة إلى السمات الرئيسية لكل مكون، سنلقي الضوء على أهم الأحداث (Events) لكل عنصر وكيفية التعامل معها في كود #C. سنقوم أيضًا بتمارين عملية لتطبيق ما تعلمناه.

أهداف الدرس

فهم الدور والاستخدام الأساسي لكل مكون من المكونات.
التعرف على السمات (Properties) والأحداث (Events) الرئيسية لكل عنصر.
تطبيق الأحداث لربط واجهة المستخدم مع كود #C.
إنشاء واجهة مستخدم بسيطة تجمع بين عدة مكونات.

TextBlock

TextBlock هو عنصر يُستخدم لعرض نص ثابت في واجهة المستخدم. لا يقبل TextBlock إدخال المستخدم، ولكن يمكن تنسيقه لعرض النصوص بشكل مناسب.

السمات الرئيسية لـ TextBlock

Text: النص الذي سيتم عرضه.
FontSize: لتحديد حجم الخط.
FontFamily: لتحديد نوع الخط.
TextAlignment: لتحديد محاذاة النص (يسار، وسط، يمين).
Foreground: لتحديد لون النص.

مثال على استخدام TextBlock:

<TextBlock Text="مرحبا بك في WPF" FontSize="16" FontFamily="Arial" Foreground="Blue" />

الأحداث الشائعة لـ TextBlock

MouseLeftButtonDown: يُستخدم للتفاعل مع النقرات بالفأرة على TextBlock.
MouseEnter: يُستدعى عندما يدخل مؤشر الفأرة إلى منطقة TextBlock.
MouseLeave: يُستدعى عندما يغادر مؤشر الفأرة منطقة TextBlock.

مثال على استخدام حدث في TextBlock:

<TextBlock Text="انقر هنا" MouseLeftButtonDown="TextBlock_MouseLeftButtonDown" />

private void TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    MessageBox.Show("تم النقر على TextBlock!");
}

TextBox

TextBox هو عنصر يسمح للمستخدم بإدخال نص. يُستخدم في النماذج أو واجهات الإدخال.

السمات الرئيسية لـ TextBox

Text: النص المُدخل أو المعروض.
IsReadOnly: يمنع المستخدم من تعديل النص عند ضبطه على True.
MaxLength: يحدد الحد الأقصى لعدد الأحرف المسموح بإدخالها.
AcceptsReturn: يُمكّن المستخدم من إدخال أسطر متعددة عند ضبطه على True.

مثال على استخدام TextBox:

<TextBox Text="أدخل نص هنا" MaxLength="50" />

الأحداث الشائعة لـ TextBox

TextChanged: يُستدعى عندما يتغير النص داخل TextBox.
GotFocus: يُستدعى عندما يحصل TextBox على التركيز (focus).
LostFocus: يُستدعى عندما يفقد TextBox التركيز.
KeyDown: يُستدعى عند الضغط على مفتاح في لوحة المفاتيح.

مثال على استخدام حدث TextChanged:

<TextBox TextChanged="TextBox_TextChanged" />

private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    MessageBox.Show("تم تغيير النص داخل TextBox!");
}

ComboBox

ComboBox هو عنصر يسمح للمستخدم باختيار عنصر من قائمة منسدلة. يمكن أن يكون قابلًا للتحرير إذا تم ضبط خاصية IsEditable على True.

السمات الرئيسية لـ ComboBox

Items: لتحديد العناصر التي يمكن اختيارها.
SelectedItem: العنصر المحدد حاليًا في القائمة.
IsEditable: يسمح للمستخدم بإدخال قيمة جديدة إذا تم ضبطه على True.
SelectedIndex: فهرس العنصر المحدد حاليًا.

مثال على استخدام ComboBox:

<ComboBox IsEditable="True">
    <ComboBoxItem Content="Item 1" />
    <ComboBoxItem Content="Item 2" />
    <ComboBoxItem Content="Item 3" />
</ComboBox>

الأحداث الشائعة لـ ComboBox

SelectionChanged: يُستدعى عند تغيير العنصر المختار.
DropDownOpened: يُستدعى عندما تفتح القائمة المنسدلة.
DropDownClosed: يُستدعى عند إغلاق القائمة المنسدلة.

مثال على استخدام حدث SelectionChanged:

<ComboBox SelectionChanged="ComboBox_SelectionChanged">
    <ComboBoxItem Content="Option 1" />
    <ComboBoxItem Content="Option 2" />
</ComboBox>

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ComboBox comboBox = (ComboBox)sender;
    MessageBox.Show("تم اختيار: " + comboBox.SelectedItem.ToString());
}

CheckBox

CheckBox هو عنصر يسمح للمستخدم بتحديد خيار أو إلغاء تحديده. يمكن استخدامه بشكل منفرد أو مع عناصر أخرى.

السمات الرئيسية لـ CheckBox

IsChecked: يحدد ما إذا كانت CheckBox محددة أم لا.
Content: النص أو المحتوى المعروض بجانب مربع الاختيار.
IsThreeState: يتيح ثلاث حالات (محددة، غير محددة، غير محددة بشكل واضح).

مثال على استخدام CheckBox:

<CheckBox Content="Agree to terms" IsChecked="False" />

الأحداث الشائعة لـ CheckBox

Checked: يُستدعى عندما يتم تحديد CheckBox.
Unchecked: يُستدعى عند إلغاء تحديد CheckBox.
Indeterminate: يُستدعى عندما تكون CheckBox في حالة غير محددة.

مثال على استخدام حدث Checked:

<CheckBox Content="Enable feature" Checked="CheckBox_Checked" />

private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
    MessageBox.Show("تم تمكين الميزة!");
}

RadioButton

RadioButton يُستخدم لتحديد خيار واحد فقط من مجموعة خيارات حصرية. عندما يتم تحديد أحد الأزرار، يتم إلغاء تحديد الأزرار الأخرى في نفس المجموعة.

السمات الرئيسية لـ RadioButton

IsChecked: يحدد ما إذا كان RadioButton محددًا.
GroupName: يُستخدم لتحديد مجموعة الأزرار التي تشترك في نفس السلوك (خيار حصري).
Content: النص أو المحتوى المعروض بجانب زر الاختيار.

مثال على استخدام RadioButton:

<RadioButton Content="Option A" GroupName="Group1" IsChecked="True" />
<RadioButton Content="Option B" GroupName="Group1" />

الأحداث الشائعة لـ RadioButton

Checked: يُستدعى عندما يتم تحديد RadioButton.
Unchecked: يُستدعى عندما يتم إلغاء تحديد RadioButton.

مثال على استخدام حدث Checked:

<RadioButton Content="Choice 1" Checked="RadioButton_Checked" />

private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
    MessageBox.Show("تم اختيار الخيار!");
}

ربط XAML بـ #C

يمكنك ربط مكونات واجهة المستخدم التي تم إنشاؤها باستخدام XAML بكود #C (code-behind) لتحديد السلوك البرمجي لهذه المكونات. على سبيل المثال، يمكنك استخدام الأحداث للتفاعل مع واجهة المستخدم عند الضغط على الأزرار أو تغيير النص.

التمرين العملي: إنشاء واجهة مستخدم بسيطة باستخدام XAML وربطها بكود #C

في هذا التمرين، سنقوم بإنشاء واجهة مستخدم تحتوي على TextBlock، TextBox، وزر لتغيير النص عند النقر عليه. سنستخدم XAML لتعريف الواجهة و#C لتعريف السلوك.

1. تحرير XAML

افتح ملف MainWindow.xaml وقم بإضافة الكود التالي:

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="XAML Example" Height="200" Width="400">
    <Grid>
        <TextBlock x:Name="textBlock" Text="Welcome!" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,20,0,0" FontSize="20" />
        <TextBox x:Name="inputTextBox" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" />
        <Button Content="Change Text" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,20" Click="Button_Click" />
    </Grid>
</Window>

2. تحرير Code-behind

افتح ملف MainWindow.xaml.cs وقم بتعريف الحدث كما يلي:

private void Button_Click(object sender, RoutedEventArgs e)
{
    textBlock.Text = inputTextBox.Text;
}

3. تشغيل التطبيق

قم بتشغيل التطبيق بالضغط على F5. عند الضغط على الزر، سيتغير النص داخل TextBlock إلى النص الذي أدخلته في TextBox.

الخلاصة

في هذا الدرس، تعرفنا على أهم المكونات في XAML مثل TextBlock، TextBox، ComboBox، CheckBox، و RadioButton، بالإضافة إلى السمات والأحداث المرتبطة بكل مكون. كما قمنا بربط مكونات واجهة المستخدم بكود #C لتحديد السلوك. من خلال التمارين العملية، اكتسبنا خبرة في كيفية استخدام هذه المكونات بشكل فعال في تطبيقات WPF.

##C #CheckBox #ComboBox #RadioButton #TextBlock #TextBox #WPF #XAML #أحداث XAML #برمجة واجهات المستخدم #تطوير واجهات المستخدم #سمات XAML

شارك المقال:

القائمة

التصنيفات