Ajout de texte cliquable à DrawingGroup

Question

Avoir (enfin) créé un contrôle de baseball en diamant en utilisant XAML. (code ci-dessous). J'ai maintenant besoin de pouvoir créer du texte "cliquable" sur les positions principales (1B, 2B, SS, 3B, etc). Le texte doit également être tourné (puisque je dessine ce contrôle entier dans le coin, puis tourner à la fin.

Quelqu'un peut-il aider à ajouter du texte à mes DrawingGroup? (Bouns si elle est cliquable).

Tout autre commentaire apprécié, je suis tout nouveau à WPF, donc je ne sais même pas si je le fais correctement ... Ma première tentative a attiré le diamant dans le code, mais je voulais me mettre au défi de le définir complètement en XAML.

<Window x:Class="Window1" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="Window1" Height="528.303" Width="582.133"> 
<Grid Background="#C0E49C"> 
    <Image HorizontalAlignment="Stretch" VerticalAlignment="bottom"> 
     <Image.Source> 
      <DrawingImage> 
       <DrawingImage.Drawing> 
        <DrawingGroup> 
         <DrawingGroup.Transform> 
           <TransformGroup> 
            <RotateTransform CenterX="0" CenterY="0" Angle="-135" /> 
           <TranslateTransform X="0" Y="-4" /> 
          </TransformGroup> 
         </DrawingGroup.Transform> 
        <GeometryDrawing Brush="#FFC080" > 
         <GeometryDrawing.Pen> 
          <Pen Brush="Black" Thickness="1"/> 
         </GeometryDrawing.Pen> 
        <GeometryDrawing.Geometry> 
         <GeometryGroup> 
          <PathGeometry> 
          <PathGeometry.Figures> 
           <PathFigureCollection> 
            <PathFigure StartPoint="0,0"> 
             <PathFigure.Segments> 
              <PathSegmentCollection> 
               <LineSegment Point="500,0" /> 
               <BezierSegment Point1="606,350" 
                 Point2="350,606" 
                 Point3="0,500" 
                 /> 
               <LineSegment Point="0,0" /> 
              </PathSegmentCollection> 
             </PathFigure.Segments> 
            </PathFigure> 
           </PathFigureCollection>         
          </PathGeometry.Figures> 
         </PathGeometry> 
         <RectangleGeometry Rect="8,8,333,333" /> 
         <EllipseGeometry Center="174.5,174.5" RadiusX="50" RadiusY="50" /> 

         </GeometryGroup> 
      </GeometryDrawing.Geometry> 
     </GeometryDrawing> 

    </DrawingGroup> 
</DrawingImage.Drawing> 
</DrawingImage> 
</Image.Source> 
</Image> 
</Grid> 
</Window> 

Answer 1

La seule façon d'ajouter du texte à un DrawingGroup serait par GlyphRunDrawing. C'est un clas très bas niveau s. Je ne le recommanderais pas à l'utilisateur moyen.

Il y a une meilleure façon d'y arriver: vous avez votre base-ball en fond d'écran, pourquoi ne pas simplement placer du texte sur l'image? Changez votre grille de niveau racine en Viewbox. Placez votre grille dans la Viewbox. Deuxièmement, ajoutez un nouveau fichier de classe à votre projet, appelé "SelectableTextblock". Voici le code-behind pour cette classe:

public class SelectableTextBlock : TextBlock 
{ 
    public bool IsSelected 
    { 
     get { return (bool)this.GetValue(IsSelectedProperty); } 
     set { this.SetValue(IsSelectedProperty, value); } 
    } 

    public static readonly DependencyProperty IsSelectedProperty = 
     DependencyProperty.Register("IsSelected", typeof(bool), typeof(SelectableTextBlock), new PropertyMetadata(false, IsSelectedPropertyChanged)); 

    static void IsSelectedPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e) 
    { 
     SelectableTextBlock textBlock = obj as SelectableTextBlock; 
     textBlock.Background = (bool)e.NewValue ? new SolidColorBrush(Color.FromArgb(200, 255, 255, 255)) : Brushes.Transparent; 
    } 

    protected override void OnMouseDown(MouseButtonEventArgs e) 
    { 
     IsSelected = !IsSelected; 
     base.OnMouseDown(e); 
    } 
} 

Tout simplement, cela déclare juste un DependencyProperty qui peut être soit sélectionnée ou non sélectionnée. Il agit comme une bascule: lorsque vous cliquez dessus, vous sélectionnez le texte; cliquez à nouveau et il devient non sélectionné.

Maintenant, déclare l'espace de noms local dans votre XAML, puis ajouter une SelectableTextBlock pour chaque position dans votre diamant:

<local:SelectableTextBlock> 
    1st Base 
</local:SelectableTextBlock> 

Voici le résultat final:

<Window x:Class="TestWpfApplication.Window1" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="clr-namespace:TestWpfApplication" 
Title="Window1" 
Background="#C0E49C"> 
<Viewbox> 
<Grid> 
    <Image HorizontalAlignment="Stretch" VerticalAlignment="bottom"> 
    <Image.Source> 
    <DrawingImage> 
    <DrawingImage.Drawing> 
     <DrawingGroup> 
     <DrawingGroup.Transform> 
     <TransformGroup> 
     <RotateTransform CenterX="0" CenterY="0" Angle="-135" /> 
     <TranslateTransform X="0" Y="-4" /> 
     </TransformGroup> 
     </DrawingGroup.Transform> 
     <GeometryDrawing Brush="#FFC080" > 
     <GeometryDrawing.Pen> 
     <Pen Brush="Black" Thickness="1"/> 
     </GeometryDrawing.Pen> 
     <GeometryDrawing.Geometry> 
     <GeometryGroup> 
     <PathGeometry> 
      <PathGeometry.Figures> 
      <PathFigureCollection> 
      <PathFigure StartPoint="0,0"> 
      <PathFigure.Segments> 
       <PathSegmentCollection> 
       <LineSegment Point="500,0" /> 
       <BezierSegment Point1="606,350" 
           Point2="350,606" 
           Point3="0,500" /> 
       <LineSegment Point="0,0" /> 
       </PathSegmentCollection> 
      </PathFigure.Segments> 
      </PathFigure> 
      </PathFigureCollection> 
      </PathGeometry.Figures> 
     </PathGeometry> 
     <RectangleGeometry Rect="8,8,333,333" /> 
     <EllipseGeometry Center="174.5,174.5" RadiusX="50" RadiusY="50" /> 
     </GeometryGroup> 
     </GeometryDrawing.Geometry> 
     </GeometryDrawing> 
    </DrawingGroup> 
    </DrawingImage.Drawing> 
    </DrawingImage> 
    </Image.Source> 
</Image> 
<local:SelectableTextBlock Margin="480, 60, 0, 0" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center"> 
    1st Base 
</local:SelectableTextBlock> 
</Grid>