鼠标进入离开DataGrid的行的操作。

今天在论坛上看到一个人想实现这样的一个功能：

1. 在datagrid空间里有很多行很多列。

2. 其中的一列有两个空间： button和image

3. 默认情况下，显示Button，如果当鼠标Hover该行的时候，则显示图片，隐藏button;当鼠标离开的时候，就隐藏图片，显示button.

下面是datagrid的 xaml代码：

 1<data:DataGrid x:Name="peopleDataGrid" Grid.Row="1"  Width="auto" Height="auto" MouseEnter="peopleDataGrid_MouseEnter" MouseMove="peopleDataGrid_MouseMove"  KeyDown="peopleDataGrid_KeyDown" LoadingRow="peopleDataGrid_LoadingRow" >
 2            <data:DataGrid.Columns>
 3                <data:DataGridTemplateColumn Header="Primary Key">
 4                    <data:DataGridTemplateColumn.CellTemplate>
 5                        <DataTemplate>
 6                            <StackPanel x:Name="panel" MouseEnter="StackPanel_MouseEnter" MouseLeave="StackPanel_MouseLeave" >
 7                                <Image x:Name="image" Source="niwazeki01a.jpg" Visibility="Collapsed"></Image>
 8                                <Button x:Name="btn" Content="Button"></Button>
 9                            </StackPanel>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>
            </data:DataGrid.Columns>
            
        </data:DataGrid>

 

如果有实现鼠标的操作，需要用到datagrid两个事件 ：MouseEnter 、MouseLeave 。

这两个事件需要在datagrid的rowloading事件里面注册：

 private void peopleDataGrid_LoadingRow(object sender, DataGridRowEventArgs e)
{
     e.Row.MouseEnter += new MouseEventHandler(Row_MouseEnter);
     e.Row.MouseLeave += new MouseEventHandler(Row_MouseLeave);
            
}

 

 1 void Row_MouseLeave(object sender, MouseEventArgs e)
 2        {
 3            GetChildrenWithParent((DataGridRow)sender, typeof(Button), typeof(Image));
 4            ((DataGridRow)sender).Height = 25;
 5        }
 6
 7        void Row_MouseEnter(object sender, MouseEventArgs e)
 8        {
 9            GetChildrenWithParent((DataGridRow)sender, typeof(Image),typeof(Button));
            ((DataGridRow)sender).Height = 100;
        }

 

然后根据鼠标的操作，使用VisualTreeHelper 找到datagrid的controlTemplate中的控件，然后显示或隐藏他们：

 

 1private void GetChildrenWithParent(UIElement parent, Type targetType, Type hideType)
 2        {
 3            int count = VisualTreeHelper.GetChildrenCount(parent);
 4
 5            for (int i = 0; i < count; i++)
 6            {
 7                UIElement child = (UIElement)VisualTreeHelper.GetChild(parent, i);
 8                if (targetType.ToString() == "System.Windows.Controls.Image")
 9                {
                    if (child.GetType() == targetType && ((Image)child).Name == "image")
                    {
                        child.Visibility = Visibility.Visible;
                    }

                    if (child.GetType() == hideType && ((Button)child).Name == "btn")
                    {
                        child.Visibility = Visibility.Collapsed;
                    }
                }
                else if (targetType.ToString() == "System.Windows.Controls.Button")
                {
                    if (child.GetType() == targetType && ((Button)child).Name == "btn")
                    {
                        child.Visibility = Visibility.Visible;
                    }

                    if (child.GetType() == hideType && ((Image)child).Name == "image")
                    {
                        child.Visibility = Visibility.Collapsed;
                        ((StackPanel)parent).MinHeight = 10;
                    }
                }
               
                GetChildrenWithParent(child, targetType,hideType);
            }
        }

          由于图片 和button控件的高度的差别，在从图片切换到Button的时候，发现datagrid的行变得比较高，没有自适应高度。所以需要在MouseEnter 、MouseLeave 事件中，手动的设置行高。