加載圖像時的 MVVM WPF Fire 命令（在加載事件上）

Question

在我看來，我有一個 WPF 圖像控件。 加載圖像時，我想觸發在模型視圖中定義和執行的事件。 我怎樣才能做到這一點？ 我不知道如何使用命令來做到這一點。

<Image Grid.Row="0" 
       Source="{Binding Path=ImageSrc,  NotifyOnTargetUpdated=True, Converter={StaticResource imgToSrcConverter}}" 
       Visibility="{Binding ImgVisibility}" 
       RenderTransformOrigin="0,0"
       SnapsToDevicePixels="True"
       OverridesDefaultStyle="False"
       TargetUpdated="targetUpdated" 
       Cursor="Hand"
       RenderOptions.BitmapScalingMode="LowQuality"
       RenderOptions.EdgeMode="Aliased">
<Image.Effect>
        <DropShadowEffect Opacity="0.8" BlurRadius="8">                
        </DropShadowEffect>
    </Image.Effect>
</Image>

轉換器：

public class ImgToSrcConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
            System.Globalization.CultureInfo culture)
    {
        Image image = value as Image;
        if (image != null)
        {
            MemoryStream ms = new MemoryStream();
            image.Save(ms, image.RawFormat);
            ms.Seek(0, SeekOrigin.Begin);
            BitmapImage bi = new BitmapImage();
            bi.BeginInit();
            bi.StreamSource = ms;
            bi.EndInit();
            return bi;
        }
        return null;
    }

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

查看型號：

        public Image ImageSrc
        {
            get
            {
                MemoryStream ms = new MemoryStream(GetImageAsByteArray());
                Image img = Image.FromStream(ms);

                // Here I call method to hide splash screen "Loading"

                return img;
            }
        }

Answer 1

您可以在后台加載圖像並在圖像加載后調用“NotifyPropertyChanged”：

private static Image SplashScreenImage = GetSplashScreenImage();
private Image ActualImage = null;
private bool IsLoading = false;
public Image ImageSrc
{
    get
    {
        if (ActualImage != null)
            return ActualImage;

        if (!IsLoading)
        {
            IsLoading = true;
            // start loading image in background
            Task.Run(() =>
            {
                MemoryStream ms = new MemoryStream(GetImageAsByteArray());
                ActualImage = Image.FromStream(ms);
            }).ContinueWith(t => PropertyChanged("ImageSrc"), TaskScheduler.FromCurrentSynchronizationContext());
        }
        return SplashScreenImage;
    }
}

Answer 2

您可以使用沒有轉換器的異步綁定：

<Image Source="{Binding ImageSrc, IsAsync=True}"/>

ImageSrc 屬性 getter 直接創建一個 BitmapFrame 或 BitmapImage，如下所示：

public ImageSource ImageSrc
{
    get
    {
        ImageSource image;

        using (var stream = new MemoryStream(GetImageAsByteArray()))
        {
            image = BitmapFrame.Create(
                stream, BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
        }

        SplashScreenEnabled = false;
        return image;
    }
}

public bool SplashScreenEnabled { get; set; } // firing PropertyChanged omitted

Answer 3

如果要在Image元素的Loaded事件觸發時調用命令，可以使用交互觸發器：

<Image Grid.Row="0" 
           Source="{Binding Path=ImageSrc,  NotifyOnTargetUpdated=True, Converter={StaticResource imgToSrcConverter}}" 
           Visibility="{Binding ImgVisibility}" 
           RenderTransformOrigin="0,0"
           SnapsToDevicePixels="True"
           OverridesDefaultStyle="False"
           TargetUpdated="targetUpdated" 
           Cursor="Hand"
           RenderOptions.BitmapScalingMode="LowQuality"
           RenderOptions.EdgeMode="Aliased"
           xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
            <i:InvokeCommandAction Command="{Binding YourCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Image.Effect>
        <DropShadowEffect Opacity="0.8" BlurRadius="8">
        </DropShadowEffect>
    </Image.Effect>
</Image>

有關如何通過執行視圖模型命令來處理事件的更多信息，請參閱以下博客文章： https : //blog.magnusmontin.net/2013/06/30/handling-events-in-an-mvvm-wpf-application / .

另一種選擇可能是簡單地從源屬性的 setter 執行命令：

public Image ImageSrc
{
    get
    {
        MemoryStream ms = new MemoryStream(GetImageAsByteArray());
        Image img = Image.FromStream(ms);

        YourCommandProperty.Execute(null);

        return img;
    }
}