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.

Parents
No Data
Reply
  • 69686
    posted

    Hello,

    To do that you need to handle the MouseEnter and MouseLeave events. You can do this on the CellValuePresenter or the DataRecordPresenter. Here is a small code snippet implementing this behavior:

     

    public Window1()

            {

                EventManager.RegisterClassHandler(typeof(CellValuePresenter), CellValuePresenter.MouseEnterEvent,

     new MouseEventHandler(OnMouseEnter));

                EventManager.RegisterClassHandler(typeof(CellValuePresenter), CellValuePresenter.MouseLeaveEvent,

     new MouseEventHandler(OnMouseLeave));

                InitializeComponent();

            }

            void OnMouseEnter(object sender, MouseEventArgs e)

            {

                XamDataGrid xamDataGrid1 = (sender as CellValuePresenter).DataPresenter as XamDataGrid;

                xamDataGrid1.FieldLayouts[0].Fields[4].Visibility = Visibility.Visible;

            }

            void OnMouseLeave(object sender, MouseEventArgs e)

            {

                XamDataGrid xamDataGrid1 = (sender as CellValuePresenter).DataPresenter as XamDataGrid;

                xamDataGrid1.FieldLayouts[0].Fields[4].Visibility = Visibility.Collapsed;

            }

    Hope this helps,

    Alex.

     

Children