WPF查找父元素和子元素
今天按照这一年来经常用到的那些静态的工具类再来做一次总结，这些小的工具来可以作为自己学习的很好的例子，通过总结这些东西，能够很大程度上梳理自己的知识体系，当然这个是经常用到的，接下来就一个个去分析这些类的作用和蕴含的知识点。
ControlUtil
这个工具类是非常重要的，它的主要作用就是通过视觉树和逻辑树去寻找父节点或者子节点，这个例子在网上非常多，其核心都是通过迭代的思想去寻找自己最终想要的子控件，当然这里面有很多的内容，下面通过一个个的实例来说明这些代码的具体作用。
/// <summary>
/// 查找制定类别的子控件
/// </summary>
/// <typeparam name="T">控件类别</typeparam>
/// <param name="parent">父控件</param>
/// <returns>子控件集合</returns>
public static List<T> FindChildControls<T>(UIElement parent)
where T : UIElement
{
List<T> list = new List<T>();
if (parent == null) return list;
if (parent is ContentControl)
{
if ((parent as ContentControl).Content is T)
{
list.Add((parent as ContentControl).Content as T);
}
list.AddRange(FindChildControls<T>((parent as ContentControl).Content as UIElement));
}
if (parent is Decorator)
{
if ((parent as Decorator).Child is T)
list.Add((parent as Decorator).Child as T);
list.AddRange(FindChildControls<T>((parent as Decorator).Child));
}
if (parent is ItemsControl)
{
ItemsControl ic = parent as ItemsControl;
foreach (object itm in ic.Items)
{
if (itm is T)
list.Add(itm as T);
if (itm is UIElement)
list.AddRange(FindChildControls<T>(itm as UIElement));
}
}
if (parent is Panel)
{
Panel pan = parent as Panel;
foreach (UIElement ui in pan.Children)
{
if (ui is T)
{
list.Add(ui as T);
}
list.AddRange(FindChildControls<T>(ui));
}
}
return list;
}
由于传入的参数是UIElement,非常顶层的元素，所以在代码中我们进行了不同的分类，具体的分类分为下面几种ContentControl、Decorator、ItemsControl、Panel，通过这个分类基本上可以把父元素的所有子控件全部枚举出来，当然这段代码不太理想的地方就是过于庞大，无法准确去获取某一个元素，如果传入顶层的元素，那么我们将获取非常庞大的内容，这个具体的可以写一些测试代码去测试！
public static T FindVisualParent<T>(DependencyObject reference) where T : class
{
var parent = VisualTreeHelper.GetParent(reference);
if (parent == null)
return null;
else
{
if (parent is T)
{
return parent as T;
}
else
{
return FindVisualParent<T>(parent);
}
}
}
这段代码非常好理解，就是通过VisualTreeHelper来不断去获取Parent直到获取到第一个类型为T的父类型，下面我会针对这几种类型来写一个测试的demo，现在我来说说这些主要用在哪些地方。
a 比如重写了Button的模板，但是在点击的时候首先获取点击事件的可能是Button里面能够接受焦点的元素，这个时候我们可以传入首先获取焦点的对象，通过这个方法来获取Button，比如由于WPF支持事件的路由，所以在这种情况下通过传入e.OriginalSource来获取到Button，然后为Button做各种操作。
b 为当前对象this查找父类容器，比如我们我们经常会用到将Model绑定到前台的控件中（比如ItemsControl）那么我们可以传入当前的Model所应用到的数据模板中的对象(例如Image、TextBox、Label......)，然后获取到父容器或者其他的对象，这种也是非常常用的方面(但是这里需要特别注意的地方是传入的参数必须是继承自DependencyObject的对象)。
public static List<T> FindVisualChildren<T>(DependencyObject reference)
where T : UIElement
{
List<T> list = new List<T>();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(reference); i++)
{
var child = VisualTreeHelper.GetChild(reference, i);
if (child != null && child is T)
{
list.Add(child as T);
}
list.AddRange(FindVisualChildren<T>(child));
}
return list;
}
与寻找父类型不同，这段代码能够获取到所有的类型为T的子元素，并返回一个List<T>的对象，这个方法的好处就是能够沿着当前传入的DependencyObject为起点沿着视觉树一直向下查找，包括模板中找到的元素。
下面通过一个DEMO（一个简单的照片浏览器）来说明一下,首先看一下软件界面。
这是一个简单的照片浏览程序，右边是一个图像列表，是一个ListBox对象，里面绑定了一个ObservableCollection的集合，当点击每一个ListBoxItem对象时，左侧会弹出相应的对象，同时下面的按钮也能够同步控制图片的选择功能，对于这个DEMO我们来一步步去分析视觉树上的父对象和子对象！
首先来看看MainWindow.xaml(这里仅仅贴出核心的代码)
<Grid Background="Gray" x:Name="root">
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="照片浏览器" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Foreground="White" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="楷体"/>
<!--<ContentPresenter Grid.Row="1" Content="{Binding Path=ImgCollection}"/>-->
<ListBox x:Name="pictureItemsControl" Grid.Row="1" Grid.Column="1" ItemsSource="{Binding ImageCollectionView,Mode=TwoWay}" AlternationCount="9999" ClipToBounds="False" FocusVisualStyle="{x:Null}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<interactive:ExInvokeCommandAction Command="{Binding OnListBoxSelected}">
</interactive:ExInvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.Template>
<ControlTemplate TargetType="ItemsControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="Teal" CornerRadius="2">
<Label Content="照片列表" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
</Border>
<Border Padding="2" Background="Teal" CornerRadius="2" Grid.Row="1">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsPresenter></ItemsPresenter>
</ScrollViewer>
</Border>
</Grid>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type local:PictureModel}">
<Border Padding="2">
<Image Source="{Binding ImgSource, Mode=TwoWay}" Stretch="Fill" Width="120" Height="120" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Image Grid.Row="1" Grid.Column="0" Source="{Binding CurrentItem.ImgSource, Mode=TwoWay}" Stretch="Uniform" Width="Auto" Height="Auto"/>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Command="{Binding FirstPicture, Mode=TwoWay}" Width="60" Height="60" Margin="10,0,0,0" RenderTransformOrigin="0.5,0.5">
<Button.Background>
<ImageBrush ImageSource="/CollectionView;Component/Images/First.png"/>
</Button.Background>
</Button>
<Button Command="{Binding PreviousPicture, Mode=TwoWay}" Width="60" Height="60" Margin="10,0,0,0" RenderTransformOrigin="0.5,0.5">
<Button.Background>
<ImageBrush ImageSource="/CollectionView;Component/Images/Forward.png"/>
</Button.Background>
</Button>
<Button Command="{Binding NextPicture, Mode=TwoWay}" Width="60" Height="60" Margin="10,0,0,0" RenderTransformOrigin="0.5,0.5">
<Button.Background>
<ImageBrush ImageSource="/CollectionView;Component/Images/Next.png"/>
</Button.Background>
</Button>
<Button Command="{Binding LastPicture, Mode=TwoWay}" Width="60" Height="60" Margin="10,0,0,0" RenderTransformOrigin="0.5,0.5">
<Button.Background>
<ImageBrush ImageSource="/CollectionView;Component/Images/Last.png"/>
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Grid>
</Grid>
在ViewModel层绑定到前台ListBox的总共有7个对象（七个图片），定义了一个CollectionView的集合。
private System.Windows.Data.CollectionView _imageCollectionView
= null;
public System.Windows.Data.CollectionView ImageCollectionView
{
get
{
return _imageCollectionView;
}
set
{
if (value != _imageCollectionView)
{
_imageCollectionView = value;
RaisePropertyChanged<System.Windows.Data.CollectionView>(() => this.ImageCollectionView);
}
}
}
在后台的代码中，我们通过 List<Image> myImageList = X.Utils.ControlUtil.FindVisualChildren<Image>(lb) 其中lb是通过程序中获取到的ListBox对象，通过代码调用我们能够获取到所有的ListBox中的Image对象（注：这个对象是在ListBox.ItemTemplate中定义的），总共获取到了7个对象，没有任何问题。
另外我们再进行一个测试，在这段代码中List<Image> myImageList = X.Utils.ControlUtil.FindVisualChildren<Image>(this.root),即向代码中传入根节点Grid，通过代码总共能够获取到8个对象，即ListBox中的7个对象另外再加上左侧的一张大的图片，总共8张。<Image Grid.Row="1" Grid.Column="0" Source="{Binding CurrentItem.ImgSource, Mode=TwoWay}" Stretch="Uniform" Width="Auto" Height="Auto"/>（大图片）
同样的道理我们可以去获取当前对象的VisualParent，同样也是通过这种方式来获取的......
这里我需要重点介绍的是我们都知道FrameworkElement下面有一个Parent属性，返回的是DependencyObject属性，MSDN的解释是：获取此元素的逻辑父元素。那么这个属性和通过VisualTreeHelper有什么不同呢？我们也列出了一些常用的代码，并通过DEMO来说明这些用法。
public static Window FindParentWindow(FrameworkElement element)
{
if (element.Parent == null)
{
return null;
}
Window window = element.Parent as Window;
if (window != null)
{
return window;
}
FrameworkElement parentElement = element.Parent as FrameworkElement;
if (parentElement != null)
{
return FindParentWindow(parentElement);
}
return null;
}
通过代码我们可以发现，这个方法只能够获取到当前节点的逻辑父节点，而且只能够一级一级的去迭代获取，如果其中一个元素的Parent为null的话那么就不能够得到最终的父元素。还是前面的那个例子，我们通过VS 的WPF Tree Visualizer这个工具可以很清楚的看到整个视觉树的所有元素，我们发现视觉树中的很多元素其Parent都是null，特别是定义在模板中的元素，Parent属性都是null，这些该怎么解释呢？FrameWorkElement.Parent 是获取此元素的逻辑父级元素，也就是通过LogicalTreeHelper查找。在MSDN中备注了：
对于模板，模板的 Parent 最终将为 null。 若要忽略这一点并扩展到实际应用模板的逻辑树，请使用 TemplatedParent，也就是通过这种方式查找父元素时只能在逻辑树上查找，否则只能返回为Null。
按照这个思路我们再一步步分析，请看下面的代码：
public static FrameworkElement FindParentWithDataContextAndName<DataContextT>(FrameworkElement childElement, string name)
where DataContextT : class
{
FrameworkElement parent = (FrameworkElement)childElement.Parent;
if (parent != null)
{
DataContextT data = parent.DataContext as DataContextT;
if (data != null)
{
if (parent.Name == name)
{
return parent;
}
}
parent = FindParentWithDataContextAndName<DataContextT>(parent, name);
if (parent != null)
{
return parent;
}
}
parent = (FrameworkElement)childElement.TemplatedParent;
if (parent != null)
{
DataContextT data = parent.DataContext as DataContextT;
if (data != null)
{
if (parent.Name == name)
{
return parent;
}
}
parent = FindParentWithDataContextAndName<DataContextT>(parent, name);
if (parent != null)
{
return parent;
}
}
return null;
}
这段代码是寻找特定的DataContext和name的Parent对象，在代码中如果通过FrameWorkElement.Parent来获取到的对象为null的话，就会通过parent = (FrameworkElement)childElement.TemplatedParent;通过当前元素的TemplateParent来获取父元素，通过这种方式是可以找到特定的DataContext和name的Parent对象,这点我们也可以通过实际的代码去验证的。
下面的这段代码和上面的类似，这里不再赘述！
public static FrameworkElement FindParentWithDataContext<DataContextT>(FrameworkElement childElement)
where DataContextT : class
{
if (childElement.Parent != null)
{
DataContextT data = ((FrameworkElement)childElement.Parent).DataContext as DataContextT;
if (data != null)
{
return (FrameworkElement)childElement.Parent;
}
FrameworkElement parent = FindParentWithDataContext<DataContextT>((FrameworkElement)childElement.Parent);
if (parent != null)
{
return parent;
}
}
if (childElement.TemplatedParent != null)
{
DataContextT data = ((FrameworkElement)childElement.TemplatedParent).DataContext as DataContextT;
if (data != null)
{
return (FrameworkElement)childElement.TemplatedParent;
}
FrameworkElement parent = FindParentWithDataContext<DataContextT>((FrameworkElement)childElement.TemplatedParent);
if (parent != null)
{
return parent;
}
}
return null;
}
下面来看看将两种方式组合来查找特定类型的父对象以及子对象
public static ParentT FindParentWithType<ParentT>(FrameworkElement childElement)
where ParentT : class
{
if (childElement.Parent != null)
{
ParentT parent = childElement.Parent as ParentT;
if (parent != null)
{
return parent;
}
parent = FindParentWithType<ParentT>((FrameworkElement)childElement.Parent);
if (parent != null)
{
return parent;
}
}
if (childElement.TemplatedParent != null)
{
ParentT parent = childElement.TemplatedParent as ParentT;
if (parent != null)
{
return parent;
}
parent = FindParentWithType<ParentT>((FrameworkElement)childElement.TemplatedParent);
if (parent != null)
{
return parent;
}
}
FrameworkElement parentElement = (FrameworkElement)VisualTreeHelper.GetParent(childElement);
if (parentElement != null)
{
ParentT parent = parentElement as ParentT;
if (parent != null)
{
return parent;
}
return FindParentWithType<ParentT>(parentElement);
}
return null;
}
查找子对象
/// <summary>
/// Find the framework element for the specified connector.
/// </summary>
public static ElementT FindElementWithType<ElementT>(Visual rootElement)
where ElementT : FrameworkElement
{
if (rootElement == null)
{
throw new ArgumentNullException("rootElement");
}
FrameworkElement rootFrameworkElement = rootElement as FrameworkElement;
if (rootFrameworkElement != null)
{
rootFrameworkElement.UpdateLayout();
}
//
// Check each child.
//
int numChildren = VisualTreeHelper.GetChildrenCount(rootElement);
for (int i = 0; i < numChildren; ++i)
{
Visual childElement = (Visual)VisualTreeHelper.GetChild(rootElement, i);
ElementT typedChildElement = childElement as ElementT;
if (typedChildElement != null)
{
return typedChildElement;
}
}
//
// Check sub-trees.
//
for (int i = 0; i < numChildren; ++i)
{
Visual childElement = (Visual)VisualTreeHelper.GetChild(rootElement, i);
ElementT foundElement = FindElementWithType<ElementT>(childElement);
if (foundElement != null)
{
return foundElement;
}
}
return null;
}
再介绍一个重载的方法用于查找特定类型，特定DataContext的父元素以及子元素，这个方法在WPF这种MVVM模式下是非常重要的。
public static ParentT FindParentWithTypeAndDataContext<ParentT>(FrameworkElement childElement, object dataContext)
where ParentT : FrameworkElement
{
if (childElement.Parent != null)
{
ParentT parent = childElement.Parent as ParentT;
if (parent != null)
{
if (parent.DataContext == dataContext)
{
return parent;
}
}
parent = FindParentWithTypeAndDataContext<ParentT>((FrameworkElement)childElement.Parent, dataContext);
if (parent != null)
{
return parent;
}
}
if (childElement.TemplatedParent != null)
{
ParentT parent = childElement.TemplatedParent as ParentT;
if (parent != null)
{
if (parent.DataContext == dataContext)
{
return parent;
}
}
parent = FindParentWithTypeAndDataContext<ParentT>((FrameworkElement)childElement.TemplatedParent, dataContext);
if (parent != null)
{
return parent;
}
}
FrameworkElement parentElement = (FrameworkElement)VisualTreeHelper.GetParent(childElement);
if (parentElement != null)
{
ParentT parent = parentElement as ParentT;
if (parent != null)
{
return parent;
}
return FindParentWithType<ParentT>(parentElement);
}
return null;
}
查找子元素
public static ElementT FindElementWithDataContext<DataContextT, ElementT>(Visual rootElement, DataContextT data)
where DataContextT : class
where ElementT : FrameworkElement
{
if (rootElement == null)
{
throw new ArgumentNullException("rootElement");
}
FrameworkElement rootFrameworkElement = rootElement as FrameworkElement;
if (rootFrameworkElement != null)
{
rootFrameworkElement.UpdateLayout();
}
int numChildren = VisualTreeHelper.GetChildrenCount(rootElement);
for (int i = 0; i < numChildren; ++i)
{
Visual childElement = (Visual)VisualTreeHelper.GetChild(rootElement, i);
ElementT typedChildElement = childElement as ElementT;
if (typedChildElement != null &&
typedChildElement.DataContext == data)
{
return typedChildElement;
}
ElementT foundElement = FindElementWithDataContext<DataContextT, ElementT>(childElement, data);
if (foundElement != null)
{
return foundElement;
}
}
return null;
}
最后再以一个非常常见的查找DataTemplate的代码来结束这一节的内容。
在实际的项目开发中查找某一个元素使用了何种DataTemplate也是有需要的，通过为某一个对象定义DataTemplate，同时定义DataTemplate的Key我们就能够获取到相应的元素，通过下面的代码我们也能够获取到相应的内容，仅供参考。
public static DataTemplateT FindTemplateForType<DataTemplateT>(Type type, FrameworkElement element)
where DataTemplateT : class
{
object resource = element.TryFindResource(new DataTemplateKey(type));
DataTemplateT dataTemplate = resource as DataTemplateT;
if (dataTemplate != null)
{
return dataTemplate;
}
if (type.BaseType != null &&
type.BaseType != typeof(object))
{
dataTemplate = FindTemplateForType<DataTemplateT>(type.BaseType, element);
if (dataTemplate != null)
{
return dataTemplate;
}
}
foreach (Type interfaceType in type.GetInterfaces())
{
dataTemplate = FindTemplateForType<DataTemplateT>(interfaceType, element);
if (dataTemplate != null)
{
return dataTemplate;
}
}
return null;
}
