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>

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

Answer 2

尝试将文本置于椭圆内时，我遇到了同样的问题。使用像TextBlock这样的东西的问题是每个字符的字距和擒纵都略有不同，因此虽然TextBlock元素本身可能在椭圆内技术上居中，但这并不意味着字符将在椭圆中居中。在大多数情况下，角色总是显得太低而且位于中心右侧。

通过将TextBlock包装在ViewBox中，我取得了一些成功。虽然我并不完全熟悉ViewBox的技术实现，但ViewBox似乎包含了内容的可视化渲染，这使得我可以更容易地将渲染集中在一起，而不是试图将布局元素集中在一起。

我似乎还有更好的运气使用宽度/高度奇怪的外部元素，而不是宽度和高度。

                <Grid Width="19"
                      Height="19">
                    <Ellipse Fill="#FFB1413F"
                             StrokeThickness="0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch" />
                    <Viewbox HorizontalAlignment="Center"
                             VerticalAlignment="Stretch">
                        <TextBlock Text="X"
                                   Margin="1"
                                   FontWeight="Bold"
                                   Foreground="White"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                    </Viewbox>
                </Grid>

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

2 个答案: