Rendu de bouton incorrect après la transformation de rotation dans un contrôle Silverlight

Question

Il semble que la largeur d'un contrôle Silverlight enfant est toujours limitée par la largeur du conteneur. Même si le contrôle des enfants est tourné.

Ce premier "morceau" de XAML rendra un bouton qui est trop grand pour un panneau de pile et est écrêté, c'est logique.

<StackPanel Width="20"> 
    <Button Width="100" Content="Foo" /> 
</StackPanel> 

Ce second segment de XAML fait pivoter le bouton de 90 degrés. Je m'attendrais à voir le bouton complet puisqu'il est maintenant vertical.

<StackPanel Width="20"> 
    <Button Width="100" Content="Foo" > 
     <Button.RenderTransform> 
     <TransformGroup> 
      <ScaleTransform/> 
      <SkewTransform/> 
      <RotateTransform Angle="90"/> 
      <TranslateTransform/> 
     </TransformGroup> 
      </Button.RenderTransform> 
    </Button> 
</StackPanel> 

Dans la deuxième partie de XAML, il semble que le bouton est clipsé au même point que ce serait si elle était horizontale, je pense voir le bouton complet.

C'est évidemment un comportement standard, mais y a-t-il moyen de contourner ce problème?

Answer 1

Si un élément dans un StackPanel vertical est plus large que la largeur du StackPanel, il sera tronqué à la largeur du StackPanel. Si vous supprimez votre TransformGroup, vous verrez que vous avez le même écrêtage, mais que vous ne faites pas de rotation. L'écrêtage se produit avant la rotation, donc même si vous le faites assez grand pour afficher le résultat, il sera encore coupé parce que le conteneur avant la rotation n'était pas assez grand. Un moyen de contourner cela est d'insérer un Canvas entre les deux, car les éléments Canvas ne sont pas écrêtés, et donc cela devrait fonctionner comme prévu. La meilleure façon de ne pas avoir d'autres effets secondaires serait de faire de votre Canvas la même taille que les éléments qu'il contient, sinon vous pourriez obtenir un comportement de dimensionnement bizarre de votre StackPanel.

donc votre code ressemblerait à ceci:

<StackPanel Width="20"> 
     <Canvas Width="100" Height="20">     
      <Button Width="100" Content="Foo" > 
       <Button.RenderTransform> 
        <TransformGroup> 
         <ScaleTransform/> 
         <SkewTransform/> 
         <RotateTransform Angle="90"/> 
         <TranslateTransform/> 
        </TransformGroup> 
       </Button.RenderTransform> 
      </Button> 
     </Canvas> 
    </StackPanel> 

Answer 2

vérifier Peut-être si votre valeur pour RenderTransformOrigin est correcte?

Normalement, si vous souhaitez simplement faire pivoter un élément 90 °, définissez RenderTransformOrigin sur 0.5,0.5. Ceci provoquerait une rotation centrée sur le bouton, c'est-à-dire que l'emplacement du centre du bouton ne change pas. Le RenderTransformOrigin de .0,1 spécifié dans votre code tournera le bouton autour de la circonférence d'un cercle dont le centre est le coin inférieur gauche du bouton. Cela signifie que le centre du bouton va changer.

Answer 3

Au lieu d'utiliser Button.RenderTransform, vous devez utiliser Button.LayoutTransform. Pour plus d'informations voir: http://msdn.microsoft.com/en-us/library/ms750596.aspx