Проблемы рисования «х» в центре круга с использованием XAML

Question

Я пытаюсь создать красный круг с черным х через него, используя XAML.
Моя проблема в том, что они не выровнены правильно.
Как правильно это сделать?

Это то, что у меня так далеко:

  <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 (без заполнения).

Единственный агрегатор, который дает общие системы координат и допускает различные заливки и обводки для его элементов, которые я мог найти, был DrawingGroup.

Ярлыки строк, которые работают для создания Path с помощью его свойства Data, похоже, не работают для создания 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>