Transformace ve WPF

Transformace jsou skvělý způsob jak změnit vzhled ovládacích prvků ve WPF tam, kde už styly a šablony většinou nestačí. Zdrojový kód je z knihy, která v češtině vyšla pod názvem “Mistrovství ve WPF” ( http://knihy.cpress.cz/mistrovstvi-ve-windows-presentation-foundation.html ), v angličtině pod názvem Applications = Code + Markup (A Guide to the Microsoft Windows Presentation Foundation) od Charlese Petzolda ( http://charlespetzold.com/wpf/ ). Tento zdrojový kód vypadá takto a jsou v něm všechny základní tranformace:

CODE<Page x:Class="K1456.Capitol29.TransformedButtons" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="TransformedButtons">

   <Canvas>
       <!--Tlacitko std. vzhledu bez jakekoliv transformace-->
       <Button Canvas.Left="50" Canvas.Top="100">
           Untransformed
       </Button>


       <Button Canvas.Left="200" Canvas.Top="100">
           Translated
           <Button.RenderTransform>
               <!--Posune tlacitko 100px dolevo a 150px dolu-->
               <TranslateTransform X="-100" Y="150"></TranslateTransform>
           </Button.RenderTransform>
       </Button>

       <Button Canvas.Left="350" Canvas.Top="100">
           Scaled
           <Button.RenderTransform>
               <!--Zvetsi tlacitko 1.5x do sirky a 4x do vysky pri zachovani relativni velikosti textu-->
               <ScaleTransform ScaleX="1.5" ScaleY="4"></ScaleTransform>
           </Button.RenderTransform>
       </Button>

       <Button Canvas.Left="500" Canvas.Top="100">
           Skewed
           <Button.RenderTransform>
               <!--Otoci tlacitko v uhlo 20° po smeru hodinovych rucicek - neni urceno pro otaceni v celem rozsahu stupnu-->
               <!--Asi to neni delane pro vyssi hodnoty, bo pri vyssich hodnotach se to chova nejak podivne(uplne roztazeni atd.). Asi to bude proto ze Skew znamena prekroutit-->
               <!--Muze nabyvat hodnot od 0 do 180(stejna jako 0) a -1 az -180(stejna jako 0)-->
               <!--Samozrejme jde zaroven zadat i parametr AngleX pro otoceni po vodorovne ose-->
               <SkewTransform AngleY="20"></SkewTransform>
           </Button.RenderTransform>
       </Button>

       <Button Canvas.Left="650" Canvas.Top="100">
           Rotated
           <Button.RenderTransform>
               <!--Otaci tlacitko kolem jeho bodu 0,0, ktery se nemeni pri zadnem natoceni.-->
               <!--Pripustni hodnoty jsou -360-0(proti smeru hod. rucicek) a 0-360(po smeru hod. rucicek)-->
               <RotateTransform Angle="-30"></RotateTransform>
           </Button.RenderTransform>
       </Button>
   </Canvas>
</Page> 

V tomtu kódu vidíte, že základní tranformace jsou:

1. TranslateTransform – Posune element vodorovně i svisle podle hodnot v X, Y.
2. ScaleTransform – Opticky zvětší či zmenší element.
3. SkewTransform – Udělá z tlačítka jiný tvar než jeho výchozí.
4. RotateTransform – Otáčí tlačítko kolem jeho bodu 0,0.

Celý program po spuštění výše vypadá takto: