2020-08-08

WPF实现鼠标移入出现气泡效果

开发工具与关键技术：Visual Studio 2015、WPF
作者：易金亮
撰写时间：2020.08.08

今天我们来说说如何在WPF程序的表格中实现鼠标移入出现气泡效果，首先我们先来看看效果图如下图所示：

如上图所示就是我们要实现的效果了，当我们把鼠标移入到表格中的某一行时，它会出现一个气泡，气泡显示的是这一行的内容，当然我们也可以添加别的内容，这样就可以使得整个表格更加生动起来，那么这个效果是如何实现的呢？其实现代码如下所示：

<!--产品管理表格-->
    <GroupBox  Header="产品资料：">
        <DataGrid x:Name="dgvProduct" IsReadOnly="True" HorizontalAlignment="Left"AutoGenerateColumns="False" 
                    CanUserResizeColumns="False" CanUserResizeRows="False"  SelectionMode="Single" 
                    CanUserReorderColumns="False" AlternationCount="2"  RowHeaderWidth="0" CanUserAddRows="False" Background="White"  SelectedCellsChanged="dgvProduct_SelectedCellsChanged">
        <DataGrid.Columns>
          <DataGridTextColumn Header="序号" x:Name="number"   Binding="{Binding number}"  Width="40"/>
          <DataGridTextColumn Header="产品明细ID"  Visibility="Collapsed" Binding="{Binding ProductDetailID}"  Width="10"/>
          <DataGridTextColumn Header="产品类别ID" Visibility="Collapsed" Binding="{Binding ProductCategoryID}" Width="80"/>
          <DataGridTextColumn Header="产品ID"  Visibility="Collapsed" Binding="{Binding ProductID}"  Width="10" />
          <DataGridTextColumn Header="杯型ID" Visibility="Collapsed" Binding="{Binding CupTypeID}" Width="80"/>
          <DataGridTextColumn Header="品名编码"  Binding="{Binding GradeNameCod}" Width="1*"/>
          <DataGridTextColumn Header="品名"  Binding="{Binding GradeName}" Width="1*"/>
          <DataGridTextColumn Header="类别"  Binding="{Binding ProductCategory}" Width="1*"/>
          <DataGridTextColumn Header="单位"  Binding="{Binding CupTypeName}" Width="1*"/>
          <DataGridTextColumn Header="销售单价"  Binding="{Binding MarketUnitPrice}" Width="1*"  />
          <DataGridTextColumn Header="成本单价"  Binding="{Binding CostUnitPrice}" Width="1*" />
          <DataGridTextColumn Header="积分"  Binding="{Binding Integral}" Width="1*" />
          <DataGridTextColumn Header="会员价"  Binding="{Binding MemberPrice}" Width="1*"/>
          <DataGridTextColumn Header="图片名称" x:Name="Picture"  Visibility="Collapsed" Binding="{Binding Picture}" Width="10" />
    </DataGrid.Columns>
    <DataGrid.RowStyle>
           <Style TargetType="DataGridRow">
                  <Setter Property="ToolTip"   Value="" />
                  <Setter Property="ToolTipService.InitialShowDelay" Value="100"/>
                  <Setter Property="ToolTipService.ShowDuration" Value="500000000"/>
                  <Setter Property="ToolTipService.HasDropShadow" Value="True"/>
                  <Setter Property="ToolTipService.Placement" Value="Bottom"/>
                  <Setter Property="ToolTipService.HorizontalOffset" Value="20"/>
           </Style>
           </DataGrid.RowStyle>
               <DataGrid.Resources>
                   <Style TargetType="ToolTip">
                         <Setter Property="Template">
                              <Setter.Value>
                                  <ControlTemplate>
                                      <Border  BorderThickness="2" BorderBrush="#FFECEDEC" CornerRadius="5" Padding="5">
                                           <Border.Background>
                                                <ImageBrush x:Name="img_photo" ImageSource="/NaiCha_Client;component/Images/tow/005.jpg"></ImageBrush>
                                           </Border.Background>
                                     <StackPanel Height="100" Width="200">
                                     <TextBlock TextWrapping="Wrap" MaxWidth="200"   LineHeight="26" >
                                          <TextBlock.Text>
                                              <MultiBinding StringFormat="{}{0}（{1}）">
                                                     <Binding Path="GradeName"/>
                                                     <Binding Path="GradeNameCod"/>
                                              </MultiBinding>
                                          </TextBlock.Text>
                                     </TextBlock>
                                    <TextBlock TextWrapping="Wrap" MaxWidth="200"  Text="{Binding ProductCategory}" LineHeight="26"  />
                                  <TextBlock TextWrapping="Wrap" MaxWidth="200"  Text="{Binding CupTypeName}" LineHeight="26"  />
                                                    </StackPanel>
                                                </Border>
                                         </ControlTemplate>
                                   </Setter.Value>
                            </Setter>
                     </Style>
                 </DataGrid.Resources>
           </DataGrid>
  </GroupBox>

如上所示，这就是实现这一效果的代码