Добавление кликабельного текста в DrawingGroup

Question

(наконец) создали элемент управления бейсбольным алмазом, используя XAML. (код ниже). Теперь мне нужна возможность создавать «кликабельный» текст на основных позициях (1B, 2B, SS, 3B и т. Д.). Текст также необходимо повернуть (поскольку я рисую весь этот элемент управления в углу, а затем поворачиваю его в конце.

Может ли кто-нибудь помочь в добавлении текста в мой DrawingGroup? (прыгает, если он кликабелен).

Любые другие комментарии приветствуются, я новичок в WPF, так что я даже не знаю, правильно ли я это делаю. Моя первая попытка нарисовала алмаз в коде, но я хотел бросить вызов самому себе, чтобы полностью определить его в 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

Единственный способ добавить текст в DrawingGroup - через GlyphRunDrawing . Это класс очень низкого уровня. Я не рекомендовал бы это среднему пользователю.

Есть лучший способ сделать это: у вас есть бейсбольный бриллиант в качестве фонового изображения, почему бы просто не поместить текст поверх изображения?

Измените свою сетку корневого уровня на Viewbox. Поместите свою сетку в окно просмотра.

Во-вторых, добавьте новый файл класса в ваш проект, который называется «SelectableTextblock». Вот код для этого класса:

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);
    }
}

Проще говоря, это просто объявляет свойство DependencyProperty, которое может быть выбрано или не выбрано. Он действует как переключатель: когда вы нажимаете на него, вы выбираете текст; щелкните по нему еще раз, и он станет невыбранным.

Теперь объявите локальное пространство имен в вашем XAML, а затем добавьте SelectableTextBlock для каждой позиции в вашем ромбе:

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

Вот конечный результат:

<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>