Question

对于不同的用户界面，我想根据ViewModel对象的状态显示图像。

例如：

我有数据库连接，如果已连接，我想显示绿色数据库图像，如果没有连接我想显示红色数据库图像。

在ViewModel中有一个代表状态的bool。

可能性是：

在视图中有两个图像（红色图像的转换器为InverseBooleanToVisibilityConverter），它们位于同一个地方，实际上只显示其中一个。
绑定Image source（但我不想在我的ViewModel中设置此内容）
某种选择器？

这种依赖于状态的图像可以更常用，例如在TreeView ItemImage。

有没有更聪明的方法来实现这一目标？

Answer 1

您也可以单独使用数据触发器来完成此操作。以下是我的一个项目中的一个示例，该按钮根据表单是否处于编辑模式而更改图像的按钮：

<Button x:Name="EditOrSaveJob"
                    Width="32"
                    Height="32"
                    Margin="10,0,0,0"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch">
                <Image>
                    <Image.Style>
                        <Style TargetType="Image">
                            <Setter Property="Source" Value="/AAAA;component/Resources/Images/edit.png" />
                            <Setter Property="ToolTip" Value="Edit Order" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsEditing}" Value="True">
                                    <Setter Property="Source" Value="/AAAA;component/Resources/Images/32_save.png" />
                                    <Setter Property="ToolTip" Value="Save Order" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
</Button>

Answer 2

解决方案是使用转换器（实现IValueConverter的类）：

class ImageStateConverter : IValueConverter
{
    public Object Convert(  Object value, Type targetType, Object parameter,    CultureInfo culture)    
    {
        bool state = (bool) value;
        return state ? "img1.png" : "img2.png";
    }
}

然后在你的XAML中写这样的绑定：

<Image Source="{Binding Path=State, Converter={StaticResource myConverter}}" />

对象myConverter在参考资料部分的某处声明。

Answer 3

我使用像这样的valueconverter：

public class BoolToImageConverter: DependencyObject, IValueConverter
{

    public BitmapImage TrueImage
    {
        get { return (BitmapImage)GetValue(TrueImageProperty); }
        set { SetValue(TrueImageProperty, value); }
    }
    public static DependencyProperty TrueImageProperty = DependencyProperty.Register("TrueImage", typeof(BitmapImage), typeof(BoolToImageConverter), null);


    public BitmapImage FalseImage
    {
        get { return (BitmapImage)GetValue(FalseImageProperty); }
        set { SetValue(FalseImageProperty, value); }
    }
    public static DependencyProperty FalseImageProperty = DependencyProperty.Register("FalseImage", typeof(BitmapImage), typeof(BoolToImageConverter), null);

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (bool)value ? TrueImage : FalseImage;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var img = (BitmapImage)value;
        return img.UriSource.AbsoluteUri == TrueImage.UriSource.AbsoluteUri;
    }

}

和XAML

<my:BoolToImageConverter x:Key="converterName" FalseImage="{StaticResource falseImage}" TrueImage="{StaticResource trueImage}"/>

显示交替图像以更改ViewModel状态

3 个答案: