I23 di Boccaletti Emanuele - Modena - Siti internet WEB Grafica Software Multimedia

WPF - Creazione dei controlli immagini

Creare controlli immagini scalabili per WPF

Creare controlli immagini scalabili in WPF è una procedura che si suddivide in 4 passaggi fondamentali:

Trasformare un'immagine vettoriale (svg o altro formato) in codice XAML
Creare il controllo che gestisca lo XAML
Allegare lo XAML al progetto
Includere il controllo nelle nostre pagine XAML

Procediamo quindi con ordine e vediamo come trasformare un'immagine da svg a XAML.
Esistono numerosi strumenti anche sul web che permettono di creare XAML da una immagine SVG, ma io preferisco utilizzare Inkskape che è gratuito, opensource e reperibile qui: inkscape.org

Una volta installato Inkscape (non è qui che andremo ad imparare ad utilizzare Inkscape), selezionare il comando File > Apri e scegliere l'immagine che si vuole aprire.
Se si vogliono apportare delle modifiche al disgno
Selezionare il comando File > Salva come
Dalla finestra che si apre, selezionare il formato "Microsoft XAML (.xaml)"
Spuntare la voce "compatibile Silverlight" se compare.

A questo punto abbiamo un file .xaml che contiene tutto il disegno che useremo successivamente.

Ora lavoriamo in Visual Studio.
Nella nostra soluzione, se non già, creiamo una nuova cartella "Controls" e dentro aggiungiamo una nuova class.

[ContentProperty(ImageContentPropertyName)]
public class BasketCourtCtrl : Control
{
  static BasketCourtCtrl()
  {
   DefaultStyleKeyProperty.OverrideMetadata(typeof(BasketCourtCtrl), new FrameworkPropertyMetadata(typeof(BasketCourtCtrl)));
  }

  private const string ImageContentPropertyName = "BasketCourtContent";
  public static DependencyProperty CircleContentProperty = DependencyProperty.Register(ImageContentPropertyName, typeof(FrameworkElement),
typeof(BasketCourtCtrl));

  public FrameworkElement BasketCourtContent
  {
   get { return (FrameworkElement)GetValue(CircleContentProperty); }
   set { SetValue(CircleContentProperty, value); }
  }

  #region BACKGROUND COLOR
  public static DependencyProperty BasketFieldBackgroundColorProperty = DependencyProperty.Register(nameof(BasketFieldBackgroundColor), typeof(Color?), typeof(BasketCourtCtrl), new PropertyMetadata(null, OnBasketFieldBackgroundColorChanged));

  public Color? BasketFieldBackgroundColor
  {
   get { return (Color?)GetValue(BasketFieldBackgroundColorProperty); }
   set { SetValue(BasketFieldBackgroundColorProperty, value); }
  }

  private static void OnBasketFieldBackgroundColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  {
   BasketCourtCtrl c = d as BasketCourtCtrl;

   if (c != null)
    c.OnBasketFieldBackgroundColorChanged((Color?)e.OldValue, (Color?)e.NewValue);
  }

  private void OnBasketFieldBackgroundColorChanged(Color? oldValue, Color? newValue)
  {
   this.BasketFieldBackgroundBrush = this.BasketFieldBackgroundColor.HasValue ? new SolidColorBrush(this.BasketFieldBackgroundColor.Value) : null;
  }

  public static DependencyProperty BasketFieldBackgroundBrushProperty = DependencyProperty.Register(nameof(BasketFieldBackgroundBrush), typeof(SolidColorBrush), typeof(BasketCourtCtrl));

  public SolidColorBrush BasketFieldBackgroundBrush
  {
   get { return (SolidColorBrush)GetValue(BasketFieldBackgroundBrushProperty); }
   private set { SetValue(BasketFieldBackgroundBrushProperty, value); }
  }
  #endregion BACKGROUND COLOR

