Lưu canvas WPF dưới dạng hình ảnh theo Mẫu MVVM

Question

Tôi có canvas, ví dụ: tương tự như this solution hoặc nhiều người khác bằng cách sử dụng ItemsControl.

Bây giờ tôi muốn có một nút cần được ràng buộc với một ICommand. Lệnh này nên gọi một phương thức của lớp ViewModel có thể lưu hình ảnh. Phương pháp tiết kiệm rất rõ ràng, nhưng làm cách nào để thực hiện việc ràng buộc theo mẫu MVVM?

Answer 1

Bạn có thể vượt qua Canvas để phương thức Save của ViewModel sử dụng một CommandParameter

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

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

Và đâu đó trong bạn ViewModel hoặc Command bạn phải

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

Answer 2

Nếu bạn không muốn tham khảo các yếu tố giao diện người dùng trong ViewModel của bạn, bạn có thể sử dụng một hành vi kèm theo:

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..... 
     } 
    } 
} 

Sau đó, trong bạn ViewModel bạn có lệnh của bạn mà đặt ra một bất động sản, cũng trên ViewModel của bạn:

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

      return _saveCanvasCommand; 
     } 
    } 

Và tài sản đó là ràng buộc để Xem bạn:

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

Th en hooking nó tất cả lên trong XAML trông như thế này:

Thêm một Trigger trên Control gắn kết giá trị của tài sản ViewModel của bạn để hành vi kèm của bạn:

<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> 

Và sau đó ràng buộc bạn Button/MenuItem để các ViewModels Lưu Command:

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