عنصر الزر

لا يوجد واجهة تحكم المستخدم بدو ادة (الزر), لذا بالتاكيد WPF تحتوي على عنصر التحكم الزر, و مثل بقية عناصر التحكم في الـ framework, فهو مرن جدًا و سيسمح لك بإنجاز أي شيء تقريبًا. و لكن لنبدأ ببعض الأمثلة الأساسية.

زر بسيط

تمامًا مثل العديد من عناصر التحكم الخاصة بـ WPF, يمكن عرض الزر ببساطة عن طريث إضافة علامة الزر إلى نافذتك. اذا وضعت نص بين العلامات (أو عنصر تحكم اخر), فسوف يكون بمثابة محتوى الزر:

<Button>Hello, world!</Button>

بهذه البساطةو صحيح؟ بالطبع , الزر لا يفعل اي شي الأن, لكن اذا قمت بالإشارة إليه, ستلاحظ انه تحول إلى تأثير التأشير, و الأن سنجعل الزر يقوم بشيء ما,عند اشتراكه مع حدث Click (المزيد من المعلومات عن هذه العملية يمكن ان تجدها في مقالة استخدام الاحداث (Events) في XMAL:

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

في الـ Code-behind, يجب عليك مطابقة method لكي تتعامل مع ضغط الزر

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

الأن لديك زر بسيط جدا و عند الضغط عليه,ستظهر لك رسالة!

تنسيق المحتوى

داخليًا, يتم تحويل النص البسيط داخل محتوى الور إلى عنصر التحكم TextBlock, مما يعنى انه يمكنك التحكم في نفس الجوانب لتنسيق الخط. ستجد العديد من الخصائص في الزر للقيام بذلك, بما في ذلك(على سبيل المثال) Foreground (لون الخط), Background (لون الخلفية), FontWeight (وزن الخط) و ما إلى ذلك. بمعنى أخر, من السهل جدًا تغيير تنسيق الخطداخل عصر الزر:

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

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

ازرار مع محتوى متقدم

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

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

لكن بالطبع ، لا تقتصر على النص فقط - يمكنك وضع كل ما تريد داخل الأزرار الخاصة بك ، مما يؤدي بنا إلى موضوع أعرف أن الكثير من الناس سيطلبونه. أزرار مع الصور!

زر مع صورة (ImageButton):

في العديد من UI frameworks, ستجد زرًا عاديًا ، ثم واحدًا أو أكثر من المتغيرات الأخرى, والتي ستوفر ميزات إضافية. أحد المتغيرات الأكثر استخدامًا هو ImageButton ، والذي ، كما يوحي الاسم ، هو زر يسمح لك عادة بتضمين صورة قبل النص.لكن في WPF ، ليست هناك حاجة لعنصر تحكم منفصل لإنجاز هذا - كما رأيت للتو ، يمكننا وضع العديد من عناصر التحكم داخل الزر ، بحيث يمكنك بسهولة إضافة عنصر تحكم صورة إليه ، مثل هذا:

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

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

الحدود الداخلية في الزر

ربما لاحظت أن الأزرار الموجودة في WPF framework لا تأتي مع أي padding بشكل افتراضي. هذا يعني أن النص قريب جدًا من الحدود ، والذي قد يبدو غريباً بعض الشيء ، لأن معظم الأزرار الموجودة في مكان آخر (الويب والتطبيقات الأخرى وما إلى ذلك) تحتوي على بعض padding على الأقل. بدون قلق , لان الزر يأتي مع خاصية Padding:

<Button Padding="5,2">Hello, World!</Button>

سيؤدي ذلك إلى تطبيق padding بقيمة 5px على كل الجانبين, و 2px في الأعلى و الأسفل. ولكن الإضطرار على تطبيق padding على جميع الأزرار قد تكون متعبة بعض الشيء في مرحلة معينة, لذلك إليك نصيحة صغيرة: يمكنك تبيق الـ padding بشكل عام على حميع الأزرار, اما عبر التطبيق بأكمله أو في نافذة محددة فقط, باستخدام Style (ستنتحذث لاحقًا عن Style). و هنا مثال نطبقه على نافذة, باستخدام خاصية Window.Resources:

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

الأن سيتمكم تطبيق ال padding على جميع الأزرار, و لكن يمكنك بالطبع تجاوزها عن طريق طريق تحديد الـ padding على الزر. و انظر كيفية ظهور جميع الأزرار هذا المثال مع padding:

الملخص:

كما ترون من هذه المقالة ، فإن استخدام الأزرار الموجودة في WPF framework سهل للغاية ويمكنك تخصيص عنصر التحكم المهم هذا إلى ما لا نهاية تقريبًا.