Effetti prospettica 3D per l'interfaccia utente XAML

È possibile applicare effetti 3D al contenuto nelle app Windows Runtime usando trasformazioni prospettiche. Ad esempio, è possibile creare l'illusione che un oggetto venga ruotato verso o lontano da te, come illustrato di seguito.

Un altro utilizzo comune per le trasformazioni prospettiche consiste nel disporre gli oggetti in relazione tra loro per creare un effetto 3D, come in questo caso.

Oltre a creare effetti statici 3D, è possibile animare le proprietà della trasformazione prospettica per creare effetti 3D in movimento.

Sono state appena viste le trasformazioni prospettiche applicate alle immagini, ma è possibile applicare questi effetti a qualsiasi UIElement, inclusi i controlli. Ad esempio, è possibile applicare un effetto 3D a un intero contenitore di controlli come segue:

Ecco il codice XAML usato per creare questo esempio:

<StackPanel Margin="35" Background="Gray">
    <StackPanel.Projection>
        <PlaneProjection RotationX="-35" RotationY="-35" RotationZ="15"  />
    </StackPanel.Projection>
    <TextBlock Margin="10">Type Something Below</TextBlock>
    <TextBox Margin="10"></TextBox>
    <Button Margin="10" Content="Click" Width="100" />
</StackPanel>

Qui ci concentriamo sulle proprietà di PlaneProjection che viene usato per ruotare e spostare oggetti nello spazio 3D. L'esempio successivo consente di sperimentare queste proprietà e visualizzare il relativo effetto su un oggetto .

Classe PlaneProjection

Puoi applicare effetti 3D a qualsiasi UIElement impostando la proprietà Projection di UIElement usando planeProjection. PlaneProjection definisce la modalità di rendering della trasformazione nello spazio. Nell'esempio seguente viene illustrato un caso semplice.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35"   />
    </Image.Projection>
</Image>

Questa figura mostra come viene resa l'immagine. L'asse x, l'asse y e l'asse z vengono visualizzati come linee rosse. L'immagine viene ruotata all'indietro di 35 gradi attorno all'asse x usando la proprietà RotationX .

La proprietà RotationY ruota attorno all'asse y del centro di rotazione.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35"   />
    </Image.Projection>
</Image>

La proprietà RotationZ ruota attorno all'asse z del centro di rotazione (una linea perpendicolare al piano dell'oggetto).

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationZ="-45"/>
    </Image.Projection>
</Image>

Le proprietà di rotazione possono specificare un valore positivo o negativo da ruotare in entrambe le direzioni. Il numero assoluto può essere maggiore di 360, che ruota l'oggetto più di una rotazione completa.

È possibile spostare il centro di rotazione usando le proprietà CenterOfRotationX, CenterOfRotationY e CenterOfRotationZ . Per impostazione predefinita, gli assi di rotazione vengono eseguiti direttamente attraverso il centro dell'oggetto, causando la rotazione dell'oggetto intorno al centro. Ma se si sposta il centro di rotazione sul bordo esterno dell'oggetto, ruota intorno a quel bordo. I valori predefiniti per CenterOfRotationX e CenterOfRotationY sono 0,5 e il valore predefinito per CenterOfRotationZ è 0. Per CenterOfRotationX e CenterOfRotationY, i valori compresi tra 0 e 1 impostano il punto pivot in una posizione all'interno dell'oggetto. Il valore 0 indica un bordo di un oggetto e 1 indica il bordo opposto. I valori al di fuori di questo intervallo sono consentiti e spostano di conseguenza il centro di rotazione. Poiché l'asse z del centro di rotazione viene disegnato attraverso il piano dell'oggetto, è possibile spostare il centro di rotazione dietro l'oggetto usando un numero negativo e davanti all'oggetto (verso di te) usando un numero positivo.

CenterOfRotationX sposta il centro di rotazione lungo l'asse x parallelo all'oggetto mentre CenterOfRotationY sposta il centro o la rotazione lungo l'asse y dell'oggetto. Le illustrazioni successive illustrano l'uso di valori diversi per CenterOfRotationY.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35" CenterOfRotationY="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationY = "0,5" (impostazione predefinita)

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35" CenterOfRotationY="0.1"/>
    </Image.Projection>
</Image>

CenterOfRotationY = "0.1"

Si noti che l'immagine ruota intorno al centro quando la proprietà CenterOfRotationY è impostata sul valore predefinito 0,5 e ruota vicino al bordo superiore quando è impostata su 0,1. Si noterà un comportamento simile quando si modifica la proprietà CenterOfRotationX per spostarsi in cui la proprietà RotationY ruota l'oggetto.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35" CenterOfRotationX="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationX = "0.5" (impostazione predefinita)

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35" CenterOfRotationX="0.9" />
    </Image.Projection>
