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

کنترل Label

کنترل Label که شکل ساده آن را در TextBlock مورد بررسی قرار دادیم، به جای خاصیت Text، دارای خاصیت Content است. دلیل این موضوع این است که می‌توانیم داخل یک Label، هر نوع کنترل دیگری را نیز قرار دهیم و کاربرد آن فقط نمایش یک متن ساده نیست. مثال ساده زیر نحوه نمایش یک متن را در Label نشان می‌دهد:

 1: <Window x:Class="WindowDemo.MainWindow"
 2:         xmlns       ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3:         xmlns:x     ="http://schemas.microsoft.com/winfx/2006/xaml"
 4:         xmlns:d     ="http://schemas.microsoft.com/expression/blend/2008"
 5:         xmlns:mc    ="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6:         xmlns:local ="clr-namespace:WindowDemo"
 7:         mc:Ignorable="d"
 8:         Title="MainWindow" Height="200" Width="300">
 9:     <Grid>
10: 
11:        <Label Content="This is a Label control."/>
12: 
13:     </Grid>
14: </Window>

زمانی که برنامه را اجرا کنید خروجی زیر را مشاهده خواهید کرد:

به عبارت ساده‌تر، زمانی که شما یک رشته را در Label قرار می‌دهید، به صورت داخلی یک TextBlock ایجاد می‌کند و سپس رشته را برای شما نمایش می‌دهد. نکته دیگری که باید در مورد Label بدانید این است که به صورت پیش فرض، چند پیکسل از گوشه بالا سمت چپ فاصله دارد که این فاصله در TextBlock وجود ندارد و باید خودتان به صورت دستی این فاصله را مشخص کنید.

مقایسه کنترل Label با کنترل TextBlock

تفاوت‌های مهمی بین یک Label و یک TextBlock وجود دارد. TextBlock فقط می‌تواند برای نمایش یک متن مورد استفاده قرار گیرد، در حالی که با استفاده از یک Label شما می‌توانید:

آخرین تفاوتی که ذکر شد، یکی از دلایل اصلی استفاده از Label به جای TextBlock است. به هر حال اگر شما می‌خواهید فقط یک متن ساده را نمایش دهید، بهتر است از کنترل TextBlock استفاده کنید. به این دلیل که سبک‌تر است و در بیشتر موارد بهتر از Label عمل می‌کند.

Label و کلیدهای دسترسی سریع (mnemonic)

بهتر است در ابتدا با کلیدهای دسترسی یا mnemonic ها آشنا شوید. به احتمال زیاد از این ویژگی در ویندوز یا سیستم عامل‌های دیگر استفاده کرده‌اید ولی فقط اسم آن را نمی‌دانستید. برای مثال اگر در نرم افزار ورد دکمه Alt را فشار دهید چیزی شبیه به تصویر زیر را مشاهده می‌کنید:

زمانی که دکمه Alt را فشار می‌دهید، به ازای هر منو یک کاراکتر نمایش داده می‌شود. زمانی که هر کدام از این کاراکترها را در کیبورد فشار دهید، منوی متناظر با آن انتخاب می‌شود. برای مثال در صورتی که دکمه N را فشار دهید، منوی Insert برای شما انتخاب می‌شود. به این ویژگی، کلیدهای دسترسی سریع یا mnemonic گفته می‌شود. کنترل TextBlock بر خلاف Label، از این ویژگی پشتیبانی نمی‌کند. بنابراین Label گزینه مناسبی برای استفاده از این ویژگی است. به مثال زیر توجه کنید:

 1: <StackPanel Margin="10">
 2:     <Label Content="_Name:" Target="{Binding ElementName=textBoxName}" />
 3:     <TextBox Name="textBoxName" />
 4: 
 5:     <Label Content="_Mail:" Target="{Binding ElementName=textBoxMail}" />
 6:     <TextBox Name="textBoxMail" />
 7: </StackPanel>

زمانی که برنامه بالا را اجرا کنید، خروجی زیر را به شما نشان می‌دهد:

