Question

我正在使用MVVM Light构建一个WP8应用程序，我遇到了一个我找不到的愚蠢问题，并且很容易解决。

在XAML页面中，我有以下内容：

        <Button Command="{Binding PlayCommand}" >
            <Image Source="Images/play.png"/>
        </Button>

执行PlayCommand时，我将ViewModel中 IsPlaying 属性的值更改为true。现在，我希望XAML页面对 IsPlaying 的更改做出反应，并将Image的源更改为“Images / pause.png”。在WPF中我可以使用DataTriggers（也不方便），但它似乎在WP8中不起作用。对于cource，我可以像这样将Image Source绑定到ViewModel，但这会击败MVVM的整个目的。

    <Button Command="{Binding PlayCommand}" >
        <Image Source="{Binding PlayButtonImage}"/>
    </Button>

我知道有复杂的解决方案（例如附加属性，行为等等），但我认为必须有一个简单的解决方案......

Answer 1

也许像这样的转换器类？

public class BoolToIconConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is bool)
        {
            bool isPlaying = (bool)value;
            if (isPlaying)
                return "Images/pause.png";
            else 
                return "Images/play.png"
        } 
        return "Images/play.png";
    }

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

像这样使用

<Button Command="{Binding PlayCommand}" >
    <Image Source="{Binding IsPlaying, Converter={StaticResource BoolToIconConverter}}"/>
</Button>

虽然我认为MVVM中的属性不会破坏你的MVVM模式，甚至可能比使用值转换器提供更好的性能。

Answer 2

ViewModel中的Image属性没有任何问题。

Answer 3

您可以使用Source属性将BitmapImage放在Image中：

<Button Command="{Binding PlayCommand}" >
    <Image>
        <Image.Source>
            <BitmapImage UriSource="{Binding ImageUri}"/>
        </Image.Source>
    </Image>
</Button>

然后，您可以将ImageUri绑定到类型为Uri的ViewModel上的通知属性。

如何在视图模型属性更改时更改图像源

3 个答案: