ソースデータに応じて、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の達人に感謝します。
ライアン
更新:以下の両方の回答(AbeとJobi)が正しかった、ありがとう。
解決
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ビジュアルツリーでビジュアルが作成されることに関心がない場合は、ここで簡単なトリックを行うことができます。 Imageコントロールを「使用不可」コントロールの上に配置するだけで、イメージの読み込みが失敗したときにいつでも以下のメッセージを確認できます。画像制御が成功した場合、「使用不可」メッセージが画像に重なって表示されます。
所属していません StackOverflow