Como posso substituir uma imagem em uma grade WPF com outro controle, dependendo da fonte de dados?

StackOverflow https://stackoverflow.com/questions/424562

  •  05-07-2019
  •  | 
  •  

Pergunta

Eu tenho uma grade definidos como tal;

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

Isso tudo funciona bem, mas eu gostaria agora de mudar a imagem para outro conjunto de controles dizendo 'Desculpe, nenhuma imagem disponível' quando o item selecionado na listview não tem uma imagem

Eu tentei envolvendo a imagem em um DockPanel e estabelecendo um DataTemplate lá (para que eu possa usar DataTriggers), mas IntelliSense não diz!

Os usos ListView DataTriggers para fazer uma coisa semelhante, mas como eu digo Eu não posso colocar minha cabeça redonda como fazê-lo para uma única imagem que parece não ter acesso a um DataTemplate.

Simplificado XAML está abaixo;

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

Agradecemos gurus WPF antecipadas.

Ryan

Update:. Ambas as respostas abaixo (Abe e Jobi) foram no local, graças

Foi útil?

Solução

Para usar um DataTemplate, você tem que ter um controle que usa o modelo para tornar um objeto. Se você usa um ContentPresenter, você pode definir a sua ContentTemplate ser um DataTemplate para o que quiser.

Aqui está como eu faria isso:

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

Outras dicas

Você pode fazer um truque fácil aqui, se você não está preocupado com os efeitos visuais são criados na árvore visual WPF. Basta colocar o controle de imagem na parte superior do controle 'não disponível' para que a qualquer carga horária imagem fica falhou você seria capaz de ver a mensagem abaixo. Se o controle de imagem sucedeu então 'não disponível' mensagem se sobrepunham pela imagem.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top