WPF Draw Circles with text in ListView

Question

I tried to do it on a Canvas but result is terrible. Text and PathGeometry have different centers. How to fix it? What is the best way to draw circles with text?

Xaml:

<Grid>
        <ListView ItemsSource="{Binding Items}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Path Stroke="Black" StrokeThickness="1" Fill="Aqua" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <Path.Data>
                                <EllipseGeometry Center="{Binding Path=Point}" RadiusX="{Binding Radius}" RadiusY="{Binding Radius}" />
                            </Path.Data>
                        </Path>
                        <TextBox Text="Test" VerticalAlignment="Center" HorizontalAlignment="Center" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></TextBox>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Height="500" Width="500"></Canvas>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>
    </Grid>

Code:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new ViewModel();
    }
}
public class ViewModel
{
    public ObservableCollection<Circle> Items { get; set; }
    public ViewModel()
    {
        Items = new ObservableCollection<Circle>();
        Random random = new Random();
        for (int i = 0; i < 10; i++)
        {
            Circle circle = new Circle();
            circle.Radius = random.Next(1, 40);
            circle.Point = new Point(random.Next(1, 500), random.Next(1, 500));

            Items.Add(circle);
        }
    }

}
public class Circle
{
    public int Radius { get; set; }
    public Point Point { get; set; }
}

Answer 1

Try this as your DataTemplate

<Border
    Width="{Binding Radius}"
    Height="{Binding Radius}"
    CornerRadius="{Binding Radius}"
    Background="Aqua"
    BorderBrush="Black"
    BorderThickness="1">
    <TextBlock
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        Text="Test"/>
</Border>

You can find more solutions at Centering Text on a WPF Shape

Edit You also need to set Canvas.Left, ... in the Border to place it where you want