Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

27 avril 2007 5 27 /04 /avril /2007 22:49
[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>
 
 t1.JPG
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>
 
 t2.JPG
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>
 
 t3.JPG
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>
 
 t4.JPG
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>
 
t5.JPG 
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>
 
 t6.JPG
 
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

Partager cet article

Repost 0
Published by Romagny13 - dans Xaml
commenter cet article

commentaires