今天在论坛上看到一个人想实现这样的一个功能:
1. 在datagrid空间里有很多行很多列。
2. 其中的一列有两个空间: button和image
3. 默认情况下,显示Button,如果当鼠标Hover该行的时候,则显示图片,隐藏button;当鼠标离开的时候,就隐藏图片,显示button.
下面是datagrid的 xaml代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
datagrid
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>
10
</DataTemplate>
11
</data:DataGridTemplateColumn.CellTemplate>
12
</data:DataGridTemplateColumn>
13
</data:DataGrid.Columns>
14
15
</data:DataGrid>
如果有实现鼠标的操作,需要用到datagrid两个事件 :MouseEnter 、MouseLeave 。
这两个事件需要在datagrid的rowloading事件里面注册:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
注册鼠标的事件
1
private void peopleDataGrid_LoadingRow(object sender, DataGridRowEventArgs e)
2![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
3
e.Row.MouseEnter += new MouseEventHandler(Row_MouseEnter);
4
e.Row.MouseLeave += new MouseEventHandler(Row_MouseLeave);
5
6
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
事件
1
void Row_MouseLeave(object sender, MouseEventArgs e)
2![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
3
GetChildrenWithParent((DataGridRow)sender, typeof(Button), typeof(Image));
4
((DataGridRow)sender).Height = 25;
5
}
6![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
void Row_MouseEnter(object sender, MouseEventArgs e)
8![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
9
GetChildrenWithParent((DataGridRow)sender, typeof(Image),typeof(Button));
10
((DataGridRow)sender).Height = 100;
11
}
12![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
然后根据鼠标的操作,使用VisualTreeHelper 找到datagrid的controlTemplate中的控件,然后显示或隐藏他们:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
控件的显示/隐藏
1
private void GetChildrenWithParent(UIElement parent, Type targetType, Type hideType)
2![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
3
int count = VisualTreeHelper.GetChildrenCount(parent);
4![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
for (int i = 0; i < count; i++)
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
7
UIElement child = (UIElement)VisualTreeHelper.GetChild(parent, i);
8
if (targetType.ToString() == "System.Windows.Controls.Image")
9![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
10
if (child.GetType() == targetType && ((Image)child).Name == "image")
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
12
child.Visibility = Visibility.Visible;
13
}
14![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
if (child.GetType() == hideType && ((Button)child).Name == "btn")
16![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
17
child.Visibility = Visibility.Collapsed;
18
}
19
}
20
else if (targetType.ToString() == "System.Windows.Controls.Button")
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
22
if (child.GetType() == targetType && ((Button)child).Name == "btn")
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
24
child.Visibility = Visibility.Visible;
25
}
26![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
if (child.GetType() == hideType && ((Image)child).Name == "image")
28![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
29
child.Visibility = Visibility.Collapsed;
30
((StackPanel)parent).MinHeight = 10;
31
}
32
}
33
34
GetChildrenWithParent(child, targetType,hideType);
35
}
36
}
由于图片 和button控件的高度的差别,在从图片切换到Button的时候,发现datagrid的行变得比较高,没有自适应高度。所以需要在MouseEnter 、MouseLeave 事件中,手动的设置行高。