將可點擊文本添加到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>