使用XAML在圆心中绘制"x"时出现问题

Question

我正在尝试使用XAML创建一个带有黑色x的红色圆圈.
我的问题是他们没有正确对齐.
这样做的正确方法是什么？

这是我到目前为止所得到的:

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Image>
    <Image.Source>
      <DrawingImage>
        <DrawingImage.Drawing>
          <DrawingGroup>
            <GeometryDrawing Brush="Red">
              <GeometryDrawing.Pen>
                <Pen Brush="Transparent" Thickness="0"/>
              </GeometryDrawing.Pen>
              <GeometryDrawing.Geometry>
                <EllipseGeometry Center="8,8" RadiusX="8" RadiusY="8"/>
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing>
              <GeometryDrawing.Pen>
                <Pen Brush="Black" Thickness="2.5"/>
              </GeometryDrawing.Pen>
              <GeometryDrawing.Geometry>
                <PathGeometry>
                  <PathFigure StartPoint="4,4">
                    <LineSegment Point="12,12"/>
                  </PathFigure>
                  <PathFigure StartPoint="4,12">
                    <LineSegment Point="12,4"/>
                  </PathFigure>
                </PathGeometry>
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
          </DrawingGroup>
        </DrawingImage.Drawing>
      </DrawingImage>
    </Image.Source>
    </Image>
  </Grid>

简单地将椭圆放在具有黑色X的相同网格中,X在椭圆上并不完全居中,因为您绘制的每条线的坐标实际上是为其分配的空间内的坐标.

我认为他们需要处于某种几何形状或绘制聚合体以给它们相同的坐标系.几何组和路径是聚合器,但两者都要求其内容具有相同的填充和描边,并且红色圆圈(无笔划)和黑色X(无填充)的笔划和填充不同.

唯一的聚合器,它提供了常见的坐标系,并允许我找到的成员的不同填充和笔画是DrawingGroup.

用于通过其Data属性创建Path的字符串快捷方式似乎不适用于创建PathGeometry,因此所有这些都必须手动填充.

Answer 1

好的,所以有三百种皮肤猫的方法.在没有完全理解您的用例的情况下,我想出了最快的方法来绘制您的请求.

    <Grid HorizontalAlignment="Left" 
          Height="80" 
          Margin="80,80,0,0" 
          VerticalAlignment="Top" 
          Width="80">
        <Ellipse Fill="Red"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch" />
        <Path Data="M40,53 L48,69 62,69 49,46 61,24 48,24 C48,24 40,39 40,39 40,39 32,24 32,24 L18,24 30,46 17,69 31,69 z" 
              Fill="Black" 
              Margin="15" 
              Stretch="Fill" 
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              />
    </Grid>

这可能超出了你正在寻找的范围,但希望它至少能给你另一种思考方式.