How can I replace an image in a WPF grid with another control based on the original data?
I have a grid laid out like this:
+---------+---------+
| Image | Details |
| is | pane |
| here | for data|
| | entry |
+---------+---------+
| ListView here to |
| select data item |
| for top two panes |
+---------+---------+
This all works well, but now I would like to change the image to a different set of controls by saying "Sorry, no image" when the selected item in the list has no image
I tried wrapping the image in a DockPanel and setting the DataTemplate there (so I can use DataTriggers), but IntelliSense says no!
The ListView uses DataTriggers to do a similar thing, but as I said, I can't figure out how to do this for a single image that doesn't seem to have access to the DataTemplate.
Simplified XAML below;
<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>
Thanks in advance to the WPF guru.
Ryan
Update: Both answers below (Abe and Jobi) were in place, thanks.
source to share
To use the DataTemplate, you must have a control that uses the template to render the object. If you are using ContentPresenter, you can set its ContentTemplate as DataTemplate at any time you like.
This is how I would do it:
<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>
source to share
You can do a simple trick here if you are not interested in visual creations created in the WPF visual tree. Just place the Image control on top of the Not Available control so that anytime the image is loaded, you can see the following message. If image control is successful, the "Not Available" message will be overlaid with the image.
source to share