Wpf 以 MVVM 方式将图像文件绑定到 BitmapImage UriSource

Question

我正在拼命尝试绑定图像（位于应用程序安装目录的子目录中）。我正在使用 MVVM 和 .Net 3.5，在属性中找到图像路径和 return 字符串、Uri 或位图并在 [=35= 中使用它并不容易].

我尝试将所有这三种格式绑定到 Images.Resources 中的 UriSource，但其中 none 有效。我还尝试将 UriSource 与带有转换器的字符串属性绑定，不幸的是！

没有显示图像。

有可能实现吗？那我错过了什么？

xaml:

<TreeView ItemsSource="{Binding ObCol_FamilyTree}">
   <i:Interaction.Behaviors>
      <behaviours:BindableTreeViewSelectedItemBehavior SelectedItem="{Binding TreeViewSelectedItem, Mode=TwoWay}" />
   </i:Interaction.Behaviors>
   <TreeView.Resources>
      <Style x:Key="ExpandingImageStyle" TargetType="{x:Type Image}">
         <Setter Property="Source" Value="{DynamicResource Icon_Closed}"/>
         <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=IsExpanded}" Value="True">
               <Setter Property="Source" Value="{DynamicResource Icon_Open}"/>
            </DataTrigger>
         </Style.Triggers>
      </Style> 
   </TreeView.Resources>
   <TreeView.ItemContainerStyle>
      <Style TargetType="{x:Type TreeViewItem}">
         <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
         <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
      </Style>
   </TreeView.ItemContainerStyle>

   <TreeView.ItemTemplate>
      <HierarchicalDataTemplate ItemsSource="{Binding ObCol_Items}">
         <StackPanel Orientation="Horizontal">
            <Image Width="16" Height="16" Margin="0,0,3,0" Style="{StaticResource ExpandingImageStyle}">
               <Image.Resources>
                  <BitmapImage x:Key="Icon_Closed" UriSource="{Binding OpenFolderPath, Converter={StaticResource UriConverter}}"/>
                  <BitmapImage x:Key="Icon_Open" UriSource="{Binding OpenFolderPath, Converter={StaticResource UriConverter}}" />
               </Image.Resources>
            </Image>
            <TextBlock Text="{Binding Name}" />
         </StackPanel>
      </HierarchicalDataTemplate>
   </TreeView.ItemTemplate>
</TreeView>

视图模型：

private string myOpenFolderPath;
public ItemListVM()
{
   myOpenFolderPath = AppDomain.CurrentDomain.BaseDirectory + @"..\images\Icon_Open.png";
   if (!File.Exists(myOpenFolderPath))
      myOpenFolderPath = String.Empty;
}

public string OpenFolderPath
{
   get { return Path.GetFullPath(myOpenFolderPath); }
}

转换器：

public class UriConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
      return new Uri(value.ToString());
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
      throw new NotSupportedException();
   }
 }

我对一个 Uri 属性和一个正确的转换器进行了同样的尝试，它是一个 returning 一个 Uri，没有运气了！

编辑：这是解决方案：

<TreeView ItemsSource="{Binding ObCol_FamilyTree}">
   <i:Interaction.Behaviors>
      <behaviours:BindableTreeViewSelectedItemBehavior SelectedItem="{Binding TreeViewSelectedItem, Mode=TwoWay}" />
   </i:Interaction.Behaviors>
   <TreeView.Resources>
      <Style x:Key="ExpandingImageStyle" TargetType="{x:Type Image}">
         <Setter Property="Source" Value="{Binding DataContext.ClosedFolderPath, RelativeSource={RelativeSource AncestorType=TreeView}}"/>
         <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=IsExpanded}" Value="True">
               <Setter Property="Source" Value="{Binding DataContext.OpenFolderPath, RelativeSource={RelativeSource AncestorType=TreeView}}"/>
            </DataTrigger>
         </Style.Triggers>
      </Style> 
   </TreeView.Resources>
   <TreeView.ItemContainerStyle>
      <Style TargetType="{x:Type TreeViewItem}">
         <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
         <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
      </Style>
   </TreeView.ItemContainerStyle>

   <TreeView.ItemTemplate>
      <HierarchicalDataTemplate ItemsSource="{Binding ObCol_Items}">
         <StackPanel Orientation="Horizontal">
            <Image Width="16" Height="16" Margin="0,0,3,0" Style="{StaticResource ExpandingImageStyle}"/>
            <TextBlock Text="{Binding Name}" />
         </StackPanel>
      </HierarchicalDataTemplate>
   </TreeView.ItemTemplate>
</TreeView>

Answer 1

不需要 BitmapImage 资源和绑定转换器。

这是开箱即用的，因为从 string 到的内置类型转换 ImageSource:

<Setter Property="Source" Value="{Binding OpenedFolderPath}"/>

在 TreeView 的 ItemTemplate 中，此绑定将不起作用，因为它没有预期的 DataContext。你会写

<Setter Property="Source" 
    Value="{Binding DataContext.OpenedFolderPath,
                    RelativeSource={RelativeSource AncestorType=TreeView}}"/>

除此之外，BitmapImage 的 UriSource 属性转换器必须 return Uri，而不是另一个 BitmapImage:

public object Convert(
    object value, Type targetType, object parameter, CultureInfo culture)
{
    return new Uri(value.ToString());
}

Wpf 以 MVVM 方式将图像文件绑定到 BitmapImage UriSource

Wpf binding image file to BitmapImage UriSource in MVVM way

wpf

binding

uri

mvvm

bitmapimage