Problems drawing an "x" in the center of a circle using XAML

I am trying to create a red circle with a black x through it using XAML.

My problem is that they aren't aligned correctly.

What is the right way to do this?

This is what I've got so far:

  <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>

Simply putting an ellipse in the same grid with a black X the X isn't quite centered on the ellipse because the coordinates of each line you draw are really coordinates within the space allotted for it.

I think they needed to be in some sort of geometry or drawing aggregate to give them the same coordinate system. The geometry group and path are aggre开发者_如何学JAVAgators but both require their contents to have the same fill and stroke and the stroke and fill is different for the red circle (no stroke) and the black X (no fill).

The only aggregator that gives common coordinate systems and allows different fills & strokes for its members that I could find was the DrawingGroup.

The string shortcuts that work for creating a Path via its Data property don't appear to work for creating a PathGeometry so all had to be filled in by hand.

OK, so three hundred ways to skin a cat. Without fully understanding your use case I just came up with the fastest way to draw what you requested.

    <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>

This is probably outside what exactly you're looking for, but hopefully it at least gives you another way to think about it.

I had the same issue when trying to center text within an ellipse. The problem with using something like a TextBlock is that the kerning and escapement of each character is slightly different and so while the TextBlock element itself might be technically centered within the ellipse, this does not mean that the character will be centered in the ellipse. The character always appears to be too low and to the right of center in most situations.

I have had some success by wrapping the TextBlock in a ViewBox. While I am not fully versed in the technical implementation of the ViewBox, the ViewBox appears to wrap the visual rendering of the content which allows me to center that rendering more easily than trying to center to layout elements together.

I also seem to have better luck using an outer element that is of odd width/height rather than even width and height.

                <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>