The RadioButton control

أداة زر الراديو (RadioButton) اداة زر الراديو يخولك ان تعطي مستخدميك قائمة من الخيارات، ليختار واحد منها فقط في اي وقت يشاء. ممكن تحقيق نفس الهدف بإستخدام اداة المجموعات المنسدلة (ComboBox) للوصول لنفس الهدف وبحيز اصغر، لكن مجموعة من ازرار الراديو تعطي المستخدم مظهر اجمل من الخيارات المتاحة.

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>Yes</RadioButton>
		<RadioButton>No</RadioButton>
		<RadioButton IsChecked="True">Maybe</RadioButton>
	</StackPanel>
</Window>

ما نريده الان هو عمل ملصقة (Label) ونذيلها بسؤال، وبعدها نعمل ثلاثة ازرار راديو، كل واحد يحمل جواب محتمل للسؤال. وسنحدد الجواب المفضل على الزر الاخير بإستخدام خاصية (IsChecked)، وببساطة ممكن للمستخدم ان يغير الخاصية بالنقر على اي من الازرة. في الحقيقة هذه هي الخاصية التي سنتعقبها في البرنامج للتاكد اي زر مضغوط او غير مضغوط.

مجموعات أزرار الراديو

عند محاولتك لتشغيل المثال أعلاه، سترى كما وعدنا، بأن فقط واحدًا من زر الراديو بالإمكان أختياره في نفس الوقت. ولكن ماذا لو أردنا عدة مجموعات من أزرار الراديو، وكلها مستقلة وبالإمكان أختيارها بشكل فردي؟ هنا يأتي دور الخاصية GroupName، التي تمكّنك من تخصيص أي أزرار راديو تنتمي لأزرار راديو أخرى. لنرى هذا المثال:

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="230" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton GroupName="ready">Yes</RadioButton>
		<RadioButton GroupName="ready">No</RadioButton>
		<RadioButton GroupName="ready" IsChecked="True">Maybe</RadioButton>

		<Label FontWeight="Bold">Male or female?</Label>
		<RadioButton GroupName="sex">Male</RadioButton>
		<RadioButton GroupName="sex">Female</RadioButton>
		<RadioButton GroupName="sex" IsChecked="True">Not sure</RadioButton>
	</StackPanel>
</Window>

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

المحتوى المخصّص

زر الراديو يقوم بالوراثة من كلاس ContentControl، وهذا يعني بأن أزرار الراديو يمكنها أيضا أخذ محتوى مخصّص. إذا قمت بوضع نص فقط بجانب زر الراديو كما فعلت أنا في المثال أعلاه، WPF سيضع النص في مكون TextBlock وسيقوم بعرضه، وهي تتم بهذه الطريقة لتسهّل عليك. يمكنك وضع أي مكوّن داخل زر الراديو، كما سنرى في المثال القادم:

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonCustomContentSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonCustomContentSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/accept.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Yes" Foreground="Green" />
			</WrapPanel>
		</RadioButton>
		<RadioButton Margin="0,5">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/cancel.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="No" Foreground="Red" />
			</WrapPanel>
		</RadioButton>
		<RadioButton IsChecked="True">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Maybe" Foreground="Gray" />
			</WrapPanel>
		</RadioButton>
	</StackPanel>
</Window>

بشكل ترميزي, هذا المثال سيكون كبيرا في لغة Xaml، ولكن مبدأه بسيط جدًا، لكل زر راديو لدينا لوحة WrapPanel مع صورة ونص داخلها، بما أننا الآن وضعنا النص داخل TextBlock مخصّص. يمكننا تخصيصه كما نشاء، في هذا المثال، لقد قمت بتغيير لون النص ليتماشى مع طبيعة نص الخيار. واستخدمت مكون Image (أقرأ عنه لاحقًا) لوضع صورة أيضا لكل خيار.

لاحظ كيف بإمكانك الآن الضغط في أي مكان قرب أي زر راديو، حتى على صورة أي زر راديو، وسترى بأنك قمت بإختيار هذا الزر، هذا لأننا خصّصنا محتوى أزرار الراديو، ولكن إذا وضعت المحتوى في لوحة منفصلة قرب زر الراديو، فعلى المستخدم الضغط بشكل دقيق على دائرة زر الراديو لإختياره، وهو ليس بالشيء العملي حتمًا.