Salvataggio di una tela WPF come immagine seguendo il modello MVVM

Question

Ho una tela, ad es. simile a this solution o molti altri che utilizzano lo ItemsControl.

Ora voglio un pulsante che dovrebbe essere associato a un ICommand. Questo comando dovrebbe chiamare un metodo della classe ViewModel che può salvare l'immagine. Il metodo di salvataggio è chiaro, ma come faccio a eseguire il binding seguendo il pattern MVVM?

Answer 1

Si potrebbe passare il Canvas per metodo Save del ViewModel utilizzando un CommandParameter

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

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

E da qualche parte in voi ViewModel o Comando avresti

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

Answer 2

Se non si desidera fare riferimento elementi dell'interfaccia utente nel vostro ViewModel si potrebbe usare un comportamento allegato:

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

Poi, nel tuo ViewModel avete il vostro Comando che imposta una proprietà, anche sul vostro ViewModel:

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

      return _saveCanvasCommand; 
     } 
    } 

e la proprietà che è destinato al vostro Vista:

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

Th en agganciando il tutto nel Xaml si presenta così:

Aggiungi un Trigger sul Control che lega il valore della vostra proprietà ViewModel al comportamento allegato:

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

e quindi associare il tuo Button/MenuItem a Salva comando ViewModels:

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