代码之家 › 专栏 › 技术社区 › Ryan O'Neill

如何用另一个控件替换WPF网格中的图像(取决于源数据)?

datatrigger data-binding wpf

Ryan O'Neill · 技术社区 · 16 年前

我有一个这样布置的格子;

+---------+---------+
|  Image  | Details |
|    is   |  pane   |
|  here   | for data|
|         |  entry  |
+---------+---------+
| ListView here to  |
| select data item  |
| for top two panes |
+---------+---------+

这一切都很好,但现在我想将图像更改为另一组控件,当ListView中的选定项没有图像时,这些控件会说“对不起,没有可用的图像”。

我尝试将图像包装在DockPanel中并在其中设置一个数据模板(这样我就可以使用DataTriggers),但IntelliSense拒绝了!

ListView使用DataTriggers来做类似的事情,但正如我所说,我无法理解如何对一个似乎无法访问数据模板的单个图像执行此操作。

简化的XAML如下:

<Grid DataContext="{Binding Source={StaticResource MyData}}">
   <!-- row 0 col 0 -->
   <Image x:Name="imgPhoto" Source="{Binding ElementName=MyListViewOfData, Path=SelectedItem.PathToImageOnDisk}" />

   <!-- row 0 col 1 -->
   <StackPanel DataContext="{Binding ElementName=MyListViewOfData, Path=SelectedItem}">
      <TextBox Name="NameTextBox" Text="{Binding Name}" />
      <TextBlock Name="DateCreatedTextBlock" Text="{Binding DateCreated}" />
   </StackPanel>

   <!-- row 1 cols 0,1 -->
   <ListView ItemsSource="{Binding}" ItemTemplate="{StaticResource MyListViewTemplate}" 
IsSynchronizedWithCurrentItem="True" Name="MyListViewOfData" />

</Grid>

提前感谢WPF专家。

赖安

最新消息:下面的两个答案(安倍和乔比)都在现场,谢谢。

2 回复 | 直到 16 年前

Abe Heidebrecht 16 年前

为了使用DataTemplate,必须有一个使用该模板呈现对象的控件。如果使用ContentPresenter,则可以将其ContentTemplate设置为DataTemplate,以满足您的需要。

我可以这样做:

<Grid DataContext="...">
    <ContentPresenter Content="{Binding SelectedItem, ElementName=MyListViewOfData}">
        <ContentPresenter.ContentTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />      
                    </Grid.ColumnDefinitions>
                    <Image x:Name="imgPhoto" Source="{Binding PathToImageOnDisk}" />
                    <TextBlock x:Name="error" Visibility="Collapsed" Text="Sorry, no image available" />
                    <StackPanel Grid.Column="1">
                        <TextBox Name="NameTextBox" Text="{Binding Name}" />
                        <TextBlock Name="DateCreatedTextBlock" Text="{Binding DateCreated}" />
                    </StackPanel>
                </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding PathToImageOnDisk}" Value="{x:Null}">
                    <Setter TargetName="imgPhoto" Property="Visibility" Value="Collapsed" />
                    <Setter TargetName="error" Property="Visibility" Value="Visible" />
                </DataTrigger>
            </DataTemplate.Triggers>
            </DataTemplate>
        </ContentPresenter.ContentTemplate>
    </ContentPresenter>
    <ListView ItemsSource="{Binding}" ItemTemplate="{StaticResource MyListViewTemplate}" IsSynchronizedWithCurrentItem="True" Name="MyListViewOfData" />

</Grid>

Jobi Joy 16 年前

如果您不关心在WPF可视化树中创建的视觉效果,可以在这里做一个简单的技巧。只需将图像控件放在“不可用”控件的顶部,以便在图像加载失败的任何时候都能看到下面的消息。如果图像控制成功,则“不可用”消息与图像重叠。