WPF: comment faire le point (0,0) dans le centre de l'intérieur d'une Toile

WPF Toile a un système de coordonnées à partir de (0,0) en haut à gauche du contrôle.

Par exemple, la définition suivante va faire mon contrôle apparaît sur le coin supérieur gauche:

<Control Canvas.Left="0" Canvas.Top="0">

Comment puis-je le changer à la norme en coordonnées cartésiennes?

En gros:

(0,0) au centre de la
flip Y

J'ai remarqué ce post est similaire, mais il ne parle pas de traduire le système de coordonnées. J'ai essayé d'ajouter un TranslateTransform, mais je ne peux pas le faire fonctionner.

OriginalL'auteur decasteljau | 2009-12-09

5

La meilleure chose à faire est d'écrire une Toile sur mesure, dans lequel vous pouvez écrire ArrangeOverride de telle manière qu'il prend 0,0 que le centre.

Mise à jour : j'avais donné un autre commentaire en-dessous de la réponse (@decasteljau) j'ai l'habitude de recommander découlant de la Toile, Vous pouvez dériver à partir du Panneau et de l'ajout de deux Attachés de Dépendance des propriétés de Haut et de la Gauche et de mettre le même code que vous avez collé ci-dessus. Aussi n'a pas besoin d'un constructeur avec LayoutTransform en elle, Et ne pas utiliser tout transformer sur le panneau code de la juste mesure et d'organiser basé sur la DesiredSize du panneau, de Sorte que vous pouvez obtenir de belles contenu redimensionner comportement trop. Toile n'a pas positionner dynamiquement les éléments lors de la Toile, les changements de taille.

ok, c'était ce que je pensais. Merci, vous avez confirmé cela.
Malheureusement, cette réponse est incorrecte :-(. Une toile sur mesure est beaucoup plus de travail que ce qui est nécessaire: Vous pouvez obtenir exactement le même effet avec pas de travail du tout par la mise en toile hauteur/largeur à zéro, le centrant dans son conteneur, et de retournement sur le rendu. Voir ma réponse ci-dessous.
Je suis d'accord avec votre réponse @Ray, mais si vous avez besoin d'un re importante de la solution, alors je ne recommande pas votre réponse. ce qui signifie que si j'ai mis mon enfant Toile.Gauche = 0.5 et de la Toile.Top=0,5, puis lorsque vous redimensionnez la fenêtre Parent/toile de l'enfant position sera totalement foiré. Mais si vous écrivez un bon contrôle personnalisé (seulement 10 à 15 lignes de code) de façon dynamique des positions toujours à (0.5,0.5). Donc, je recommande la rédaction d'un panneau personnalisé - Cette résultant UnitPanel' est très utile d'une manière plus régulière Toile. 🙂
Pouvez-vous donner des exemple de mise en œuvre de votre description?

OriginalL'auteur Jobi Joy
25

Il n'est pas nécessaire de créer un Panneau personnalisé. Toile fera l'amende juste. Enroulez simplement à l'intérieur d'un autre contrôle (telles qu'une bordure), de centre, de lui donner une taille de zéro, et de le retourner avec un RenderTransform:
```
<Border>
  <Canvas HorizontalAlignment="Center" VerticalAlignment="Center"
          Width="0" Height="0"
          RenderTransform="1 0 0 -1 0 0">
    ...
  </Canvas>
</Border>
```
Vous pouvez le faire et tout dans la toile apparaît toujours, à l'exception de (0,0) sera au centre de l'contenant de contrôle (dans ce cas, le centre de la Bordure) et +Y sera vers le haut au lieu de vers le bas.

Encore une fois, il n'y a pas besoin pour créer un panneau personnalisé pour cette.

super, je cherchais quelque chose comme ça. Cependant, je ne peux pas capturer les clics sur la toile, est-il une solution?
Comme n'importe quel panneau, Toile participe pleinement à l'événement de routage. Vous pouvez gérer les événements de la souris au niveau du canevas ou de son contenant. Cependant, il n'est pas de peindre quelque chose de lui-même et donc ne participe pas à frapper les tests. Si vous souhaitez un clic sur une zone vide de la toile pour être reconnu comme un clic sur la toile de la manière la plus facile de le faire est d'ajouter un Rectangle avec Fill="Transparent" qui couvre l'ensemble de la toile. Ce rectangle recevrez cliquez sur les événements, ce qui bien sûr va être acheminé jusqu'à la toile et au-dessus de sorte qu'ils peuvent être gérés à n'importe quel niveau.
J'ai une application qui a besoin de Toile, à être centré (0, 0). J'ai fait de la manière que vous l'explique ici. Mais, la taille du canevas reste à 0, même si je dessine des lignes, ou agrandir la fenêtre. Ai-je besoin de faire quelque chose en dehors de ce que vous avez mentionné?

OriginalL'auteur Ray Burns

Il a été très facile à faire. J'ai regardé la Toile originale du code à l'aide .NET Réflecteur, et a remarqué la mise en œuvre est en fait très simple. La seule chose nécessaire est de surcharger la fonction ArrangeOverride(...)

public class CartesianCanvas : Canvas
{
    public CartesianCanvas()
    {
        LayoutTransform = new ScaleTransform() { ScaleX = 1, ScaleY = -1 };
    }
    protected override Size ArrangeOverride( Size arrangeSize )
    {
        Point middle = new Point( arrangeSize.Width / 2, arrangeSize.Height / 2 );

        foreach( UIElement element in base.InternalChildren )
        {
            if( element == null )
            {
                continue;
            }
            double x = 0.0;
            double y = 0.0;
            double left = GetLeft( element );
            if( !double.IsNaN( left ) )
            {
                x = left;
            }

            double top = GetTop( element );
            if( !double.IsNaN( top ) )
            {
                y = top;
            }

            element.Arrange( new Rect( new Point( middle.X + x, middle.Y + y ), element.DesiredSize ) );
        }
        return arrangeSize;
    }
}

bon, Mais j'ai l'habitude de recommander découlant de la Toile, Vous pouvez dériver à partir du Panneau et de l'ajout de deux Attachés de Dépendance des propriétés de Haut et de la Gauche et de mettre le même code que vous avez collé ci-dessus. Aussi n'a pas besoin d'un constructeur avec LayoutTransform.
et d'ajouter deux Attachés de Dépendance des propriétés de Haut et de la Gauche et de mettre le même code que vous avez collé ci-dessus" Pouvez-vous montrer?
C'est l'exemple qui fait ce que vous voulez probablement. Les autres sont sympa short cuts, mais échoue assez facile, comme lorsque vous allez dessiner les lignes de la grille sur votre toile (depuis actualSize = 0), etc.

OriginalL'auteur decasteljau

Vous pouvez simplement modifier l'Origine avec RenderTransformOrigin.

    <Canvas Width="Auto" Height="Auto"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RenderTransformOrigin="0.5,0.5">
        <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="-1" ScaleX="1" />
            </TransformGroup>
        </Canvas.RenderTransform>
    </Canvas>

OriginalL'auteur persianLife

Vous devez vous connecter pour publier un commentaire.