Как заменить изображение в сетке WPF другим элементом управления в зависимости от исходных данных?
-
05-07-2019 - |
Вопрос
У меня есть сетка, расположенная вот так;
+---------+---------+
| Image | Details |
| is | pane |
| here | for data|
| | entry |
+---------+---------+
| ListView here to |
| select data item |
| for top two panes |
+---------+---------+
Все это работает хорошо, но теперь я хотел бы изменить изображение на другой набор элементов управления с надписью «К сожалению, изображение недоступно», когда выбранный элемент в списке не имеет изображения.
Я попытался поместить изображение в DockPanel и установить там DataTemplate (чтобы я мог использовать DataTriggers), но IntelliSense говорит нет!
ListView использует DataTriggers для выполнения аналогичных действий, но, как я уже сказал, я не могу понять, как это сделать для одного изображения, которое, похоже, не имеет доступа к DataTemplate.
Упрощенный 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.
Райан
Обновлять:Оба ответа ниже (Абэ и Джоби) были точными, спасибо.
Решение
Чтобы использовать 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>
Другие советы
Здесь вы можете проделать простой трюк, если вас не беспокоит создание визуальных элементов в дереве визуальных элементов WPF.Просто поместите элемент управления «Изображение» поверх элемента управления «Недоступно», чтобы в любой момент при загрузке изображения вы могли увидеть следующее сообщение.Если управление изображением прошло успешно, сообщение «Недоступно» перекрывается изображением.