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ですs。平均的なユーザーにはおすすめしません。

あなたは野球のダイヤモンドを背景画像として設定していますが、画像の上にテキストを置くのはなぜですか？

ルートレベルのグリッドをViewboxに変更します。グリッドを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>