Passa ai contenuti principali

Appunti di WPF – Tredicesima Puntata – Le trasformazioni geometriche

WPF mette a disposizione delle classi che permettono di modificare le figure geometriche applicando loro delle trasformazioni geometriche.

Una trasformazione geometrica è una funzione che trasforma un punto del piano, appartenente ad una figura, in un altro punto del piano.

Il framework ci mette a disposizione un certo numero di classi tutte derivate dalla classe Transform presente nel namespace System.Windows.Media:

WPF_13_Trasformazioni_Fig1

La classe Transform implementa l’interfaccia Freezeable (perché lo fa una delle sua classi padre) che prevede un meccanismo di notifica dei cambiamenti di stato che permette di aggiornare in tempo reale le figure geometriche a cui è agganciata.

In particolare, le classi di trasformazione hanno lo stesso significato:

· TranslateTransform : implementa la traslazione delle immagini cioè una trasformazione che, in sostanza, sposta le coordinate dell’origine del riferimento cartesiano in cui è disegnata la figura geometrica;

· RotateTransform : implementa la rotazione della figura geometrica;

· SkewTransform : implementa la deformazione della figura geometrica;

· ScaleTransform : implementa lo zoom della figura geometrica;

· MatrixTransform : permette di definire una trasformazione complessa.

· TransformGroup : permette di raggruppare più trasformazioni assieme.

Alla base di tutti i tipi di trasformazioni c’è la MatrixTransform ma WPF ci mette a disposizione delle classi “scorciatoia” per semplificarci la vita.

Per poter applicare una trasformazione ad un elemento che deriva da UIElement possiamo agire sulle proprietà RenderTransform o LayoutTransform.

Quando impostiamo la RenderTransform, questa viene applicata dopo che il layout è stato composto, quindi le eventuali “deformazioni” dell’elemento a cui è applicata non influenzano il layout complessivo della finestra.

Se impostiamo, invece, la LayoutTransform, questa viene applicata prima di comporre il Layout il che comporta che tale layout è influenzato dalla trasformazione.

La seguente interfaccia  ha due StackPanel con due Button il primo dei quali è sottoposto ai due tipi di trasformazione:

WPF_13_Trasformazioni_Fig2

Per capire come funzionano i diversi tipi di trasformazione, vediamo alcuni esempi pratici con dello XAML.

TranslateTransform

  1. <Window x:Class="TranslateTransform"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="TranslateTransform" Height="480" Width="640">
  5.     <Grid>
  6.         <Grid.RowDefinitions>
  7.             <RowDefinition Height="Auto" />
  8.             <RowDefinition Height="*" />
  9.         </Grid.RowDefinitions>
  10.         <StackPanel>
  11.             <Slider Name="sliderX" Minimum="0" Maximum="{Binding ElementName=Canvas, Path=ActualWidth}" Value="0" Margin="2"></Slider>
  12.             <Slider Name="sliderY" Minimum="0" Maximum="{Binding ElementName=Canvas, Path=ActualHeight}" Value="0" Margin="2"></Slider>
  13.         </StackPanel>
  14.         <Canvas Grid.Row="1" Name="Canvas">
  15.             <Polygon Stroke="black"
  16.                  Points="50,50  100,0 200,100 100,200 0,100 50,50 150,50 150,150 50,150"
  17.                  FillRule="EvenOdd" HorizontalAlignment="Center" >
  18.                 <Polygon.Fill>
  19.                     <RadialGradientBrush>
  20.                         <GradientStop Color="cyan" Offset="0"></GradientStop>
  21.                         <GradientStop Color="blue" Offset="1"></GradientStop>
  22.                     </RadialGradientBrush>
  23.                 </Polygon.Fill>
  24.                 <Polygon.RenderTransform>
  25.                     <TranslateTransform X="{Binding ElementName=sliderX, Path=Value}" Y="{Binding ElementName=sliderY, Path=Value}"/>
  26.                 </Polygon.RenderTransform>
  27.             </Polygon>
  28.         </Canvas>
  29.     </Grid>
  30. </Window>

WPF_13_Trasformazioni_Fig3 

