Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
690
Make a column visible only when user hovers over its corresponding row?
posted

I have a requirement to show a link at the end of each row, allowing the user to click on that link to execute some other action.  I created a Template and it works great - see below.

As a secondary requirement, we would like all links to be invisible or collapsed - a link should only be visible when the user hovers its corresponding row.

Is there anyway to make one link appear as the user hovers overs over its corresponding row?

    <Style x:Key="MyLinkStyle" TargetType="{x:Type igDP:CellValuePresenter}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
            <DockPanel>
              <!-- Give the left edge of the cell a vertical line. -->
              <Border
                    DockPanel.Dock="Left"
                    BorderBrush="#FFEEEEEE"
                    BorderThickness="1,0,0,0"
                    />
              <StackPanel>
                <TextBlock x:Name="tbLink"
                           Text="{Binding Path=DataItem.MyCount}"
                           Tag="{Binding Path=DataItem.MyID}"
                           ToolTip="{Binding Path=DataItem.MyTooltip}"
                           FontSize="11" TextAlignment="Center" Cursor="Hand" ForceCursor="False" Foreground="#FF4731BD" Width="Auto" FontFamily="Arial"
                           PreviewMouseLeftButtonDown="tbLink_PreviewMouseLeftButtonDown">
                                <TextBlock.TextDecorations>
                                    <TextDecoration Location="Underline"/>
                                </TextBlock.TextDecorations>
                </TextBlock>
              </StackPanel>
            </DockPanel>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

Notes on the template above:

  • My link is just a number (DataItem.MyCount)
  • The unique ID of the data item is placed in the Tag (DataItem.MyID) so I can access it from the click event handler.
  • A custom tooltip also works (DataItem.MyTooltip). 

I hooked up an event handler (tbLink_PreviewMouseLeftButtonDown) and I can access DataItem.MyID from within the handler without problems.