Align TextBlocks in a circle UWP - xaml

Question

I want to align 12 TextBlocks in a circle like this
InOrder to achieve this I have tried something like this
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="24"></RowDefinition>
<RowDefinition Height="24"></RowDefinition>
<RowDefinition Height="24"></RowDefinition>
<RowDefinition Height="24"></RowDefinition>
<RowDefinition Height="24"></RowDefinition>
<RowDefinition Height="24"></RowDefinition>
<RowDefinition Height="24"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24"></ColumnDefinition>
<ColumnDefinition Width="24"></ColumnDefinition>
<ColumnDefinition Width="24"></ColumnDefinition>
<ColumnDefinition Width="24"></ColumnDefinition>
<ColumnDefinition Width="24"></ColumnDefinition>
<ColumnDefinition Width="24"></ColumnDefinition>
<ColumnDefinition Width="24"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="9" Grid.Column="0" Grid.Row="3"></TextBlock>
<TextBlock Text="10" Grid.Column="1" Grid.Row="2"></TextBlock>
<TextBlock Text="11" Grid.Column="2" Grid.Row="1"></TextBlock>
<TextBlock Text="12" Grid.Column="3" Grid.Row="0"></TextBlock>
<TextBlock Text="1" Grid.Column="4" Grid.Row="1"></TextBlock>
<TextBlock Text="2" Grid.Column="5" Grid.Row="2"></TextBlock>
<TextBlock Text="3" Grid.Column="6" Grid.Row="3"></TextBlock>
<TextBlock Text="4" Grid.Column="5" Grid.Row="4"></TextBlock>
<TextBlock Text="5" Grid.Column="4" Grid.Row="5"></TextBlock>
<TextBlock Text="6" Grid.Column="3" Grid.Row="6"></TextBlock>
</Grid>
But this doesn't give me a good circle, is there any other way to achieve label arranged in a circle?

Answer 1

If you want to create a good circle, the grid is not a suitable solution. Using a coordinate system in canvas might be a way to create a good circle. Let's say we need a clock whose size is 200*200. So the center point (x0,y0) is (100,100). As we know, the angle between the two adjacent numbers is 30. Then the center point of the TextBlock for 2 o'clock- (x2, y2) can be calculated.
x2 = x0 + r * cos(Math.PI * angle/ 180.0) and y2 = y0 - r * sin(Math.PI * angle/ 180.0)
It's the same for other TextBlocks.
Updated
I made a simple sample for this.
Xaml:
<Canvas Background="Gray" Width="300" Height="300" >
<TextBlock Text="2" x:Name="textblock2" ></TextBlock>
<TextBlock Text="1" x:Name="textblock1" ></TextBlock>
<TextBlock Width="20" Height="20" Text="12" Canvas.Top="40" Canvas.Left="140"></TextBlock>
<TextBlock Width="20" Height="20" Text="9" Canvas.Top="140" Canvas.Left="40"></TextBlock>
<TextBlock Width="20" Height="20" Text="3" Canvas.Top="140" Canvas.Left="240" ></TextBlock>
<TextBlock Width="20" Height="20" Text="6" Canvas.Top="240" Canvas.Left="140" ></TextBlock>
</Canvas>
Code behind:
int r = 100;
//1 o'clock
// need to minus 10 to get Canvas.top and Canvas.lelf value because x1 y1 represent the center of the textblock not the center of the textblock
double x1 = 150 + r * Math.Cos(Math.PI * 60 / 180.0) - 10;
double y1 = 150 - r * Math.Sin(Math.PI * 60 / 180.0) - 10;
textblock1.SetValue(Canvas.LeftProperty, x1);
textblock1.SetValue(Canvas.TopProperty, y1);
//2 o'clock
double x2 = 150 + r * Math.Cos(Math.PI * 30 / 180.0)-10;
double y2 = 150 - r * Math.Sin(Math.PI * 30 / 180.0)-10;
textblock2.SetValue(Canvas.LeftProperty, x2);
textblock2.SetValue(Canvas.TopProperty, y2);
What it looks like: