Centre de texte à un point donné sur une Toile WPF

J'ai un Controls.Canvas avec plusieurs formes et souhaitez ajouter des étiquettes textuelles qui sont centrés sur des points donnés (je suis le dessin d'un arbre avec des sommets étiquetés). Quelle est la façon la plus simple de le faire par programmation dans WPF?

J'ai essayé de réglage RenderTransform et de l'appel de Controls.Canvas.SetLeft etc. mais ni la position de l'étiquette où je veux. WPF semble à l'appui de positionnement seulement à gauche, à droite, en haut et en bas les coordonnées et non centrée sur une coordonnée donnée et la Width propriété est NaN et la ActualWidth propriété est 0.0 quand je construis le Canvas.

InformationsquelleAutor Jon Harrop | 2012-03-19

.net c#f#wpf

Vous pourrait atteindre ce niveau par liaison de la marge de l'étiquette sur le ActualWidth et ActualHeight de l'étiquette, et en multipliant ces valeurs avec -0.5. Cela déplace l'étiquette de gauche par la moitié de sa largeur; et il se déplace l'étiquette vers le haut par la moitié de sa hauteur.

Voici un exemple:

XAML:

<Window x:Class="CenteredLabelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CenteredLabelTest"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:CenterConverter x:Key="centerConverter"/>
    </Window.Resources>
    <Canvas>
        <TextBlock x:Name="txt" Canvas.Left="40" Canvas.Top="40" TextAlignment="Center" Text="MMMMMM">
            <TextBlock.Margin>
                <MultiBinding Converter="{StaticResource centerConverter}">
                        <Binding ElementName="txt" Path="ActualWidth"/>
                        <Binding ElementName="txt" Path="ActualHeight"/>
                </MultiBinding>
            </TextBlock.Margin>
        </TextBlock>
        <Rectangle Canvas.Left="39" Canvas.Top="39" Width="2" Height="2" Fill="Red"/>
    </Canvas>
</Window>

Le rectangle rouge met en évidence les coordonnées (40, 40) sur lequel l'étiquette "hum hum" est centré.

Converter:

public class CenterConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values[0] == DependencyProperty.UnsetValue || values[1] == DependencyProperty.UnsetValue)
        {
            return DependencyProperty.UnsetValue;
        }

        double width = (double) values[0];
        double height = (double)values[1];

        return new Thickness(-width/2, -height/2, 0, 0);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Le résultat ressemble à ceci:

Centre de texte à un point donné sur une Toile WPF

Afin de faire de la programmation, de définir une propriété attachée Mover.MoveToMiddle, comme ceci:

public class Mover : DependencyObject
{
    public static readonly DependencyProperty MoveToMiddleProperty =
        DependencyProperty.RegisterAttached("MoveToMiddle", typeof (bool), typeof (Mover),
        new PropertyMetadata(false, PropertyChangedCallback));

    public static void SetMoveToMiddle(UIElement element, bool value)
    {
        element.SetValue(MoveToMiddleProperty, value);
    }

    public static bool GetMoveToMiddle(UIElement element)
    {
        return (bool) element.GetValue(MoveToMiddleProperty);
    }

    private static void PropertyChangedCallback(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        FrameworkElement element = sender as FrameworkElement;
        if (element == null)
        {
            return;
        }

        if ((bool)e.NewValue)
        {
            MultiBinding multiBinding = new MultiBinding();
            multiBinding.Converter = new CenterConverter();
            multiBinding.Bindings.Add(new Binding("ActualWidth") {Source = element});
            multiBinding.Bindings.Add(new Binding("ActualHeight") {Source = element});
            element.SetBinding(FrameworkElement.MarginProperty, multiBinding);
        }
        else
        {
            element.ClearValue(FrameworkElement.MarginProperty);
        }
    }

}

Réglage Mover.MoveToMiddle à true signifie que la marge de ce cadre, l'élément est automatiquement lié à sa largeur et à la hauteur telle que le cadre de l'élément est déplacé vers son centre.

Que vous pouvez l'utiliser dans votre code XAML comme ceci:

<Window x:Class="CenteredLabelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CenteredLabelTest"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:CenterConverter x:Key="centerConverter"/>
    </Window.Resources>
    <Canvas>
        <TextBlock Canvas.Left="40" Canvas.Top="40" TextAlignment="Center" Text="MMMMMM"
              local:Mover.MoveToMiddle="True"/>
        <Rectangle Canvas.Left="39" Canvas.Top="39" Width="2" Height="2" Fill="Red"/>
    </Canvas>
</Window>

Une autre solution serait de se lier à RenderTransform au lieu de Margin. Dans ce cas, le convertisseur devrait revenir

return new TranslateTransform(-width / 2, -height / 2);

et de la propriété attachée de rappel de la méthode contenant ces lignes:

if ((bool)e.NewValue)
{
    ...
    element.SetBinding(UIElement.RenderTransformProperty, multiBinding);
}
else
{
    element.ClearValue(UIElement.RenderTransformProperty);
}

