WPF Center Ellipse à X, Y

J'ai un ItemsControl qui attire des milliers de points de suspension dans un nuage de points sur une Toile. Mon problème est que si je poste une Ellipse dont les coordonnées (4, 6) avec une Hauteur et une Largeur de 10. Le haut à gauche de l'Ellipse est à (4, 6) et de la forme s'étend vers le bas et vers la droite.

Ce que je voudrais faire est de centre le bouton de sélection sur des coordonnées spécifiques dans le code XAML, sans avoir à utiliser des ajustements dans ma couche ViewModel.

Voici le travail UserControl qui a mon graphique:

<Grid>
        <ItemsControl ItemsSource="{Binding State.Data}">

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas  ClipToBounds="False"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding Path=X}" />
                    <Setter Property="Canvas.Top" Value="{Binding Path=Y}" />
                </Style>
            </ItemsControl.ItemContainerStyle>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Ellipse Fill="Red"  VerticalAlignment="Center" HorizontalAlignment="Center"  Width="10" Height="20"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>
    </Grid>

Cela fonctionne très bien sauf pour les uncentered ellipses. Des idées?

source d'informationauteur bufferz

  1. 13

    Vous pouvez utiliser EllipseGeometry pour accomplir cette tâche.

    Le code XAML:

    <Path Stroke="Black" StrokeThickness="3" Fill="Red" >
    <Path.Data>
        <EllipseGeometry 
            Center="{Binding Path=CenterPoint}" 
            RadiusX="5" 
            RadiusY="10" />
    </Path.Data>
</Path>

    Le Modèle De Vue:

    public Point CenterPoint { get; set;}

    Ne peux pas prendre le crédit, j'ai trouvé ce ici.

  2. 8

    Ses pas entièrement automatique, mais cette solution n'est à tout le moins conserver le centrage de la logique à l'intérieur de la vue et de ne pas boueux votre modèle

    <Ellipse Fill="Red" Width="10" Height="20">
  <Ellipse.RenderTransform>
    <TranslateTransform X="-5" Y="-10" />
   </Ellipse.RenderTransform>
</Ellipse>
  3. 2

    Je suggère, vous NE modifiez pas votre ViewModel nom et les propriétés Left et Top, donc c'est clairement ce qui est signifié. Si vous avez également besoin de les valeurs X et Y, il suffit de laisser. Je propose cela parce que X et Y peut signifier différentes choses, dépend de la forme que vous dessinez.

  4. 2

    Puisque la Toile.Gauche/Droite/Haut/Bas /propriétés de la mesure de la distance entre les côtés de la Toile et les côtés de votre Ellipse, la seule façon de les utiliser pour contrôler où la centre de l'Ellipse terres est de tenir compte de la Hauteur et la Largeur dans le ViewModel.

    En d'autres termes, cependant, vous avez déterminé que l'Ellipse de centre devrait atterrir à l' (4,6), et qu'il doit avoir de la Hauteur/Largeur = 10, le X et Y propriétés exposées par le ViewModel doit avoir les valeurs 4 - 10 et 6 - 10 (c'est à dire (-6,-4)), ce qui serait la résultante des valeurs de Canvas.Left et Canvas.Top.

    Mise à jour: Après y avoir réfléchi un peu plus, une alternative s'est produite à moi. Comme une mise en garde, je n'ai pas testé cette. Mais si vous venez d'utiliser votre solution actuelle et de style, les Ellipses de telle sorte que leur Margin (ou au moins leurs marges à Gauche) était égal à -1 * Height (or Width)qui (je pense) des terres de leur centre sur les coordonnées données par X et Y... Vaut le coup. 🙂