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

You want character art? Did I get that right? Or do you want drawn circles (with pixels, not characters)? If you want ascii art, you might want to chose a fixed size font for the output and simply render the "art" aka circles as a string consisting of many spaces and lines and a few '.'. — BitTickler, Jan 26 '17 at 13:47
@BitTickler, I want to draw circles on a canvas, and each circle should containt in the center for example number of that circle. Circles shoud draw with random coords. — A191919, Jan 26 '17 at 13:51
https://social.msdn.microsoft.com/Forums/vstudio/en-US/cb8e1e12-6ab4-43e4-8f4e-fb8437d857a4/drawing-graphics-text-to-a-wpf-canvas?forum=wpf — BitTickler, Jan 26 '17 at 14:26
http://stackoverflow.com/questions/9778294/center-text-at-a-given-point-on-a-wpf-canvas — BitTickler, Jan 26 '17 at 14:27

score 1 · Answer 1 · answered Jan 26 '17 at 23:30

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

WPF Draw Circles with text in ListView

1 Answers1