</Image>

CenterOfRotationX = "0,9" (bordo destro)

Usare CenterOfRotationZ per posizionare il centro di rotazione sopra o sotto il piano dell'oggetto. In questo modo, è possibile ruotare l'oggetto intorno al punto analogo a un pianeta orbitante intorno a una stella.

Posizionamento di un oggetto

Finora si è appreso come ruotare un oggetto nello spazio. È possibile posizionare questi oggetti ruotati nello spazio rispetto all'altro usando queste proprietà:

• LocalOffsetX sposta un oggetto lungo l'asse x del piano di un oggetto ruotato.
• LocalOffsetY sposta un oggetto lungo l'asse y del piano di un oggetto ruotato.
• LocalOffsetZ sposta un oggetto lungo l'asse z del piano di un oggetto ruotato.
• GlobalOffsetX sposta un oggetto lungo l'asse x allineato allo schermo.
• GlobalOffsetY sposta un oggetto lungo l'asse y allineato allo schermo.
• GlobalOffsetZ sposta un oggetto lungo l'asse z allineato allo schermo.

Offset locale

Le proprietà LocalOffsetX, LocalOffsetY e LocalOffsetZ convertono un oggetto lungo il rispettivo asse del piano dell'oggetto dopo la rotazione. Pertanto, la rotazione dell'oggetto determina la direzione in cui viene convertito l'oggetto. Per illustrare questo concetto, l'esempio successivo anima LocalOffsetX da 0 a 400 e RotationY da 0 a 65 gradi.

Si noti nell'esempio precedente che l'oggetto si sposta lungo il proprio asse x. All'inizio dell'animazione, quando il valore RotationY è vicino a zero (parallelo allo schermo), l'oggetto si sposta lungo lo schermo nella direzione x, ma quando l'oggetto ruota verso di te, l'oggetto si sposta lungo l'asse x del piano dell'oggetto verso di te. D'altra parte, se si animasse la proprietà RotationY a -65 gradi, l'oggetto si curverebbe in direzione opposta a te.

LocalOffsetY funziona in modo analogo a LocalOffsetX, ad eccezione del fatto che si sposta lungo l'asse verticale, quindi la modifica di RotationX influisce sulla direzione LocalOffsetY sposta l'oggetto. Nell'esempio successivo , LocalOffsetY viene animato da 0 a 400 e RotationX da 0 a 65 gradi.

LocalOffsetZ converte l'oggetto perpendicolare al piano dell'oggetto come se un vettore fosse disegnato direttamente attraverso il centro da dietro l'oggetto verso di te. Per illustrare il funzionamento di LocalOffsetZ , l'esempio successivo anima LocalOffsetZ da 0 a 400 e RotationX da 0 a 65 gradi.

All'inizio dell'animazione, quando il valore RotationX è vicino a zero (parallelo allo schermo), l'oggetto si sposta direttamente verso di te, ma quando il viso dell'oggetto ruota verso il basso, l'oggetto si sposta verso il basso.

Offset globale

Le proprietà GlobalOffsetX, GlobalOffsetY e GlobalOffsetZ convertono l'oggetto lungo gli assi rispetto allo schermo. Ovvero, a differenza delle proprietà di offset locali, l'asse che l'oggetto si sposta lungo è indipendente da qualsiasi rotazione applicata all'oggetto. Queste proprietà sono utili quando si vuole semplicemente spostare l'oggetto lungo l'asse x, y o z dello schermo senza preoccuparsi della rotazione applicata all'oggetto.

L'esempio successivo anima GlobalOffsetX da 0 a 400 e RotationY da 0 a 65 gradi.

Si noti che in questo esempio l'oggetto non cambia durante la rotazione. Ciò è dovuto al fatto che l'oggetto viene spostato lungo l'asse x dello schermo senza considerare la rotazione.

Scenari semi-3D più complessi

È possibile usare i tipi Matrix3DProjection e Matrix3D per scenari semi-3D più complessi di quanto sia possibile con PlaneProjection. Matrix3DProjection offre una matrice di trasformazione 3D completa da applicare a qualsiasi UIElement, in modo da poter applicare matrici di trasformazione di modelli arbitrari e matrici prospettiche agli elementi. Tenere presente che queste API sono minime e pertanto, se usate, è necessario scrivere il codice che crea correttamente le matrici di trasformazione 3D. Per questo motivo, è più facile usare PlaneProjection per semplici scenari 3D.