[WPF] - Les transformations

[WPF] - Les transformations

I - transformations simples

Une seule transformation appliquée

1 – RotateTransform : tourne

      <!-- RotateTransform Tourne le control- de l'angle spécifié -->

      <Button Content="OK" Width="120" Height="20">

        <Button.RenderTransform>

          <RotateTransform Angle="90"/>

        </Button.RenderTransform>

      </Button>

 

2 – ScaleTransform : modifie l’ echelle/taille

      <!-- ScaleTransform : modification d'echelle (ex : si ScaleX="2" alors la longueur du control est multipliée par 2) -->

      <Button Content="OK" Width="120" Height="20">

        <Button.RenderTransform>

          <ScaleTransform ScaleX="2" ScaleY="2" />

        </Button.RenderTransform>

      </Button>

 

3 – SkewTransform : met en oblique

<!-- SkewTransform : met en oblique le control -->

      <Button Content="OK" Width="120" Height="20">

        <Button.RenderTransform>

          <SkewTransform AngleX="45" AngleY="0" />

        </Button.RenderTransform>

      </Button>

 

4 – TranslateTransform : deplace sur axe x et y

<!-- TranslateTransform : deplace le control sur axe x et y-->

      <Button Content="OK" Width="120" Height="20">

        <Button.RenderTransform>

          <TranslateTransform X="-80" Y="0" />

        </Button.RenderTransform>

      </Button>

 

5 - Les transformations peuvent s’appliquer à

<!-- Brush -->

      <Rectangle>

        <Rectangle.Fill>

          <ImageBrush ImageSource="C:Documents and SettingsromagnyMes documentsMes imagesanna47[1].jpg">

            <ImageBrush.Transform>

              <RotateTransform Angle="45" />

            </ImageBrush.Transform>

          </ImageBrush>

        </Rectangle.Fill>

      </Rectangle>

<!-- DrawingGroup -->

      <Image>

        <Image.Source>

          <DrawingImage>

            <DrawingImage.Drawing>

              <DrawingGroup>

                <GeometryDrawing Brush="Yellow" Geometry="M 25,25 L 0,50 25,75 50,50 25,25 25,0">

                  <GeometryDrawing.Pen>

                    <Pen Thickness="10" Brush="Black" />

                  </GeometryDrawing.Pen>

                </GeometryDrawing>

                <DrawingGroup.Transform>

                  <RotateTransform Angle="45" />

                </DrawingGroup.Transform>

              </DrawingGroup>

            </DrawingImage.Drawing>

          </DrawingImage>

        </Image.Source>

      </Image>

<!-- Geometry -->

      <Path Stroke="Black" Fill="Yellow">

        <Path.Data>

          <GeometryGroup>

            <RectangleGeometry Rect="30,55 100 30" />

            <GeometryGroup.Transform>

              <RotateTransform Angle="45" />

            </GeometryGroup.Transform>

          </GeometryGroup>

        </Path.Data>

      </Path>

<!-- TextEffect -->

      <TextBlock Text="un texte" Width="120" Height="20">

        <TextBlock.TextEffects>

          <TextEffect PositionCount="10">

            <TextEffect.Transform>

              <RotateTransform Angle="45"/>

            </TextEffect.Transform>

          </TextEffect>

        </TextBlock.TextEffects>

      </TextBlock>

+ tous les controls (FrameworkElement),UIElement,ContainerVisual

II - Des transformations complexes

 appliquer plusieurs transformations au lieu d’une seule

1 - TransformGroup

 <!-- TransformGroup : permet appliquer plusieurs transformations au lieu d'une seule au control-->

<Button Content="OK" Width="120" Height="20">

        <Button.RenderTransform>

          <TransformGroup>

            <RotateTransform Angle="90"/>

            <ScaleTransform ScaleX="2" ScaleY="2" />

          </TransformGroup>

        </Button.RenderTransform>

      </Button>

 

2 – MatrixTransform : utiliser une matrice

<Button Content="OK" Width="120" Height="20">

        <Button.RenderTransform>

          <MatrixTransform x:Name="myMatrixTransform">

            <MatrixTransform.Matrix >

              <Matrix OffsetX="-10" OffsetY="-20" M11="1" M12="1" M21="5" M22="2"/>

            </MatrixTransform.Matrix>

          </MatrixTransform>

        </Button.RenderTransform>

      </Button>

 

III - Créer une animation basée sur une transformation

<Button Content="Valider" RenderTransformOrigin="0.5,0.5" Width="120" Height="20">

        <Button.RenderTransform>

          <RotateTransform x:Name="RotateTransform1" Angle="0" />

        </Button.RenderTransform>

        <Button.Triggers>

          <EventTrigger RoutedEvent="Mouse.MouseEnter" >

            <EventTrigger.Actions>

              <BeginStoryboard>

                <Storyboard>

                  <!-- on modifie la propriete Angle de la transformation RotateTransform1

                  de manière à créer une animation (le bouton tourne au survol de la souris puis revient si la souris quitte la zone du button)

                  -->

                  <DoubleAnimation Storyboard.TargetName="RotateTransform1"

                    Storyboard.TargetProperty="Angle" To="360" Duration="0:0:1"/>

                </Storyboard>

              </BeginStoryboard>

            </EventTrigger.Actions>

          </EventTrigger>

          <EventTrigger RoutedEvent="Mouse.MouseLeave" >

            <EventTrigger.Actions>

              <BeginStoryboard>

                <Storyboard>

                  <!-- on modifie la propriete Angle de la transformation RotateTransform1

                  de manière à créer une animation (le bouton tourne puis revient)

                  -->

                  <DoubleAnimation Storyboard.TargetName="RotateTransform1"

                    Storyboard.TargetProperty="Angle" To="0" Duration="0:0:1"/>

                </Storyboard>

              </BeginStoryboard>

            </EventTrigger.Actions>

          </EventTrigger>

        </Button.Triggers>

      </Button>

Lien

http://msdn2.microsoft.com/en-us/library/ms750596.aspx