RotateTransform

  1. <Window x:Class="RotateTransform"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="RotateTransform" Height="500" Width="500">
  5.     <Grid>
  6.         <Grid.RowDefinitions>
  7.             <RowDefinition Height="Auto" />
  8.             <RowDefinition Height="*" />
  9.         </Grid.RowDefinitions>
  10.         <StackPanel>
  11.             <Slider Name="sliderAngle" Minimum="0" Maximum="360" Value="0" Margin="2"></Slider>
  12.         </StackPanel>
  13.         <Canvas Grid.Row="1" Name="Canvas">
  14.             <Polygon Stroke="black" Canvas.Top="20" Canvas.Left="43"
  15.                  Points="100,100  200,0 400,200 200,400 0,200 100,100 300,100 300,300 100,300"
  16.                  FillRule="EvenOdd" HorizontalAlignment="Center" >
  17.                 <Polygon.Fill>
  18.                     <RadialGradientBrush>
  19.                         <GradientStop Color="cyan" Offset="0"></GradientStop>
  20.                         <GradientStop Color="blue" Offset="1"></GradientStop>
  21.                     </RadialGradientBrush>
  22.                 </Polygon.Fill>
  23.                 <Polygon.RenderTransform>
  24.                     <RotateTransform Angle="{Binding ElementName=sliderAngle, Path=Value}"
  25.                                      CenterX="199.5"
  26.                                      CenterY="199.5"/>
  27.                 </Polygon.RenderTransform>
  28.             </Polygon>
  29.         </Canvas>
  30.     </Grid>
  31. </Window>

WPF_13_Trasformazioni_Fig4

SkewTransform

  1. <Window x:Class="SkewTransform"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="SkewTransform" Height="500" Width="500">
  5.     <Grid>
  6.         <Grid.RowDefinitions>
  7.             <RowDefinition Height="Auto" />
  8.             <RowDefinition Height="*" />
  9.         </Grid.RowDefinitions>
  10.         <StackPanel>
  11.             <Slider Name="sliderAngleX" Minimum="0" Maximum="360" Value="0" Margin="2"></Slider>
  12.             <Slider Name="sliderAngleY" Minimum="0" Maximum="360" Value="0" Margin="2"></Slider>
  13.         </StackPanel>
  14.         <Canvas Grid.Row="1" Name="Canvas">
  15.             <Polygon Stroke="black" Canvas.Top="20" Canvas.Left="43"
  16.                  Points="100,100  200,0 400,200 200,400 0,200 100,100 300,100 300,300 100,300"
  17.                  FillRule="EvenOdd" HorizontalAlignment="Center" >
  18.                 <Polygon.Fill>
  19.                     <RadialGradientBrush>
  20.                         <GradientStop Color="cyan" Offset="0"></GradientStop>
  21.                         <GradientStop Color="blue" Offset="1"></GradientStop>
  22.                     </RadialGradientBrush>
  23.                 </Polygon.Fill>
  24.                 <Polygon.RenderTransform>
  25.                     <SkewTransform AngleX="{Binding ElementName=sliderAngleX, Path=Value}"
  26.                                    AngleY="{Binding ElementName=sliderAngleY, Path=Value}"
  27.                                    CenterX="199.5"
  28.                                    CenterY="199.5" />
  29.                 </Polygon.RenderTransform>
  30.             </Polygon>
  31.         </Canvas>
  32.     </Grid>
  33. </Window>

WPF_13_Trasformazioni_Fig5

ScaleTransform

  1. <Window x:Class="ScaleTransform"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="ScaleTransform" Height="500" Width="500">
  5.     <Grid>
  6.         <Grid.RowDefinitions>
  7.             <RowDefinition Height="Auto" />
  8.             <RowDefinition Height="*" />
  9.         </Grid.RowDefinitions>
  10.         <StackPanel>
  11.             <Slider Name="sliderScaleX" Minimum="0" Maximum="2" Value="1" Margin="2"></Slider>
  12.             <Slider Name="sliderScaleY" Minimum="0" Maximum="2" Value="1" Margin="2"></Slider>
  13.         </StackPanel>
  14.         <Canvas Grid.Row="1" Name="Canvas">
  15.             <Polygon Stroke="black" Canvas.Top="20" Canvas.Left="43"
  16.                  Points="100,100  200,0 400,200 200,400 0,200 100,100 300,100 300,300 100,300"
  17.                  FillRule="EvenOdd" HorizontalAlignment="Center">
  18.                 <Polygon.Fill>
  19.                     <RadialGradientBrush>
  20.                         <GradientStop Color="cyan" Offset="0"></GradientStop>
  21.                         <GradientStop Color="blue" Offset="1"></GradientStop>
  22.                     </RadialGradientBrush>
  23.                 </Polygon.Fill>
  24.                 <Polygon.RenderTransform>
  25.                     <ScaleTransform ScaleX="{Binding ElementName=sliderScaleX, Path=Value}"
  26.                                     ScaleY="{Binding ElementName=sliderScaleY, Path=Value}"
  27.                                     CenterX="199.5"
  28.                                     CenterY="199.5"/>
  29.                 </Polygon.RenderTransform>
  30.             </Polygon>
  31.         </Canvas>
  32.     </Grid>
  33. </Window>

