Immagine SVG avanzata

BrowseName: AdvancedSVGImage
SuperType: Contenitore (Container)
Percorso nella TypeView: Tipi > UI > Disegni > Immagine SVG avanzata

Visualizza un’immagine SVG di tipo 1.2 Tiny e permette di modificare a design time o a runtime proprietà di singole parti dell’immagine.

Applicazioni

Usato tipicamente per modificare in parte o interamente, in modo statico o dinamico, i colori di un’immagine SVG, per esempio icone, immagini dinamiche a seconda di specifiche logiche di runtime, oppure sfondi di altri oggetti (vedere oggetto Immagine). Permette di realizzare le azioni seguenti:

Configurare l’oggetto

Impostare l’immagine da visualizzare

  1. In UI fare clic destro sul contenitore desiderato (MainWindow (type), Pannello…), poi scegliere Nuovo > Disegni > Immagine SVG avanzata: compare il nuovo oggetto.

  2. Accanto alla proprietà Percorso dell’oggetto, fare clic su Sfoglia: si apre la cartella Seleziona file.

  3. Fare clic sull’immagine desiderata, quindi fare clic su Seleziona: l’immagine compare nell’editor degli oggetti.

Impostare un colore personalizzato per una sezione dell’immagine

Prerequisito: per modificare parti dell’immagine è necessario che nel file SVG le diverse parti siano identificate da specifici ID.

  1. Fare clic su image505BCEB6 accanto a Proprietà elementi SVG: compare la nuova proprietà.

  1. In ID selezionare la sezione dell’immagine desiderata.

  2. In Proprietà, per modificare il colore della sezione di interesse, selezionare la proprietà Colore.

  3. Accanto a Valore, fare clic sul selettore di colori e scegliere il colore desiderato, oppure inserire il codice esadecimale del colore desiderato.

Impostare la modifica a runtime del colore della sezione

Prerequisito: per modificare parti dell’immagine è necessario che nel file SVG le diverse parti siano identificate da specifici ID.

  1. Fare clic su image505BCEB6 accanto a Proprietà elemento SVG: compare la nuova proprietà.

  2. In ID selezionare la sezione dell’immagine desiderata.

  3. In Proprietà **, per modificare il colore della sezione di interesse, selezionare la proprietà **Colore.

  4. Accanto a Valore fare clic su imageD7368BBD > Avanzato per aprire l’editor dei collegamenti dinamici, poi selezionare la proprietà degli oggetti desiderata.

Ridimensionare un’immagine mantenendo le proporzioni originali

  1. In Modalità riempimento selezionare Riempi.

  2. Impostare un valore per una delle due dimensioni, ad esempio impostare Altezza su 50 pixel.

  3. Impostare su Auto il valore dell’altra dimensione. Per farlo fare clic sulla proprietà, ad esempio Larghezza, e premere CANC.

L’immagine assume l’altezza desiderata, mentre la larghezza si adatta per mantenere le proporzioni originali.

../../../_images/ref_image_originalRatio_ex.gif

Proprietà

Nome

BrowseName

DataType

Descrizione

Percorso

Path

ResourceUri

Percorso del video

Modalità riempimento

FillMode

FillModeEnum

Modalità di riempimento dell’oggetto immagine (Riempi = ridimensiona l’immagine mantenendo le proporzioni originali, Adatta = ridimensiona l’immagine adattando le proporzioni all’area dell’oggetto immagine)

Visibile ai click

HitTestVisible

Boolean

Vero = intercetta i clic dell’utente. Falso = non intercetta i clic dell’utente, che vengono invece passati all’oggetto sottostante, in base all’ordine sull’asse z.

Proprietà elementi SVG

SVGElementProperties

Collezione di AdvancedSVGImageElementProperty

Imposta il colore di una parte del file SVG

Visibilità

Visible

Boolean

Mostra/nasconde la finestra.
(Ereditato da Elemento)
Abilitato

Enabled

Boolean

Abilita/disabilita l’interazione da parte dell’utente (Vero = abilitato, Falso = disabilitato).
(Ereditato da Elemento)
Opacità

Opacity

Float

Livello di opacità (0 = trasparente)
(Ereditato da Elemento)
Margine sinistro

LeftMargin

Size

(Solo se Allineamento orizzontale = Sinistra o Centro o Adatta) Distanza tra il bordo sinistro dell’oggetto e il bordo sinistro del suo contenitore.
(Ereditato da Elemento)
Margine superiore

TopMargin

Size

(Solo se Allineamento verticale = Superiore o Centro o Adatta) Distanza tra il bordo superiore dell’oggetto e il bordo superiore del suo contenitore.
(Ereditato da Elemento)
Margine destro

RightMargin

Size

(Solo se Allineamento orizzontale = Destra o Centro o Adatta) Distanza tra il bordo destro dell’oggetto e il bordo destro del suo contenitore.
(Ereditato da Elemento)
Margine inferiore

BottomMargin

Size

(Solo se Allineamento verticale = Inferiore o Centro o Adatta) Distanza tra il bordo inferiore dell’oggetto e il bordo inferiore del suo contenitore.
(Ereditato da Elemento)
Larghezza

Width

Size

Larghezza della finestra. Può assumere valori maggiori o uguali a zero. Il valore Auto imposta la larghezza uguale alla larghezza del contenuto (in questo caso, in mancanza di contenuto l’oggetto collassa).
(Ereditato da Elemento)
Altezza

Height

Size

Altezza della finestra. Può assumere valori maggiori o uguali a zero. Il valore Auto imposta l’altezza uguale all’altezza del contenuto (in questo caso, in mancanza di contenuto l’oggetto collassa).
(Ereditato da Elemento)
Allineamento orizzontale

HorizontalAlignment

HorizontalAlignment

Allineamento dell’oggetto sull’asse orizzontale. Sinistra = il lato sinistro viene posizionato sul lato sinistro del contenitore, a meno di margine sinistro; Destra = il lato destro viene posizionato sul lato destro del contenitore, a meno di margine destro; Centro = il centro dell’oggetto viene posizionato al centro del contenitore, a meno di margini sinistro e/o destro; Adatta = la larghezza dell’oggetto equivale alla larghezza del contenitore, a meno di margini sinistro e/o destro.
(Ereditato da Elemento)
Allineamento verticale

VerticalAlignment

VerticalAlignment

Allineamento dell’oggetto sull’asse verticale. Superiore = il lato superiore viene posizionato sul lato superiore del contenitore, a meno di margine superiore; Inferiore = il lato inferiore viene posizionato sul lato inferiore del contenitore, a meno di margine inferiore; Centro = il centro dell’oggetto viene posizionato al centro del contenitore, a meno di margini superiore e/o inferiore; Adatta = l’altezza dell’oggetto equivale all’altezza del contenitore, a meno di margini superiore e/o inferiore.
(Ereditato da Elemento)
Rotazione

Rotation

Size

Rotazione dell’oggetto rispetto al suo centro. I valori positivi indicano gradi sessagesimali in senso orario.
(Ereditato da Elemento)

Eventi

Evento MouseDown

BrowseName: MouseDownEvent