همانطور که در این تصویر هم مشخص است، زمانی که بر روی دکمه Alt کلیک می‌کنیم زیر حرف اول Name و Mail یک خط کشیده می‌شود. اگر کلید Alt را همزمان با کلیدهای N و M فشار دهید، مشاهد خواهید کرد که فوکوس بین دو TextBox ای که در صفحه قرار دارد تعویض می‌شود. دلیل اینکه فوکوس بین TextBox ها تعویض می‌شود این است که Label ها را به TextBox ها متصل کرده‌ایم. در مورد این موضوع کمی جلوتر صبحت خواهیم کرد.
اگر به فایل xaml این برنامه توجه کنید، مشاهده خواهید کرد که قبل از Name و Mail یک underline (_) قرار دادیم. استفاده از underline قبل از هر کاراکتری باعث می‌شود تا آن کاراکتر به عنوان کلید دسترسی سریع تعیین شود. در این مثال به این دلیل که قبل از N و M از underline استفاده کردیم، آن‌ها را به عنوان mnemonic در نظر می‌گیرد. به کد زیر توجه کنید:

 1: <StackPanel Margin="10">
 2:     <Label Content="N_ame:" Target="{Binding ElementName=textBoxName}" />
 3:     <TextBox Name="textBoxName" />
 4: 
 5:     <Label Content="Ma_il:" Target="{Binding ElementName=textBoxMail}" />
 6:     <TextBox Name="textBoxMail" />
 7: </StackPanel>

در این کد، علامت underline را قبل از حروف a و i قرار دادیم، بنابراین کلیدهای دسترسی سریع را نیز همین کاراکترها در نظر می‌گیرد. به این نکته توجه کنید که قرار دادن underline در وسط کلمه، تغییری در ظاهر آن ایجاد نمی‌کند و خروجی این برنامه نیز مانند قبل است، با این تفاوت که هنگام فشردن کلید Alt، زیر حروف a و i در Name و Mail خط کشیده خواهد شد:

نکته دیگری که در این مثال وجود دارد، استفاده از خاصیت Target در Label است. با استفاده از خاصیت Target می‌توانیم Label را به یک کنترل دیگر که در اینجا TextBox است متصل کنیم. برای این منظور از خاصیت ElementName استفاده می‌کنیم و در مقابل آن، نام TextBox مورد نظر را می‌نویسیم. در مورد این خاصیت‌ها در بخش‌های بعدی بیشتر صحبت می‌کنیم و در اینجا هدف فقط آشنایی شما با mnemonic بود.

قرار دادن کنترل‌های دیگر در Label

همانطور که قبلاً هم اشاره شد، Label فقط برای نمایش یک متن ساده نیست و می‌تواند میزبان کنترل‌های دیگر نیز باشد. به مثال زیر توجه کنید:

 1: <StackPanel Margin="10">
 2:     <Label Target="{Binding ElementName=textBoxName}">
 3:         <StackPanel Orientation="Horizontal">
 4:             <Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_green.png" />
 5:             <AccessText Text="_Name:" />
 6:         </StackPanel>
 7:     </Label>
 8:     <TextBox Name="textBoxName" />
 9:     <Label Target="{Binding ElementName=textBoxMail}">
10:         <StackPanel Orientation="Horizontal">
11:             <Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_blue.png" />
12:             <AccessText Text="_Mail:" />
13:         </StackPanel>
14:     </Label>
15:     <TextBox Name="textBoxMail" />
16: </StackPanel>

زمانی که برنامه بالا را اجرا کنید، خروجی زیر را به شما نشان می‌دهد:

در این برنامه هر Label علاوه بر متن، یک آیکون نیز در سمت چپ خود دارد. توجه داشته باشید ما مسیر دو آیکون که در سایت iconfinder هستند، را به خاصیت Source کنترل Image داده ایم، ولی شما می توانید در قسمت Solution Explorer یک پوشه به نام Icon ایجاد کرده و سپس آیکون ها را دانلود و در داخل این پوشه قرار دهید و در نهایت آدرس عکسی که در داخل پوشه است را در داخل خاصیت Source بنویسید.

در این مثال هم مشابه مثال‌های قبل، Label ها را با استفاده از خاصیت Target به TextBox ها متصل کردیم. همچنین با استفاده از کنترل AccessText می‌توانیم یک متن را، به همراه یک کلید دسترسی سریع، ایجاد کنیم. در بخش‌های آینده در مورد کنترل Image بیشتر صحبت خواهیم کرد. در اینجا هدف فقط آشنایی شما با ویژگی‌های مختلف Label است.