Silverlight 控制元件的ToolTip封裝工具使用

        在Silverlight專案開發中，控制元件可以設定滑鼠移入時的手勢，同樣還可以設定ToolTip，利用Silverlight編寫程式碼或者Blend設計工具均可以設定ToolTip，但都是一些文字提示，如何實現圖文並茂的提示呢？

        本文跟大家分享一個國外已封裝好的控制元件在CodePlex上地址為：http://tooltipservice.codeplex.com/，其封裝好的檔案為Silverlight.Controls.ToolTips.dll，下載地址：http://download.csdn.net/detail/taomanman/9052581

        下面介紹使用方法：

        1、下載上面連結地址中的dll檔案，並新增到Silverlight專案引用中。

        2、在xaml頁面的頭部新增引用宣告，如下程式碼所示：

          

 xmlns:Controls="clr-namespace:Silverlight.Controls.ToolTips;assembly=Silverlight.Controls.ToolTips"

        3、在Border控制元件內部新增如下呼叫程式碼：

          

   <Border BorderBrush="White" BorderThickness="2" Background="#FF0061FF" Margin="0,0,-25,0" Cursor="Hand">
       <TextBlock x:Name="F4_8_DK_1_SAT" Margin="0" TextWrapping="Wrap" Text="17.5" FontSize="17.333" FontFamily="Microsoft YaHei" HorizontalAlignment="Center" d:LayoutOverrides="Height" Foreground="White"/>

       <!--設定ToolTip功能開始 2015-08-27-->
        <Controls:ToolTipService.ToolTip>
             <!-- 設定ToolTip 顯示時間和初始延遲時間 -->
              <Controls:ToolTip DisplayTime="00:00:10" InitialDelay="00:00:00" x:Name="bbAT">


                   <!--設定ToolTip關閉動畫 -->
                   <Controls:ToolTip.CloseAnimation>
                           <Storyboard Duration="00:00:01">
                                     <DoubleAnimation From="1" To="0" Storyboard.TargetName="bbAT" Storyboard.TargetProperty="Opacity"/>
                           </Storyboard>
                    </Controls:ToolTip.CloseAnimation>


                    <!-- 設定ToolTip開啟的動畫 -->
                    <Controls:ToolTip.OpenAnimation>
                          <Storyboard Duration="00:00:01">
                                  <DoubleAnimation From="0" To="1" Storyboard.TargetName="bbAT" Storyboard.TargetProperty="Opacity"/>
                           </Storyboard>
                    </Controls:ToolTip.OpenAnimation>


                     <!-- 設定ToolTip的內容，可以是任何元素 -->
                     <Controls:ToolTip.Content>
                            <Image Source="/HES;component/Images/on.png"></Image>
                     </Controls:ToolTip.Content>


                </Controls:ToolTip>
           </Controls:ToolTipService.ToolTip>
           <!--設定ToolTip功能結束 2015-08-27-->

        </Border>

        4、效果如下圖所示：

               

===========================================================================

如果覺得對您有幫助，微信掃一掃支援一下：