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

MVP Reconnect …… ovvero quando entri nella “famigghia” resti sempre nella “famigghia”!!!

Ma di che “famigghia” stiamo parlando!!!!

Fermi tutti, non si tratta di robe strane o sette segrete o affari malavitosi….stiamo parlando della grande famiglia dei Microsoft MVP.

Per chi non sapesse cosa sono i Microsoft MVP, vi consiglio di fare un giro sul sito ufficiale del programma (link), ma, volendolo spiegare in pochisime parole, si tratta di un riconoscimento che Microsoft da a persone che si distinguono per il loro impegno, aiutando gli altri ad ottenere il massimo grazie alle tecnologie Microsoft. Si tratta di persone, non dipendenti Microsoft, che mettono la loro passione, il loro tempo, la loro buona volontà per la divulgazione e la condivisione della conoscenza. Non necessariamente (come qualcuno erroneamente sostiene, evidentemente non conoscendo le basi del programma) si tratta di professionisti nel termine letterale del termine ma si tratta comunque di un gruppo di persone che sacrifica un pò del suo tempo (e, a volte, vi assicuro neanche pò!!!) per la sua passione.

Pe…

Nuova versione del Band SDK

E’ di ieri l’annuncio del rilascio della nuova versione dell’SDK per il Microsoft Band.
Si tratta della versione 1.3.10417 (la precedente e, prima della serie, era la 1.3.10219 preview).
Maggiori informazioni, download dell’SDK per le tre piattaforme Windows Phone, iOS e Android all’indirizzo http://developer.microsoftband.com/.
Allo stesso indirizzo potrete trovare anche la documentazione.
Nei mesi scorsi mi sono gia’ occupato della precedente versione e questi sono i post che ne parlano:
Microsoft Band SDK Preview - First LookMicrosoft Band SDK Preview - ”Hello Band”Microsoft Band SDK Preview - Accesso ai sensoriMicrosoft Band SDK Preview - TileMicrosoft Band SDK Preview - NotificheMicrosoft Band SDK Preview - Personalizzazione
Gli argomenti trattati e il codice proposto dovrebbe, ad una prima lettura delle nuove funzionalita’ inserite, essere ancora valido e funzionante ma nei prossimi giorni prendero’ in esame tutti gli argomenti dei precedenti post e vedremo cosa cambia e cosa e’ …

Template di progetto per sviluppare applicazioni WPF con Intel® RealSense™

E’ disponibile, nella gallery di Visual Studio, la prima versione del mio template di progetto per applicazioni WPF scritte in C# che permette di realizzare applicazioni con l’SDK di Intel® RealSense™.Il template si può scaricare direttamente all’interno Visual Studio utilizzando il tool “Extensions and Updates”oppure all’indirizzo https://visualstudiogallery.msdn.microsoft.com/1c36ecfd-8c00-4aee-b20c-a1726ab6424dIl template esegue le seguenti operazioni per voi:Aggiunge la reference all’assembly libpxcclr.cs.dll (nelle due distinte versioni per x86 e x64);Aggiunge lo script di post build per copiare la libreria libpxccpp2c.dll dalla cartella dell’SDK alla cartella bin del vostro progetto.Una volta creato il progetto dovete rimuovere la configurazione di compilazione AnyCPU (che non ha più senso) dalla vostra solution e sarete pronti per sviluppare con Intel® RealSense™.Ovviamente dovete installare l’SDK che potete scaricare all’indirizzo https://software.intel.com/en-us/intel-realsen…