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

کنترل ToolTip

از کنترل ToolTip برای نمایش توضیحاتی در مورد هر یک از کنترل‌های به کار برده شده در GUI، استفاده می‌شود. این کنترل با نام های InfoTip یا Hint نیز شناخته می‌شود و در WPF تقریباً همه کنترل‌ها از ToolTip ها پشتیبانی می‌کنند. نمایش ToolTip برای یک کنترل کار بسیار ساده‌ای است. به مثال زیر توجه کنید:

<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
    <Button Width="100" Height="30" ToolTip="This is tooltip">Wait Here!</Button>
</Grid>

برنامه را اجرا کنید. زمانی که نشانگر ماوس را برای چند لحظه روی دکمه نگه داریم، یک جعبه شناور با متن “This is tooltip” نمایش داده می‌شود که با استفاده از خاصیت ToolTip آن را به دکمه خود اضافه کرده ایم:

برای اضافه کردن یک ToolTip که فقط شامل یک متن ساده است از خاصیت ToolTip به شکل بالا استفاده می‌کنیم اما زمانی که بخواهیم از کنترل‌های دیگری نیز داخل ToolTip استفاده کنیم باید محتوای Content و ToolTip را از یک دیگر جدا کنیم. به تکه کد زیر توجه کنید:

<Button>
    <Button.Content>
        //Some Code
    </Button.Content>
    <Button.ToolTip>
        //Some Code
    </Button.ToolTip>
</Button>

در اینجا دو تگ و را به Button اضافه کردیم که هر آنچه داخل تگ قرار دهیم به عنوان محتویات دکمه در نظر می‌گیرد و هر آنچه داخل تگ قرار دهیم به عنوان محتویات ToolTip در نظر می‌گیرد.

شخصی سازی ToolTip

یک ToolTip فقط محدود به نمایش یک متن ساده نیست و شما می‌توانید هر چیزی که می‌خواهید را داخل آن قرار دهید. کد زیر اصلاح شده کد بالاست:

 1: <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
 2:     <Button Width="100" Height="30">
 3:         
 4:         <Button.Content>
 5:             Wait Here!
 6:         </Button.Content>
 7:         
 8:         <Button.ToolTip>
 9:             <StackPanel>
10:                 <TextBlock FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Open file</TextBlock>
11: 
12:                 <TextBlock>
13:                         Search your computer or local network
14:                         <LineBreak />
15:                         for a file and open it for editing.
16:                 </TextBlock>
17: 
18:                 <Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
19: 
20:                 <WrapPanel>
21:                     <Image Source="/Help-and-Support-icon.png" Margin="0,0,5,0" Width="20" Height="20" />
22:                     <TextBlock FontStyle="Italic">Press F1 for more help</TextBlock>
23:                 </WrapPanel>
24:             </StackPanel>
25:         </Button.ToolTip>
26:         
27:     </Button>
28: </Grid>

بعد از اجرای برنامه با ماوس بر روی کنترل دکمه مکث کنید تا Tooltip نمایش داده شود:

قسمت 1 شکل بالا به وسیله خط 10، قسمت 2 به وسیله خطوط 16-12، قسمت 3 به وسیله خط 18، قسمت 4 به وسیله خط 21 و قسمت 5 به وسیله خط 22 ایجاد شده است. نکته‌ای که در اینجا وجود دارد مربوط به خاصیت Content در Button است. همانطور که می دانید اگر یک کنترل از کلاس ContentControl ارث بری کند، می‌توانیم داخل آن هر چیزی قرار دهیم و به عبارت دیگر محتویات آن را (با قرار دادن تصویر، متن و …) شخصی سازی کنیم. کنترل Button از این کلاس ارث بری می‌کند، بنابراین می‌توانیم محتویات آن را شخصی سازی کنیم.

ویژگی‌های ToolTip

در بخش قبل شما با نحوه شخصی سازی محتوای یک ToolTip آشنا شدید. حال در این بخش می‌خواهیم انواع ویژگی‌های یک ToolTip را مورد بررسی قرار دهیم:

ویژگی Placement

با استفاده از این ویژگی می‌توانیم مکان نمایش ToolTip را در صفحه مشخص کنیم. حال می‌خواهیم مقادیری که می‌توان برای Placement در نظر گرفت را مورد بررسی قرار دهیم:

