在一个圆 UWP 中对齐 TextBlocks

Question

我想像这样将 12 个 TextBlock 对齐成一个圆圈

为了实现这一点，我尝试了类似的方法

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

但是这个并没有给我一个很好的圆圈，请问有没有其他方法可以实现label排成一个圆圈？

Answer 1

如果你想创造一个好的圈子，网格不是一个合适的解决方案。在 canvas 中使用坐标系可能是创建良好圆圈的一种方法。假设我们需要一个大小为 200*200 的时钟。所以中心点(x0,y0)就是(100,100)。我们知道，相邻两个数之间的夹角是30度，那么就可以计算出2点-(x2,y2)的TextBlock的中心点。

x2 = x0 + r * cos(Math.PI * angle/ 180.0) 和 y2 = y0 - r * sin(Math.PI * angle/ 180.0)

其他TextBlocks也一样。

已更新

我为此做了一个简单的示例。

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>

后面的代码：

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

外观：

在一个圆 UWP 中对齐 TextBlocks

Align TextBlocks in a circle UWP

xaml

uwp

uwp-xaml