<ListBox ItemsSource="{Binding UriSource}" HorizontalContentAlignment="Center">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" Rows="2"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Image Name="image" Width="180" Height="230" HorizontalAlignment="Center" >
<intr:Interaction.Triggers>
<intr:EventTrigger EventName="MouseLeftButtonUp">
<intr:InvokeCommandAction Command="{Binding Path=DataContext.MouseLeft_ImageInfo, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" CommandParameter="{Binding thumbnail_pic}" ></intr:InvokeCommandAction>
</intr:EventTrigger>
</intr:Interaction.Triggers>
<Image.Source>
<Binding Path="thumbnail_pic">
<Binding.TargetNullValue>
<DrawingImage></DrawingImage>
</Binding.TargetNullValue>
</Binding>
</Image.Source>
</Image>
<TextBlock HorizontalAlignment="Center" TextWrapping="WrapWithOverflow" Text="{Binding content}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
介绍:RelativeSource
一个在Binding中比较重要的知识点——RelativeSource. 使用RelativeSource对象指向源对象。用这个可以在当前元素的基础上查找其他对象用于绑定到源对象。
在实际使用Binding的过程中大部分时间Binding都放在了数据模板和控件模板中,(数据模板是控件模板用于定义控件的UI)。
在模板中编写Binding时有时候无法直接拿到我们需要绑定的数据对象,我们不能确定我们需要的Source对象叫什么,但是我们直到了我们需要使用的对象在UI布局上的相对关系。比如控件自己关联了某个数据,关键自己某个层级的容器数据。这个时候我们的RelativeSource就派上了用场。我们使用RelativeSource首先要3个关键参数。
AncestorType=我们需要查找的类型。比如Grid
AncestorLevel= 我们需要向上查找几级。
Path=我们找到的元素需要绑定的属性。
当我们尝试将给定对象的属性绑定到对象本身的另一个属性时,当我们尝试将对象的属性绑定到其相对父对象的另一个属性时,RelativeSource 是一种标记扩展,用于特定的绑定情况,在自定义控件开发的情况下以及最后在使用一系列绑定数据的差异的情况下将依赖属性值绑定到一段 XAML 时。所有这些情况都表示为相对源模式。
我找了几个案例,以便我们能够更好地理解。
目的是将举行的宽度和高度相同,RelativeSource Self 调用的本身。
<Rectangle Fill="Red" Height="100"
Stroke="Black"
Width="{Binding RelativeSource={RelativeSource Self},
Path=Height}"/>
- AncestorType=我们需要查找的类型。
- AncestorLevel= 我们需要向上查找几级,比如Grid .
- Path = 我们找到的元素需要绑定的属性。比如Width、Height 、Background、SelectedItem等等。
<Grid x:Name="G0" Margin="12" Background="Red">
<TextBlock Text="In this Grid0 container"/>
<Grid x:Name="G1" Margin="12" Background="Blue">
<TextBlock Text="In this Grid1 container"/>
<Grid x:Name="G2" Margin="12" Background="Yellow">
<TextBlock Text="In this Grid2 container"/>
<Grid x:Name="G3" Margin="12" Background="Beige">
<StackPanel>
<TextBlock Text="In this Grid3 container"/>
<TextBlock Name="ces" Text="{Binding RelativeSource={RelativeSource AncestorType=Grid,AncestorLevel=4},Path=Name}"/>
</StackPanel>
</Grid>
</Grid>
</Grid>
</Grid>