WPF_13_Trasformazioni_Fig6

MatrixTransform

La matrice di trasformazione è composta da tre righe e tre colonne:

WPF_13_Trasformazioni_Fig7

La matrice unità, cioè con M11=M22=1 e M21=M12=OffsetX=OffsetY=0 indica una trasformazione nulla, ovvero una trasformazione che non modifica l’aspetto dell’elemento.

I componenti della matrice hanno il seguente significato:

· OffsetX e OffsetY consentono di definire una translazione, rispettivamente per l’asse X e Y;

· M11 e M22 definiscono una trasformazione di scala con il valore M11 per le x e M22 per le y;

· M12 e M21 definiscono una trasformazione di skew con il valore M21 per le x e M12 per le y.

Ad esempio la seguente trasformazione esegue uno skew rispetto all’asse x e uno scale rispetto all’asse y:

  1. <MatrixTransform>
  2.     <MatrixTransform.Matrix>
  3.         <Matrix M11="1" M12="0"
  4.                 M21="0.5" M22="1.5"
  5.                 OffsetX="0" OffsetY="0" />
  6.     </MatrixTransform.Matrix>
  7. </MatrixTransform>

WPF_13_Trasformazioni_Fig8


Scarica la versione PDF dell'articolo. Scarica la versione Amazon Kindle dell'articolo.

Commenti

Post popolari in questo blog

VB.NET: Convertire un file DOC in RTF e PDF con office interop

In questo post vorrei proporvi del codice per poter convertire un file .doc in un file .rtf oppure .pdf utilizzando le API di interoperabilità di Office.Creeremo una classe, DocConverter, che esporrà le due funzionalità sopra citate.Cominciamo con il prevedere un attributo privato della classe che rappresenterà l’applicazione Word che utilizzeremo per la conversione. Creeremo l’istanza dell’attributo privato all’interno del costruttore della classe:PublicSubNew()
IfNot CreateWordApp() Then
ThrowNew ApplicationException("Assembly di interoperabilità con Office non trovato!")
EndIf
EndSub
Private _wordApp As Word.ApplicationClass
ProtectedFunction CreateWordApp() AsBoolean
Dim retval = True
Try
_wordApp = New Word.ApplicationClass()
_wordApp.Visible = False
Catch ex As System.Exception
_wordApp = Nothing
retval = False
EndTry
Return retval
EndFunction

La conversione del file doc sarà effettuata aprendo il file stesso ed eseguendo un’operazione di SaveAs:

Pr…

Cambiare la lingua di Visual Studio 2008

Oggi ho avuto qualche problema installando Windows Mobile 6 Professional SDK Refresh e Windows Mobile 6 Standard SDK Refresh.Scaricati i file di installazione e installati, ho provato a creare un progetto di tipo Windows Mobile 6.0 e mi sono beccato questo errore:Dopo qualche smanettamento abbiamo scoperto (e ringrazio il mitico Matteo per l’aiuto) che il mio Visual Studio 2008, pur essendo in Inglese (prova ne era il fatto che gli hotfix e la SP installata erano nella lingua di Albione) aveva come lingua impostata quella del sistema operativo (italiano).Ovviamente, non avrebbe mai potuto trovare la cartella 1040 (italiano) visto che l’installazione dell’SDK aveva supposto che la lingua del Visual Studio fosse Inglese (1033).La soluzione del problema è duplice:1) Duplicate la cartella 1033 presente nel percorso evidenziato dall’errore e la rinominate 10402) cambiate la lingua di Visual Studio.Per questa ultima eventualità basta andare nel menù Strumenti/Opzioni:e cambiare il linguaggi…

Tascam DR-05 registratore digitale per tutti

Diverso tempo fa ho acquistato il registratore digitale Tascam DR-05 e, ora, dopo diversi mesi di utilizzo, posso dire la mia a proposito.

Si tratta di un ottimo registratore digitale con microfono stereo che permette di ottenere registrazioni di ottima qualitaà anche in ambienti non perfetti dal punto di vista acustico.

Interessante la possibilità di utilizzare un cavalletto di piccole dimensioni come HAMA Mini treppiede o Mini Cavalletto Universale per tenere il microfono sollevato dal tavolo in fase di registrazione grazie allàattacco universale per macchina fotografica che il microfono ha nella parte inferiore.

Da segnalare anche il menu’ ben fatto e la possibilita’ di utilizzare una scheda SD esterna per memorizzare i file audio. Anche a livello di consumo batterie non e’ niente male. Consiglio l’uso delle alcaline non ricaricabili.

Il mio utilizzo e’ stato prettamente di registrazione di podcast vocali (no musica) ma le recensioni confermano che se la cava egregiamente con la mu…