Выровнять текстовые блоки по кругу UWP - PullRequest
Новая
       8

Выровнять текстовые блоки по кругу UWP

0 голосов
/ 19 июня 2020

Я хочу выровнять 12 текстовых блоков по кругу, подобному этому

enter image description here

InOrder, чтобы добиться этого, я пробовал что-то вроде этого 

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

Но это не дает мне хорошего круга, есть ли другой способ получить ярлык, расположенный в круге?

1 Ответ

1 голос
/ 22 июня 2020

Если вы хотите создать хороший круг, сетка не подходит. Использование системы координат на холсте может быть способом создать хороший круг. Допустим, нам нужны часы размером 200 * 200. Таким образом, центральная точка (x0,y0) равна (100,100). Как мы знаем, угол между двумя соседними числами равен 30. Затем можно вычислить центральную точку TextBlock для 2 часов - (x2, y2).

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

То же самое и для других текстовых блоков.

Обновлено

Я сделал для этого простой образец.

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

Как это выглядит: введите описание изображения здесь

...