按照MVVM模式保存WPF画布为图像

Question

我有一个画布，类似于这个解决方案或者其他使用ItemsControl的方案。

现在我想要一个按钮，这个按钮应该绑定到一个ICommand。这个命令应该调用ViewModel类中的一个方法来保存图片。保存图片的方法很清楚，但是如何按照MVVM模式进行绑定呢？

- Rolfi

---

你正在寻找如何使用MVVM绑定吗？（MVVM Light RelayCommand） - Bhupendra

Answer 1

您可以通过使用CommandParameter将Canvas传递给ViewModel的Save方法

<Button Content="Save" 
        Command="{Binding SaveCanvasCommand}" 
        CommandParameter="{Binding ElenementName=myCanvas}" ?>

<Canvas x:Name="myCanvas">
   <!-- Stuff to save -->
</Canvas>

在您的ViewModel或Command中，您需要有以下代码：

void SaveCanvasCommandExecute(object parameter)
{
    UIElement toSave = (UIElement)parameter;
    //.. You'd probably use RenderTargetBitmap here to save toSave.
}

- Jens

---

我不是WPF专家，但你的代码是否违反了MVVM原则，即不应在VM内部访问UI元素？ - nawfal

Answer 2

如果您不想在ViewModel中引用UI元素，可以使用附加行为：

internal static class Behaviours
{
    public static readonly DependencyProperty SaveCanvasProperty =
        DependencyProperty.RegisterAttached("SaveCanvas", typeof(bool), typeof(Behaviours),
                                            new UIPropertyMetadata(false, OnSaveCanvas));

    public static void SetSaveCanvas(DependencyObject obj, bool value)
    {
        obj.SetValue(SaveCanvasProperty, value);
    }

    public static bool GetSaveCanvas(DependencyObject obj)
    {
        return (bool)obj.GetValue(SaveCanvasProperty);
    }

    private static void OnSaveCanvas(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        if ((bool)e.NewValue)
        {
            // Save code.....
        }
    }
}

然后在您的ViewModel中，您有一个命令来设置ViewModel上的属性:

    public ICommand SaveCanvasCommand
    {
        get
        {
            if (_saveCanvasCommand == null)
                _saveCanvasCommand = new RelayCommand(() => { IsSaveCanvas = true; });

            return _saveCanvasCommand;
        }
    }

并且绑定到您的视图的属性：

    public bool IsSaveCanvas
    {
        get { return _isSaveCanvas; }
        set
        {
            _isSaveCanvas = value;
            RaisePropertyChanged("IsSaveCanvas");
        }
    }

然后在Xaml中将它们连接起来，代码如下：

在Control上添加一个Trigger，将你的ViewModel属性的值绑定到你的附加行为上：

<UserControl.Style>
    <Style>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsSaveCanvas}" Value="True">
                <Setter Property="wpfApplication1:Behaviours.SaveCanvas" Value="True"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsSaveCanvas}" Value="False">
                <Setter Property="wpfApplication1:Behaviours.SaveCanvas" Value="False"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>

然后将您的 Button / MenuItem 绑定到 ViewModel 的保存命令：

    <Canvas.ContextMenu>
        <MenuItem Header="Save" Command="{Binding SaveCanvasCommand}"/>
    </Canvas.ContextMenu>

- Richard E