RenderTransformOrigin, propriété
TOC
Réduire la table des matières
Développer la table des matières

UIElement.RenderTransformOrigin Property

Obtient ou définit le point d'origine de toute transformation de rendu possible déclarée par RenderTransform par rapport aux limites de l'UIElement.

Syntaxe


public Point RenderTransformOrigin { get; set; }


<uiElement RenderTransformOrigin="x,y"/>

XAML Values

x

Valeur X du Point qui spécifie l'origine de la transformation. Cette valeur est en général comprise entre 0 et 1.

y

Valeur Y d'un Point qui spécifie l'origine de la transformation. Cette valeur est en général comprise entre 0 et 1.

Valeur de propriété

Type: Point

Point d'origine de la transformation de rendu. La valeur par défaut est un Point avec la valeur 0,0.

Remarques

RenderTransformOrigin vous permet de créer ou de modifier l'effet d'une transformation pour un élément particulier sans modifier les détails de la transformation RenderTransform. La valeur de Point que vous spécifiez pour RenderTransformOrigin n'est pas basée sur les mesures en pixels réelles. Il s'agit plutôt d'un point logique, où la valeur 0,0 fait référence au coin supérieur gauche de la zone de rendu UIElement globale, et 1,1 fait référence au coin inférieur droit. La valeur est ensuite évaluée dans une coordonnée X,Y en la factorisant dans l'espace de coordonnées actuel de l'UIElement.

Pour certaines transformations, l'origine importe peu. Par exemple RenderTransformOrigin ne modifie pas le comportement d'un TranslateTransform appliqué à la propriété RenderTransform.

Certains types de transformation ont leurs propres propriétés pour spécifier l'origine de la transformation. Par exemple, RotateTransform utilise CenterX et CenterY. Lorsque vous utilisez l'UIElement, les outils de conception visuels masquent parfois ces autres propriétés afin que vous puissiez uniquement utiliser RenderTransformOrigin pour toutes les modifications des origines de la transformation et laisser les origines spécifiques à la transformation comme valeurs par défaut. Les outils peuvent également appliquer tous les effets de transformation à une valeur CompositeTransform unique pour RenderTransform, plutôt que de définir des éléments XAML pour les transformations spécifiques et faire un TransformGroup. Si vous écrivez votre propre code XAML ou que vous définissez des transformations dans le code, pensez à suivre ces mêmes conseils afin de toujours utiliser RenderTransformOrigin, au lieu des valeurs d'origine de transformation spécifiques si vous appliquez des transformations pour RenderTransform, sinon les valeurs s'annulent.

Une technique courante consiste à définir RenderTransformOrigin à 0,5, 0,5, qui définit l'origine au centre de l'élément. Vous pouvez ensuite appliquer une RotateTransform pour faire pivoter l'élément autour du centre.

Modifier FlowDirection en RightToLeft change la signification de la coordonnée X d'une RenderTransformOrigin pour un UIElement ; 0 représentant le bord droit.

Certains effets visuels que vous pouvez produire avec RenderTransform et RenderTransformOrigin peuvent également être réalisés avec Projection et PlaneProjection. Par exemple, vous pouvez faire pivoter un objet UIElement sur son axe en modifiant PlaneProjection.RotationZ.

Exemples

Cet exemple de code XAML indique comment définir RenderTransformOrigin sur l'élément dans le XAML initial. Une animation qui s'exécute sur une CompositeTransform initialement par défaut peut utiliser l'attribut RenderTransformOrigin pour modifier l'échelle et pour faire pivoter des transformations applicables au centre des cercles plutôt que l'origine de coordonnées de la valeur par défaut 0. Il semble que le cercle tourne autour de son centre et rétrécit sur place.

Remarque  Pour démarrer l'animation, vous devez l'extraire de Resources et appeler Begin ; ce code n'est pas affiché.


        <Ellipse x:Name="e1" RenderTransformOrigin=".5,.5" Height="100" Width="100" Loaded="e1_Loaded_1">
            <Ellipse.Fill>
                <LinearGradientBrush>
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Green" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
            <Ellipse.RenderTransform>
                <CompositeTransform />
            </Ellipse.RenderTransform>
            <Ellipse.Resources>
                <Storyboard x:Name="esb1" >
                    <DoubleAnimation RepeatBehavior="3x" Duration="0:0:3" From="0" To="360" Storyboard.TargetName="e1" 
                      Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" />
                    <DoubleAnimation RepeatBehavior="1x" Duration="0:0:7" From="1" To="0" Storyboard.TargetName="e1" 
                      Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" />
                    <DoubleAnimation RepeatBehavior="1x" Duration="0:0:7" From="1" To="0" Storyboard.TargetName="e1" 
                      Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" />
                </Storyboard>
            </Ellipse.Resources>
        </Ellipse>

Configuration requise

Client minimal pris en charge

Windows 8

Serveur minimal pris en charge

Windows Server 2012

Espace de noms

Windows.UI.Xaml
Windows::UI::Xaml [C++]

Métadonnées

Windows.winmd

Voir aussi

UIElement
TranslateTransform
Effets 3D pour les applications Windows Store utilisant XAML
Exemple de transformations en deux dimensions en XAML

 

 

Afficher:
© 2017 Microsoft