Cette solution a l'avantage de l'effet de la propriété attachée est visible dans le concepteur Visual Studio (qui n'est pas le cas lors de la définition de la propriété de Marge).

InformationsquelleAutor

Cela fonctionne aussi, avec moins contraignantes.

public class CenterOnPoint
{
public static readonly DependencyProperty CenterPointProperty =
DependencyProperty.RegisterAttached("CenterPoint", typeof (Point), typeof (CenterOnPoint),
new PropertyMetadata(default(Point), OnPointChanged));
public static void SetCenterPoint(UIElement element, Point value)
{
element.SetValue(CenterPointProperty, value);
}
public static Point GetCenterPoint(UIElement element)
{
return (Point) element.GetValue(CenterPointProperty);
}
private static void OnPointChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var element = (FrameworkElement)d;
element.SizeChanged -= OnSizeChanged;
element.SizeChanged += OnSizeChanged;
var newPoint = (Point)e.NewValue;
element.SetValue(Canvas.LeftProperty, newPoint.X - (element.ActualWidth / 2));
element.SetValue(Canvas.TopProperty, newPoint.Y - (element.ActualHeight / 2));
}
private static void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
var element = (FrameworkElement) sender;
var newPoint = GetCenterPoint(element);
element.SetValue(Canvas.LeftProperty, newPoint.X - (e.NewSize.Width / 2));
element.SetValue(Canvas.TopProperty, newPoint.Y - (e.NewSize.Height / 2));
}
}

Et vous l'utilisez comme ça...

label.SetValue(CenterOnPoint.CenterPointProperty, new Point(100, 100));

Les gens pourraient ressembler à ces réponses et je pense que c'est trop compliqué pour les simples exigences de la question, mais ce n'est pas juste pour vous montrer comment le centre de l'étiquette. Ce code est la définition d'un comportement qui sera le centre de toute FrameworkElement sur un point et de le garder centré, même lorsque cet élément de taille pourrait être en train de changer.
Cela fonctionne vraiment bien. À partir de XAML l'utilisation est: <TextBlock Text="Texte" CenterOnPoint.CenterPoint="100,100" /> Avis de la conversion automatique des "100,100" à Point.
Fonctionne parfaitement, même avec les non XAML WPF par exemple, Windows 10 universel, Merci!
Cette solution est également facilement adaptable à d'autres fins, par exemple, vous pourriez faire un "RightAlign", sans trop de modification.

InformationsquelleAutor yetsta

Désolé Jon, je n'ai pas compris votre question tout le chemin hier sur Twitter.
Voici comment je pourrais l'essayer en F#,! @cammcad

#r @"C:\Program Files (x86)\de Référence
Assemblées\Microsoft\Framework\v3.0\PresentationFramework.dll"
#r @"C:\Program Files (x86)\de Référence Assemblies\Microsoft\Framework\v3.0\WindowsBase.dll"
#r @"C:\Program Files (x86)\de Référence Assemblies\Microsoft\Framework\v3.0\PresentationCore.dll"

open System
open System.IO
open System.Windows
open System.Windows.Shapes
open System.Windows.Media
open System.Windows.Controls
open System.Windows.Markup
open System.Xml
(* Add shape and label to canvas at specific location *)
let addShapeAndLabel_at_coordinate (label: string) (coordinate: float * float) (c:    Canvas) = 
let btn = Button(Content=label,Foreground=SolidColorBrush(Colors.White))
let template = 
"<ControlTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
TargetType=\"Button\">" +
"<Grid>" +
" <Ellipse Width=\"15\" Height=\"15\" Fill=\"Orange\" HorizontalAlignment=\"Center\"/>" +
" <ContentPresenter HorizontalAlignment=\"Center\" " + "VerticalAlignment=\"Center\"/> " + 
"</Grid>" +
"</ControlTemplate>"
btn.Template <- XamlReader.Parse(template) :?> ControlTemplate
c.Children.Add(btn) |> ignore
let textsize =  
FormattedText(label,CultureInfo.GetCultureInfo("enus"),
FlowDirection.LeftToRight,Typeface("Verdana"),32.0,Brushes.White)
|> fun x -> x.MinWidth, x.LineHeight
let left,top = coordinate
let middle_point_width = fst(textsize) / 2.0
let middle_point_height = snd(textsize) / 2.0
Canvas.SetLeft(btn,left - middle_point_width)
Canvas.SetTop(btn,top - middle_point_height)
let shell = new Window(Width=300.0,Height=300.0)
let canvas = new   Canvas(Width=300.0,Height=300.0,Background=SolidColorBrush(Colors.Green))
addShapeAndLabel_at_coordinate "Tree Node 1" (100.0,50.0) canvas
addShapeAndLabel_at_coordinate "TreeNode 2" (150.0, 75.) canvas
shell.Content <- canvas
[<STAThread>] ignore <| (new Application()).Run shell

InformationsquelleAutor cameron

1

Pour centrer le texte dans la zone donnée (par exemple, rectangle), vous pouvez simplement envelopper par Grid. Voir l'exemple dans cette réponse. La grille peut être placé n'importe où à l'intérieur de la toile à l'aide de Left, Top, Width et Height propriétés. Le texte restera toujours au centre de la grille.

Cette logique peut être encapsulé dans une coutume FrameworkElement comme ceci.

Pour centrer le texte au point de (x, y) vous pouvez calculer approprié rectangle:
```
var text = new CenteredTextBlock
{
Text = "Hello",
Width = maxWidth,
Height = maxHeight,
};
Canvas.SetLeft(text, x - maxWidth / 2);
Canvas.SetTop(text, y - maxHeight / 2);
Canvas.Children.Add(text);
```
où (maxWidth, maxHeight) est la taille maximale autorisée pour le texte.

InformationsquelleAutor Pavel

Vous devez vous connecter pour publier un commentaire.