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>
如上所示,这就是实现这一效果的代码