مقدار Absolute، به صورت پیش فرض ToolTip را در گوشه بالا سمت چپ صفحه نمایش یا مانیتور قرار می‌دهد و با استفاده از خاصیت‌های HorizontalOffset و VerticalOffset می‌توانیم میزان فاصله از مکان پیش فرض را تعیین کنیم. به مثال زیر توجه کنید:

<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
    <Button Width="200" Height="50">
        <Button.Content>
            Wait Here!
        </Button.Content>
        <Button.ToolTip>
            <ToolTip Placement="Absolute">
                This is Tooltip
            </ToolTip>
        </Button.ToolTip>
    </Button>
</Grid>

در این مثال ToolTip در گوشه بالا سمت چپ صفحه نمایش و با فاصله 10 پیکسل از چپ و 20 پیکسل از بالا نمایش داده می‌شود:

مقدار Bottom گوشه بالا سمت چپ ToolTip را با گوشه پایین سمت چپ کنترل مورد نظر ما تراز می‌کند:

مقدار ToolTip ،Center را در مرکز کنترل مورد نظر قرار می دهد:

مقدار Left، گوشه بالا سمت راست ToolTip را با گوشه بالا سمت چپ کنترل مورد نظر ما تراز می‌کند:

مقدار Right گوشه بالا سمت چپ ToolTip را با گوشه بالا سمت راست کنترل مورد نظر ما تراز می‌کند:

مقدار Top، گوشه پایین سمت چپ ToolTip را، با گوشه بالا سمت چپ کنترل مورد نظر ما، تراز می‌کند:

Relative: گوشه بالا سمت چپ ToolTip بر گوشه بالا سمت چپ کنترل مورد نظر ما منطبق می‌شود :

نکته ای که بهتر است همینجا ذکر شود این است که با استفاده از خاصیت‌های HorizontalOffset و VerticalOffset می‌توانیم میزان فاصله از مکان پیش فرض را تعیین کنیم. به مثال زیر توجه کنید:

<ToolTip Placement="Relative" HorizontalOffset="20" VerticalOffset="30"> 
    This is Tooltip
</ToolTip>

مثلا در کد بالا، Tooltip در محور X ها 20 پیکسل به سمت راست و در محور Y ها 30 پیکسل به سمت پایین کشیده می شود:

شما همچنین می‌توانید از مقادیر منفی نیز در HorizontalOffset و VerticalOffset استفاده کنید:

ویژگی PlacementRectangle

با استفاده از این ویژگی می‌توانید مکان ToolTip را در صفحه مشخص کنید. در صورتی که Placement را برابر با Mouse قرار دهید، PlacementRectangle تاثیری در تعیین مکان ToolTip نخواهد داشت و از آنجایی که مقدار پیش فرض Placement نیز برابر با Mouse است، بنابراین حتماً باید مقداری را برای Placement در نظر بگیرید. به مثال زیر توجه کنید:

<ToolTip Placement="Relative" PlacementRectangle="70, 60, 50, 40">
    This is Tooltip
</ToolTip>

در این مثال Placement را برابر با Relative قرار دادیم و همچنین یک PlacementRectangle را با مقادیر 70,60,50,40 تعیین کردیم. این اعداد به ترتیب از سمت چپ بیانگر فاصله از محور X ها، فاصله از محور Y ها، عرض (Width) و ارتفاع (Hieght) می‌باشند:

شما همچنین می‌توانید Vertical Offset و Horizontal Offset را نیز با PlacementRectangle ترکیب کنید:

<ToolTip Placement="Relative" 
         PlacementRectangle="70, 60, 50, 40" 
         VerticalOffset="20" 
         HorizontalOffset="60">
                    
This is Tooltip
</ToolTip>

کلاس ToolTipService

برخی از ویژگی‌های ToolTip را نمی‌توانیم با استفاده از کلاس ToolTip (روش عادی) تنظیم کنیم. در اینگونه از موارد باید از کلاس دیگری به نام ToolTipService استفاده کنید. با استفاده از این کلاس می‌توانید زمان نمایش ToolTip را مدیریت کنید. برخی از خاصیت های این کلاس عبارتند از :

