آموزش برنامه نویسی

کنترل CheckBox

کنترل CheckBox یک دکمه است و به شکل یک جعبه‌ی خالی به همراه یک برچسب در کنار آن نمایش داده می‌شود. در حالت عادی، زمانی که بر روی جعبه‌ی خالی کلیک شود، یک تیک در داخل جعبه نمایان می‌شود که به ما می‌گوید کنترل CheckBox در حالت Checked قرار دارد. برخلاف دکمه‌ی Radio که فقط اجازه‌ی انتخاب یکی از Radio های فرم را به ما می‌داد، شما می‌توانید چند عدد CheckBox و یا همه‌ی آنها را تیک بزنید. CheckBox نیز خواصی را شبیه به خواص Radio در خود جای داده است. خواص زیر منحصراً مربوط به کنترل CheckBox هستند:

بر خلاف دکمه‌ی Radio، کنترل CheckBox می‌تواند با دادن مقدار True به خاصیت IsThreeState سه حالت داشته باشند. آن حالات Checked ،Unchecked و Intermediate (مربع توپر) هستند:

<CheckBox Content="CheckBox" IsThreeState="True"/>

حالت میانی (Intermediate) نشان می‌دهد که checkbox بی اعتبار یا غیر قابل تشخیص است. تصویر زیر شکل این سه حالت مختلف را نشان می‌دهد.

شما با استفاده از خاصیت IsChecked می‌توانید حالت این کنترل را در قسمت کد نویسی تعیین کنید. IsChecked مقادیر true ،false و null را قبول می‌کند.

<CheckBox Content="CheckBox" IsChecked="false"/>
<CheckBox Content="CheckBox" IsChecked="True"/>
<CheckBox Content="CheckBox" IsChecked="{x:Null}"/>

اگر Checkbox فقط دو حالت On یا Off ( تیک خورده و تیک نخورده) را قبول کند، آنگاه شما به سادگی می‌توانید از خاصیت IsChecked آن که دو مقدار True به معنی اینکه Checkbox تیک خورده و False به معنی اینکه CheckBox تیک نخورده است را قبول می‌کند استفاده کنید. رویداد پیشفرض کنترل CheckBox، رویداد Checked است. اما تفاوت بسیار کمی بین رویداد Checked کنترل CheckBox و RadioButton وجود دارد. برای مثال اگر مقدار خاصیت IsThreeState کنترل Checkbox را True قرار دهید، وقتی CheckBox حالتش را از Checked به InterMediate تغییر دهد، رویداد Checked آن اتفاق نمی‌افتد. در مثال زیر نحوه‌ی کاربرد کنترل CheckBox را مشاهده می‌کنید. یک برنامه ایجاد، سپس سه عدد CheckBox و نیز یک Button به آن اضافه کنید:

<StackPanel Margin="10">
    <CheckBox x:Name="checkBoxShampoo"    Content="Shampoo"/>
    <CheckBox x:Name="checkBoxSoap"       Content="Soap"/>
    <CheckBox x:Name="checkBoxToothpaste" Content="Toothpaste"/>
    <Button x:Name="buttonCheckOut"       Content="Check Out" Width="100"/>
</StackPanel>

خاصیت Name، چک باکس‌ها را به checkBoxSoap ،checkBoxShampoo و checkBoxToothpaste تغییر دهید. مشخصه‌ی Name، دکمه را به buttonCheckOut تغییر دهید. خروجی برنامه به صورت زیر خواهد بود:

بر روی دکمه (Button ) دوبار کلیک کرده و کدهای زیر را در داخل کنترل کننده‌ی رویداد (Event Handler) کپی کنید:

private void buttonCheckOut_Click(object sender, RoutedEventArgs e)
{
    string items = String.Empty;

    if (checkBoxSoap.IsChecked == true)
        items += "\n Soap";
    if (checkBoxShampoo.IsChecked == true)
        items += "\n Shampoo";
    if (checkBoxToothpaste.IsChecked == true)
        items += "\n Toothpaste.";

    MessageBox.Show("You have bought: " + items);
}

برنامه را اجرا کرده و برخی از CheckBox ها را تیک بزنید. وقتی که شما یک CheckBox را تیک می‌زنید، و سپس بر روی دکمه Check Out کلیک می‌کنید، آیتم‌هایی که قبلاً تیک زده‌اید در یک پنجره نمایش داده می‌شوند. به شکل زیر توجه کنید:

در کد بالا، یک متغیر از نوع رشته‌ای تعریف کرده‌ایم و آنرا با یک رشته‌ی تهی مقدار دهی کرده‌ایم (با استفاده از خاصیت Empty از کلاس String). سپس ما چک می‌کنیم که کدام یک از چک باکس‌ها تیک خورده‌اند، هر کدام از آنها که تیک خورده‌اند نامشان به وسیله‌ی عملگر += در رشته‌ای که قبلاً به صورت تهی تعریف کرده‌ایم قرار می‌گیرد. سپس به وسیله‌ی یک پیغام (Message Box) نتایج را در خروجی نمایش می‌دهیم.

شخصی سازی CheckBox ها

کنترل CheckBox از کلاس ContentControl ارث بری می‌کند که به این معنی است که می‌توانیم محتوای آن را شخصی سازی کنیم. اگر شما فقط یک متن ساده را برای CheckBox خود در نظر بگیرید، WPF آن متن را داخل یک TextBlock قرار داده و به شما نشان می‌دهد. اما محتوای یک CheckBox فقط محدود به یک متن ساده نیست و شما می‌توانید هر کنترلی را که می‌خواهید داخل یک CheckBox قرار دهید. به مثال زیر توجه کنید:

<CheckBox IsChecked="True">
    <WrapPanel>
        <TextBlock>
            Are You Sure
        </TextBlock>
        <Image Source="/question.png" Width="16" Height="16" Margin="5,0" />
    </WrapPanel>
</CheckBox>

خروجی کد بالا به صورت زیر است:

البته به این نکته توجه کنید که شما باید یک آیکون به برنامه اضافه کنید و آدرس آن را در خاصیت Source تگ Image بنویسید (یک آدرس اینترنتی را هم می توان نوشت). شما در اینجا از تمامی ویژگی‌هایی که تاکنون در مورد TextBlock مورد بررسی قرار دادیم، می‌توانید استفاده کنید. در CheckBox علاوه بر true کردن خاصیت IsChecked، یک تصویر را نیز در کنار متن آن قرار دادیم. به صورت کلی زمانی که می‌خواهیم چند کنترل را داخل یک کنترل دیگر (مثلاً در اینجا کنترل CheckBox) قرار دهیم، ابتدا باید کنترل‌های مورد نظرمان را داخل یک پنل قرار دهیم و سپس آن پنل را به کنترل مربوطه اضافه کنیم. در این مثال نیز ابتدا TextBlock و Image را داخل یک WrapPanel قرار دادیم و سپس آن را به CheckBox دوم اضافه کردیم.