  #region LINE COLOR
  public static DependencyProperty BasketFieldLineColorProperty = DependencyProperty.Register(nameof(BasketFieldLineColor), typeof(Color?), typeof(BasketCourtCtrl), new PropertyMetadata(null, OnBasketFieldLineColorChanged));

  public Color? BasketFieldLineColor
  {
   get { return (Color?)GetValue(BasketFieldLineColorProperty); }
   set { SetValue(BasketFieldLineColorProperty, value); }
  }

  private static void OnBasketFieldLineColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  {
   BasketCourtCtrl c = d as BasketCourtCtrl;

   if (c != null)
    c.OnBasketFieldLineColorChanged((Color?)e.OldValue, (Color?)e.NewValue);
  }

  private void OnBasketFieldLineColorChanged(Color? oldValue, Color? newValue)
  {
   this.BasketFieldLineBrush = this.BasketFieldLineColor.HasValue ? new SolidColorBrush(this.BasketFieldLineColor.Value) : null;
  }

  public static DependencyProperty BasketFieldLineBrushProperty = DependencyProperty.Register(nameof(BasketFieldLineBrush), typeof(SolidColorBrush), typeof(BasketCourtCtrl));

  public SolidColorBrush BasketFieldLineBrush
  {
   get { return (SolidColorBrush)GetValue(BasketFieldLineBrushProperty); }
   private set { SetValue(BasketFieldLineBrushProperty, value); }
  }
  #endregion LINE COLOR
}

Adorniamo la classe con l'attributo ContentProperty ed assegnamogli il nome della proprietà costante ImageContentPropertyName
Deriviamo la classe dalla classe Control
Creiamo un costruttore static ed implementiamo il metodo DefaultStyleKeyProperty.OverrideMetadata(typeof(tipo della nostra classe), new FrameworkPropertyMetadata(typeof(tipo della nostra classe)))
Creiamo una DependencyProperty di tipo FrameworkElement con lo stesso nome dato a ImageContentPropertyName
... a questo punto potrebbe già essere applicabile l'immagine così come verrebbe importata
... se si vogliono definire delle proprietà da configurare in sviluppo, proseguiamo
Creiamo una DependencyProperty public di tipo SolidColorBrush
Creiamo una DependencyProperty public di tipo Color? che gestisca il colore di Background (qui chiamata BasketFieldBackgroundColor) e che richiama un PropertyMetadata(null, metodo statico per il cambio di colore)
Creiamo il metodo statico che deve essere sollevato quando si assegna il colore
Creiamo un metodo private non statico che determina il colore del SolidColorBrush (nel nostro esempio BasketFieldLineBrush)

Ora importiamo l'immagine nel nostro codice.

Se non presente, in Esplora Soluzioni, creare la cartella Themes
All'interno deve essere presente il file Generic.xaml. Se non presente aggiungerlo di tipo Dizionario risorse (ResourceDictionary)
Creare un nuovo nodo Style
Assegnare un TarteType, richiamando il nome del control appena creato (nel nostro esempio NbaLogoCtrl)
Definire un Setter della Property Template
Definire un Setter.Value
Definire un ControlTemplate assegnando come TargetType sempre il nome del control
Definire il Border
Definire la Griglia
Definire un Viewbox
Creare il nodo Canvas. Assegnare un Name, Width, Height
Inserire all'interno del Canvas la struttura XAML creata della nostra immagine
Trovare i nodi PATH di cui si vuole gestire i colori via codice ed assegnare all'attributo Fill il Binding al Brush desiderato tra quelli creati.

Ora inseriamo l'immagine nelle nostre pagine/controlli XAML.

Aprire lo XAML desiderato
Nella header creare il namespace alla cartella Controls (dove sono presenti il nostri oggetti controls)
Aggiungere (nella posizione desiderata) l'immagine creata, assegnandole le proprietà definire nell'oggetto

I23 di Boccaletti Emanuele
41121 Modena (MO)
Tel. +39 347 1302420
emanuele@i23.eu
Skype: emanuele.boccaletti