• InitialShowDelay
• ShowDuration
• BetweenShowDelay
• ShowOnDisabled

به صورت عادی زمانی که کرسر ماوس را روی کنترل مورد نظرمان می‌بریم، بلافاصله ToolTip را نمایش می‌دهد اما با استفاده از خاصیت InitialShowDelay می‌توانیم تاخیری را بر حسب میلی ثانیه برای نمایش ToolTip در نظر بگیریم:

<Button ToolTip="This is Tooltip" ToolTipService.InitialShowDelay="1000">
    Button
</Button>

برای مثال در اینجا زمانی که کرسر ماوس بر روی دکمه قرار می‌گیرد، بعد از یک ثانیه (1000 میلی ثانیه) تأخیر ToolTip را نمایش می‌دهد.

خاصیت ShowDuration، مدت زمان نمایش ToolTip (بر حسب میلی ثانیه) را قبل از محو شدن مشخص می‌کند:

<Button ToolTip="This is Tooltip" ToolTipService.ShowDuration="5000">
    Button
</Button>

بعد از اجرای برنامه بر روی دکمه مکث کنید و ماوس را حرکت ندهید. متوجه می شوید که Tooltip بعد از 5 ثانیه یا همان 5000 میلی ثانیه محو می شود.
خاصیت BetweenShowDelay، مشخص می‌کند که چه مدت وقت داریم تا کرسر ماوس را به کنترل دیگری حرکت دهیم تا ToolTip در کنترل دوم بدون InitialDelay نمایش داده شود:

<StackPanel>
    <Button ToolTip="Button1 ToolTip" 
            ToolTipService.InitialShowDelay="3000" 
            Width="100" 
            Padding="10" 
            Margin="10">
        Button1
    </Button>
        
    <Button ToolTip="Button2 ToolTip" 
            ToolTipService.BetweenShowDelay="5000" 
            Width="100" 
            Padding="10" 
            Margin="10">
        Button2
    </Button>
</StackPanel>

در اینجا ما دو دکمه تعریف کردیم که برای دکمه اولی مقدار InitialShowDelay را 3 ثانیه و برای دکمه دومی BetweenShowDelay را 5 ثانیه در نظر گرفتیم. اگر در زمان اجرای این برنامه، کرسر ماوس را روی دکمه اولی قرار دهیم، از آنجایی که InitialDelay را 3 ثانیه در نظر گفتیم، ToolTip را بعد از 3 ثانیه نمایش می‌دهد. حال اگر ابتدا کرسر ماوس را روی دکمه دوم قرار دهیم، از آنجایی که BetweenShowDelay را 5 ثانیه در نظر گرفتیم، اگر در کمتر 5 ثانیه کرسر ماوس را به دکمه اول حرکت دهیم، TooTip مربوط به دکمه اول بلافاصله نمایش داده می‌شود و دیگر 3 ثانیه تأخیر را در نظر نمی‌گیرد. به عبارت دیگر اگر در کمتر از رمان مشخص شده توسط BetweenShowDelay کرسر ماوس را به کنترل دیگری حرکت دهیم، InitialDelay مربوط به کنترل مقصد را تأثیر نمی‌دهد.

خاصیت ShowOnDisabled، رفتار ToolTip را زمانی که کنترل مورد نظر ما غیر فعال است، مشخص می‌کند. اگر مقدار true را به آن اختصاص دهیم، حتی اگر کنترل مربوطه غیر فعال هم باشد باز هم ToolTip را نمایش می‌دهد و در صورتی که مقدار False را برای آن در نظر بگیریم، فقط زمانی ToolTip را نمایش می‌دهد که کنترل ما فعال باشد. همچنین مقدار پیش فرض آن هم False است:

<Button IsEnabled="False"
        ToolTip="This is ToolTip"
        ToolTipService.ShowOnDisabled="True"
        ToolTipService.BetweenShowDelay="5000"
        Height="50"
        Margin="50, 70">
    Button Content
</Button>

در این مثال با اینکه دکمه به صورت پیش فرض غیر فعال (IsEnabled=”False”) است اما به دلیل آنکه مقدار ShowOnDisabled را برابر با true قرار دادیم، همچنان ToolTip را نمایش می‌دهد: