将可点击文本添加到DrawingGroup

Question

已经（最终）使用XAML创建了棒球菱形控件。 （代码如下）。我现在需要在主要职位（1B，2B，SS，3B等）创建“可点击”文本的能力。该文本还需要旋转（因为我画在角落里这整个控件，然后在最后旋转。

有人可以帮助将文本添加到我的DrawingGroup？（BOUNS如果是点击）。

任何其他意见都表示赞赏，我是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的唯一途径。这是一个非常低的水平CLAS秒。我不会把它推荐给普通用户。

还有一种更好的方法可以解决这个问题：您将棒球钻设置为背景图片，为什么不简单地将图片放在图片顶部？

将您的根级网格更改为视图框。将您的网格放置在视图框内。

其次，为您的项目添加一个名为“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>