Using Style Triggers to Give ToolTips to DataGrid Columns

/ By / In WPF, XAML / 2 Comments

Working with a DataGrid on a recent project, I had to get ToolTips on all of the DataGrid column headers.  At first go around, I had used the first thing that came to my head which was to insert a TextBlock into my Header and give it a ToolTip.

TextBlock in Header
  1. <DataGridTemplateColumn.Header>
  2.     <TextBlock Text="Column B" ToolTip="A short explanation of Column B"/>
  3. </DataGridTemplateColumn.Header>

 

This worked OK for a while, I got my expected result which was a ToolTip when a user moused over the header…although it wasn’t exactly what I wanted because they had to mouse over the text of my header, but I was OK with that.

Later on, another requirement came in, to allow the users to choose which columns were visible and which were hidden and that is when the flaw in my first approach was exposed (more on this later) and I found an easier way using a trigger to display tool tips and didn’t require creating a TextBlock in DataGridTemplateColumn.Header. 

ToolTip from Style Trigger
  1. <Style TargetType="{x:Type DataGridColumnHeader}">
  2.     <Style.Triggers>
  3.         <Trigger Property="IsMouseOver" Value="True">
  4.             <Setter Property="ToolTip" Value="{Binding Column.(ToolTipService.ToolTip), RelativeSource={RelativeSource Self}}"/>
  5.         </Trigger>
  6.     </Style.Triggers>
  7. </Style>
  8. …
  9. <!– Use ToolTipService.ToolTip to assign the tooltip value –>
  10. <DataGridTemplateColumn x:Name="colA" Width="40*" IsReadOnly="True" Header="Column A" ToolTipService.ToolTip="Explanation of Column A">

WPF Minimal Button Styling

/ By / In WPF / 7 Comments

With all of the blog posts about Button styling in WPF since its release, it amazes me that there is very little out there about totally removing the Button default styling.  I needed an image to be my button, but without overriding the control template for the button, you can’t remove the borders or get rid of the bluish mouse over effects.  Below is a style for a borderless button, whose mouse over and IsPressed effect is a small size transformation to the content. 

Borderless Button Style
  1. <Style x:Key="BorderlessButton" TargetType="{x:Type Button}">
  2.     <Setter Property="Padding" Value="1"/>
  3.     <Setter Property="Background" Value="Transparent" />
  4.     <Setter Property="Template">
  5.         <Setter.Value>
  6.             <ControlTemplate TargetType="{x:Type Button}">
  7.                 <Border Name="border" Background="{TemplateBinding Background}">
  8.                     <ContentPresenter Name="content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
  9.                                       Margin="{TemplateBinding Padding}"
  10.                                       RecognizesAccessKey="True"
  11.                                       SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
  12.                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  13.                 </Border>
  14.                 <ControlTemplate.Triggers>
  15.                     <Trigger Property="IsMouseOver" Value="True">
  16.                         <Setter TargetName="content" Property="RenderTransform" >
  17.                             <Setter.Value>
  18.                                 <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
  19.                             </Setter.Value>
  20.                         </Setter>
  21.                     </Trigger>
  22.                     <Trigger Property="IsPressed" Value="True">
  23.                         <Setter TargetName="content" Property="RenderTransform" >
  24.                             <Setter.Value>
  25.                                 <ScaleTransform ScaleX=".95" ScaleY=".95" />
  26.                             </Setter.Value>
  27.                         </Setter>
  28.                     </Trigger>
  29.                     <Trigger Property="IsFocused" Value="True">
  30.                     </Trigger>
  31.                 </ControlTemplate.Triggers>
  32.             </ControlTemplate>
  33.         </Setter.Value>
  34.     </Setter>
  35. </Style>