Problems with the "x" in the center of the circle using XAML

Question

I am trying to create a red circle with black x through it using XAML.
My problem is that they are not aligned correctly.
What is the right way to do this?

This is what I have 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> 

Just placing the ellipse in the same grid with black X, X is not completely focused on the ellipse, because the coordinates of each line that you draw are really the coordinates in the space allocated for it.

I think they had to be in some kind of geometry or draw an aggregate to give them the same coordinate system. The geometry group and path are aggregators, but both require that their contents have the same fill and stroke, and the stroke and fill are different for the red circle (no stroke) and black X (no fill).

The only aggregator that gives common coordinate systems and allows for various fills and strokes for its members that I could find is a DrawingGroup.

The line labels that work to create the Path property through their Data don't seem to work to create the PathGeometry, so everything had to be filled out manually.

Answer 1

OK, so there are three hundred ways to throw a cat. Without fully understanding your use case, I just came up with the fastest way to do 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 beyond what exactly you are looking for, but hopefully this at least gives you another way to think about it.

Answer 2

I had the same problem when trying to center text inside an ellipse. The problem with using something like TextBlock is that the kerning and descent of each character is slightly different, and therefore, although the TextBlock element itself can be technically centered inside the ellipse, this does not mean that the character will be centered in the ellipse. The symbol always seems too low and to the right of the center in most situations.

I had some success wrapping a TextBlock in a ViewBox. Although I am not fully versed in the technical implementation of ViewBox, the ViewBox seems to wrap the visual rendering of the content, which makes it easier to center this rendering than trying to focus on the layout elements together.

It also seems to me that you are in luck using an external element that has an odd width / height, not 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>