Comment remplacer une image dans une grille WPF par un autre contrôle en fonction des données source?

Question

j'ai une grille disposée comme tel;

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

Tout cela fonctionne bien, mais j'aimerais maintenant changer l'image en une autre série de contrôles disant "Désolé, aucune image disponible" lorsque l'élément sélectionné dans la liste ne contient pas d'image

J'ai essayé d'encapsuler l'image dans un DockPanel et de définir un DataTemplate (pour pouvoir utiliser DataTriggers), mais IntelliSense dit non!

ListView utilise DataTriggers pour faire la même chose, mais comme je le disais, je ne comprends pas trop comment le faire pour une image unique qui ne semble pas avoir accès à un DataTemplate.

XAML simplifié est en dessous;

<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>

Merci d'avance, gourous de WPF.

Ryan

Mise à jour: les deux réponses ci-dessous (Abe et Jobi) étaient sur place, merci.

Answer 1

Pour utiliser un DataTemplate, vous devez avoir un contrôle qui utilise le modèle pour restituer un objet. Si vous utilisez un ContentPresenter, vous pouvez définir son ContentTemplate pour qu’il soit un DataTemplate comme vous le souhaitez.

Voici comment je ferais ceci:

<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>

Answer 2

Vous pouvez faire une astuce facile ici, si vous n'êtes pas préoccupé par les visuels créés dans l'arborescence des visuels WPF. Il suffit de placer le contrôle Image sur le contrôle "Non disponible" pour qu'à tout moment le chargement de l'image échoue, vous pourrez alors voir le message ci-dessous. Si le contrôle de l'image réussit, le message 'Non disponible' se superpose à l'image.